当前位置:朝夕网 » 数码科技 » HTML5画布类库EaselJS生成鼠标控制的游戏动画人物

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

第一节:生成游戏动画人物效果本节中将使用和生成HTML5游戏中的动画人物形象使用定义动画帧相关的图片,并且使用定义动画人物最后调用来生成动画效果第二节:生成人物跟随鼠标移动的效果控制tick方法,我们可以快速的生成动画人物跟随鼠标的效果,只

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

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

相关演示

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

控制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();}

相关演示

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

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

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();}

相关演示

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

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

shape=newcreatejs.Shape();shape.graphics.setStrokeStyle(10).beginStroke("#9fa56e");stage.addChild(shape);

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

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

相关演示

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

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

本文到此结束,希望对大家有所帮助!

免责声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如有侵权行为,请第一时间联系我们修改或删除,多谢。朝夕网 » HTML5画布类库EaselJS生成鼠标控制的游戏动画人物