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.)
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.