Cocos Creator 弹窗组件Alert封装 - 好文

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

组件封装思路：

* 在CocosCreator场景编辑器中设置好弹窗的UI布局
* 然后将整个弹窗拖到CocosCreator资源管理器中生成一个prefab文件。
* 将prefab文件放到资源管理器assets目录的resources目录下。
* 将弹窗所需要用到的资源文件也放入资源管理器assets目录的resources目录下。
* 写一个脚本动态控制弹窗的控件。便于在项目需要用到的地方显示弹窗。
* 先看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 };

热门工具换一换