Alert! Safety Boom! Cutscene Technology

One of the things we wanted to do with Alert! Safety Boom! was include a story, and tell it in an interesting way. The most common (but not necessarily best) way for videogames to do this is with cutscenes – full-screen video or animation. These are generally big expensive affairs, however, and beyond the means of an ickle indie developer like Wooji Juice.

A lot of smaller games get around this by having a picture for each character in the story, and simply displaying the appropriate picture with a text box over the top. This works, and it sure is cheap, but it’s barely a step above filling the screen with a page from a book. How could we go further?

Let’s take a step back for a moment. One of the things that I noticed early on about the iPhone was how it handled text compared to other mobile phones1 at the time it was launched.

Write Me A Letter

The iPhone has a bunch of fonts included, in a number of variations (bold, italics, and so on), and they are “vector” fonts, which means it stores descriptions of where all the lines should be drawn to make the letters, so it can draw them at any size. If you know what you’re doing, you can apply affects to them. Its font-drawing is high quality, with “anti-aliasing” (reduces the jaggedness of the edges of the letters) and “hinting” (makes lettering clearer at small sizes) and so on, just like on a good desktop operating system.

By comparison, a lot of mobile phones only use simply “bitmap” font technology, meaning they just have a list of little pictures with one letter in each one. You can’t stretch or shrink these without making them blockier, they rarely have enough memory to store variations like bold or italics, they tend to look uglier overall because they lack the natural fluidity of good-quality fonts.

If you check this overview of TrueType, you’ll see a side-by-side example of the difference between bitmap and vector fonts.

Idealogue

Alert! Safety Boom! is a cartoon/comic-themed game. In a comic book, text is actually very expressive. The way text is written can convey huge amounts of emotion, style and information. Not just the text itself, but the bubbles we’re used to seeing can show thoughts, radio communications, and more.

A few of those games I mentioned, that overlay text on a character portrait, dress up the text by putting it in a “speech bubble”. Thing is, if you look at them, they almost never actually look like a real comic speech bubble. They’re essentially just big square dialog boxes, with slightly rounded corners, and maybe a “tail” pointed vaguely towards the character, and little or no special treatment of the lettering:

(I didn’t want to pick on any one game, so this is a mockup of how A!SB! might have looked – but hands up everyone who’s seen this kind of thing before? Exactly.)

So. What if we could do real comic-book text? There’s quite a lot to it. Our “comic book engine” would need:

• A way to mark up the dialogue somehow to indicate what’s going on – how should it interpret the text? Is it emphasised? Shouting? Mumbled under the character’s breath? A little semi-vocal noise (“Oof!” “Sniff” “Hurk!”)?

• Find a way to draw speech bubbles at different sizes without making the edges blurry or blocky (which is what would happen if we simply drew one and stretched it).

• Find a way to draw extra details on those bubbles, such as links between speech bubbles from the same person, or the little “spikes” that surround a shout.

• Handle text that intentionally “breaks” the bubble.

• Figure out how big the bubble needs to be to contain the text (which may be in a mixture of different sizes and styles according to how excitable the character is).

• Wrap the text to fit inside the bubble, which, if done properly, should be a “slightly squished oval” shape, not a rectangle with rounded corners – which makes things pretty tricky – a simple “word wrap” system such as you find in your word processor doesn’t work2.

• Draw text that has special effects applied, either to emphasise a particular piece of speech, or to give the impression of sounds and actions rather than speech.

• Arrange the bubbles so that characters can talk to each other and it looks like a natural conversation. It’s easy enough when just two people are exchanging words (stick one on each side of the screen) but what about three or more?

• When a single speech bubble appears, we want it to have a “tail” pointing to the mouth of the speaker. When their speech is broken into two bubbles, we want only the last bubble to have a tail; the others should be connected in a chain. But if we’re unveiling the bubbles one-by-one (to give that natural conversational feel), we need to change this half-way through, when the second (or third, or…) bubble gets added. And it shouldn’t look stupid!

• And finally, we want the characters to actually react to what’s going on – to show happiness or sadness or surprise or anger, not just sit there like powered-down robots while their speech announces their inner torment…

No small task! And yet, I’m proud to say, we’ve achieved it in Alert! Safety Boom!

Here’s an example of our animated conversations. To avoid spoiling the plot, I’ve rigged one up that doesn’t actually appear in the game, just so’s you know:

It gives a stronger comic-book effect, allows more room for the characters themselves, and is overall a more engaging way to tell the story.

(Oh, and don’t worry – you can work through the story fast or slow, or skip it altogether if you’ve seen it before.)