Rainbow - Post-Mortem (Part 2)

In this series of posts, I talk about the process behind Rainbow, my LD25 game.

In part one, I described my failure to come up with a good idea while feeling sad. I resume the story on...

Saturday Morning: An idea

I woke up Satuday morning (probably around 10am -- lots of sleep is important for creativity) and decided that being sad was hard to do and wasn't getting me anywhere. So I sat down to do some more sketches.

I started with the anti-thief idea from Friday, which got me thinking about visibility rays. In turn, this led to thinking about light versus shadow, and I drew some pictures of houses with light streaming in through the windows. Of course, light that goes straight didn't seem to have much play-ability, so I started thinking about steerable light.

Which led me to the idea of steerable rainbows. This struck me as a good concept because rainbows aren't sad, and because thinner rainbows might steer differently than thicker ones. I also had some ideas for different mechanics like splitting rainbows, color filters, and color-limited targets.

Saturday Afternoon: Coding

With my idea in hand, I set out to build it in HTML5 using the canvas' 2D drawing API. My only previous experience in HTML5 was the tchow solstice card, and a few hacks for a (not yet published) study. (I generally work in C++ / OpenGL.)

Anyway, I sat down with an empty .js file and a pile of tutorials and started hacking together something I thought might work. By about 13:40 I had a really basic prototype in place, which was able to draw a level and a bit of rainbow that followed the mouse cursor's horizontal position:

This was good as far as showing that I was going to be able to work in HTML5, but it didn't get at the core of the game (steering the rainbow). By around 15:00 I had added steering behavior, though hadn't done collision yet:

I kept working on the steering mechanic, trying to get the rainbow to feel stately enough without being trivial. By 15:40 I had collisions and rainbow splitting:

It was becoming obvious, though, that the way the rainbow was being drawn (as one path for each color) wasn't correct -- it meant that certain colors were always on top, rather than fresher parts of the rainbow being on top. This wasn't going to cut it, graphically, so I started the process of going from 2D canvas drawing primitives to WebGL triangle drawing.

By 20:20 I had this working:

The jaggies are present because I turned off antialiasing to make it easier to spot bugs in the drawing. I ended up having to write my own thick-line-drawing because glLineWidth didn't do nice joins at corners.

With the evening growing late, I decided to push a bit more and wrap the game up in an intro and outro to explain the plot, and make levels winnable.

After toiling in inkscape to produce some pictures, and then figuring out how texture loading works in HTML5 (neat hack: if you don't want to deal with local file access permissions stuff, you can just base64-encode your textures into data urls), I had something looking relatively finished:

You'll notice that the peons have not yet been skinned (texture loading was used only for the intro and outro screens at this point). Also, at some point in this work, I added feature which allowed me to jump to any level by putting its index in the query string. This was useful for testing (and remains in the final version of the game).

At this point I had something that was winnable and had a beginning and end; and it was getting late (1:40), so I headed to bed.

However, the game was far from complete. The steering of thin rainbows was a bit glitchy, I hadn't worked on sound at all, and there was no indicator for which rainbow would grow next (or where it would grow to). Also, more levels were needed.

Of course, this is a story for the next post.