Enchant.js Guide

by Patrick Casao, Cal Poly


03 Animation

The codeleap for this section may be accessed here. In this section, we will discuss a few different ways you can animate a sprite. Following this explanation, we will implement a few of the methods.

Subsections
01 A Word on 'enterframe'
02 Animating a Sprite Using its Attributes
03 Animating a Sprite Using Frames


03.01 - A Word on ‘enterframe’

For our purposes, animation depends on variables changing. By this I mean that for a sprite to move across the screen from left to right, its attribute x must keep increasing.

To implement this effect, we will be using the class’s onenterframe function. Code within this function will be executed on every turn or “frame”. In the context of animation we can use this to move a sprite across the screen, have it fade in and out, or even cycle through different frames on the sprite sheet for some traditional animation.


03.02 - Animating a Sprite Using its Attributes (x, y, opacity, rotate)

Now that we understand the ‘enterframe’ function a little more, let’s actually try using it to animate a sprite. We’ll implement it in our example code. (Once again, you can access it from here.) Confirm the attribute animation works by clicking RUN and observing the sprite changing. The sprite should move from left to right, spin, and fade away as it reaches the other side of the screen.

CODE EXAMPLE: Attribute Animation

We're going to use a character sprite sheet that includes a standing frame, a walk cycle, and an "ouch" frame. For now, let's just focus on the attributes. Look under 03.2 Animated Sprite Class. You'll see our bear class, which has already been initialized.

Let's add some code that alters the sprite's attributes. In the onenterframe function under 03.2 Sprite Animation Attributes, add:

		
this.x += 4;
this.opacity -= .01;
this.rotate(15);
        
if(this.x > stgWidth){
	this.scene.removeChild(this);
}
	
The sprite should move from left to right, rotate, and fade away as it reaches the other side of the screen. Once it reaches the other side of the stage, it should be removed from the scene. Confirm the attribute animation works by clicking RUN and observing the sprite changing.

Now that you’ve animated a sprite by altering some of its existing attributes, try and create some interesting effects by using some of its other attributes.


03.03 - Animating a Sprite Using Frames

As mentioned before a sprite sheet is an image containing many sprites. Sprites are spaced evenly across the sheet in order to create a consistent animation. This is especially important for something like a walk cycle, which loops through several frames in order to create the illusion that a sprite is walking. An example of a walk cycle is demonstrated below in Figure 3.01.



Figure 3.01: Walk Cycle

We'll be using the walk cycle of the sprite sheet chara1.png.

CODE EXAMPLE: Frame Animation

There are actually two different ways to cycle through frame animations. The first involves setting the frames according to conditions in the onenterframe function. The second involves setting the frame cycle in the initialize function.

Let's start by trying out the first method. Under 03.3 Frame Animation, add:

if(this.frame >= 7){
	this.frame = 5;
}
else{
	this.frame++;
}		
	
This method increments the animation frame on every turn, and sets it to the first frame of the animation once it's reached the end of the cycle.

Confirm the frame animation works by clicking RUN and observing the sprite changing. The sprite should move from left to right while going through the different frames of the walk cycle.

Now let's try implementing the other method. Begin by removing the section of code we added in the previous example. The onenterframe function should only contain the code to move the sprite across the screen and the code that removes it once it's reached the end of the stage.

In the initialize function, under 03.3 Alternative Frame Animation add:

this.frame = [5, 6, 7];
	
This simply sets the sprite to cycle through frames 5, 6, and 7. If you want to slow down the animation, just repeat the frames you want to see longer. If you only want an animation to loop once, make null the last element in the array.

Confirm the frame animation works by clicking RUN and observing the sprite changing. The sprite should still move from left to right while going through the different frames of the walk cycle.
In the next section we will discuss Input.