Lerc: moved Simple animation to Simple Animation

2012-01-31T01:27:06Z

moved Simple animation to Simple Animation

Lerc: Created page with "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 horizo..."

2012-01-30T03:32:35Z

Created page with "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 horizo..."

New page

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]]

← Older revision	Revision as of 01:27, 31 January 2012
(No difference)

Simple Animation - Revision history

Lerc: moved Simple animation to Simple Animation

Lerc: Created page with "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 horizo..."