Drop into a cyberpunk dystopian America. Technology reigns and society is a fractured hive of violent delights. You don't remember your past, just that you'll do anything to find her...
Even if it means tearing the city to the ground.
Lock and load, pilgrim.
The Back to Her kinetic comic was developed to promote our story-based rogue-lite indie game Back to Her. Our goals were to create something interesting and unique to set the tone for the game and begin to introduce the game’s lore. It features art by Andrew Lester, writing by Tucker Baumgartner, and animations+code from yours truly.
Everything in the comic is rendered using the HTML5 canvas API, and each panel is animated algorithmically in the browser. The comic is made up entirely of text, basic vector shapes, and 97 separate images. Many of the animations are tied to the user’s vertical scroll position, which makes for a fun kinetic effect as the user scrolls. (Some of them are pretty subtle, if you want to fully appreciate them make sure to scroll slowly – ideally with a trackpad or touch screen.) We chose the HTML5 canvas API over WebGL primarily to take advantage of the browser’s text rendering as well as to support Internet Explorer (which wasn’t completely dead yet.)
In order to meet performance targets, the comic is actually rendered into a single canvas sized to fit the browser window with scrolling handled manually in the code. This gives a smooth experience without mucking with the user’s expectation for how scrolling works and avoids allocating too many resources on mobile devices which might not handle large canvases very well. The comic also automatically loads smaller variants of the textures on devices with smaller screens or constrained network connections.
Technologies used:
- TypeScript
- HTML5 canvas
The comic can be viewed below.
To toggle the debug overlay, press ~ or click this button:
The debug overlay shows some internal details about the internal state of the comic – mostly things relating to scroll state and culling. The different percentages have to do with how much of the panel is visible and are used to drive different scroll-based animations depending on the desired effect.
In the years since we developed this comic it seems that Apple introduced some changes to iOS that interferes with our scrolling logic slightly. If you're on iOS and it looks weird, sorry about that!
