CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制

本次引擎2.0.5

编辑工具VSCode

目标:小小PK(一)

先亮出场景与素材。

背景图与地面是官方教学用的。

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第1张图片

主角跟敌人是一套帧动画(淘宝淘的)。

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第2张图片

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第3张图片

第一步:新建动画文件到Clips文件夹。

(利用动画编辑器,属性为cc.spriteFrame,每隔0.5秒左右切一帧)

这三个就是主角的3个动作,给出演示。

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第4张图片

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第5张图片

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第6张图片

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第7张图片

以上3个动画为移动,攻击一次,死亡一次。

好了,接下来让我们写一下控制脚本。

新建main.js与player.js

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第8张图片

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第9张图片

对按键处理:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第10张图片

实现效果:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第11张图片

接下来搞个移动动画:

在player.js中写好方法:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第12张图片

好了,接下来要注意下,按键一直按下,如果不做开关,就会一直执行play动画。

会卡住,所以做个开关。

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第13张图片

然后在main.js中调用:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第14张图片

松开就停止动画:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第15张图片

看下效果:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第16张图片

同理,我们看一下攻击动画与跳跃动画:

先是攻击:(单次的动画无需开关,不像移动动画,是循环的)

player.js

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第17张图片

main.js

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第18张图片

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第19张图片

效果:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第20张图片

然后加入跳跃与次数限制:

这里用了cc.callFunc来控制只能跳一下,方法很多,不限这种。

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第21张图片

然后在main.js中加入:

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第22张图片

好了。

看!!!

CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制_第23张图片

Get了吗?

 

加我QQ群:(博客里面的项目,群文件里都有哦)

706176551

我们一起学习!

 

O(∩_∩)O~~

你可能感兴趣的:(CocosCreator之KUOKUO带你做小小PK(一)主角帧动画与控制)