On Vignettes

Last night I opened my email inbox and found a message from a fella named Jeff Shyluk:

[…] Speaking of vignettes, because I am so pleased with the patch, I drew up a special one to thank you for your hard work and dedication to quickly patching up AZS!

I love it! And despite Jeff having never seen a picture of me, he has captured my chin with an eerie level of accuracy. Check out more of Jeff’s work at his blog.

So today I thought I’d write a bit on the vignette sequences. The vignettes use the conventions of a comic book to convey story & information to the player. For those who have no idea what I’m talking about, the first few seconds of this video display a vignette in Atom Zombie Smasher.

Initially, I was leery at putting them into the game. Any time the player is not interacting with the game, I get a bit nervous. Why am I watching this dialogue sequence in this video game? If I want to sit still and watch people talk, why am I not doing that in a media better suited for that, such as film or literature? Why am I being forced to watch this… thing?

Ultimately, I have no defense for that. I enjoyed making the vignettes, and that’s the main reason why they’re included.

The vignette system was first created for use in my game Air Forte. You can see a brief clip of one of Air Forte’s vignettes in this video. The system is very basic. First, I drew one “page” of the vignette.  Here’s the first page:

Then, in the game, a virtual “camera” zooms into a panel. After a set time (or when the player presses a button), the camera swoops over to the next panel, mimicking the human eye reading comic strip panels. Text was displayed during runtime, letting me do little tricks like integrating the player’s name into the panels. (Also note some panels are empty. In Air Forte, the player can choose the appearance of their player character. Riffing off that, I inserted an image of the player character into these blank panels)

When it came time to make Atom Zombie Smasher, I expanded the vignette system. First of all, vignettes no longer had to be one enormous image. Vignettes were now composed of any arbitrary amount of images stitched together. For example, this vignette of Mr. Tabajaras and his grandparents is composed of three separate images: the empty sheet (green), the hero image (yellow), and the panel filler (red).

Doing this A) dramatically reduced the amount of work required, B) reduced loading time, and C) reduced the game’s file size. In the old Air Forte system, I would’ve needed to create a new master image for each of Atom Zombie Smasher’s 30+ vignettes. This is especially irksome when two vignettes are _almost _but not quite perfectly identical.

The weakness of this stitching system is that I still think the Air Forte’s results were better. I love Air Forte’s spilling over of the hero images, non-square-shaped panels - all of these custom touches are achievable in AZS, but would require a fair bit of more additional functionality.

The change I was most happy with: AZS vignettes are data-driven. The Air Forte vignettes were hard-coded in the executable, whereas AZS stores the vignette data in simple text files. The vignette data for the above AZS example can be read here. The first few lines describe the image positions, and the bracketed blocks describe the panels - how long to linger on the panel, how far to zoom in, what text to display, and so on. To help me out, I wrote a debug tool, “BlendoComic,” that can fine tune the values on-the-fly (press ctrl+F11 to see the debug tools).

I’d love to see someone make their own vignette - poke around AZS’s content folders and try your hand at one!