CocosCreator学习笔记-官方教学-05-scripting-02-prefab（预制体）

【案例1：场景 InstantiatePrefab】在屏幕上不断增加怪物，效果图如下

 

 

步骤1：先制作一个怪物的预制体MonsterPrefab，并将 脚本 MonsterPrefab 挂到上面

monsterPrefab脚本随机选择一个怪物的贴图给prefab上

//  脚本 MonsterPrefab
var Helpers = require('Helpers');//引用脚本 Helpers

cc.Class({
    extends: cc.Component,

    properties: {
        spriteList: {
            default: [],
            type: [cc.SpriteFrame]
        }
    },

    // use this for initialization
    onLoad: function () {
        var randomIdx = Helpers.getRandomInt(0, this.spriteList.length);
        var sprite = this.getComponent(cc.Sprite);
        sprite.spriteFrame = this.spriteList[randomIdx];
    }

});

// help 脚本
if (CC_JSB && cc.runtime) {
    // fix cocos-creator/fireball#3578
    cc.LoaderLayer.setUseDefaultSource(false);
    cc.Dialog.setUseDefaultSource(false);
}

// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

module.exports = {
	getRandomInt: getRandomInt
};

 

步骤2 ：项目层级管理器中创建

一个背景 background

怪物生成的中心点 root

说明文本

脚本挂点：将脚本PopulatePrefab挂到上之后，将 root点，怪物预制体等挂到上面

//脚本 PopulatePrefab
cc.Class({
    extends: cc.Component,
    properties: {
//怪物出生点：怪物出生中心点
        root: {
            default: null,
            type: cc.Node
        },
//怪物预制体
        prefab: {
            default: null,
            type: cc.Prefab
        },
//怪物出生点：怪物出生中心点
        canvas: {
            default: null,
            type: cc.Canvas
        },
//怪物生成数量
        numberToSpawn: 0,
//怪物生成间隔时间
        spawnInterval: 0
    },
    //生成怪物函数：
//判断怪物数目是否超出最大数目，超出就结束生成
//将怪物预制体实例化后，挂到root上面，并定好坐标
    addSpawn: function () {
        if (this.spawnCount >= this.numberToSpawn) {
            this.clearRepeater();
            return;
        }
        var monster = cc.instantiate(this.prefab);
        monster.parent = this.root;
        //this.canvas.node.addChild(monster);
        monster.position = this.getRandomPosition();
        this.spawnCount++;
    },

    // use this for initialization
//randomRange  设定坐标的基准范围
// spawnCount  怪物数量计数器 用于和怪物最大值比较
//
    onLoad: function () {
        var self = this;
        self.randomRange = cc.p(300, 200);
        self.spawnCount = 0;
        self.schedule(self.addSpawn, self.spawnInterval);
    },
// 返回一个二维数 作为 （新怪物的）坐标
    getRandomPosition: function() {
        return cc.p(cc.randomMinus1To1() * this.randomRange.x, cc.randomMinus1To1() * this.randomRange.y);
    },
//结束定时器
    clearRepeater: function() {
        this.unschedule(this.addSpawn);
    },
});

知识点：

1/随机函数：Math.random() * num  随机数函数 返回       0<=x < 1

例子：Math.random() *100  返回 0<=x<100 

2/随机函数：cc.randomMinus1To1()      随机函数    返回 -1  ~ 1

3/模块化脚本：module.exports= {};

https://docs.cocos.com/creator/manual/zh/scripting/modular-script.html?h=module.exports

4/定时函数

this.schedule(参数1，参数2)   隔一段时间（参数2）调用一次回调函数（参数1）

参数1 ：回调函数

参数2：间隔时间

this.unschedule(参数1) 将回调函数（参数1）关闭

5/预制体实例化

var mon = cc.instantiate(prefab);

mon.parent = this.root;

mon.position = cc.p(200,300);