enchant.js | S example

Animation

Download starter project

Rotation

• Enchant.js lets you rotate images.

• Rotations can be in response to user events.
• Careful image selection/design is required for this to be convincing.

• Rotations can also be ongoing.
• Again, image selection/design is required for this to be convincing.

Scaling

• Scaling can be used to make a sprite shrink or grow in size.
• Shrinking usually works better than growing.

• When scaling is modulated over time, animation results.

Scaling in one dimension

Scaling in one dimension can be used for some interesting effects.

Turning

• Scaling to -1.0 will mirror an image.
• This can be used to simulate turning.

Spinning on an axis

• Stepping though one-dimensional scaling between -1.0 and 1.0 gives the illusion of a flat object spinning about an axis.
• The easiest way to do this is with some trigonometry.
• Works best with symmetric images.

Using multiple images

• You can animate a sprite by swapping out the image associated with it.

• While this works, it can quickly get unmanageable.
• If you have a lot of sprites that use a lot of images, you will have a lot of files and have to remember how they are named, etc.

• A better approach is to glue all the images associated with a sprite into one file and then tell the sprite to show only the relevant part of the composite image.
• We have rewritten the example above using the following single image (a sprite sheet) that has three subimages (or frames.):
  
• In enchant.js, you select the desired subimage using a sprite's frame property.
  • Frame numbers start from 0 (zero).

Automatic multi-image sprite animation

This example was adapted from McInnis, Brandon, Ryo Shimizu, Hidekazu Furukawa, Ryohei Fushimi, Ryo Tanaka, and Kevin Kratzer. "Basic Features of enchant.js." In HTML5 game programming with enchant.js. Berkely, Calif.: Apress, 2013. 63-67, and uses images that are not licenced for unlimited use. As such, it may be subject to copyright or other intellectual property conditions that are different from the other resources used here.

• Sprite sheets can be two dimensional as well.
• In the example below, we use images from the following two-dimensional spritesheet:
  
• In enchant.js, the frames are numbered sequentially (starting from zero) even though the frames appear in a two-dimensional format.