cocosCreator JS 开发 之 预制资源使用Prefab

1、Prefab制作

 ->制作教程：https://docs.cocos.com/creator/manual/zh/asset-workflow/prefab.html

2、编写一个预制板脚本绑定

/*
    通用提示框
*/

cc.Class({
    extends: cc.Component,
 
    properties: {
        Text: { default: null, type: cc.Label },
        showTimes: 1, //隐藏时间
        jumpHeight: 100, //跳跃高度
        _isShow:false,
    },
 
    // LIFE-CYCLE CALLBACKS:
    setLabelString: function( str )
    {
        //這邊直接將我們的Label字串設定為 No.#
        //this.Text.string = ( str );
        //cc.find("background/textCount").getComponent(cc.Label).string = str;
        this.node.getChildByName("Text").getComponent(cc.Label).string = str;
    },
 
    //按钮点击回调
    onConfirBtn:function(callback){
        console.log("发布按钮点击回调事件");
        this.node.getChildByName("btnconfir").on('click',function(event){
            console.log("点击到按钮");
            callback();
        },this);
    },

    onLoad:function () {
        cc.log("showTips.onLoad")
        window.showtips = this;
 
        // 初始化计时器
        this.timer = 0;
        this.node.active = true;

        this.node.getChildByName("layout").on('touchend',function(event){
            console.log("点击到layout");
            console.log("销毁提示框");
            this.finish();
        },this);

        this.node.getChildByName("mask").on('touchend',function(event){
            console.log("点击到mask");
        },this);

        //this.node.getChildByName("btnconfir").on('click',function(event){
        //    console.log("点击到按钮");
        //},this);
    },

    setJumpAction: function () {
        this.timer = 0;
        // 跳跃
        var jumpDown = cc.moveBy(this.showTimes, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionIn());
        var callback = cc.callFunc(this.finish, this);
        return cc.repeat(cc.sequence(jumpDown,callback),1);
    },

    finish:function(){
        this._isShow = false;
        if(this.node){
            this.node.active = this._isShow;   
        }
        this.node.stopAllActions();
        this.node.destroy();
    },
    start:function () {
        cc.log("showTips.start")
    },

    run:function (str) {
        this._isShow = true;
        if(this.node){
            this.node.active = this._isShow;   
        }
        this.setLabelString(str)
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

    update:function (dt) {
        //var opacityRatio = 1 - this.timer/this.showTimes;
        //var minOpacity = 50;
        //this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
        
        //if (this.timer > this.showTimes) {
        //    this.finish();
        //    return;
        //}
        //this.timer += dt;
 
    },
});

3、只需要将上面脚本绑定到预制资源，再加载就能使用

4、使用

    //显示升级界面--预制体
    showTip:function(str){
        //我們先動態取得Canvas
        console.log("加载预制板");
        var CanvasNode = cc.find('Canvas');
        if( !CanvasNode ) { cc.log( 'find Canvas error' ); return; } 
       
        var onResourceLoaded = function(errorMessage, loadedResource )
        {
           
            if( errorMessage ) { cc.log( 'Prefab error:' + errorMessage ); return; }
            if( !( loadedResource instanceof cc.Prefab ) ) { cc.log( 'Prefab error' ); return; } 
            
            var newMyPrefab = cc.instantiate( loadedResource );
            
            CanvasNode.addChild(newMyPrefab,100);
            
            newMyPrefab.setPosition( 0, 0 );
            
            var newMyPrefabScript = newMyPrefab.getComponent('prefabBackground');
            
            newMyPrefabScript.setLabelString(str);

            newMyPrefabScript.onConfirBtn(function(){
                console.log("发送升级事件");
            });
        };
        cc.loader.loadRes('background', onResourceLoaded );
    },

5、附加问题

5.1、想要实现一个效果，就是点击这个有背景的区域之外的地方，这个层面消失。

在做的过程中，因为脚本直接挂载在这个节点上

在onload中直接使用

        this.node.on('touchend',function(event){
            console.log("点击到layout");
            console.log("销毁提示框");
            this.finish();
        },this);

这样会出现一种情况，就是不管点击在那个地方，这个节点都直接消失了。---不理想。

于是使用了一种老方法，添加遮罩层，然后对遮罩层监听点击事件

        this.node.getChildByName("layout").on('touchend',function(event){
            console.log("点击到layout");
            console.log("销毁提示框");
            this.finish();
        },this);

        this.node.getChildByName("mask").on('touchend',function(event){
            console.log("点击到mask");
        },this);

好了，这样就可以达到点击提示框外就可以销毁这个节点的效果了。

5.2、这个预制板中有一个标签（显示文字）、一个按钮（做响应），现在这个标签已经可以从外界调用传入参数实现不同的显示，然后我就想这个按钮是不是也可以这样，于是加了函数

//预制板脚本中   
 //按钮点击回调
    onConfirBtn:function(callback){
        console.log("发布按钮点击回调事件");
        this.node.getChildByName("btnconfir").on('click',function(event){
            console.log("点击到按钮");
            callback();
        },this);
    },

外部调用

    //显示升级界面--预制体
    showTip:function(str){
        //我們先動態取得Canvas
        console.log("加载预制板");
        var CanvasNode = cc.find('Canvas');
        if( !CanvasNode ) { cc.log( 'find Canvas error' ); return; } 
       
        var onResourceLoaded = function(errorMessage, loadedResource )
        {
           
            if( errorMessage ) { cc.log( 'Prefab error:' + errorMessage ); return; }
            if( !( loadedResource instanceof cc.Prefab ) ) { cc.log( 'Prefab error' ); return; } 
            
            var newMyPrefab = cc.instantiate( loadedResource );
            
            CanvasNode.addChild(newMyPrefab,100);
            
            newMyPrefab.setPosition( 0, 0 );
            
            var newMyPrefabScript = newMyPrefab.getComponent('prefabBackground');
            
            newMyPrefabScript.setLabelString(str);

            newMyPrefabScript.onConfirBtn(function(){
                console.log("发送升级事件");
            });
        };
        cc.loader.loadRes('background', onResourceLoaded );
    },

这里没有设置按钮数据，有兴趣的朋友可以拓展一下。

调用结果

 注意：在这里，所有的都要注意名字的大小写，在使用this.node.getChildByName("btnconfir")，老是提示找不到这个按钮。。。

 在这个类中还有函数update ,可以拓展一下定时功能。

好东西、大家分享！