oops-framework框架 之 界面管理(三)

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-game-kit

注： 作者dgflash的oops-framework框架QQ群： 628575875


回顾

在上文中主要通过oops-game-kit大家了一个新的模版项目， 主要注意项是resources目录下的两个文件夹：

  • common 用于放置公共资源，在游戏启动时进行的必须加载
  • game 用于放置动态非必须资源，在游戏进度条显示时进行的加载

两个文件夹必须存在，否则程序会有报错。更多内容，可参考博客：

oops-framework框架 之 创建项目(二)

今天的文章主要讲述下框架的界面管理，以用于创建页面、切换页面、弹窗显示等处理。

若理解不当，欢迎您的指出。


界面管理

oops-framework的作者dgflash 针对于界面的管理主要分为了如下几个类型：

类型说明
Game游戏层，比如地图逻辑处理
UI主界面层，比如地图上方的菜单页面
PopUp弹窗层， 窗口显示后，支持非窗口区域点击，可显示多个不同配置的弹窗
Dialog模式窗口层，窗口显示后，非窗口区域不可透点
System系统窗口层，与Dialog类似，可用于显示系统信息的弹窗错误提示
Notify提示信息层， Tip信息显示，显示以后会上移消失
Guide新手引导层，用于新手的强制引导

注：界面类型来源于LayerManager.ts的枚举： LayerType

页面的显示，我们通常使用预制体Prefab实现，然后挂载上组件脚本。在框架中编写组件脚本，不需要特意的去继承什么，依然是Component即可。

页面构建后，需要在GameUIConfig.ts中进行配置：

// 界面唯一标识ID
export enum UIID {Loading = 1,		// 资源加载界面Window,					// 弹窗界面Netinstable,		// 加载与延时提示界面UI_MAIN,				// UI界面
}/*
界面配置数据 UIConfig
export interface UIConfig {bundle?: string;			// 包名layer: LayerType;			// 页面类型prefab: string;				// 预制资源相对路径
}
*/
export var UIConfigData: { [key: number]: UIConfig } = {[UIID.Loading]: { layer: LayerType.UI, prefab: "common/prefab/loading", bundle: "resources"},[UIID.Netinstable]: { layer: LayerType.PopUp, prefab: "common/prefab/netinstable",bundle: "resources"},[UIID.Window]: { layer: LayerType.Dialog, prefab: "common/prefab/window",  bundle: "resources"},[UIID.UI_MAIN]: { layer: LayerType.UI, prefab: "game/prefab/uiMain", bundle: "resources"},
}

在配置完成以后，显示或隐藏页面的简单使用：

// 显示UI主页面
oops.gui.open(UIID.UI_MAIN);
// 关闭加载页面
oops.gui.remove(UIID.Loading);

LayerManager

LayerManager管理类是框架提供的界面管理类，在框架的Oops.ts中提供的入口:

// ../oops-plugin-framework/assets/core/Oop.ts
export class oops {static gui: LayerManager;
}

该管理类主要负责对不同页面的管理，提供的主要接口有：

参数或接口说明
root获取界面根节点
camera获取界面摄像机
game获取游戏界面根节点
guide获取新手引导
uiMap获取界面地图
setUIMap()设置界面地图配置
init()初始化所有UI配置
setConfig()根据uiId，设置UI配置
toast()Tip提示显示，支持是否显示多语言
open()根据uiId，同步打开某个页面或窗口
openAsync()根据uiId，异步打开某个页面或窗口
has()根据uiId, 检测是否存在某个页面或窗口
remove()根据uiId，移除某个页面或窗口
removeByNode()根据this框架添加的节点，移除某个页面或窗口
clear()清除所有窗口

看下LayerManager的构造函数实现：

constructor(root: Node) {this.root = root;this.camera = this.root.getComponentInChildren(Camera)!;// 不同界面类型构建节点，然后顺序添加到根节点中this.game = this.create_node(LayerType.Game);this.ui = new LayerUI(LayerType.UI);this.popup = new LayerPopUp(LayerType.PopUp);this.dialog = new LayerDialog(LayerType.Dialog);this.system = new LayerDialog(LayerType.System);this.notify = new LayerNotify(LayerType.Notify);this.guide = this.create_node(LayerType.Guide);// 注意下层级, LayerType.Game的最低，LayerType.Guide的最高root.addChild(this.game);root.addChild(this.ui);root.addChild(this.popup);root.addChild(this.dialog);root.addChild(this.system);root.addChild(this.notify);root.addChild(this.guide);
}private create_node(name: string) {var node = new Node(name);node.layer = Layers.Enum.UI_2D;// 添加widget组件，设置上下左右对齐和对齐模式var w: Widget = node.addComponent(Widget);w.isAlignLeft = w.isAlignRight = w.isAlignTop = w.isAlignBottom = true;w.left = w.right = w.top = w.bottom = 0;w.alignMode = 2;w.enabled = true;return node;
}

LayerManager主要管理的页面是：

  • LayerUI 用于管理主页面UI层
  • LayerPopUp 用于管理PopUp弹窗
  • LayerDialog 用于管理Dialog模式窗口，System系统窗口
  • LayerNotify 用于管理Notify提示

继承结构如下：

主界面
游戏层
引导层
PopUp弹窗
Toast消息
Dialog窗口/System窗口
LayerUI
Node
Game
Guide
LayerPopUp
LayerNotify
LayerDialog

然后我们看下打开窗口的逻辑处理，有助于后面示例的理解：

/*
@func: 同步打开一个窗口
@param: uiId 窗口唯一标识符ID
@param: uiArgs 页面参数，可以通过回调对象的onAdded或onRemoved回调获取
@param: callbacks 回调对象
*/
open(uiId: number, uiArgs: any = null, callbacks?: UICallbacks): void {var config = this.configs[uiId];if (config == null) {warn(`打开编号为【${uiId}】的界面失败，配置信息不存在`);return;}switch (config.layer) {case LayerType.UI:this.ui.add(config, uiArgs, callbacks);break;case LayerType.PopUp:this.popup.add(config, uiArgs, callbacks);break;case LayerType.Dialog:this.dialog.add(config, uiArgs, callbacks);break;case LayerType.System:this.system.add(config, uiArgs, callbacks);break;}
}

打开的逻辑处理其实很简单，从UI配置中获取配置数据，然后通过add设置不同窗口的显示逻辑。


示例

简单的示例，在上面有说过。在项目开发中，如果切换页面可以这样：

// 关闭当前页面
oops.gui.remove(UIID.Loading);
// 显示新的页面
oops.gui.open(UIID.UI_MAIN);

这样的处理方式主要是为了避免： 页面资源较多，切换页面时导致黑屏情况的出现。

框架针对于这种情况，通过页面回调的方式做了处理，主要定义是： UICallbacks

// ../oops-plugin-framework/assets/core/gui/layer/Defines.ts
export interface UICallbacks {// 节点添加到层级以后的回调，参数为当前页面节点，传递参数onAdded?: (node: Node, params: any) => void,// 窗口节点destroy之后回调，参数为当前页面节点，传递参数onRemoved?: (node: Node | null, params: any) => void,// 页面在移除的时候，进行的调用，可用于隐藏动画的显示，参数为当前页面节点，回调// 注意：如果调用`this.node.destroy()`，该回调将直接忽略onBeforeRemove?: (node: Node, next: Function) => void
}

注：这个接口的定义在页面参数传递或动画播放中使用很频繁。

弹窗示例

在框架的弹窗中， 虽有PopUp，Dialog，System的几种类型，但他们是类似的

  • PopUp 打开以后，支持非窗口区域透点，支持打开多个不同配置的弹窗
  • Dialog 仅支持显示一个，非窗口区域不可透点
  • System 同Dialog类似，作者dgflash增加这个处理的原因主要是为了区别窗口提示的不同类型，比如客户端自身和服务器的提示，方便问题的定位。

增加一个窗口的UI预制体，如下图所示：
请添加图片描述

GameUIConfig.ts中增加配置后， 添加示例：

public openWindow(event, customData: string) {let params = {title: "窗口标题",content: "这是一段描述",}let callBack: UICallbacks = {onAdded: (node: Node, params: any) => {console.log("onAdded获取传递的参数:", params)},onRemoved:(node: Node | null, params: any) => {console.log("onRemoved获取传递的参数:", params)     }}oops.gui.open(UIID.UI_POPUP, params, callBack);
}

如果想在指定的页面中获取传入的参数，可以这样：

@ccclass('UIPop')
export class UIPop extends Component {@property(Label) titleLabel: Label = null;@property(Label) descLabel: Label = null; private _okFunc = null;// 增加onAdded的回调，获取参数onAdded(args: any) {if (args) {this._okFunc = args.okFunc || null;this.titleLabel.string = args.title || "";this.descLabel.string = args.content || "未知错误";}}onClose() {if (this._okFunc) {this._okFunc();}oops.gui.removeByNode(this.node);}
}

一般弹窗的出现是需要有显示或隐藏动画的，我们可以通过回调方法：

  • onAdded 增加显示动画
  • onBeforeRemove 增加隐藏动画

动画的显示可以通过tween缓动系统或CocosCreator的Animation组件进行添加：

public clickSystem(event, customData: string) {console.log(customData);let params = {title: `系统窗口`,content: "数据异常",}oops.gui.open(UIID.UI_SYSTEM, params, this.getPopCommonEffect());
}// 弹窗动画
private getPopCommonEffect(callbacks?: PopViewParams) {let newCallbacks: PopViewParams = {// 节点添加动画onAdded: (node, params) => {node.setScale(0.1, 0.1, 0.1);tween(node).to(0.2, { scale: new Vec3(1, 1, 1) }).start();},// 节点删除动画onBeforeRemove: (node, next) => {tween(node).to(0.2, { scale: new Vec3(0.1, 0.1, 0.1) }).call(next).start();},}if (callbacks) {if (callbacks && callbacks.onAdded) {let onAdded = callbacks.onAdded;callbacks.onAdded = (node: Node, params: any) => {onAdded(node, params);newCallbacks.onAdded(node, params);};}if (callbacks && callbacks.onBeforeRemove) {let onBeforeRemove = callbacks.onBeforeRemove;callbacks.onBeforeRemove = (node, params) => {onBeforeRemove(node, params);newCallbacks.onBeforeRemove(node, params);};}return callbacks;}return newCallbacks;
}

注：作者在oops-framework的TipsManager.ts中增加了更多的窗口示例，推荐查看学习

Toast示例

提示内容的显示就相对简单了，主要代码如下：

private _tipIndex: number = 0;public clickTip(event, customData: string) {this._tipIndex++;// 参数：内容，是否使用多语言默认falseoops.gui.toast(`这是第${this._tipIndex}个提示`);
}

总结

在框架中对界面的显示和隐藏主要逻辑如下：

  1. 页面的构建，继承于Component即可，如果需要获取参数，就增加 onAdded 方法
  2. 在GameUIConfig.ts中设置 UIID的唯一标识符ID 和 UIConfig 配置
  3. 页面的调用，使用open或openAsync；提示的显示使用Toast

最后注意：

  1. 任何页面的显示，不建议重复调用
oops.gui.open(UIID.UI_LAYER, {param: "参数"});
oops.gui.open(UIID.UI_LAYER, {param: "参数"});

注：框架会告知路径为【game/prefab/uiLayer】的预制重复加载

  1. PopUp的弹窗支持显示多个，指的是不同配置的Pop弹窗，原因1

感谢作者dgflash的分享，作者CSDN博客： dgflash CSDN

最后，祝大家学习和生活愉快!

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/209411.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

TS版LangChain实战：基于文档的增强检索（RAG） | 京东云技术团队

TS版LangChain实战：基于文档的增强检索（RAG） | 京东云技术团队

LangChain LangChain是一个以 LLM （大语言模型）模型为核心的开发框架，LangChain的主要特性： 可以连接多种数据源，比如网页链接、本地PDF文件、向量数据库等允许语言模型与其环境交互封装了Model I/O（输入…
阅读更多...
【力扣206】反转链表

【力扣206】反转链表

【力扣206】反转链表 一.题目描述 给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。 示例 1 ： 输入：head [1,2,3,4,5] 输出：[5,4,3,2,1]示例 2 ： 输入：head [1,2] 输出&#x…
阅读更多...
码云配置遇到秘钥不正确

码云配置遇到秘钥不正确

你这个就是秘钥没有和git绑定， 需要 git config --global user.name "你的用户名随便写" git config --global user.email "你的邮箱"
阅读更多...
阿里云租赁费用_阿里云服务器多配置报价表

阿里云租赁费用_阿里云服务器多配置报价表

阿里云服务器租用费用，云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、轻量应用服务器2核2G3M带宽轻量服务器一年87元，2核4G4M带宽轻量服务器一年165元12个月，ECS云服务器e系列2核2G配置99元一年、2核4G配置365元一年、2核8G配置522元一年…
阅读更多...
跨网文件摆渡系统：安全、可控的数字传输桥梁

跨网文件摆渡系统：安全、可控的数字传输桥梁

在企业高度信息化的时代，数据的流通与共享已经成为企业、组织乃至个人之间不可或缺的沟通方式。然而，在数据流通的过程中，我们经常会遇到各种难题和挑战，尤其是当涉及到不同网络环境之间的文件传输。这不仅需要保证文件的安全性&a…
阅读更多...
销售员需练好的基本功有哪些？该如何培养？

销售员需练好的基本功有哪些？该如何培养？

销售员需练好的基本功有哪些？该如何培养？ 作为销售人员，以下是一些需要练好的基本功，以及培养这些基本功的方法： 1. 良好的沟通技巧：销售员需要具备清晰、简洁、礼貌和自信的语言表达能力，能够…
阅读更多...
【TinyALSA全解析（三）】tinyplay、tincap、pcm_open源码解析

【TinyALSA全解析（三）】tinyplay、tincap、pcm_open源码解析

tinyplay、tincap、pcm_open源码解析 一、本文的目的二、tinyplay.c源码分析三、tinycap.c源码分析四、pcm.c如何调度到Linux Kernel4.1 pcm_open解析4.1.1 pcm_open的主要流程4.1.2 流程说明4.1.3 调用方法 4.2 pcm_write解析 /*********************************************…
阅读更多...
Git：分布式版本控制系统的崛起与演变

Git：分布式版本控制系统的崛起与演变

简介 Git是一个开源的分布式版本控制系统，旨在有效、高速地处理从很小到非常大的项目版本管理。它是由Linus Torvalds于2005年创建的，最初是为了服务于Linux内核开发的版本控制需求。Git通过强大的分支功能、高效的缓存机制以及可扩展的架构设计&#xf…
阅读更多...
会话 cookie 及隐私的那些事

会话 cookie 及隐私的那些事

什么是会话 Cookie？ 会话 Cookie 的概念非常简单。 会话 Cookie，也称为临时 Cookie 或内存 Cookie，是网站在浏览会话期间存储在用户计算机或设备上的小数据片段。 它是由网站生成并由您的浏览器存储和使用的多种 Cookie 之一。 常规 Cookie 或“持久”Cookie 是通常在您的…
阅读更多...
移动硬盘灯闪但读不出？3个方法轻松解决！

移动硬盘灯闪但读不出？3个方法轻松解决！

“我的移动硬盘用了很久了，最近总是会出现插入后明明灯闪了，但是却什么都读不出的情况。这是为什么呀？有什么简单的解决方法吗？” 当移动硬盘的指示灯闪烁却无法成功读取数据时，这可能引起许多用户的疑虑和困扰。怎么解…
阅读更多...
数字孪生压缩空气储能管控平台

数字孪生压缩空气储能管控平台

压缩空气储能在解决可再生能源不稳定性和提供可靠能源供应方面具有重要的优势。压缩空气储能，是指在电网负荷低谷期将电能用于压缩空气，在电网负荷高峰期释放压缩空气推动汽轮机发电的储能方式。通过提高能量转换效率、增加储能密度、快速启动和调节能力…
阅读更多...
linux安装镜像cento7

linux安装镜像cento7

点击创建新的虚拟机 点击典型，下一步 浏览，centos7下载文件的位置 找到位置后，效果如下图所示 下一步，填写用户名和密码，再点击下一步 给虚拟机起名字，默认就行；虚拟机安装路径，默认…
阅读更多...
Python生产者消费者模型

Python生产者消费者模型

额滴名片儿 🎈 博主：一只程序猿子 🎈 博客主页：一只程序猿子 博客主页 🎈 个人介绍：爱好(bushi)编程！ 🎈 创作不易：如喜欢麻烦您点个👍或者点个⭐&#xff01…
阅读更多...
为什么SSL证书要设有有效期？

为什么SSL证书要设有有效期？

在当今的数字化时代，网络安全已经成为了每个企业和个人都必须关注的重要问题。为了保护网站数据的安全传输，SSL证书应运而生。然而，你是否注意到，SSL证书并不是永久有效的，而是有一定的有效期。那么，为什么…
阅读更多...
ZooKeeper 如何保证数据一致性？

ZooKeeper 如何保证数据一致性？

在分布式场景中，ZooKeeper 的应用非常广泛，比如数据发布和订阅、命名服务、配置中心、注册中心、分布式锁等。 ZooKeeper 提供了一个类似于 Linux 文件系统的数据模型，和基于 Watcher 机制的分布式事件通知，这些特性都依赖 ZooKee…
阅读更多...
【数据结构初阶（5）】链式队列的基本操作实现

【数据结构初阶（5）】链式队列的基本操作实现

文章目录 队列的定义初始化队列队尾入队列队头出队列取队头元素取队尾元素获取队列有效元素个数判断队空销毁队列 因为队列比较简单，关于队列的概念就不过多赘述了，本文只讲链队的基本操作实现 队列的定义 定义队列结点结构 链队中的每个结点都应该包…
阅读更多...
hutool的bug之 DateUtil.endOfDay(DateUtil.date())

hutool的bug之 DateUtil.endOfDay(DateUtil.date())

hutool 工具类DateUtil 使用时谨慎 DateUtil.endOfDay 得到的时间保存到数据时会增加一秒 首先比较下时间的long值： 这样就很明显的看出来，hutool工具类的date是毫秒位多了.999,保存到mysql 的时候，MySQL数据库对于毫秒大于500的数据进行…
阅读更多...
算法通关村第十六关-白银挑战滑动窗口经典题目

算法通关村第十六关-白银挑战滑动窗口经典题目

大家好我是苏麟 , 今天带来滑动窗口经典的一些题目 . 我们继续来研究一些热门的、高频的滑动窗口问题 大纲 最长子串专题无重复字符的最长子串 长度最小的子数组盛最多水的容器 最长子串专题 无重复字符的最长子串 描述 : 给定一个字符串 s ，请你找出其中不含有重…
阅读更多...
贸易公司ERP用什么软件好

贸易公司ERP用什么软件好

不同行业的贸易公司有不同的业务结构和管理模式，日常经营管理过程中遇到的难点呈现多样化，而很多贸易公司在仓库、财务、销售、采购、订单、客户等业务一体化和部门协同效率等方面还有很多提升空间。 有些贸易公司涉及多仓库、多门店、多税制、多汇率、…
阅读更多...
如何绕过某讯手游保护系统并从内存中获取Unity3D引擎的Dll文件

如何绕过某讯手游保护系统并从内存中获取Unity3D引擎的Dll文件

​ 某讯的手游保护系统用的都是一套，在其官宣的手游加固功能中有一项宣传是对比较热门的Unity3d引擎的手游保护方案，其中对Dll文件的保护介绍如下， “Dll加固混淆针对Unity游戏，对Dll模块的变量名、函数名、类名进行加密混淆处理&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023