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.
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.
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:
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.)
2. Normally, you simply add words one at a time until you run out of space on the line, then start a new one. In the case of a curved bubble, when you start a new line, you need to shuffle the old one upwards (so the text is vertically centred inside the bubble), and this means the space it has is now actually narrower! ←