HTML5画布类库EaselJS生成鼠标控制的游戏动画人物

该博客介绍了如何使用EaselJS库在HTML5画布上创建游戏动画人物,并实现人物跟随鼠标移动及控制动画效果。通过SpriteSheet和Sprite生成动画人物,利用tick方法调整人物坐标,使用play和gotoAndStop控制动画播放和暂停,以及绘制鼠标移动路径。
摘要由CSDN通过智能技术生成

 

第一节:EaselJS生成游戏动画人物效果

本节中将使用SpriteSheet和Sprite生成HTML5游戏中的动画人物形象使用SpriteSheet定义动画帧相关的图片,并且使用Sprite定义动画人物最后调用Ticker来生成动画效果

相关演示

第二节:EaselJS生成人物跟随鼠标移动的效果

控制tick方法,我们可以快速的生成动画人物跟随鼠标的效果,只需要设置动画人物的坐标改变即可,如下:

  1. function tick(){
  2. //charactor.x = stage.mouseX - characterWidth/2;
  3. //charactor.y = stage.mouseY - characterHeight/2;
  4. //这里使用递增效果来动画设置人物的移动坐标,大家可以修改参数改变移动速度
  5. charactor.x +=(stage.mouseX - charactor.x - characterWidth/2)*0.05;
  6. charactor.y +=(stage.mouseY - charactor.y - characterHeight/2)*0.05;
  7. stage.update();
  8. }
 

相关演示

第三节:EaselJS控制游戏人物动画效果

使用Sprite的相关方法play和gotoAndStop可以控制游戏人物的动画效果播放或者暂停,如下:

  1. if((Math.abs(charactor.x -(stage.mouseX - characterWidth/2))<1)
  2. &&(Math.abs(charactor.y -(stage.mouseY - characterHeight/2))<1)){
  3. charactor.gotoAndStop(0);
  4. }else{
  5. charactor.play();
  6. }
 

相关演示

第四节: EaselJS生成鼠标移动路径图形

使用相关的Shape和Graphics,可以帮助生成鼠标移动的路径,如下:

  1. shape =new createjs.Shape();
  2. shape.graphics.setStrokeStyle(10).beginStroke("#9fa56e");
  3. stage.addChild(shape);
 

同时需要在tick方法中调用lineto,如下:

  1. shape.graphics.lineTo(stage.mouseX, stage.mouseY);
 

相关演示

了解课程详细,请阅读相关轻视频课程,地址如下:

HTML5画布类库EaselJS生成鼠标控制的游戏动画人物

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值