Saturday, June 30, 2012

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.