【Cocos Creator 实战教程(2)】——天天酷跑(动画、动作相关)

lili

发布日期: 2018-11-22 14:10:27 浏览量: 1752
评分:
star star star star star star star star star star
*转载请注明来自write-bug.com

一、涉及知识点

  1. 添加背景动画
  2. 添加人物动作
  3. 碰撞检测

二、步骤

2.1 准备工作

新建一个项目,这回在资源管理器新建一个animation文件夹,用来存放节点动画。

同时,将背景图拉上,这样背景图动起来时,就相当于人物相对位置再移动,跑了起来。

2.2 背景动画——让背景动起来

为背景节点添加滚动动画 。

首先在animation新建一个animation clip取名为bg_roll。

其次为背景节点添加animation组件(在其他组件中),并将bg_roll添加进去。

然后选择动画编辑器编辑动画。

这样我们就得到了一个关键帧。

这里将一下关键帧的作用。

动画是由一帧一帧的图片构成的,而我们指定了属性的关键帧后,就知道如何控制动画序列的中间步骤。

例如背景滚动,只需要指定初始位置和结束位置作为关键帧,而人物动作则有多个关键帧。

最后选上play on load默认自动播放,这样背景就滚动起来了。(记得时间间隔久一点,可以滚动的慢一点)

2.4 大圣动画

这里我们要使用的的是动态加载图片,属性选择cc.spriteframe

然后我们把要加载的图片拖进来,这里需要注意的是因为是一系列的图片,所以我们最后是生成了一张plist图集,制作方法https://docs.cocos.com/creator/manual/zh/asset-workflow/atlas.html

接着我们创建关键帧并把大圣跑动的一张一张图片拖入到动画区,最后调整wrapMode为loop让这个动画循环播放。

2.3 导弹动画

这里我们要添加两个Clip,一个是高空导弹,一个是低空导弹 。这时属性就要选择position因为位置(x,y)不同。这节课我们一共用到了三种动画属性,其实还有很多种属性,大家可以查询官网自己学习。

2.4 为碰撞检测添加事件

这里要先讲一下概念。

虽然我们选择背景为静止坐标系时,大圣和导弹都在相对移动,但是其实在制作过程中,我们的大圣并没有移动,而是背景和导弹在移动。

所以我们想要选择导弹在大圣附近那几帧图片时,只需把大圣作为静止坐标系让导弹移动。

具体做法便是选中Bomb然后播放动画等到导弹在大圣附近时停止,插入事件,添加碰撞检测。

2.5 编写脚本添加动作

Game.js

  1. cc.Class({
  2. extends: cc.Component,
  3. properties: {
  4. king:{
  5. default:null,
  6. type:cc.Node,
  7. }
  8. },
  9. onLoad: function () {
  10. var self = this;
  11. //左侧蹲,右侧跳
  12. this.node.on('touchstart',function(event){
  13. var visibleSize = cc.director.getVisibleSize();
  14. if(event.getLocationX()<visibleSize.width/2){
  15. self.king.getComponent('King').down();
  16. }else{
  17. self.king.getComponent('King').jump();
  18. }
  19. });
  20. //左侧松手就恢复跑的状态
  21. this.node.on('touchend',function(event){
  22. var visibleSize = cc.director.getVisibleSize();
  23. if(event.getLocationX()<visibleSize.width/2){
  24. self.king.getComponent('King').downRelease();
  25. }else{
  26. // self.king.getComponent('King').jump();
  27. }
  28. });
  29. },
  30. });

King.js

  1. cc.Class({
  2. extends: cc.Component,
  3. properties: {
  4. // 主角跳跃高度
  5. jumpHeight: 0,
  6. // 主角跳跃持续时间
  7. jumpDuration: 0,
  8. //主角状态
  9. state:'run',
  10. },
  11. //跑
  12. run:function(){
  13. this.getComponent(cc.Animation).play('king_run');
  14. this.state = 'run';
  15. },
  16. //跳
  17. jump:function(){
  18. if(this.state == 'run'){
  19. this.state = 'jump';
  20. this.getComponent(cc.Animation).stop();
  21. this.node.runAction(cc.sequence(cc.jumpBy(this.jumpDuration, cc.p(0,0), this.jumpHeight, 1),
  22. cc.callFunc(function() {
  23. this.run();
  24. }, this)));
  25. }
  26. },
  27. //弯腰跑
  28. down:function(){
  29. if(this.state == 'run'){
  30. this.state = 'down';
  31. this.node.runAction(cc.scaleTo(0.05, 1, 0.5));
  32. }
  33. },
  34. //腰累了
  35. downRelease:function(){
  36. if(this.state == 'down'){
  37. this.node.runAction(cc.sequence(cc.scaleTo(0.05, 1, 1),
  38. cc.callFunc(function() {
  39. this.run();
  40. }, this)));
  41. }
  42. },
  43. });

2.6 完善碰撞检测脚本

Bomb.js

  1. cc.Class({
  2. extends: cc.Component,
  3. properties: {
  4. king:{
  5. default:null,
  6. type:cc.Node,
  7. }
  8. },
  9. //判断高空导弹来时,猴哥是否蹲下(响应之前设置的帧事件)
  10. judgeDown:function(){
  11. if(this.king.getComponent('King').state == 'down'){
  12. console.log("down---------------------");
  13. }else{
  14. cc.director.loadScene('Over');
  15. }
  16. },
  17. //判断低空导弹来时,猴哥是否跳起
  18. judgeJump:function(){
  19. if(this.king.getComponent('King').state == 'jump'){
  20. console.log("jump---------------------");
  21. }else{
  22. cc.director.loadScene('Over');
  23. }
  24. },
  25. onLoad: function () {
  26. let self = this;
  27. //每隔2秒随机发射高空和低空导弹
  28. this.schedule(function(){
  29. if(Math.random()>0.5){
  30. this.getComponent(cc.Animation).play('bomb_high');
  31. }else{
  32. this.getComponent(cc.Animation).play('bomb_low');
  33. }
  34. },3);
  35. },
  36. });

2.7 游戏结束

Over.js

  1. cc.Class({
  2. extends: cc.Component,
  3. properties: {
  4. },
  5. reTry: function(){
  6. cc.director.loadScene('Game');
  7. },
  8. onLoad: function () {
  9. },
  10. });

3. 注意

  1. 部分资料素材来源于网络。
  2. 要自学事件响应的代码,最好有js基础,多参考文档。
  3. 跳跃和下蹲在现实中会另做一套动画,这里直接使用了改变位置和压缩图片的方法。想想如何替换成另一套动画吧。(提示:动画该开始并不加载(play on road),触屏事件响应时再加载,欢迎在评论区附上心得)
  4. 这次的碰撞检测做的很简单,实际上还有蒙版法,像素点法等一系列方法,之后会给大家详细介绍。
  5. 初次写博客请大家多砸评论。
上传的附件 cloud_download cocos creator第二课.zip ( 7.44mb, 56次下载 )
eject