第一节：EaselJS生成游戏动画人物效果
本节中将使用SpriteSheet和Sprite生成HTML5游戏中的动画人物形象使用SpriteSheet定义动画帧相关的图片，并且使用Sprite定义动画人物最后调用Ticker来生成动画效果
相关演示
第二节：EaselJS生成人物跟随鼠标移动的效果
控制tick方法，我们可以快速的生成动画人物跟随鼠标的效果，只需要设置动画人物的坐标改变即可，如下：
-
function tick(){
- //charactor.x = stage.mouseX - characterWidth/2;
- //charactor.y = stage.mouseY - characterHeight/2;
-
- //这里使用递增效果来动画设置人物的移动坐标，大家可以修改参数改变移动速度
-
charactor.x +=(stage.mouseX - charactor.x - characterWidth/2)*0.05;
-
charactor.y +=(stage.mouseY - charactor.y - characterHeight/2)*0.05;
-
-
stage.update();
- }
相关演示
第三节：EaselJS控制游戏人物动画效果
使用Sprite的相关方法play和gotoAndStop可以控制游戏人物的动画效果播放或者暂停，如下：
-
if((Math.abs(charactor.x -(stage.mouseX - characterWidth/2))<1)
-
&&(Math.abs(charactor.y -(stage.mouseY - characterHeight/2))<1)){
-
charactor.gotoAndStop(0);
-
}else{
-
charactor.play();
- }
相关演示
第四节： EaselJS生成鼠标移动路径图形
使用相关的Shape和Graphics，可以帮助生成鼠标移动的路径，如下：
-
shape =new createjs.Shape();
-
shape.graphics.setStrokeStyle(10).beginStroke("#9fa56e");
-
stage.addChild(shape);
同时需要在tick方法中调用lineto，如下：
-
shape.graphics.lineTo(stage.mouseX, stage.mouseY);
相关演示
了解课程详细，请阅读相关轻视频课程，地址如下：
