cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

加入小鸟,这个博客结束后游戏基本的逻辑就写好了。

源码和素材可在公众号获取(发送FlappyBird):
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

主角节点

在我提供的素材中,有bird0_0-2三个图片,这三个图片可以组合成像素鸟拍翅膀的动画。

先将bird0_0拖入Main Camera节点下,名字改成bird0_0,设置位置为(-100,0):
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
然后开始编辑像素鸟的动画,cocosCreator自带了一个动画编辑器,点击bird节点,点击动画编辑器:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
提示应该是:要制作动画,需要添加动画组件之类,点击添加就好:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
然后会提醒我们缺少动画Clip,先在资源管理器下面新建一个Clip文件夹,专门用于存放Clip文件,然后点击新建Clip,把文件放到新建的Clip文件夹下即可:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
新建完成后,先把bird节点上Animation组件的Default Clip设置为刚刚我们新建的Clip,将你新建的Clip文件拖入这个框下:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

然后就可以开始编辑动画了,先点左上角的按钮开始编辑,然后在属性列表下的add property按钮中选择
cc.Sprite.spriteFrame,在资源管理器中将bird0_0-2每隔三帧拖入属性列表,形成拍翅膀的动画,在WrapMode中选择loop,循环播放动画,在Sample中设置为30(30帧为一秒,应该是)。这边的设置用文字描述有点复杂,后面我可能会录成视频,有需要请关注公众号,届时会提醒。

cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

设置碰撞

游戏中,需要检查像素鸟和水管,还有地板的碰撞,cocosCreator中内置了一套碰撞系统。

首先我们需要设置碰撞的分组。点击项目-项目设置:cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
里面有个分组管理,默认是一个默认的分组,不需要动他,这边我们需要三个分钟,一个是像素鸟的分钟,一个是水管分组,最后一个地板分组,新建好之后,下面就会有分组配对的设置,x轴上的分组和y轴上的分组交叉处若有打勾,则会产生碰撞,这个游戏按下图设置即可:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
设置好后点击保存,然后我们需要设置节点的分组与碰撞范围。

点击bird节点,在group中设置为bird,点击添加组件,选择碰撞组件中的BoxCollider,值为下:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

在资源管理器中双点我们之前保存的pipe预制,层级管理器中选择pipe,Group选择pipe,添加两个BoxCollider组件,值如下:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
设置好后ctrl+s保存,双击资源管理器中的Scenes文件夹下的main回到主场景,若有弹窗点击保存即可。

最后设置地板的碰撞,在main camera中新建一个floor空节点,group中设置为floor,添加一个BoxCollider组件,值如下:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
碰撞整好了,后面写脚本就行了。

编写主角脚本

在Scripe文件夹下新建一个bird的Javascripe脚本文件。

properties中写这些:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

acc_y代表的是y轴方向的加速度,也就是游戏中的重力加速度,用于控制像素鸟下坠;jump_speed是像素鸟跳跃时的速度,默认为10,canvas是用于引入最外层节点的,用于判断玩家点击事件;pipes是所有pipe的父节点,这个脚本中用于初始化水管。

在onLoad中写:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟

27行用于初始化速度,29行用于在canvas中注册一个点击事件,这个事件会触发这个脚本的onTouchStart函数,31和33行启用了碰撞系统,cocos默认关闭,需要我们在需要碰撞的地方自行开启。38到40行则是对用户点击事件的处理,这边是把像素鸟的y轴速度直接设置为了跳跃速度。

在update函数中:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
这个函数用于实时更新节点的位置,节点位置受到速度的影响,速度又收到加速度的影响,这是简单的物理知识。

在脚本最后添加一个onDestroy函数:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
这个函数用于注销检测点击事件。

在脚本后面再添加两个函数,分别是onCollisionEnter和gameover:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
onCollisionEnter是进入碰撞时触发的函数,这个函数中只执行了gameover函数,gameover函数中执行了一些初始化的操作,试像素鸟一碰撞就会被重置。

完整代码如下:


cc.Class({
    extends: cc.Component,

    properties: {
        acc_y: 5,
        jump_speed:10,
        canvas:{
            type: cc.Node,
            default: null
        },
        pipes:{
            type: cc.Node,
            default: null
        }
    },

    // LIFE-CYCLE CALLBACKS:

    onl oad () {
        this.speed_y = 0;

        this.canvas.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);

        var manager = cc.director.getCollisionManager();

        manager.enabled = true;

        // manager.enabledDebugDraw = true;
    },

    onTouchStart(event) {
        this.speed_y = this.jump_speed;
    },

    onCollisionEnter: function (other, self) {
        this.gameover();
    },

    gameover: function(){
        this.node.y = 0;

        var pipesChildren = this.pipes.children;

        for(let i = 0; i < pipesChildren.length; i++){
            pipesChildren[i].destroy();
        }

        this.pipes.getComponent("pipes").onLoad();

        this.speed_y = 0;

    },

    start () {

    },

    update (dt) {
        this.speed_y -= this.acc_y * dt;
        this.node.y += this.speed_y;
    },

    onDestroy(){
        this.canvas.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
    }
});

保存后回到CocosCreatro,将bird的脚本挂至bird节点上,配置bird脚本的属性:
cocoscreator练手 入门 Flappy Bird 像素鸟项目(3)加入小鸟
配置好后点击小三角就可以再页面中运行了。

小游戏的主要逻辑已经全部完成,如果有时间的话我会继续将声音,得分,开始按钮之类的加上,可以关注公众号,如果有更新,会在上面推送。

这个目前完成的部分已经打包成了apk可以在手机中试玩运行,在公众号中可以获取到(发送FlappyBird)

上一篇:Vue可自定义tab组件


下一篇:cocoscreator练手 入门 Flappy Bird 像素鸟项目(2)加入水管