Cocos Creator中的预制体Prefab

Prefab的用途：为了重复利用

测始预制体，中间丑陋的弹窗为预制体Prefab

测试场景绑定的代码组件：

cc.Class({
    extends: cc.Component,

    properties: {
        //定义预制体属性，在界面中将建立好的prefab拖拽过来
        myAlertPrefab:cc.Prefab,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {
    },

    // update (dt) {},
    
    // 场景中放置一个按钮组件，下面是触发单击事件后执行的代码
    onClickDispAlert:function(){
        var alertNode = cc.instantiate(this.myAlertPrefab);
        this.node.addChild(alertNode)
        //cc.log(alertNode.toString())
        var scriptComponent = alertNode.getComponent("alertPrefab");
        scriptComponent.show("是否进入副本？",function(){
            cc.log("OK 回调函数")
        },function(){
            cc.log("Cancel 回调函数")
        },function(){
            cc.log("Close 回调函数")
        });
    },
    
});

下面的代码绑定到事先做好的弹出窗口预制体上，用来实现复用弹出窗口。

cc.Class({
    extends: cc.Component,

    properties: {
        tips:cc.Label,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    clearCallback:function(){
        this.setTips("");
        this.setOkCallback();
        this.setCancelCallback();
        this.setCloseCallback();
    },
    show:function(tips,okCallback,cancelCallback,closeCallback){
        this.clearCallback();
        this.node.active = true;
        this.setTips(tips);
        this.setOkCallback(okCallback);
        this.setCancelCallback(cancelCallback);
        this.setCloseCallback(closeCallback);
    },

    // update (dt) {},
    onClickOk:function(){
        cc.log("ok event");
        this.node.active = false;
        if(this.m_OkCallback != null){
            this.m_OkCallback();
        }
    },
    onClickCancel:function(){
        cc.log("cancel event");
        this.node.active = false;

        if(this.m_CancelCallback != null){
            this.m_OkCallback();
        }
    },
    onClickClose:function(){
        cc.log("close event");
        this.node.active = false;
        if(this.m_CloseCallback != null){
            this.m_CloseCallback();
        }
    },

    setTips:function(tips){
        if(tips == "" || tips == undefined){
            tips= "默认的提示信息！"    
        }
        this.tips.string = tips;
    },

    //设置回调函数
    setOkCallback:function(callback){
        this.m_OkCallback = callback;
    },
    setCloseCallback:function(callback){
        this.m_CloseCallback = callback;
    },
    setCancelCallback:function(callback){
        this.m_CancelCallback = callback;
    },
});

完全动态加载Prefab

Cocos Creator中需要动态加载的资源放在 resources 目录下(resources 需要在 assets 文件夹中手工创建，并且必须位于 assets 的根目录)，配合 cc.resources.load 等接口动态加载。你只要传入相对 resources 的路径即可，并且路径的结尾处不能包含文件扩展名。

//此脚本作为组件，绑定到场景中的Canvas上
cc.Class({
    extends: cc.Component,

    properties: {
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
    },

    // update (dt) {},

    onClickLoadLogin: function () {
        var self = this; //防止this在匿名函数中的作用域问题
        //预制体存放位置：resources/template/login
        cc.resources.load("template/login", function (err, prefab) {
            var newNode = cc.instantiate(prefab);
            newNode.x=0;
            newNode.y=0;
            var position1 = self.node.getChildByName("position1");//position1为场景中的空节点
            position1.addChild(newNode);
            //cc.director.getScene().addChild(newNode);
        });
    }
});

注意：在cocos creator 2.4.0以后的版本推荐使用cc.resources.loadAPI来加载资源。

---

参考资源

官方文档-加载资源：https://docs.cocos.com/creator/manual/zh/scripting/dynamic-load-resources.html