美文网首页
用cocos creator制作一个小游戏(2) -- 预制体P

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

作者: Black_Blue | 来源:发表于2018-05-11 19:44 被阅读0次

    关于预制体的介绍官网有相关阐述:
    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);
        }
    });
    

    相关文章

      网友评论

          本文标题:用cocos creator制作一个小游戏(2) -- 预制体P

          本文链接:https://www.haomeiwen.com/subject/irlqdftx.html