Editing Simple Animation

When loading an image, you have the option of specifying if there are multiple frames of animation in the image.  Often animations will be stored in a single image as a horizontal or vertical strip or even arrayed in a grid.

The <tt>loadImage</tt> function lets you specify how many frames across and down there are in an image.

In this example <tt>loadImage("Gus_Running_Left_Small.png",1,18);</tt> says that the image should be treated as an animation 1 frame wide and 18 frames high. The <tt>drawImage</tt> has an extra parameter to say which frame of animation to use.

<edcode>
var ty=400;
var tx=10;
var dx=3;

var runLeft = loadImage("Gus_Running_Left_Small.png",1,18);
var runRight = loadImage("Gus_Running_Right_Small.png",1,18);

var runAnim = runRight;
var animFrame = 0;

function move() {
  tx+=dx;
  if (tx>600) {
      dx=-3;
      runAnim=runLeft;
  }

  if (tx<30) {
      dx=3;
      runAnim=runRight;
   }

  if (keyIsDown(38)) ty-=3;
  if (keyIsDown(40)) ty+=3;

  animFrame=(animFrame+1)%18;
}

function draw() {
  clear();
  drawImage(runAnim,tx,ty,animFrame);
}

run(move,draw);
</edcode>
[[File:Gus_Running_Left_Small.png|left]] [[File:Gus_Running_Right_Small.png|right]]