Cocos Creator 弹窗组件Alert封装

      游戏中几乎无法避免的要使用弹窗,如果每次用到都要写一遍,那也太费精力了,所以封装一个好用简便的弹窗组件实在是刚需中的刚需。

组件封装思路：

1. 在CocosCreator场景编辑器中设置好弹窗的UI布局
2. 然后将整个弹窗拖到CocosCreator资源管理器中生成一个prefab文件。
3. 将prefab文件放到资源管理器assets目录的resources目录下。
4. 将弹窗所需要用到的资源文件也放入资源管理器assets目录的resources目录下。
5. 写一个脚本动态控制弹窗的控件。便于在项目需要用到的地方显示弹窗。

• 先看prefab效果图

• 

   

• 十分简单的调用方式

//引入alert    
let alert = require('alert');

//弹窗调用
alert.show.call(this, "确认退出游戏？", "取消", "确认", function (type) {
    if (type == "取消") {
        console.log("取消");
    }
    if (type == "确认") {
        console.log("确认");
    }
});

• alert.js

let tipAlert = {
    _alert: null,           //prefab
    _animSpeed: 0.3,        //弹窗动画速度
};

/**
 * @param tipStr
 * @param leftStr
 * @param rightStr
 * @param callback
 */
let show = function (tipStr,leftStr,rightStr,callback) {
    cc.loader.loadRes("alert/tipAlert",cc.Prefab, function (error, prefab){
        if (error){
            cc.error(error);
            return;
        }
        tipAlert._alert = cc.instantiate(prefab);
        cc.director.getScene().addChild(tipAlert._alert,3);
        cc.find("tipAlert/content/top/tip").getComponent(cc.Label).string = tipStr;
        cc.find("tipAlert/content/bottom/left_btn/leftbtn").getComponent(cc.Label).string = leftStr;
        cc.find("tipAlert/content/bottom/right_btn/rightbtn").getComponent(cc.Label).string = rightStr;
        if(callback){
            cc.find("tipAlert/content/bottom/left_btn").on('click', function (event) {
                dismiss();
                callback(leftStr);
            }, this);

            cc.find("tipAlert/content/bottom/right_btn").on('click', function (event) {
                dismiss();
                callback(rightStr);
            }, this);
        }
        //设置parent 为当前场景的Canvas ，position跟随父节点
        tipAlert._alert.parent = cc.find("Canvas");
        startFadeIn();
    });
};

// 执行弹进动画
let startFadeIn = function () {
    //动画
    tipAlert._alert.setScale(2);
    tipAlert._alert.opacity = 0;
    let cbFadeIn = cc.callFunc(onFadeInFinish, this);
    let actionFadeIn = cc.sequence(cc.spawn(cc.fadeTo(tipAlert._animSpeed, 255), cc.scaleTo(tipAlert._animSpeed, 1.0)), cbFadeIn);
    tipAlert._alert.runAction(actionFadeIn);
};


// 弹进动画完成回调
let onFadeInFinish = function () {
};

// 执行弹出动画
let dismiss = function () {
    if (!tipAlert._alert) {
        return;
    }
    let cbFadeOut = cc.callFunc(onFadeOutFinish, this);
    let actionFadeOut = cc.sequence(cc.spawn(cc.fadeTo(tipAlert._animSpeed, 0), cc.scaleTo(tipAlert._animSpeed, 2.0)), cbFadeOut);
    tipAlert._alert.runAction(actionFadeOut);
};

// 弹出动画完成回调
let onFadeOutFinish = function () {
    onDestroy();
};

let onDestroy = function () {
    if (tipAlert._alert != null) {
        tipAlert._alert.removeFromParent();
        tipAlert._alert = null;
    }
};

module.exports={
  show
};