Interlude 8 - A Simpler Starfield (Updated 23/01/16)

Webcomic Courtesy of Ethanol & Entropy

We have been using the Twinkle class written by Ipad41001 to produce our star-field effect in MineSweeper, and a very fine class it is. However it is a touch computationally expensive if there is a bit else going on at the same time.

On the "hard" difficulty using our first generation iPad, the frame rate per second is around 14-15 using the Twinkle class. This doesn't effect gameplay but the twinkles are a bit slow.

If your game is more frame rate critical or you just want a different look then you could use the following function instead of this class. Using this star field effect gives us an extra 4-5 frames per second.

In your Main class, you will need:

-- Main

-- A variable to hold the number of stars to display on the screen,
-- the smaller the number of stars the quicker this function will run.
-- Note that this is a local variable and only available in the Main Class

local NUMSTARS = 50

-- In the setup function you need to initialise the table 

-- which will hold your stars

function setup()
    
    -- define black colour to make our code more readable

    blackColour = color(0, 0, 0)

    -- Initialise the stars table which contains the x and y screen co-ordinates
    -- for each star. These are set to a random position between 1 and the screen
    -- height and width.

    stars = {}
    for i = 1, NUMSTARS do
        stars[i] = {x = math.random(WIDTH), y = math.random(HEIGHT)}
    end

end

Add the following function to draw the star field.

function drawStarField()

    -- Star Field function courtesy of Javier Moral
    -- from his Fireworks example

    for i = 1, NUMSTARS do

        -- Set the fill colour to white and a random transparency, 

        -- this is half of the twinkle effect.

        fill(255, 255, 255, math.random(255))

        -- Each star is represented by a small rectangle. 

        -- The random x and y co-ordinate of
        -- the star was initialised in the setup() function, 

        -- so the stars don't move. The width 
        -- and height of each rectangle is set to a random integer 

        -- between 1 and 3 each frame.
        -- Codea will try and call draw() 60 times per second.

        rect(stars[i].x, stars[i].y, math.random(3), math.random(3))

    end

end

and then call it in the draw() function:

function draw()

    -- Set the background colour to black

    background(blackColour)

    -- Call the star field function

    drawStarField()

end

Interlude 5 - A Twinkling Starfield Class (Updated 17/01/16)

Interlude 5.1 Setting the Scene

Before our App gets any more complicated we are going to want to add a State Machine to keep track of things. We will tackle that in the next Tutorial. For now, I would like to talk about a class which produces a twinkling star background written by Ipad41001.

The plan is to create a simple game to demonstrate the ideas that we have been talking about. It seemed appropriate to replicate one of the first games written on a computer (and one that hadn't already been done by the intrepid coders over at the Codea Forum). So we have chosen Spacewar!

Interlude 5.2 Spacewar!

Spacewar is a game with two ships in space, the aim is to destroy the other ship without getting destroyed yourself. A star in the centre of the screen pulls on both ships and requires maneuvering to avoid falling into it. In an emergency, a player can enter hyperspace to return at a random location on the screen, but only at the risk of exploding if it is used too often. The game was originally written on a PDP-1 by some coders at MIT in 1962. Apparently it took them 200 hours but they were using assembler.

Interlude 5.3 The Twinkle Class

For our Spacewar game we need a background star field. The original coders found that a made up static background was lacking in verisimilitude so they created a new background based on real star charts that scrolled slowly: at any one time, 45% of the night sky was visible, every star down to the fifth magnitude. We won't be doing that!

Now it is a lot easier to get above the crowd if you stand on the shoulders of giants, so rather than reinvent the code, we will use something already written by Ipad41001. We have changed the background colour and inserted the code into a class but apart from that it is the same as Ipad41001's original version. Note that we are currently getting a frame rate of around 30 FPS using 100 stars on an iPad 1 thus some subsequent optimisation is going to be required.

The Twinkle star field class is shown below. Copy it into a new tab in Codea called Twinkle and we will show you how to use it in the next tutorial.

Twinkle = class()

-- Written by Ipad41001
-- December 2011

function Twinkle:init(numberOfStars)
    -- you can accept and set parameters here
    st = {}
    ns = numberOfStars -- number of stars
    for i = 1,ns do
        if math.random(2) == 1 then g = .25 else g = -.25 end
        l = 5 + (math.random(39)/4)
        st[i] = {g=g,l=l,x=math.random(WIDTH),y=math.random(HEIGHT)}
    end
end

function Twinkle:draw()
    -- Codea does not automatically call this method
    pushStyle()
    rect(0,0,1,1)
    -- background(20, 46, 181, 255), this is Ipad41001 original background colour
    background(0, 0, 0)
    strokeWidth(3)
    lineCapMode(SQUARE)
    stroke(255, 255, 255, 255)
    fill(255, 255, 255, 255)
    for i = 1,ns do
        if st[i].l <= 5 and math.random(2) == 1 then st[i].g = .25
        elseif st[i].l >= 15 and math.random(2) == 1 then st[i].g = -.25 end
        st[i].l = st[i].l + st[i].g 
        ll = (15 - st[i].l)/2
        line(st[i].x-st[i].l,st[i].y,st[i].x+st[i].l,st[i].y)
        line(st[i].x,st[i].y-st[i].l,st[i].x,st[i].y+st[i].l)
        line(st[i].x-ll,st[i].y-ll,st[i].x+ll,st[i].y+ll)
        line(st[i].x+ll,st[i].y-ll,st[i].x-ll,st[i].y+ll)
        ellipse(st[i].x,st[i].y,6,6)
    end
    popStyle()
end

You can have a look at other approaches to creating a star field which have been done by Bri_G on the Codea Forum.