Oops Framework公共UI组件实战漂浮提示、加载界面与弹窗窗口一个全搞定【免费下载链接】oops-framework基于 Cocos Creator 3.x 版本开发的游戏框架此项目为 Oops Framework 教程项目如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。项目地址: https://gitcode.com/gh_mirrors/oo/oops-frameworkOops Framework 是一款基于 Cocos Creator 3.x 开发的游戏框架本教程项目开箱即用地内置了三类最常用的公共 UI 组件漂浮提示toast、加载界面Loading与弹窗窗口Alert/Confirm。只需一行oops.gui调用新手也能快速在 Cocos Creator 游戏中弹出漂浮提示、显示加载进度条和确认弹窗彻底告别重复造轮子。Oops Framework 以 Cocos Creator 插件形式提供框架源码位于项目的extensions目录下插件会自动注册脚本模板配合本教程项目的示例代码你可以在编辑器里直接看到三类 UI 组件的完整落地方式。界面统一初始化oops.gui 与 UIID 配置表所有界面都由oops.gui统一管理。教程项目在主入口 Main.ts 的initGui方法中执行oops.gui.init(UIConfigData)把界面配置表交给框架。配置表定义在 GameUIConfig.ts 中每个界面对应一个唯一的UIID编号并声明它属于哪个图层LayerType、预置体路径和是否带遮罩UIID用途所属图层预置体Loading资源加载界面UIloading/prefab/loadingAlert提示弹窗Dialogcommon/prefab/alert带遮罩Confirm确认弹窗Dialogcommon/prefab/confirm带遮罩Demo/Demo_Role_Info示例界面UIgui/prefab/... 服务器下发编号即可触发界面打开这正是“界面唯一标识”设计的好处。漂浮提示一行代码弹出玩家反馈漂浮提示是游戏里出现频率最高的反馈形式升级成功、网络异常、货币不足……Oops Framework 用oops.gui.toast一个 API 全部搞定。在示例界面 Demo.ts 中/** 漂浮提示框 */ private btn_notify_show(event: EventTouch, data: any) { oops.gui.toast(common_prompt_content, true); }第一个参数提示文本或直接传入多语言 ID第二个参数可选传true表示按多语言 ID 取词提示内容自动跟随语言切换。对应预置体与飘字动画分别是assets/resources/common/prefab/notify.prefab和assets/resources/common/anim/notify.anim。框架主入口 Main.ts 中还演示了跨场景的用法——JSB 平台热更新完成后直接oops.gui.toast(热更新后新程序的提示)提醒玩家。加载界面进度条与提示文本自动绑定加载界面采用“界面 VM 组件”思路见 LoadingViewComp.ts脚本继承CCViewVMInitialize把进度数据声明为data字段并自动绑定到 UIfinished / total已加载项与总项数progress进度百分比文本自动刷新prompt当前阶段的多语言提示文本。加载流程分两步LoadingViewComp.ts先用oops.language.getLangByID(loading_load_json)切换提示文案再调用oops.res.loadDir(game, 进度回调, 完成回调)预加载整个game目录。进度回调中只需更新this.data.progress进度条立即跟随变化加载完成后再切换文案、初始化账号模块。资源全部就绪后界面在 reset 方法 中自我关闭并打开主界面oops.gui.remove(UIID.Loading); // 关闭加载界面 oops.gui.open(UIID.Demo); // 打开游戏主界面加载界面背景图就放在assets/resources/loading/loading/texture/目录换成自己的美术资源即可加载提示网络等待时的旋转菊花除整屏加载外请求网络时常用的“转圈等待”同样内置。在 Demo.ts 中oops.gui.waitOpen(); // 打开等待提示 setTimeout(() { oops.gui.waitClose(); // 请求结束关闭 }, 2000);waitOpen/waitClose成对调用预置体为assets/resources/common/prefab/wait.prefab。请求数据、切换场景时随手一开体验立刻专业起来。弹窗窗口Alert 与 Confirm 的统一下发方式弹窗走标准界面通道oops.gui.open通过UIParam结构体下发数据Demo.tslet uip: UIParam { data: { title: 公共弹窗, content: 这是一个公共弹窗, okWord: common_prompt_ok, // 按钮文案可走多语言 needCancel: false // 是否显示取消按钮 } }; oops.gui.open(UIID.Alert, uip);Alert提示弹窗与Confirm确认/取消弹窗共用同一套数据约定只需替换 UIID业务代码零改动。配置驱动的玩法同样保留TablePromptWindow.ts 从excel/PromptWindow.xlsx导出的 JSON 表中按编号取标题与描述多语言词条则统一维护在 Language.xlsx运行时通过oops.language一键切换中英文。收尾把这套公共 UI 搬进你的游戏组件一行调用预置体漂浮提示oops.gui.toast(text, isLangID)common/prefab/notify等待提示oops.gui.waitOpen() / waitClose()common/prefab/wait加载界面oops.gui.open(UIID.Loading)loading/prefab/loading提示/确认弹窗oops.gui.open(UIID.Alert/Confirm, uip)common/prefab/alert / confirm本教程项目负责演示用法如果你要正式立项可以直接下载配套的 oops-game-kit 游戏项目模板在更完整的工程结构上复用这套 UI 体系。基于 Oops Framework漂浮提示、加载界面、弹窗窗口这些“体力活”一次配置终身受用把时间留给真正有趣的内容设计。【免费下载链接】oops-framework基于 Cocos Creator 3.x 版本开发的游戏框架此项目为 Oops Framework 教程项目如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。项目地址: https://gitcode.com/gh_mirrors/oo/oops-framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考