Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous



  • 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.

        "Scourge of the Vampyr"

        Include Glimmr Canvas Animation by Erik Temple.
        Include Glimmr Animation Fader - Black by Erik Temple.


        Section - Figure Definitions

        Figure of Annex is the file "Annex.png".
        Figure of Chamber is the file "Chamber.png".
        Figure of Cross is the file "Cross.png".
        Figure of Entry is the file "Entry.png".

        Figure of Entrance Mask is the file "EntranceMask.png".
        Figure of Opacity Mask is the file "OpacityMask.png".

        Figure of StandE00 is the file "StandE00.png".
        Figure of StandN00 is the file "StandN00.png".
        Figure of StandS00 is the file "StandS00.png".
        Figure of StandW00 is the file "StandW00.png".
        Figure of WalkE01 is the file "WalkE01.png".
        Figure of WalkE02 is the file "WalkE02.png".
        Figure of WalkE03 is the file "WalkE03.png".
        Figure of WalkE04 is the file "WalkE04.png".
        Figure of WalkN01 is the file "WalkN01.png".
        Figure of WalkN02 is the file "WalkN02.png".
        Figure of WalkN03 is the file "WalkN03.png".
        Figure of WalkN04 is the file "WalkN04.png".
        Figure of WalkS01 is the file "WalkS01.png".
        Figure of WalkS02 is the file "WalkS02.png".
        Figure of WalkS03 is the file "WalkS03.png".
        Figure of WalkS04 is the file "WalkS04.png".
        Figure of WalkW01 is the file "WalkW01.png".
        Figure of WalkW02 is the file "WalkW02.png".
        Figure of WalkW03 is the file "WalkW03.png".
        Figure of WalkW04 is the file "WalkW04.png".


        Section - Window initializations

        The divider is a g-window spawned by the main-window. The type is g-graphics. The position is g-placeright. The measurement is 360. The back-colour is g-lavender.

        The side-window is a text-buffer g-window spawned by the divider. The position of the side-window is g-placebelow. The measurement is 99. The back-colour is g-lavender.

        The graphics-window is a graphics g-window spawned by the divider. The position of the graphics-window is g-placeabove. The measurement of the graphics-window is 260. The back-colour of the graphics-window is g-black. The arbitrary scaling factor of the graphics-window is 1.0000.

        The graphics-canvas is a g-canvas. The canvas-width is 752. The canvas-height is 352. The associated canvas of the graphics-window is the graphics-canvas. The associated canvas of a g-element is the graphics-canvas.

        Window-drawing rule for the side-window (this is the construct inventory rule):
         move focus to side-window, clearing the window;
         try taking inventory;
         return to main screen.

        Every turn when the side-window is g-present: follow the window-drawing rules for the side-window.

        When play begins:
            open up the graphics-window;
            open up the side-window.


        Section - Room sprites

        A room-sprite is a kind of sprite. The graphlink status of a room-sprite is g-inactive. The associated canvas of a room-sprite is graphics-canvas.

        Some room-sprites are defined by the Table of Room-sprite Elements.

        Table of Room-Sprite Elements
      room-sprite  origin  image-ID  display-layer  
      Entry-sprite  {0, 0}  Figure of Entry  1  
      Cross-sprite  {95, 48}  Figure of Cross  1  
      Annex-sprite  {302, 80}  Figure of Annex  1  
      Chamber-sprite  {493, 176}  Figure of Chamber  1  

        [The display status of the Chamber-sprite is g-inactive.]


        Section - Icon-sprites

        An icon-sprite is a kind of sprite. The graphlink status of an icon-sprite is g-inactive. The associated canvas of an icon-sprite is graphics-canvas.

        Some icon-sprites are defined by the Table of Icon-sprite Elements.

        Table of Icon-Sprite Elements
      icon-sprite  origin  image-ID  display-layer  scaling factor  
      Player-sprite  {26, -17}  Figure of StandS00  2  0.7500  


        Table of Player Icon Positioning
      room  coordinate  
      Crypt Annex  {26, 97}  
      Cross-Shaped Chamber  {200, 97}  
      Dim Corner  {311, 97}  
      Dark Corner  {311, 226}  
      Untidy Vault  {382, 226}  
      Burial Hall  {591, 242}  


        Section - Mask sprites

        A mask-sprite is a kind of sprite. Some mask-sprites are defined by the Table of Mask Sprites.

        Table of Mask Sprites
      mask-sprite  image-ID  display-layer  origin  
      entrance mask  Figure of Entrance Mask  3  {17, -17}  
      opacity mask  Figure of Opacity Mask  4  {493, 176}  


        Section - Manual canvas framing

        To decide what list of numbers is (coord - a list of numbers) offset to the origin of (win - a graphics g-window):
            let L be a list of numbers;
            let x be entry 1 of coord;
            let y be entry 2 of coord;
            add ( x - (canvas-width of the associated canvas of win / 2) ) to L;
            add ( y - (canvas-height of the associated canvas of win / 2) ) to L;
            decide on L.


        Section - Walking animations

        The walking track is animation track. The image-reel is {Figure of WalkS01, Figure of WalkS02, Figure of WalkS03, Figure of WalkS04}.

        The movement track is an animation track. The animation-callback of the movement track is "[@ deactivate the walking track][@ now the image-ID of the player-sprite is the facing of the direction gone]".

        A direction has a list of figure names called the direction-reel.

        The direction-reel of north is {Figure of WalkN01, Figure of WalkN02, Figure of WalkN03, Figure of WalkN04}.
        The direction-reel of south is {Figure of WalkS01, Figure of WalkS02, Figure of WalkS03, Figure of WalkS04}.
        The direction-reel of east is {Figure of WalkE01, Figure of WalkE02, Figure of WalkE03, Figure of WalkE04}.
        The direction-reel of west is {Figure of WalkW01, Figure of WalkW02, Figure of WalkW03, Figure of WalkW04}.

        A direction has a figure name called the facing.

        The direction gone is a direction variable.
        The destination room is a room variable.

        The facing of north is Figure of StandN00.
        The facing of south is Figure of StandS00.
        The facing of east is Figure of StandE00.
        The facing of west is Figure of StandW00.

        Before window-framing adjustment of the graphics-window:
            if entrance complete is false:
                center the frame of the graphics-window on canvas coordinates {26, 97};
            otherwise:
                center the frame of the graphics-window on canvas coordinates (origin of the player-sprite);
            continue the action.

        After going (this is the basic walking animation rule):
            unless the room gone from is the Burial Hall or the room gone to is the Burial Hall:
                now the direction gone is the noun;
                now the image-reel of the walking track is the direction-reel of the direction gone;
                set up the movement animation for walking to the room gone to;
                animate the walking track as a reel animation targeting the player-sprite at 8 fps, cycling;
                delay input until all animations are complete;
            continue the action.
        
        To set up the movement animation for walking to (R - a room):
            let L be a list of numbers;
            let L be the coordinate corresponding to a room of R in the Table of Player Icon Positioning;
            animate the movement track as a motion animation targeting the player-sprite and ending at L at 8 fps with velocity of 10.
        

        Section - Walking via a waypoint
        
        The waypoint movement track is an animation track. The animation-callback of the waypoint movement track is "[@ set up the movement animation for walking to the destination room]".
        
        After going when the room gone from is the Burial Hall or the room gone to is the Burial Hall:
            now the direction gone is the noun;
            now the destination room is the room gone to;
            now the image-reel of the walking track is the direction-reel of the direction gone;
            animate the walking track as a reel animation targeting the player-sprite at 8 fps, cycling;
            animate the waypoint movement track as a motion animation targeting the player-sprite and ending at {421, 242} at 8 fps with velocity of 10;
            delay input until all animations are complete;
            ignore the basic walking animation rule;
            continue the action.
        

        Section - Entrance animation

        The dungeon entrance track is an animation track. The animation-callback is "[@ deactivate the walking track][@ now the image-ID of the player-sprite is Figure of StandS00][@ now entrance complete is true]".

        Entrance complete is a truth state variable.

        When play begins:
            say "You are Pelón, vampire hunter manqué.[paragraph break]You stand at the entrance to a foul fiend's crypt. Fingering your sharpened stake, you admire its pointy shadow it casts in the morning sun. Today is the day you take up the mantle you were destined to wear--Scourge of the Vampyr![paragraph break]Press any key to descend into the crypt.";
            wait for any key in the main-window;
            say "You step down into the cool damp of the staircase...";
            animate the default track as a zooming animation targeting the player-sprite and ending at 1.0000 at 8 fps with duration 4 frames;
            animate the walking track as a reel animation targeting the player-sprite at 8 fps, cycling;
            animate the dungeon entrance track as a motion animation targeting the player-sprite and ending at {26, 97} at 8 fps with velocity 10;
            delay input until all animations are complete;
            clear the main-window.

        
        Section - Lighting

        The lighting track is an animation track. The easing is the circular easing out rule. The animation-callback is "[@ activate the Chamber-sprite]".

        Understand the command "light" as something new. Understand "light [something]" as switching on.

        Instead of switching on the lamp in the Burial Hall:
            say "You ease the wick out of the base. As the flame flickers to life, the details of the room emerge.";
            deactivate the opacity mask;
            animate the default track as a flicker animation targeting the Chamber-sprite at 18 fps with a duration of 20 frames, randomized;
            animate the lighting track as a fade animation targeting the Chamber-sprite and using the black-fader from 80 % to 0 % at 18 fps with a duration of 20 frames;
            delay input until all animations are complete;
            now the lamp is lit.
        
        Understand "extinguish [something]" as switching off.
        
        Instead of switching off the lamp in the Burial Hall:
            say "You turn down the flame. ";
            animate the lighting track as a fade animation targeting the Chamber-sprite and using the black-fader from 0 % to 75 % at 18 fps with a duration of 8 frames;
            delay input until all animations are complete;
            activate the opacity mask;
            say "The lamp is extinguished.";
            now the lamp is unlit;
            follow the window-drawing rules for the graphics-window.
        
        Instead of switching on the lamp:
            say "You can see well enough thanks to the vents near the ceiling. Better save the oil until you need it."


        Section - World

        The player carries a stake and a lamp. The lamp is a device. The lamp can be lit or unlit. The lamp is unlit.

        Crypt Annex is a room. "The stairs open onto a narrow rectangular hall of vaulted stone. There's no need to fire up the lamp, at least not yet: rectangular sidelights at ground level let in just enough of the day to see by.[paragraph break]At the south end of the room, a hallway leads east."

        Instead of going north in the Annex:
            if we have examined the sarcophagus:
                now the image-reel of the walking track is the direction-reel of north;
                now the animation-callback of the dungeon entrance track is "[@ deactivate the walking track]";
                animate the default track as a fade animation targeting the graphics-window and using the black-fader from 0 % to 100 % at 8 fps with a duration of 20 frames;
                animate the walking track as a reel animation targeting the player-sprite at 8 fps, cycling;
                animate the dungeon entrance track as a motion animation targeting the player-sprite and ending at {26, -17} at 8 fps with a duration of 20 frames;
                now the animation-callback of the default track is "[@ now the associated canvas of the graphics-window is the g-null-canvas]";
                delay input until all animations are complete;
                end the story saying "You have failed to slay the vampire!";
            otherwise:
                say "You're not leaving until you've impaled the fiend."
            
        Instead of going up in the Annex:
            try going north.

        Cross-Shaped Chamber is east of Annex. "You step into a small chamber built in the shape of an Andean cross. Come to think of it, you wish you'd remembered your silver crucifix...[paragraph break]The hall continues to the east."

        Dim Corner is east of Cross-Shaped Chamber. "The hallway turns south here."

        Dark Corner is south of Dim Corner. "The hallway turns again, back to the east, and opens just ahead into a wider space. The sidelights above continue to cast a dim light."

        Untidy Vault is east of Dark Corner. "This is a rather untidy vaulted chamber. You can climb over the rubble to enter the hole that's been punched through the wall to the east."

        Burial Hall is east of Untidy Vault. "The lamp reveals a large chamber. Pillars flank a wide central aisle and disappear into the gloom above. There are no other exits except for the hole to the west by which you entered.[if we have not examined the sarcophagus][paragraph break]Hm, the lack of light from outside would make this a perfect hideaway for the villainous vamp![end if]". The hall is dark.

        After looking in the Hall when we have examined the sarcophagus:
            say "There is nothing to do but to return to the surface. You will slay no undead today.";
            continue the action.

        The sarcophagus is a container in the hall. "A large stone sarcophagus lies open in a niche at the east end of the chamber." The sarcophagus is fixed in place.

        The description of the sarcophagus is "The sarcophagus is empty. The fiend is not here! Even the earth from his home burial ground has been removed.[paragraph break]He has moved on. You are too late, Pelón!"

        Instead of searching the sarcophagus:
            try examining the sarcophagus.

        The description of the player is "[if we have not examined the sarcophagus]You are fearsome and optimistic[otherwise]Pelón is sad[end if]."


        Section - Image credit

        Report requesting the story file version:
            say "The images used in this demo come courtesy of:[paragraph break] - Sean Howard, via his Free Pixel Project (http://www.squidi.net/pixel/index.php), released under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.[line break] - David E. Gervais (http://pousse.rapiere.free.fr/tome/), released under Creative Commons Attribution 3.0 Unported License."