第一个游戏项目：飞翔的小鸟（Cocos) 优化发布

上一篇写到飞翔的小鸟的主题功能已经写的差不多了，但是还有许多功能和细节并没有做好，以下就是优化这个游戏项目的具体步骤：

需要优化的地方

① 游戏加分和分数显示功能
② 游戏音乐导入和控制
③小鸟飞行动作实现
④ 游戏开始按钮
⑤ 游戏结束界面
⑥ 其他设置
⑦ 游戏构建发布

一、游戏加分和分数显示功能

先实现分数显示功能：新建一个score节点，在其下新建一个Label组件，将Font资源拖入组件下的font下。并在代码中新建 一个与之关联的score节点。

再实现加分功能： 要明白时小鸟尾部刚刚通过钢管的时候才加分，所以要 判断什么时候小鸟完全通过钢管的那个时机，这个时机就是没有发生碰撞的那一帧，这样就可以加在碰撞检测的后面。这里需要一个标记 isCheck,用来判断锁定这个时机。加在start()函数中
this.isCheck = false; 然后再碰撞检测改代码：

 if (checkNode) {        // 这个节点进入碰撞检测
            this.isCheck = true;
            //碰撞检测
            let childBottom = checkNode.getChildByName("pipe1");        // 获取当前两根钢管的下钢管
            let childTop = checkNode.getChildByName("pipe2");       // 获取当前两根钢管的上钢管
            let top = checkNode.y + childTop.y - childTop.height / 2;       // 获取上钢管的下边界
            let bottom = checkNode.y + childBottom.y + childBottom.height / 2;      // 获取下钢管的上边界
            if (birdTop >= top || birdBottom <= bottom) {        // 如果小鸟的上大于上边界或者小鸟的下小于下边界则有碰撞
                // 有碰撞
                this.gameOver();
            }
        } else {
            if (this.isCheck == true) {
                this.addScore();
            }
            this.isCheck = false;
        }

addScore()函数要做的事有： 将分数score加1，

addScore() {        // 通过钢管加分函数 
    // 获取组件的格式为：this.节点名.getgetComponent(cc.想要获取的节点名称);
    let label = this.score.getComponent(cc.Label);
    // parsenInt(""):获取字符串中的数字，返回值为int！此处先获取数字在进行加分，     
    let val = parseInt(label.string) + 1;
    label.string = "" + val;        // 将加分后的分数转化为字符串，并改变组件属性。
},

加分时小鸟身上会冒出加分图标，向上移动然后消失，下面是如何实现这个功能的：
添加一个addscore（）节点，并在脚本中与之关联，并设置它的可见为false
在脚本中的addscore（）函数下加入以下代码：

 addScore() {        // 通过钢管加分函数 
        // 获取组件的格式为：this.节点名.getgetComponent(cc.想要获取的节点名称);
        let label = this.score.getComponent(cc.Label);
        // parsenInt(""):获取字符串中的数字，返回值为int！此处先获取数字在进行加分，     
        let val = parseInt(label.string) + 1;
        label.string = "" + val;        // 将加分后的分数转化为字符串，并改变组件属性。

        cc.audioEngine.playEffect(this.clips[2]);       // 播放加分音效

        this.addIcon.active = true;     // 将加分图形设置为可见
        this.addIcon.y = this.bird.y;       // 控制加分图形出现的位置和小鸟此时在的位置统一

        // 执行()里的动作，格式为：node.runAction(action),
        // 里面的action可以为单一动作，也可以为串行or并行动作
        this.addIcon.runAction(     // 加分图标的动作
            cc.sequence(        // 把多个动作串行成一个动作
                cc.moveBy(0.5, 0, 100),     //相对位移动作，(间隔时间,移动后x,移动后y)，即向上移动100个像素
                cc.callFunc(() => {     // 执行一个动作函数，()=>{函数体} ，
                    this.addIcon.active = false;        // 隐藏加分图标
                })
            )

        )
    },

这里的runAction()，表示执行一个动作，格式为node.runAction(action)
action可以为一个单独的动作，也可以为并行或着串行的动作，这里的
cc.sequence（）是一个串行动作。
二、游戏音乐导入和控制
在脚本中创建一个音频集合在编辑中与音频资源相互匹配：

clips: {         // 音乐
            default: [],
            type: cc.AudioClip,     // 类型为音频片段
        },

这里我添加了1个背景音乐和1个点击飞行音效和1个加分音效，分别加在相对应得地方，如加分时播放加分音效

cc.audioEngine.playEffect(this.clips[2]);       // 播放加分音效

开始时播放背景音乐，结束时停止播放

// 设置背景音乐格式为：cc.audioEngine.playMusic(音频片段, 是否循环); 
cc.audioEngine.playMusic(this.clips[0], true);
cc.audioEngine.stopMusic();     // 停止背景音乐的播放

三、小鸟飞行动作的实现

小鸟飞行时会扇动翅膀，即当小鸟的power大于0的时候，小鸟会执行飞行的动作。
首先在脚本中新建skin{}对象，并在编辑器中与之关联

 skin: {      // 帧动画
            default: [],    // 
            type: cc.SpriteFrame,       // 类型为精灵界面
        },

然后再update()函数中添加判断小鸟power的代码

if (this.power > 0) {       // 加速度大于0，即小鸟正在飞行，每帧改变小鸟图形
            this.curFrame = (this.curFrame + 1) % this.skin.length;     // 当前帧小鸟图形的索引下标
            this.bird.getComponent(cc.Sprite).spriteFrame = this.skin[this.curFrame];       // 用已经获得的下标改变小鸟的图形
        }
        else {
            this.curFrame = 0;      // 加速度<=0时，小鸟没有飞行，小鸟翅膀不动。
            this.bird.getComponent(cc.Sprite).spriteFrame = this.skin[this.curFrame];
        }

四、游戏开始按钮

每一个游戏都会有一个游戏开始按钮，飞翔的小鸟也不例外。
新建一个btnBegin按节点，用来控制游戏开始，在编辑器中的btnBegin节点下新建一个Button组件，并设置他的点击事件，这里就要将在start()函数里将isPlaying初始化为false。

新建一个onClickBegin()函数，并将控制小鸟飞行的点击事件加载此函数下，函数代码为

 onClickBegin() {     // 开始按钮后重新初始化函数
        this.isPlaying = true;      // 游戏运行状态为true
        this.isCheck = false;       // 碰撞检测状态为false
        this.power = 0;     // 小鸟飞行能量为0
        this.btnBengin.active = false;      // 游戏开始界面隐藏
        this.iconOver.active = false;       // 游戏结束界面隐藏
        this.addIcon.active = false;        // 加分动作隐藏
        this.bird.y = 0;        // 初始化小鸟y坐标，即回到原点
        this.angle = 0;         // 初始化小鸟抬头角度     
        this.score.getComponent(cc.Label).string = "0";     // 初始化分数为0
        // 设置背景音乐格式为：cc.audioEngine.playMusic(音频片段, 是否循环); 
        cc.audioEngine.playMusic(this.clips[0], true);
        for (let idx = 0; idx < this.pipe.children.length; idx++) {
            this.pipe.children[idx].active = false;     // 将每一个钢管设为隐藏
        }
        this.clickLayer.on(cc.Node.EventType.TOUCH_START, () => {
            this.power = 2.5;   //当点击时小鸟上升的大小
            cc.audioEngine.playEffect(this.clips[1]);       // 点击
        });
    },

五、游戏结束界面
添加步骤与游戏开始按钮相同，但是这个界面开始需要隐藏，当游戏结束时再将其设为可见。
即在onClickBegin()中添加 this.iconOver.active = false;
在gameOver()中添加this.iconOver.active = true;

六、其他设置
当整个游戏项目已经完成后，进入浏览器预览时，由于不同的设备视口大小不一致，比如这里测试的是在Apple iphone6 plus就会出现下面这种存在黑边的情况：

这里的做法是，在Canvas添加一个Mask组件，并将其勾选，将另外一个Widget组件取消勾选，就能固定大小不被设备视口大小而拉伸游戏

七、游戏构建发布

在编辑器中选择左上角功能框中的项目下的构建发布，
在构建发布界面，发布平台选择android, 模板选择default

构建完成后选择编译，编译完成后就可以在你的项目文件夹下找build文件夹

android的.apk安装包在build文件夹下

至此整个飞翔的小鸟项目完结！