用cocos creator制作一个小游戏(2) -- 预制体Prefab

关于预制体的介绍官网有相关阐述:
http://docs.cocos.com/creator/manual/zh/asset-workflow/prefab.html

关于对象池的官网相关阐述:
http://docs.cocos.com/creator/manual/zh/scripting/pooling.html

下面我们开始制作预制体.

1. 将资源管理器的图片 拖到 层级管理器, 生成了pipe

image.png

然后创建一个空节点命名成pipe_prefab作为父节点, 将pipe拖到pipe_prefab中作为子节点, 然后再复制一个.

image.png

现在俩个子节点叠加在一起,将俩个子节点的锚点Anchor的Y值设为0, 再将bottom节点的Scale的Y值设为-1. 效果如下

image.png

image.png

这时将pipe_prefab拖到res/prefab目录下, 这时prefab已初步做好, 可以将层级管理器的pipe_prefab删掉了

image.png

双击res/prefab/pipe_prefab, 再分别选中top节点和bottom节点, 给top和bottom节点添加boxCollider,使它具有碰撞属性

image.png

然后选中pipe_prefab,添加boxCollider,并设置size 和offset, 这个碰撞是用于后续统计分数的.

image.png

我们给pipe添加一个脚本,用来控制管道.

image.png

cc.Class({
    extends: cc.Component,

    start () {
        this.bottom = this.node.getChildByName("bottom");
        this.bottom.y = -300*Math.random();

        this.top = this.node.getChildByName("top");
        this.top.y = this.bottom.y + 200 + Math.random()*400;
    },

    update (dt) {
        this.node.x -= 100*dt;
        if(this.node.getBoundingBoxToWorld().xMax < 0) {
            D.pipeManager.recyclePipe(this.node);
        }
    },
});

D是全局变量, 定义在Global.js文件中

window.Global = {
    State : cc.Enum({
        Run : 0,
        Over: 1
    })
};

window.D = {
    gameController  : null,
    pipeManager : null,
};

再添加一个管道manager, 用来管理pipe,每当pipe的x坐标小于0px,就回收它

image.png

const Pipe = require('Pipe');

cc.Class({
    extends: cc.Component,

    properties: {
        pipePrefab: cc.Prefab,
        addInterval : 0
    },

    onLoad () {
        D.pipeManager = this;
        this.pipePool = new cc.NodePool();
    },

    start () {
        this.addPipe(0,600);
        this.addPipe(0,1000);
        this.addPipe(0,1400);
        this.schedule(this.addPipe, this.addInterval);
    },

    addPipe (time,x) {
        if(x == null)
            x = 1400;
        let pipe = this.pipePool.get();
        if(pipe == null) {
            pipe = cc.instantiate(this.pipePrefab);
        }

        pipe.active = true;
        pipe.x = x;
        this.node.addChild(pipe);
    },

    recyclePipe(pipe) {
        pipe.active = false;
        this.pipePool.put(pipe);
    }
});