Cocos Creator之打鼓庆新年（下）

上一篇《Cocos Creator之打鼓庆新年（上）》我们已经把首页场景做完了，今天我们就要开始制作打鼓游戏场景了。

创建并进入游戏场景

在 Scenes 中创建 Game 场景，双击 Game 场景进入游戏场景。

添加背景图

和 Home 场景中一样，我们需要做一下几个步骤：

• 在 Canvas 节点中创建 游戏 空节点；
• 修改 游戏 节点的 Anchor 上的 y 为 0.6445，让截掉的上部分显示出来；
• 在 游戏 空节点上添加 Sprite 组件；
• 然后将 Images 目录中的 game_bg.png 拖到 Sprite 中的 Sprite Frame 中；
• 点击 工具栏 中的 ，打开浏览器进行预览；

添加分数节点

看上面的效果图，左上角有一个分数显示，玩家每点击一次，就加一次相应的分数。

• 在 Canvas 节点中创建 得分 空节点
• 在 得分 节点中添加 Label 节点，重命名为 分数，并在右侧 Label 组件中，修改 String 属性的值为 分数：

• 在 得分 节点中再添加一个 Label 节点，重命名为 0，并在右侧 Label 组件中，修改 String 属性的值为 0

• 最后将位置修改好

添加时间节点

• 在 Canvas 节点中创建 时间 空节点
• 在 时间 节点中添加 Label 节点，重命名为 0:00，并在右侧 Label 组件中，修改 String 属性的值为 0:00
• 最后将位置修改好

添加打鼓娃娃节点

在添加 打鼓娃娃 节点之前，我们需要将打鼓娃娃的动画图集用 TexturePackerGUI 制作出来，制作出来的文件为 click.plist，然后将 click.plist 文件放到 Images 中，和 click.plist 一起放进去的还有对应的图集 click.png。

• 在 Canvas 节点中创建 Sprite 节点，重命名为 打鼓娃娃；
• 从 click.plist 中选取初始状态的帧图片放到 Sprite Frame 中；

打开浏览器预览动效果就是这样的：

添加打击区域节点

• 在 Canvas 节点中创建 Sprite 节点，重命名为 打击区域；
• 将 Images 中的 clickarea.png 添加到 打击区域 的 Sprite Frame 中
• 将节点位置设置好

打开浏览器预览动效果就是这样的：

小结

到这里我们的游戏界面就做完了，现在要开始针对里面的业务逻辑进行开发，主要包括：倒计时、点击打击区域打鼓动画、点击打击区域添加分数

倒计时

• 在 Scripts 目录中添加 CountDown.ts 脚本
• 点击 0:00 节点，将 CountDown.ts 脚本拖到 0:00 右侧的 属性检查器。
• 在 CountDown.ts 添加 time 属性，这样方便在编辑器中修改倒计时的时长。

const {ccclass, property} = cc._decorator;

@ccclass
export default class CountDown extends cc.Component {
    
    //添加 time 属性，方便在编辑器中修改时长
    @property(cc.Integer)
    private time:number = 0;
    //存放 0:00 节点中的 Label 组件
    private nodeLabel:cc.Label;
    
    /*
        在 onLoad 中获取 0:00 节点中的 Label 组件
        然后将 Label 上的 string 属性值改为 time 中修改的值。
    */
    onLoad(){
        this.nodeLabel = this.node.getComponent(cc.Label);
        //游戏加载完成后设置倒计时时长
        this.nodeLabel.string = this.time + ":00";
    }

    start () {

    }
    
    /*
        在 update 中进行倒计时，每次帧变化的时候就减去帧刷新的时长，
        在 Cocos Creator 中 0.166 s帧刷新一次。
        将减去后的时间赋值到 nodeLabel 上
    */
    update (dt) {
        if(this.time > 0){
            this.time -= dt;
            this.nodeLabel.string = this.time.toFixed(2).replace(".",":");
        }else{
            this.time = 0;
            this.nodeLabel.string = this.time.toFixed(2).replace(".",":");
        }
    }
}

假设我们现在设置时长为 5，打开浏览器可以看到效果：

点击打击区域打鼓动画和添加分数

思路：打鼓的时候应该是点一下，左手打一下鼓，再点一下，右手打一下鼓，当不点击应该停止打鼓。根据我们的图集情况，可以看出，点击一下切换到左手打鼓图片，再点击一下切换到右手打鼓图片。

• 在 Scripts 中创建 beatDrum.ts 文件
• 选中 打击区域，将 beatDrum.ts 拖到 打击区域 右侧的 属性检查器。
• 在 beatDrum.ts 中添加 drumArea(打鼓娃娃Sprite 组件)、beatAtlas（打鼓娃娃图集）、beatScore（得分中 0 的Label组件） 属性
• 将对应的节点拖到属性中

代码如下：

//打鼓娃娃的 Sprite 组件
@property(cc.Sprite)
private drumArea: cc.Sprite = null;
//打鼓娃娃图集
@property(cc.SpriteAtlas)
private beatAtlas: cc.SpriteAtlas = null;
//分数 Label 组件
@property(cc.Label)
private beatScore: cc.Label = null;
//点击次数
private beatnum = 0;
onLoad(){
    //打击区域的 TouchStart 时间
    this.node.on(cc.Node.EventType.TOUCH_START,function(){
        // 获取图集中没有打击的帧
        let frame = this.beatAtlas.getSpriteFrame("noclick");
        /*
            点击次数为奇数用 leftclick 帧，也就是左手打鼓
            点击次数为奇数用 rightclick 帧，也就是右手打鼓
        */
        if(this.beatnum % 2){
            frame = this.beatAtlas.getSpriteFrame("leftclick")
        }else{
            frame = this.beatAtlas.getSpriteFrame("rightclick")
        }
        //将帧赋值到打鼓娃娃的 Sprite Frame 上 
        this.drumArea.spriteFrame = frame;
        //打击次数 +1
        this.beatnum += 1;
        /*
            分数就等于打击次数，这里粗略写的，也可以再
            加一个属性为总分数，每次点击的时候都计算总分数
        */
        this.beatScore.string = '' + this.beatnum;
    },this);
}

总结

游戏讲解到这里就结束了，这个游戏做的比较粗略，基本的功能都实现了，大家如果有兴趣，可以在游戏中添加自己想要的功能。

如果在开发过程中碰到问题，可以直接联系我！！

如果我的讲解中有误或者不清楚的，也请大家直接联系我！！

项目源码：打鼓庆新年