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

zhezhongyun 2025-01-17 14:27 34 浏览

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

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

相关演示

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

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

functiontick(){//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=newcreatejs.Shape();shape.graphics.setStrokeStyle(10).beginStroke("#9fa56e");stage.addChild(shape);

同时需要在tick方法中调用lineto，如下：

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

相关演示

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

HTML5画布类库EaselJS生成鼠标控制的游戏动画人物：http://www.gbtags.com/gb/gbliblist/109.htm

HTML5 标签

上一篇：学习使用easelJS类库控制HTML5游戏角色的移动和跳跃
下一篇：通过HTML5和WebGL来制作2D游戏

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?