Advanced graphics for Inform 7

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:

Stacked animation tracks
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.

Comments on: "Animation Demo Series 1" (8)

  1. Wade said:

    Demo 1 is well cool.

  2. leandro ribeiro said:

    Oh, the possibilities are so interesting, it makes me want to change a couple of things in my WIP.

    Thank you for this.

  3. I’m really looking forward to experimenting with this. For a long time now, I’ve been toying with an idea for graphics that would, in practice, require more than just the ‘series of images’ -approach.

    And yes, the demo is very impressive.

  4. Gravel said:

    That’s awesome. I think I have all the challenge I need with static images, but this really opens up possibilities.

  5. [...] can be used on any continuous field of values, not just coordinates in space. For example, the first demo in the series employed easing when zooming the size of images. Instead of proceeding from 50% of actual size to [...]

  6. Thanks for the comments, folks! I’ve put the extension up for download at

    If you have time to play around with, I’d sure appreciate any comments you have–particularly bug reports!

  7. [...] Canvas Animation–previewed here, here, and here–has been released and is available for download at Google Code. (It will soon [...]

  8. [...] released for Glimmr Canvas Animation have been either simple visualizations, or have gestured at nonstandard interfaces that have not really been seen in parser IF before. Which naturally raises the [...]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: