Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next

  • Section: Basics of animation tracks

    In programming terms, an animation track is an Inform 7 object, not too different from the "things" that authors use to build their storyworlds. However, they are not intended to be physical game objects; they are simply convenient containers for storing and organizing information, usually in the form of properties. (Users of Glimmr Canvas-Based Drawing will recognize the same concept in the use of g-elements, which are also objects in the same sense.) Defining an animation track is quite simple. Here we do two at a stroke:

        The movement track and the walking track are animation tracks.

    Rather than requiring us to set each of the relevant properties individually, GCA allows us to use an abbreviated, single-phrase command to set up and trigger each animation track, by using animation presets. The code for the walking animation mentioned above might look like this, for example:

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

    Note the reference to "motion" and "reel"--these are two of the types of animation preset provided by GCA. Motion tracks animate the movement of an element across the canvas/window, while reel tracks change the image used to display the element. See the sections that detail the different presets below.

    Some circumstances will require us to manually set properties of the track in addition to the command. For example, all reel tracks require us to specify the list of images that make up the "reel" that will be displayed. Here is the full code required to set up a reel animation:

        The waving track is an animation track. The image-reel of the waving track is {Figure of Hand Left, Figure of Hand Right}.

        Instead of waving hands:
            animate the waving track as a reel animation targeting the player avatar at 4 fps with duration of 6 frames.

    This will animate the reel for 6 frames at a rate of 4 frames per second; that is, with a timer tick every 250 milliseconds. Each frame, the image used to display the sprite element we have called "player avatar" will change according to the image-reel list we have defined. Note that since the reel has only two images in it, the track will select the first figure for 1 frame, and the second figure for 5 frames. If we want to repeat the reel after reaching the end, we add the "cycling" option:

        animate the waving track as a reel animation targeting the player avatar at 4 fps with duration of 6 frames, cycling.

    This will repeat through the reel for each pair of frames, producing a smooth alternation of the figures: Figure of Hand Left, Figure of Hand Right, Figure of Hand Left, Figure of Hand Right, Figure of Hand Left, Figure of Hand Right. More information on the cycling option is given below.

    Note that the timer is started *immediately* after an animate phrase is invoked. The animation will begin after one interval has passed. In other words, the first frame of the animation will be displayed after one tick of the timer; if we have specified an interval of 4 frames per second, the first frame will be displayed 250 milliseconds after Inform processes the animation phrase.

    To summarize, the basic steps for defining an animation are:

        1) Declare the track object: "X is an animation track"
        2) Set up any auxiliary properties that need setting up, e.g. "The image-reel of X is {....}"
        3) Invoke the track using the encapsulated command: "animate X as a..."

    Tracks are fully recyclable, meaning that once a track is done running, we can invoke it again with a totally different set of parameters. We can even change the type of the animation if we wish, e.g.:

        animate the default track as a motion animation...
        animate the default track as a reel animation...

    Unless we are obsessed with efficiency, though, it probably isn't the best idea to reuse a track for a totally different purpose in this way. It won't be quite as easy to read the code later. Study the "Scourge of the Vampyr" example to see how multiple tracks can be used alone and together to both organize and control animations.

    GCA includes one pre-declared animation track, called the "default track". We can make use of this track or not in our own game as we like.

    See below for the different types of animation preset, the commands used to invoke them, and brief usage examples.