Graphical Improvements

We have identified a few graphical issues: the ships are hard to tell apart; you can’t see how many hits you have left; you can’t see when you are thrusting. We think we’ll go after those.

Because the original game was monochrome, it differentiated the ships by shape. For that reason, or other reasons that are secret, we’ll make two different shapes.

function Ship:draw()
    pushMatrix()
    pushStyle()
    strokeWidth(2)
    translate(self.pos:unpack())
    rotate(self.heading)
    line(0, 15, 5, -15)
    line(5, -15, -5, -15)
    line(-5, -15, 0, 15)
    popStyle()
    popMatrix()
end

Each ship has the same draw() method. As a starting point, it seems to make sense to put a conditional in the draw, and draw each ship differently. Whether that leads to some more interesting structure remains to be seen. Therefore first extract a function …

function Ship:draw()
    pushMatrix()
    pushStyle()
    strokeWidth(2)
    translate(self.pos:unpack())
    rotate(self.heading)
    self:drawTriangleShip()
    popStyle()
    popMatrix()
end

function Ship:drawTriangleShip()
    line(0, 15, 5, -15)
    line(5, -15, -5, -15)
    line(-5, -15, 0, 15)
end

And then call the appropriate draw function based on some ship attribute … like ship number.

function Ship:draw()
    pushMatrix()
    pushStyle()
    strokeWidth(2)
    translate(self.pos:unpack())
    rotate(self.heading)
    if self.shipNumber == 1 then
        self:drawTriangleShip()
    else
        self:drawTriangleShip()
    end
    popStyle()
    popMatrix()
end

Tiny steps and we’re proud of it. Now a new draw function, and call it:

function Ship:drawRoundShip()
    fill(0)
    line(0,0, -5,-15)
    line(0,0, 5, -15)
    ellipse(0,5,15,25)
end

We drew a sketch of the new ship, wrote the code above and then fiddled until we liked the look:

IMAGE HERE

We debate doing the thrust flames or committing. Once the question is asked, one must commit. Hold on …

Now, thrust. Tozier suggests drawing anything at all when thrusting. I agree and plan to draw a line.

function Ship:drawRoundShip()
    if self.controls.thrust.pressed then
        pushStyle()
        stroke(255,0,0)
        line(0,0,0,-20)
        popStyle()
    end
    fill(0)
    line(0,0, -5,-15)
    line(0,0, 5, -15)
    ellipse(0,5,15,25)
end

That draws a vague red line out the back of the round ship. Not very satisfactory. Fiddling, we do this:

function Ship:drawRoundShip()
    if self.controls.thrust.pressed then
        pushStyle()
        stroke(math.random(200,255),math.random(0,200), 0, 192)
        line(0,0,math.random(-3,3),math.random(-22,-18))
        stroke(math.random(200,255),math.random(0,200), 0, 192)
        line(0,0,math.random(-3,3),math.random(-22,-18))
        stroke(math.random(200,255),math.random(0,200), 0, 192)
        line(0,0,math.random(-3,3),math.random(-22,-18))
        popStyle()
    end
    fill(0)
    line(0,0, -5,-15)
    line(0,0, 5, -15)
    ellipse(0,5,15,25)
end

We have three randomly colored lines randomly waving. It looks like this:

MOVIE HERE

We think we notice some duplication in that code and decide to remove it:

function Ship:drawRoundShip()
    if self.controls.thrust.pressed then
        pushStyle()
        self:thrustLine()
        self:thrustLine()
        self:thrustLine()
        popStyle()
    end
    fill(0)
    line(0,0, -5,-15)
    line(0,0, 5, -15)
    ellipse(0,5,15,25)
end

function Ship:thrustLine()
    stroke(math.random(200,255),math.random(0,200), 0, 192)
    line(0,0,math.random(-3,3),math.random(-22,-18))
end

OK, now what about “our pointy friend”? Let’s just do the same to begin with. That results in too much fire inside the ship, and not enough outside, because the round ship has open area between its fins and the triangle ship is flat in the rear. In addition, the round ship is filled and the triangle ship is not. This means we need different lines:

function Ship:drawRoundShip()
    if self.controls.thrust.pressed then
        pushStyle()
        self:thrustLine(0, -22)
        self:thrustLine(0, -22)
        self:thrustLine(0, -22)
        popStyle()
    end
    fill(0)
    line(0,0, -5,-15)
    line(0,0, 5, -15)
    ellipse(0,5,15,25)
end

function Ship:drawTriangleShip()
    if self.controls.thrust.pressed then
        pushStyle()
        self:thrustLine(-15, -27)
        self:thrustLine(-15, -27)
        self:thrustLine(-15, -27)
        popStyle()
    end
    line(0, 15, 5, -15)
    line(5, -15, -5, -15)
    line(-5, -15, 0, 15)
end

function Ship:thrustLine(yorigin, yend)
    stroke(math.random(200,255),math.random(0,200), 0, 192)
    line(0,yorigin,math.random(-3,3),math.random(yend, yend + 4))
end

We think there are some odd constants in there but it does what we wanted. We did tweak the values until it looked good:

MOVIE HERE

So the ships are easier to tell apart, and we can see that they are thrusting. We haven’t addressed how to know how damaged you are. Tozier suggests making pieces fall off the ships. Then he suggests not doing that. My first inclination is to pop a number up over the ship showing how many hits are left. In a more modern video game, there might be a console showing score, hits, fuel remaining, number of cookies left in the cabinet, whatever. Spacewar was not a modern video game and we may not want to push it in that direction. We’re trying to capture that old-style vibe. Or something.

Anyway, that’s for next time!