Skip to content

37. Shooting gallery

April 19, 2013

Now that I’ve built a couple of 3D projects, I can see why the early video games stuck to empty space and tabletops to keep things simple.

Another early type of video game was the shooting gallery, either with rows of objects moving left and right, or little people popping up in windows and doors to be shot at. In the next couple of posts I’m going to tackle the second of these, and it includes some interesting stuff.

In this post, I’m going to start slowly, by figuring out how the aiming and shooting will happen. I’d like cross hair sights that appear above my finger when it touches the screen, and I’d like to shoot when a second finger touches the screen. So this is going to be largely about touches.


Here is my touch code. It is quite simple to decide which finger is aiming and which finger is shooting, because each touch gets its own unique ID number

function touched(touch)
    if touch.state==BEGAN then --user has just touched, hasn't let go yet
        numtouches=numtouches+1 --keep count
        if numtouches==1 then  --if first touch, it is aiming, store details
   --so we know which touch is which when we shoot
    elseif touch.state==MOVING then --finger is moving
        if then --if the aiming finger, store new x,y
    elseif touch.state==ENDED then
        if then --if aiming finger lifted, remove scope
        elseif numtouches>1 then --if more than one finger, bang bang!
            shots[#shots+1]={x=aim.x,y=aim.y+scopeBuffer} --add shot to table
        numtouches=numtouches-1 --adjust touch count

So Codea makes it quite easy, by tracking when the user presses down, slides a finger, or lifts it off the screen. If a touch is the first (there are no others at the moment, then it must be the aiming finger, and we store the x,y details as it moves. If it is a different touch, we wait for it to end and then we fire a shot (actually, we just add the x.y values to a table of shots fired).

Scope sights

I’d like cross hair sights, that will appear above the finger on screen. Here is my code. Note how rather than keep drawing all these circles and lines all the time, I draw them just once, onto an image, and then I’ll draw this image on the screen after that.

function createScope()
    scopeBuffer=70 --draw scope this many pixels above finger (so user can see scope!)
    scopeOuterRing=50 --pixels wide
    crossHairExtends=10 --crosshairs extend this far outside rings
    local s=scopeOuterRing+crossHairExtends*2 --total width
    --since we're drawing the same scope a lot, we create an image
    setContext(imgScope) --start drawing on the image instead of the screen
        strokeWidth(.5)  --lines one pixel wide
        stroke(94, 89, 89, 255) --dark colour
        fill(0,0,0,0) --transparent fill (the last item, alpha, is nil)
        ellipse(s/2,s/2,scopeOuterRing)  --draw rings
        line(s/2,0,s/2,s) --draw crosshairs
    setContext() --stop drawing on image

Then I need to draw everything on the screen. I syart by drawing a little target to shoot at, then the scope sights, then any shots fired.

function draw()
    background(195, 211, 215, 255)
        --draw target
        stroke(82, 181, 199, 255) --outer circle colour
        fill(120, 141, 186, 255)  --inner circle colour

        if>0 then --if aiming, draw scope
        --draw past shots on screen
        for i,v in pairs(shots) do

And that’s pretty much it, apart from a few lines in the setup function.

This is how the screen looks

The code is here.

Next, I want to be able to zoom in, and lastly, I want to add moving targets.


From → animation, Games

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: