Cocos Creator 弹窗组件Alert封装

最新推荐文章于 2025-07-07 00:21:17 发布

转载最新推荐文章于 2025-07-07 00:21:17 发布 · 3.6k 阅读

文章标签：

#封装组件 #cocos creator

cocos creator 专栏收录该内容

32 篇文章

订阅专栏

游戏中使用弹窗频繁，封装弹窗组件很有必要。本文介绍了在Cocos Creator中封装弹窗组件的思路，包括设置UI布局、生成prefab文件、放置资源文件、编写脚本控制等，还给出了简单的调用方式及相关脚本代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：https://blog.csdn.net/zhw18659815391/article/details/85758591#

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

组件封装思路：

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