Animation Demo Series 1

NOTE: The demo game file is a gblorb file. To play it, you will need a Glulx interpreter, such as Gargoyle, Windows Glulxe, or Zoom (see links at right). Gargoyle is expected to give the smoothest performance on all systems, but the most recent of any of these interpreters should do nicely.

Almost exactly four years ago, I released my first “work” in Inform 7, a pre-Glimmr extension to enable very simple and primitive animations. Graphical Window Animation hasn’t worked with any Inform build newer than 5Z71; with Glimmr well underway, I saw GWA–limited to just one graphics window and (effectively) one image–as a dead end and didn’t bother to continue maintaining it.

Instead, I set my eyes on eventually capping the Glimmr suite with a powerful animation library that would move well beyond the simple flip book approach taken by Graphical Window Animation. I dithered for a long while, thinking that before I put the extension together, I’d like to have a sophisticated system of virtual timers running behind it (Glulx has only a single timer, but you could theoretically track things in such a way as to imitate any number of separate timers firing events independently). I didn’t have a whole lot of interest in creating that system, though, so I just let things languish.

But I’m happy to say that Glimmr animation’s moment has now arrived. Glimmr Canvas Animation, 10,000 words of Inform code, is complete. As I try to work myself up to writing the documentation, I thought I’d preview the code demos here on the blog. This will make for a bit of a drawn-out release, but maybe it’ll entice someone to help me write the documentation (a task I always dread)! In the meantime, the demos should be fun.

Glimmr Canvas Animation

Glimmr Canvas Animation sits on top of Glimmr Canvas-Based Drawing and allows for graphic elements of any type to be animated. GCA is built on the concept of the animation track. An animation track handles one kind of animation effect for one graphic element, but tracks are stackable, so you can build up very complex animations using them. To display a rolling ball, for example, you might have:

By moving the sprite a few pixels each frame for 12 frames, while cycling through a simple flip book-style animation “reel” depicting slightly different images of the ball, we give the impression that the ball is rolling across the screen. In Glimmr Canvas Animation code, this would look like this:

animate the roll track as a motion animation targeting the ball and ending at {300, 100} at 24 fps with duration of 12 frames;
animate the spin track as a reel animation targeting the ball at 24 fps with duration of 12 frames, cycling.

GCA includes a number of presets like this that make even complex animations a matter of one or two lines of code, including motion, reel, zooming, flickering, and more. Presets can be applied to any of the display properties that Glimmr provides, and there is support for tweening using a number of different easing equations (authors can also add their own). You can also create completely custom animations that do whatever you like.

The Demo

Let’s move on to the good stuff. For this first demo, I’ve chosen to highlight user interface animation. The game presents four thumbnail versions of the map illustrations from Dell Map-Back murder mysteries in a grid. Click on any one of them to see it enlarged; we use two animation tracks, scaling the image to full size (using an easing effect) while moving it to the center of the window. Click the cover again to return it to the original thumbnail size and location; the return movement is independent of the enlargement, and uses another two tracks. In fact, if while you have one cover enlarged and you click on another, all four tracks will fire simultaneously, so that one cover will zoom out while the other zooms in.

All of this UI behavior is handled in a single short “carry out” rule. Type SOURCE CODE in the demo file to see the rule.

Hope you enjoy the demo. The second in the series should be along in a week or so.

Download the demo file.