Glimmr Canvas Animation
version 1/111030 by Erik Temple
Documentation
- Chapter: Including Glimmr Canvas Animation in a project
- Chapter: Getting started with Glimmr Canvas Animation
- Chapter: Animation and the timer
- Chapter: Animation tracks
- Section: Basics of animation tracks
- Section: Animation callbacks
- Section: Delaying input until animations finish
- Section: Manually activating and deactivating tracks
- Section: Changing track modalities
- Chapter: Animation track presets
- Chapter: Standard track presets
- Section: Reel animation tracks
- Section: Motion animation tracks
- Section: Zooming animation tracks
- Section: Flicker animation tracks
- Section: Fade animation tracks
- Section: Temporalizing animation tracks
- Chapter: Parameterized animation tracks
- Section: Parameterized reel animation tracks
- Section: Parameterized motion animation tracks
- Section: Parameterized zooming animation tracks
- Chapter: Custom animations
- Section: Usage examples
- Section: Important note about animations that print text
- Section: Adding easing to a custom animation
- Chapter: Easing (Tweening)
- Section: Types of easing
- Section: Assigning easing to animation tracks
- Section: Implementation details
- Section: Adding custom easing equations
- Chapter: Debugging
- Chapter: Performance Tips
- Chapter: Contact info
- Example: * Animation Rule Variations - This simple example shows how we can vary preset animations by adding rules to the animation rulebook. We'll have four variations on a simple horizontal motion animation. The "player" can choose from among these variation via a keypress menu. The chosen animation will play immediately, and once it finishes s/he will have a chance to choose another.
- Example: ** Maps of Murder - The user interface is an ideal place to experiment with animation effects. Here, we sketch a kind of image browser for an IF game. Four thumbnail versions (the map illustrations from Dell Map-Back murder mysteries) are displayed in a grid. We can click on any one of them to maximize it; we use two animation tracks to animate the maximization, scaling the image to full size while moving it to the center of the window. Click on the cover again to return it to the original thumbnail size and location.
- Example: ** Eased Movements - This example is primarily a demo of the available easing equations. The animation itself is handled in only a single line, whereas most of the code is devoted to user input, particularly the selection of primary and secondary easing via hyperlinks. The example does however illustrate the use of a number of features that are rarely demoed and which may be of interest to those interested in animation, including mouse input and hyperlink input.
- Example: **** Scourge of the Vampyr - This example combines a number of different animation presets to create walking (reel + motion) and torchlight (flicker + fade) animations. Fade and zooming effects are also employed to animate the player character's entrance into and exit from the crypt. The example also exploits Glimmr's ability to move the framing of the window on the canvas to keep the player's avatar at the center of the window, so that the rest of the room seems to move around little Pelón.
Glimmr Canvas Animation (GCA) extends Glimmr Canvas-Based Drawing, allowing for graphic elements of any type to be animated. GCA includes a number of presets that make even complex animations a matter of just a few lines of code, including motion, flipbook-style, zooming, flickering, and more. There is also support for "tweening", using a number of different easing equations (authors can also add their own). Authors can also create completely custom animation routines that do whatever they like.