Advanced graphics for Inform 7

Note: This post goes into a bit of detail about certain animation concepts. There’s even some math. I wouldn’t blame you if you just want to skip to the demo.

For this installment of the demo series, we delve deeper into the facilities that Glimmr Canvas Animation provides for dynamic tweening. Briefly, “tweening” is short for “in-betweening”. In traditional animation, animations were organized around key frames–the critical points in any sequence. These keyframes were drawn first, and then the “betweens” were filled in to connect those key moments smoothly; because they were less critical, they were often filled in by the lower ranks of the animation team. In computer animation, keyframes are defined by the user, and the tweening is done automatically by the software.

Glimmr Canvas Animation (GCA) is no different, though it doesn’t really use the concept of the keyframe. Where programs like Flash have a master timeline punctuated by user-defined keyframes, each GCA animation track can be thought of as a self-contained timeline separating two keyframes–the starting and ending points of that particular motion or effect. GCA builds sophisticated and customizable tweening into all of the preset animation types via the use of “easing” equations that interpolate movement between the starting and ending points.

Easing equations

The term “easing” refers to motions in which the acceleration changes over time. The term may seem strange, but think of it in terms of easing into a chair–your body moves more slowly as you approach the cushion. Easing equations can imitate this sort of gradual slowing as the motion reaches the endpoint, and they can also do much more, such as imitate the bouncing of a ball, or overshoot the endpoint and snap back.

Three terms are used to describe all of the equations provided in GCA. “Easing out” describes a sequence in which motion starts out moving rapidly and then slows, more or less gradually, to a stop. “Easing in” is the opposite–slow to fast. “Easing in-out” combines the two effects. Different functions can be used to qualify these three basic categories: “quadratic easing in” for example, or “circular easing out”.

Easing equations can be employed very flexibly. In fact, I’m using the word “motion” only because it is convenient. In fact, easing equations 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 100% by equal intervals, the zoom was “eased” using a cubic ease-out equation that starts out rapid, increases slightly in speed for the first 1/2 or so of the duration, and then slows comparatively rapidly. Combined with a purely linear diagonal movement of the image toward the center of the window, this eased zooming provides a gentle impression of arcing movement (go ahead, try the first demo again to see this).

With GCA, all of the preset animation types allow you to apply easing with a single setting, such as “the easing of the movement track is cubic easing out”. This includes not only movement and zooming tracks, but also fader tracks (changes in opacity), and even reel animations (i.e., sequences of images). If you set the duration of a reel animation to more or less frames than there are images in the sequence, GCA will use the track’s easing to scale the images available to the number of frames required.

GCA has 16 easing equations built in, from purely linear to a quadratic curve to a parabolic bounce. If you’re not satisfied with these, you can also add your own equations.

There is no need to understand or use the mathematics of easing to use GCA (unless you want to add your own equations), but an example, and particularly a graph of the function, couldn’t hurt. Here is the cubic “easing out” equation and a plot:

Equation: Cubic Easing Out

(The four parameters listed at the bottom are used as the inputs to every easing equation. Once an equation is set up, the only variable that changes is t, which in GCA is the number of the current frame of the animation track.)

The departures from linearity in the plot–that is, from an imagined straight diagonal line running from the origin in the lower left to the upper right–describe the changing velocity of the motion.

The demo

Finally we get to the demo: Eased Movement, as its name implies, showcases eased movement in Glimmr Canvas Animation. The demo is actually a visualization tool as much as it is a demonstration, in that it is designed to show the effect of any combination of easing equations on movement.

Wait, a combination of easing equations? Yes. GCA allows you to specify independent easing equations for each axis of movement, horizontal (x) and vertical (y). This opens up a host of new possibilities, because the application of differential accelerations produces different paths of movement, not just varying speeds.

Screenshot of the demo. Motion trail is simulated (poorly).

Once you’ve downloaded the demo, try the following to see the different concepts we’ve been talking about in motion (minor pun intended):

  • Before you do anything else, click anywhere in the central black area to the move the ball. This is plain old linear movement. Dull!
  • Now, select a different (not linear) easing for the x-axis by clicking on the easing type in the left column. Then select the same easing type in the right column. Finally, click in the central area to move the ball to that point. It should move in a straight line, but the acceleration patterns of the motion should conform to the easing selected.
  • Now, move the ball to the lower left corner of the central area. Click on the linear easing link in the left column to reset the x-axis. Leave the y-axis set to whatever nonlinear easing you’ve been messing with. Finally, click to move the ball to the upper-right corner of the central area. Notice that the path of the ball matches the shape of the graph displayed in the right column. This is a nice, simple demonstration of the operation of differential easing.
  • Finally, set the easing for the x-axis to a nonlinear setting that’s different from the y-axis easing, and move the ball in diagonal lines. Try a few different combinations and note the variety of paths you can get.


Download the demo game here. To view the demo, you will need a Glulx interpreter, such as Windows Git or Zoom (see links at right). Note that this demo will not work in Gargoyle, nor in Spatterlight. If you’re a diehard Gargoyle aficionado, drop me a line; I can send you a test build in which the hyperlink bug is fixed.


Comments on: "Animation Demo Series 2" (3)

  1. Glimmr Canvas Animation can now be downloaded via . Note that this is strictly a testing version. There is no documentation as yet, though the source code of the demos is incorporated as pasteable code examples.

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

  3. […] date, the demos that I’ve 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. […]

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: