关闭

【用Cocos Creator给暗恋的女生写一个游戏(8)】——(Run Game) Prefab的动态管理

标签: 游戏CocosCreator教程实战
1987人阅读 评论(0) 收藏 举报
分类:

我们先来考虑一下这个PrefabManager是干什么的,我们的游戏中有重复出现的水管和老公,所以PrefabManager要能够动态管理他们,理所当然要有创建和销毁的方法,创建很简单,我们只需要每隔一段距离往pipeLayer添加子节点就行了,但销毁它们还是需要一些技巧的,从逻辑角度来说,当水管和老公移动到屏幕外时我们就要将他们销毁,这里我们用一个普通班不会教的方法——利用碰撞检测系统

我们先给PrefabManager添加一个碰撞组件,编辑如图

这里写图片描述

给水管兄弟添加碰撞组件,设置tag为333

这里写图片描述

给水管哥哥添加碰撞组件,设置tag为3331

这里写图片描述

给水管弟弟添加碰撞组件,设置tag也为3331

这里写图片描述

给老公添加碰撞组件,设置tag为666

这里写图片描述

PrefabManager.js

cc.Class({
    extends: cc.Component,

    properties: {
        pipeGroupPre:cc.Prefab,
        starPre:cc.Prefab,
        pipeLayer:cc.Node,
        //上下管子之间距离范围
        spacingRange: cc.p(0,0),
        // 下面管子Y轴偏移量范围
        botYRange: cc.p(0,0),
        // 左右管子之间距离
        pipeSpace:0,
        //第一个管子位置
        oPipeX:0,
        //星星位置范围
        starYRange:cc.p(0,0),
    },

    init: function (game) {
        this.game = game;
        this.pipePool = new cc.NodePool();
        this.starPool = new cc.NodePool();
        for(var i=0;i<4;i++){
            this.pipePool.put(cc.instantiate(this.pipeGroupPre));
            this.starPool.put(cc.instantiate(this.starPre));
        }
        this.curPipeX = this.oPipeX;//当前管子位置
        this.spawnPipe();
        this.spawnPipe();

        cc.director.getCollisionManager().enabled = true;
    },

    onCollisionEnter: function(other,self){
        if(other.tag === 333){
            this.desPipe(other.node);
        }else if(other.tag === 666){
            this.desStar(other.node);
        }
    },

    spawnPipe: function(){
        var pipeGroup = this.pipePool.get();
        var pipeTop = pipeGroup.getChildByName("PipeTop");
        var pipeBot = pipeGroup.getChildByName("PipeBot");
        var botYPos = this.botYRange.x + Math.random() * (this.botYRange.y - this.botYRange.x);
        var space = this.spacingRange.x + Math.random() * (this.spacingRange.y - this.spacingRange.x);
        var topYPos = botYPos + space;
        pipeTop.y = topYPos;
        pipeBot.y = botYPos;
        pipeGroup.x = this.curPipeX;
        this.pipeLayer.addChild(pipeGroup);

        this.spawnStar();

        this.curPipeX += this.pipeSpace;
    },

    desPipe: function(node){
        this.pipePool.put(node);
        this.spawnPipe();
    },

    spawnStar: function(){
        if(Math.random() < 0.8){
            var star = this.starPool.get();
            star.y = this.starYRange.x + Math.random()*(this.starYRange.y - this.starYRange.x);
            star.x = this.curPipeX + this.pipeSpace/2;
            this.pipeLayer.addChild(star);
        }
    },

    desStar: function(node){
        this.starPool.put(node);
    },

});

按照惯例,我们从上往下看

在属性中我们定义了需要用到的两个Prefab和一个pipeLayer节点,还有一些随机设置Prefab的参数(这里用二维的点来表示范围,x是最小值,y是最大值)

第一个管子的位置要在屏幕外

在init方法里我们定义了两个cc.NodePool,分别存放pipeGroup和star

最后排的那位同学问了一个问题”为什么要用NodePool,直接用instantiate复制和destroy销毁不就行了么?”

老师很表扬这种勇于提问的表现,但也要批评这位同学不好好预习的行为

现在我们来翻一下官方文档

这里写图片描述

“记住了吗”

“记住了”

屏幕里最多出现两个水管,因为人生难免有意外,所以我们在pool里放四个,

当prefab滚到屏幕外的回收区时,我们就把它放回pool里,这样就可以实现一个良性循环,毕竟全球变暖了,话说今年好像比去年热了,话说我好像跑题了。。。

每添加一个pipeGroup我们就要调用一次spawnStar方法,但老公不是一个随便的人,所以我们要给他添加一个出现的概率,0.8吧,毕竟老公是我们这个游戏的唯一吸引力。。。

最后我们要在Game.js里初始化PrefabManager

var Player = require("Player");
var CameraManager = require("CameraManager");
var PrefabManager = require("PrefabManager");
cc.Class({
    extends: cc.Component,

    properties: {
        player:Player,
        cameraManager:CameraManager,
        prefabManager:PrefabManager,
    },

    onLoad: function () {
        //返回键返回菜单
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyPressed: function(keyCode, event) {
                if(keyCode == cc.KEY.back){
                    cc.director.loadScene('Menu');
                }
            }
        }, this.node);
        this.startGame();
    },

    startGame: function(){
        this.cameraManager.init(this);
        this.prefabManager.init(this);
        this.player.init(this);
    },

    stopGame: function(){

    },

    gainScore: function(){

    },

    gainEnergy:function(){

    },
});

看一下效果

这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:133323次
    • 积分:2076
    • 等级:
    • 排名:第19179名
    • 原创:71篇
    • 转载:8篇
    • 译文:0篇
    • 评论:163条