cocos creator快速上手《摘星星》官方教程续|星月爸爸

大家通过学习官方快速上手教程，还没学过的小伙伴看这里：

https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

如果顺利完成的话，已经实现了一款有核心玩法、激励机制、失败机制、有音效的合格游戏。

当然看到Cocos creator 的官方教程最后，官方的小伙伴给在总结中给大家留下了一些课后练习题和课后练习题的标准答案，下载地址:

https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/polished_project.zip

有些小伙伴可能不能访问GitHub或者下载不成功，可以在给我留言，我把它搬运到国内地址。

其中有一些内容在快速上手教程中完全没有提及的内容，比如给节点设置点击事件，制作动画预制资源等。虽然有了答案，但是不知道怎么做，在这里我结合cocos creator的官方答案进行步骤解答，帮助大家更轻松的上手cocos creator。

参考官方的完整项目源码，我为小伙伴们整理一个仅保留完整的素材资源、移除了习题的答案部分、的初始项目，方便大家练习。记得双击资源管理器中的game文件打开场景。

下载地址：

链接：https://share.weiyun.com/5Cvfn85 密码：mozp23

以下是官方的课后练习题，在下面按序号逐个进行解答：

1、加入简单的开始菜单界面，在游戏运行的一开始显示开始按钮，点击按钮后才会开始游戏

思路：通过看题目，添加一个开始按钮，根据前面的学习，大家直接把按钮的素材拖到层级管理器中创建一个节点就成功了，但是点击按钮执行动作，这里需要使用到cocos creator的Button 组件。

实现步骤：

第一步：在场景里面创建一个btn_play的节点

第二步：创建一个Button组件

第三步：配置刚刚创建的Button组件，设置触发点击事件的节点和点击后执行的脚本方法。

2、为游戏失败加入简单的菜单界面，游戏失败后点击按钮才会重新开始。

思路：和添加一个开始按钮的方式是类似的，只是说因为官方没有提供一个重新开始的素材图，因此这里我教小伙伴们用Label节点配合Button组件实现点击重新开始游戏。

实现步骤：

第一步，创建一个Label节点用于配置文字提示

第二步，重命名上一步创建的Label节点，一个好的名字非常重要，方便自己和一起协作的伙伴识别。

第三步，创建Button组件并配置点击事件

3、限制主角的移动不能超过视窗边界

思路：先获取视窗的边界，就是画布的宽度。然后在Player脚本中，更新主角的移动的逻辑位置添加判断即可。

4、为主角的跳跃动作加入更细腻的动画表现

思路：其实就是加入形变逻辑，不过老实说，在手机上真看不出增加多少表现分。

//设置跳跃动作    
    setJumpAction(){
       
        
        //上升
        var jumpUp=cc.moveBy(this.jumpDuration,cc.v2(0,this.jumpHeight)).easing(cc.easeCubicActionOut());
        //下落
        var jumpDown=cc.moveBy(this.jumpDuration,cc.v2(0,-this.jumpHeight)).easing(cc.easeCubicActionIn());
        //音效回调
        var xCallback=cc.callFunc(this.playJumpSound,this);
        
         //加入形变,更细腻的动画表现
        //压瘪
        var squash=cc.scaleTo(this.squashDuration,1,0.6);
        //拉升
        var stretch=cc.scaleTo(this.squashDuration,1,1.2);
        //恢复正常
        var squashBack=cc.scaleTo(this.squashDuration,1,1);
        
      //不断重复
      return cc.repeatForever(cc.sequence(squash,stretch,jumpUp,squashBack,jumpDown,xCallback));
    },

5、为星星消失的状态加入计时进度条

思路：很尬尴呀，虽然官方文档中有表述：以上这些方向都得到改善的游戏版本可以下载 进化版项目 来参考和学习，这里就不再赘述了。但是实际上，在进化版项目中并未看到计时进度条的素材或相关逻辑。所以星月爸爸在这里大胆的弄一个自己理解的计时进度条。点击查看。

6、收集星星时加入更华丽的效果

思路：华丽的效果就是说要有动画特效了。因此这里讲的就是如果实现一个简单的得分特效。这个特效在游戏中经常出现，很典型一个特效，官方的实现也很值得学习，内容较多，星月爸爸尽量讲透彻，让小伙伴们一次掌握，终身受益。

实现步骤：

第一步，为了更方便看效果，我们在Cocos Creator界面按下Ctrl+N,新建一个场景，如果遇到询问是否保存game场景，选择保存即可。在新键的场景中，我们在鼠标右击层级管理中的Canvas创建一个用来做动画预制资源的空节点scoreFX,并在scoreFX下面创建一个承载动画的空节点animRoot。

第二步，添加计分动画部分的score，设置文本内容为：+1，代表每次摘去一个星星得1分，接着设置字体颜色:#F8DD4D，并设置字体。

第三步，编辑score的位移动画，通过修改每一帧的position属性实现动画效果，通过cocos creator的动画编辑器，实现非常简单。

<1>在动画编辑器中，选中score，然后为其添加position属性

<2>插入position属性的第一帧

<3>插入position属性的第二帧，并修改该帧的position属性的值。

<4>经过上面3步，我们已经完成了score节点位移动画，现在是看成绩的时候了，点击播放按钮，让我们预览动画效果。

第四步，score的得分提示：+1，总不能一直显示在游戏界面，随着得分越多，会出现许多+1的文字小提示，它们霸住了玩家的屏幕，因此，我们为score设置一个透明度动画，让它逐渐透明至看不见。制作方法和添加position属性一致。

<1>为score添加透明度属性：opacity,然后在0.15秒处插入第一帧。

<2>在0.19秒处插入第二帧，设置opactity值为：51，这是完全透明的过渡帧，让动画看起来自然。

<3>在0.20秒处，为opactity属性插入最后一帧，设置opacity值为0，让score节点完全透明。

第五步，score得分的文字提示动画部分全部完成了。但是至此，还不能称得上是一个华丽的效果，为了实现这个效果，官方为我们提供了爆炸动画素材，就是fx文件夹里面的图片。

我们要用它们实现一个华丽的爆炸特效。

<1>首先在animRoot下面创建一个空节点：pop，用来承载我们的爆炸动画。接着添加Sprite组件，用来装载动画文件。

<2>接着打开动画编辑器，选中pop节点，添加cc.Sprite.spriteFrame属性

<3>在0秒处，插入关键帧，把首张爆炸图fx_coinxiaosh_00拖入Sprite组件的Sprite Frame属性。

<4> 我们用同样的方法，在0.03秒处插入关键帧，把fx_coinxiaosh_01文件拖到Sprite Frame；在0.04秒处插入关键帧，把fx_coinxiaosh_02文件拖到Sprite Frame；在0.05秒处插入关键帧，把fx_coinxiaosh_03文件拖到Sprite Frame；在0.06秒处插入关键帧，把fx_coinxiaosh_04文件拖到Sprite Frame；在0.07秒处插入关键帧，把fx_coinxiaosh_05文件拖到Sprite Frame；

<5>爆炸动画已经完成了，小伙伴们可以点击播放按钮，预览动画效果。是不是感觉搜的一样，动画就播放完了，完全没看清楚，如果想要动画播放慢一点，我们只需要修改Sample值，把60改成25试试。最后爆炸播放完了，当然也要隐藏起来，所以，我们又要用到透明度opacity属性，把动画设置为完全透明。我们在爆炸动画播完的下一帧，也就是0.08秒处，插入opactity属性第一帧，此时opacity值默认是255。然后再0.10秒处，插入第二帧，设置opactity值为0，让pop节点完全透明。

第六步，动画完成了，我们现在把动画特效变成预制资源供后续使用。

第七步，我们回到game场景，双击资源管理中的game文件，此时提示：Untitled 场景已经修改，是否保存？因为是用来制作动画特效的临时场景，因此我们选择：不要保存。现在如何使用刚刚制作的华丽爆炸动画特效，需要配置一个简单的播放脚本，首先再资源管理器中双击刚刚创建的动画预制资源文件：scoreFX，把资源管理器中的ScoreFX脚本拖到层级管理scoreFX节点，然后把AnimRoot节点拖到scoreFX属性的anim窗口。最后依次点击场景编辑器中的保存按钮和关闭按钮。

ScoreFX.js
【
cc.Class({
    extends: cc.Component,

    properties: {
        anim: {
            default: null,
            type: cc.Animation
        }
    },
    
    play(){
        this.anim.play('score_pop');
    }
});
】

第八步，打开Game.js脚本，在gainScore方法中添加如下，这样当收集到星星的时候，就会出现华丽的爆炸特效咯。

7、为触屏设备加入输入控制

思路：现在触摸屏手机是主流机型，因此触摸控制游戏是现在大部分游戏的必备功能。现在爆火的全民漂移3d就是一款触摸操作赛车的合成向游戏。因此这段脚本逻辑，小伙伴们完全可以当作标配记下，以后在自己的游戏中使用。

 onLoad() {
        //禁用节点
        this.enabled=false;
        this.xSpeed=0;
      
       //添加键盘监听
      cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown,this);
      cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp,this); 
      
         //初始化触摸事件监听
        var touchReceiver = cc.Canvas.instance.node;
        touchReceiver.on('touchstart', this.onTouchStart, this);
        touchReceiver.on('touchend', this.onTouchEnd, this);
    },
    

    //触摸开始
     onTouchStart (event) {
        //获取触摸点位置
        var touchLoc = event.getLocation();
        //根据触摸点的x坐标判断位于屏幕左侧还是屏幕右侧
        if (touchLoc.x >= cc.winSize.width/2) {
            this.accLeft = false;
            this.accRight = true;
        } else {
            this.accLeft = true;
            this.accRight = false;
        }
    },

    //触摸结束
    onTouchEnd (event) {
        this.accLeft = false;
        this.accRight = false;
    },