Big Bucket Software you like to use
Checkpoints
April 2nd, 2010

Checkpoints in THE INCIDENT are points from which you respawn after dying. When it came time to develop the look of the checkpoint, Neven and I initially tried a green laser. The player clears the checkpoint when they cross the laser. Trouble is, lasers are scary. Making it green didn’t really help. Neven added an arrow that pointed in the direction of the laser as a way of encouraging the player to cross it. This helped and it looked good, but it still needed something. So, yeah. We scrapped the laser.

Then came the idea of a string of flags that the player has to cut through. Cut the string and the flags flutter to the ground. I was a bit hesitant to suggest this at first – the physics of it seemed hard. But the more we talked about it, the more it became obvious that flags were they way to go. And after all, I’ve always wanted to work a string of flags into a game since Back To the Future II:

Back To The Future II

Back To The Future II

So Neven got to work on the flags and very quickly provided me with this mockup:

String of Flags Mockup

Perfect, as usual. I immediately moved onto the task of breaking the flags out into a small texture atlas:

String of Flags Texture Atlas

Dotted lines added to indicate how the atlas is split.

Sure, I could have just used one greyscale flag and adjusted the hue in code. The problem with that approach is that the shadow color (nearest to the string) would have to be calculated rather than designed. It’s a really minor thing to worry about but heck, this way looks better and doesn’t cost many CPU cycles.

Next step: The physics object. I had already decided that the string shouldn’t be taut; it should have a bit of slack in the middle. When broken, the flags should ‘flutter’ to the ground… Somehow. THE INCIDENT, like my other game Pocketball, uses the Box2d Physics Engine. So my task involved working out how to communicate these requirements to Box2d.

I started by laying out a string of floating rectangles. Each rectangle corresponding to a single flag:

String of Flags Texture Atlas

It lined up nicely. Textured, it looked like this:

String of Flags Texture Atlas

Next, it was onto the tricky stuff: bring the string to life. Basically, this was achieved by locking the two ends of the string in place and connecting the top corners of each rectangle with hinges or, in Box2d terms, b2RevoluteJoints. Cutting the string would be achieved by detaching the hinge nearest the player. It came together surprisingly easy with minimal messing about:

String of Flags Texture Atlas

Note the way that the rectangles on the ends are still horizontal. These rectangles are fixed in place and are responsible for keeping the string in the air.

Achieving a convincing ‘flutter’ effect took time. After a lot of experimenting, I came up with this approach:

  • Detach the hinge nearest the player
  • Pull the ends of the rope horizontally, away from the screen
  • Apply a force vertically, opposing gravity, to every second flag in the chain

It worked well. This is how it looks:

Lovely.

  • Looks cool! Think you solved that one pretty well.
    I quite like these type of blog posts!
    Hope this game sells well for you, I have already bought this game in my mind and it’s awesome. 🙂

  • I like how the images maintain a consistent pixelation even when rotated, instead of just being angled lines.

    But the music! Cool! What is it?

  • Thanks folks. The music is Sugarette by Bibio.

  • Love that in one screenshot, we get two “Lost” references. Makes me look forward to even more in the game…