EaselJS:制作卡通人物四方行走HTML5动画

在线演示:http://blog.cxycs.com/demos/girl/

源码下载:http://blog.cxycs.com/demos/girl.rar


学习HTML5基础有一段时间,但一直没有入门,直到阅读这篇文章《创造一款成功HTML5游戏的完整指南》,然后知晓了EaselJS框架的存在。

就学习一个新的领域时,也许先学习框架,再入手基础,可能更有效。


下面是一个小女孩的四方行走的代码实现:


首先,要了解几个基本概念:

canvas 画板  HTML5标签

stage  舞台  在canvas上面提供舞台让动画精灵演绎

sprite 精灵  动画精灵

girl   对象  具体的动画精灵

最终可以理解为 canvas是个歌剧院,stage是个舞台,sprite是演员,而girl是演员中的一员,所有sprite都在这个stage上面演绎动画。


接下来创建一个项目,创建一个HTML5文档,创建一个ID为girl的DIV

<!DOCTYPE html>
<html>
<head>
<title>HTML5 动画  小女孩四方行走</title>
<meta charset="utf-8"/>
<style type="text/css">
body{
background-color: #202020;
color:#e0e0e0;
}
canvas {
border: solid 1px #e0e0e0;
}
</style>
</head>
<body>
<h1>第一个HTML5动画</h1>
<table>
<tr>
<td valign="top">
<h2>girl</h2>
<p>长按键盘上下左右 ↑ ↓ ← →</p>
</td>
<td><canvas id="girl" width="500" height="500"></canvas></td>
</tr>
</table>
</body>
</html>

在</body>标签前加载js文件

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/createjs-2013.12.12.min.js"></script>
<script src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript">
var Graphics = createjs.Graphics;
var canvas = document.getElementById("girl");
var stage = new createjs.Stage(canvas);
var regX = 0;
var regY = 0;
var girl;
var sprite;

window.onload = function(){
girlInit();
}

function girlInit(){
var opts = {
framerate: 8,
images: ["images/girl.png"],
frames: {width:108, height:108, count:64, regX:regX, regY:regY},
animations: {
frontStand:{
frames: [0]
},
         front: {
             frames: [0,1,2,3,4,5,6,7]
         },
         leftStand:{
         frames: [8]
         },
         left: {
         frames: [8,9,10,11,12,13,14,15]
         },
         rightStand:{
         frames: [16]
         },
         right: {
         frames: [16,17,18,19,20,21,22,23]
         },
         backStand:{
         frames: [24]
         },
         back: {
         frames: [24,25,26,27,28,29,30,31]
         },
         leftFront: {
         frames: [32,33,34,35,36,37,38,39]
         },
         rightFront: {
         frames: [40,41,42,43,44,45,46,47]
         },
         leftBack: {
         frames: [48,49,50,51,52,53,54,55]
         },
         rightBack: {
         frames: [56,57,58,59,60,61,62,63]
         }
     }
}
sprite = new createjs.SpriteSheet(opts);//创建精灵
girl = new createjs.Sprite(sprite, "frontStand");//创建一个精灵girl
stage.addChild(girl);//在画板的舞台上显示精灵girl
//createjs.Ticker.setFPS(16);
createjs.Ticker.addEventListener("tick", tick);
}

function girlSprite(direction){
girl.gotoAndPlay(direction);
}

function tick(event){
var speed = event.delta/4000;
if (currentDirection == "right") {
var position = girl.x+200*speed;
var girlW = girl.getBounds().width*girl.scaleX;
girl.x = (position >= 420) ? 420 : position;
}else if(currentDirection=="left"){
if (isNaN(girl.x)) {
girl.x=0;
};
var position = girl.x-200*speed;
var girlW = girl.getBounds().width*girl.scaleX;
girl.x = (position <= -20) ? -20 : position;
}else if (currentDirection=="front") {
var position = girl.y+200*speed;
var girlH = girl.getBounds().height*girl.scaleY;
girl.y = (position >= 392) ? 392 :position;
}else if (currentDirection=="back") {
var position = girl.y-200*speed;
var girlH = girl.getBounds().height*girl.scaleY;
girl.y = (position <= 0) ? 0 :position;
};
    stage.update(event);
}

document.onkeydown = girlAction;
document.onkeyup = girlStand;

var currentDirection = "";

function girlAction(e){
var direction = "front";
switch(e.keyCode){
case 40:
direction = "front";
break;
case 37:
direction = "left";
break;
case 39:
direction = "right";
regX--;
break;
case 38:
direction = "back";
break;
}
if (currentDirection!=direction) {
currentDirection = direction;
girlSprite(direction);
};
}

function girlStand(){
girlSprite(currentDirection+"Stand");
currentDirection="";
}
</script>


 赞(0
成功
相关阅读: