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
};

———————

原文始发于：Cocos Creator 弹窗组件Alert封装