Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next

  • Section: Fade animation tracks

    "Fade" animations fade in or out from a background color. Glulx does not provide the ability to change opacity dynamically, so this is accomplished by means of a rather terrible hack. Rather than change a property of the target object as other animation presets do, fade tracks actually draw a transparent PNG image on top of the target. By stepping through a series of PNGs with different opacities, we imitate fading in/out.

    Fade animations require a special kind of Inform object called a "fader". Like fonts and tilesets, faders are packaged as extensions plus the set of opacity-scaled images. Glimmr includes one sample fader called Glimmr Animation Fader - Black.

    Fades can be invoked targeting any of these types of object:

        graphics g-window

    When a g-element is targeted, the PNG image will be sized so that the entire element is covered by the fader overlay. If the target is a canvas, then the canvas dimensions will be faded; if a graphics window, then the entire window will be covered by the overlay. Selecting a canvas that is shown in multiple windows will fade the canvas in all windows simultaneously.

    By default, all fader overlays will be placed on display-layer 9999. This should be sufficient for nearly all purposes, but can be changed if need be by writing, e.g. "The display-layer of the black-fader is 30000." (The display layer is the z-level on which a given element is drawn; higher display layers are drawn later. See the documentation for Glimmr Canvas-Based Drawing.)

    To invoke a fade preset:

        animate <track> as a fade animation targeting <target> and using <fader> from <starting percentage> percent to <ending percentage> percent at <interval> with a duration of <length> frames, <cycling>

    We must specify both the starting and the ending percentage for the fader overlay. 100 percent is solid color, while 0 percent is fully transparent. Percentages are specified as integers, and the word percent can be abbreviated using the % sign, e.g.: 90 % (note the space before the symbol: it is required).

    It is important to remember to manage the before and after states of the animation, since the fader overlay is drawn *only* during the animation. An element that is invisible will be made visible once the animation starts. See the usage examples for pointers.

    The rate of change of opacities can be controlled via easing equations. This will work best when there are 20 steps or so (as in the black sample overlay).

    Usage examples:

    Targeting a sprite, fading in from a black background. We start with the sprite inactive so that it will not be visible until after the animation starts (starting the animation will automatically reveal it).
        The fade-in track is an animation track.

        The Cover Image is a sprite. The display status is g-inactive.
        To reveal the cover:
            animate the fade-in track as a fade animation targeting the Cover Image and using the Black-fader from 100 percent to 0 percent at 8 fps with a duration of 12 frames.

    Targeting a canvas, fading out to a black background. When the animation completes, the animation callback will swap the canvas for an empty canvas (the default "g-null-canvas").
        The fade-out track is an animation track. The animation-callback is "[@ now the associated canvas of the graphics-window is the g-null-canvas]".

        The graphics-canvas is a g-canvas. The background image is Figure of Cover. The associated canvas of the graphics-window is the graphics-canvas.

        To conceal the cover:
            animate the fade-out track as a fade animation targeting the graphics-canvas and using the Black-fader from 0 % to 100 % at 8 fps with a duration of 12 frames.

    The rate of change in opacities can be controlled by easing equations.

    By default, fader overlays block mouse input to the graphic elements beneath them. Once you start a fade animation over a button, for example, the player will no longer be able to click on the button. To prevent this, you can add this line of code to your source text:

        The graphlink status of a fader overlay is g-inactive.