HTML 5游戏：EaselJS创建Canvas动画

When you want to write casual games using the HTML5 Canvas element, you’ll need to find a way to handle your sprites. There are several libraries available to help you writing games such as ImpactJS, CraftyJS and so on. On my side, I’ve decided to use EaselJS which has been used to writePiratesLoveDaisies: an HTML5 Tower Defense game. This awesome library works in all modern HTML5 browsers and could even help you building a Windows 8 Metro Style Applications HTML5 games.

For instance, if you’re running the Windows 8 Consumer Preview, you can install the Pirates Love Daisies game from the Windows Store here: Pirates Love Daisies for Windows 8

In this first article, we’re going to see how to use your existing sprite elements and animate them.

Pour ceux qui pratiquent la langue de Molière, vous trouverez une version française ici : Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

This article is the first of a serie of 3:

- HTML5 Gaming: animating sprites in Canvas with EaselJS
- HTML5 Gaming: building the core objects & handling collisions with EaselJS
- HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS


On the official EaselJS site, you’ll find some interesting samples and some basic documentation. We will use the sprites sample as a base. We will use also the resources available in the XNA 4.0 Platformer sample. For those of you who are following my blog, you may remember that I love playing with this sample. Here are the previous attached articles:

- Windows Phone 7 Platformer Starter Kit for XNA Studio 4.0
- Silverlight 4 XNA Platformer Level Editor for Windows Phone 7

The platformer sample have been updated in the meantime by our XNA team and is available here for Xbox 360, PC & Windows Phone 7: App Hub – platformer . You can download it to play with it and extract the sprites to use them with EaselJS.

In this article, we’re going to use these 2 PNG files as source of our sprite sequences:

Our monster running:

View Code

// Idle sequence of the monster
var spriteSheetIdle = new SpriteSheet({
images: [imgMonsterAIdle],
frames: { width: 64, height: 64, regX: 32, regY: 32 },
animations: {
idle: [0, 10, "idle", 4]
}
});

bmpAnimationIdle = new BitmapAnimation(spriteSheetIdle);

bmpAnimationIdle.name = "monsteridle1";
bmpAnimationIdle.x = 16;
bmpAnimationIdle.y = 32;
Now, in the tick() method, we need to stop the walking animation once we’ve reached back the left side of the screen and to play the idle animation instead. Here is the code which does that:

if (bmpAnimation.x < 16) {
// We've reached the left side of our screen
// We need to walk right now
bmpAnimation.direction = 90;
bmpAnimation.gotoAndStop("walk");
stage.removeChild(bmpAnimation);
bmpAnimationIdle.gotoAndPlay("idle");
stage.addChild(bmpAnimationIdle);
}

You can test the final result here:

You can also browse this sample here: easelJSSpritesTutorial03 if you’d like to view the complete source code.

That’s all folks! But if you want to go further, you can read the next part here: HTML5 Gaming: building the core objects & handling collisions with EaselJS which is the second step you need to understand before writing a complete platform game detailed in the third article.

David

Note : this tutorial has originally been written for EaselJS 0.3.2 in July 2010 and has been updated for EaselJS 0.4. For those of you who read the version 0.3.2, here are the main changes for this tutorial to be aware of:

BitmapSequence is not available anymore in 0.4 and has been replaced by BitmapAnimation

You can now slow down the animation loop of the sprites natively while building the SpriteSheet object

EaselJS 0.4 is now using requestAnimationFrame for more efficient animations on supported browsers (like IE10+, Firefox 4.0+ & Chrome via the appropriate vendors’ prefixes).

摘自:http://blogs.msdn.com/b/davrous/archive/2011/07/21/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspx

// var canvas;
var stage;
var screen_width;
var screen_height;
var bmpAnimation;

var imgMonsterARun = new Image();

function init() {
canvas = document.getElementById("testCanvas");

imgMonsterARun.onload = handleImageLoad;
imgMonsterARun.onerror = handleImageError;
imgMonsterARun.src = "img/MonsterARun.png";
}

function reset() {
stage.removeAllChildren();
Ticker.removeAllListeners();
stage.update();
}

function handleImageLoad(e) {
startGame();
}

function startGame() {
// create a new stage and point it at our canvas:
stage = new Stage(canvas);

// grab canvas width and height for later calculations:
screen_width = canvas.width;
screen_height = canvas.height;

// create spritesheet and assign the associated data.
var spriteSheet = new SpriteSheet({
// image to use
images: [imgMonsterARun],
// width, height & registration point of each sprite
frames: {width: 64, height: 64, regX: 32, regY: 32},
animations: {
walk: [0, 9, "walk"]
}
});

// create a BitmapAnimation instance to display and play back the sprite sheet:
bmpAnimation = new BitmapAnimation(spriteSheet);

// start playing the first sequence:
bmpAnimation.gotoAndPlay("walk"); //animate

// set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
// of animated rats if you disabled the shadow.
bmpAnimation.shadow = new Shadow("#454", 0, 5, 4);

bmpAnimation.name = "monster1";
bmpAnimation.direction = 90;
bmpAnimation.vX = 4;
bmpAnimation.x = 16;
bmpAnimation.y = 32;

// have each monster start at a specific frame
bmpAnimation.currentFrame = 0;
stage.addChild(bmpAnimation);

// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addListener(stage);
Ticker.addListener(window);
Ticker.useRAF = true;
// Best Framerate targeted (60 FPS)
Ticker.setFPS(60);
}

//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
console.log("Error Loading Image : " + e.target.src);
}

function tick() {
// Hit testing the screen width, otherwise our sprite would disappear
if (bmpAnimation.x >= screen_width - 16) {
// We've reached the right side of our screen
// We need to walk left now to go back to our initial position
bmpAnimation.direction = -90;
}

if (bmpAnimation.x < 16) {
// We've reached the left side of our screen
// We need to walk right now
bmpAnimation.direction = 90;
}

// Moving the sprite based on the direction & the speed
if (bmpAnimation.direction == 90) {
bmpAnimation.x += bmpAnimation.vX;
}
else {
bmpAnimation.x -= bmpAnimation.vX;
}

// update the stage:
stage.update();
}
// ]]>