Hacking Twine: The Multiplane Effect

For Chronovoros, I created a Twine hack using custom macros inserted via Chapel’s Custom Macro Framework. These interact with the game’s custom CSS styling by adding foreground and background image elements. The image files,  indexed-color PNGs with a 1-bit alpha channel, are crushed down to surprisingly small file sizes for their resolution. (GIF would be just as useable, with interesting implications for animation.)

A layout for the different planes of one “scene” in the game, color-coded

Each set of images has its own macro, which when called passes a list of the desired image filenames and styling to a function which displays them. The images are scaled to fit the width of the window, and positioned to align either their top edge to the top of the viewport (the entire scrollable content of the page) or their bottom edge to the bottom of the window. An additional function is called every time the window paints (started by a call to its own macro on the first page of the game) which adjusts the vertical positions of the planes based on user scrolling; the vertical positions are calculated so that whatever the height of each individual image, scrolling completely from the top to the bottom of the window displays the entire image.

In practice, the multiplane hack breaks when the window is too tall. An aspect ratio should really be enforced with some kind of letterboxing scheme in the CSS. Having to write and call an entirely new macro for each set of image planes, while not complicated, is a little inelegant for a production-ready tool. Additionally, HTML5 special effects like contrast, color adjustment and blurring are implemented, but didn’t end up used on Chronovoros. Knocking the multiplane hack into something easier to use would be a good weekend project, for a later date.

Click here to download demo files and code for the Twine Multiplane Hack.

Chronovoros: A Multiplane Graphic Novel

The Nordic Game Jam 2021 is over and–as far as I know–everyone survived. My team set out to make a “cinematic text adventure” you can play in your browser. Which wasn’t totally a thing, so we had to invent some stuff.

The theme, announced at 6:30PM Friday, was “Pending.” (Yes, you can imagine the initial confusion!) We had the story, setting and characters in rough form by mid-morning Saturday. All five characters were designed, the outline was running in Twine, my basic multiplane hack was running, and I had some of the layouts sketched out by the end of that day. (Around 1AM, for all of us.) Sunday was a sprint to get the temporary artwork replaced, layers assembled and compressed, story finished, and the bugs squashed. We got it submitted at 4:50PM Sunday–10 minutes to spare!

The story and interactive logic were written by Sejr Thompson. The character design and other hand-illustrated art were by Alexander Pechlivanidis. My own role was twofold: Designing the layouts–in an animation sense–of the independently scrolling background and foreground art layers, and hacking the Twine text engine to display them.

It’s a jam game, so there are a few rough edges, but not half as many as you’d expect. Reviews so far have been very good. Check it out:

Play Chronovoros on Itch.io