中心**, 将所有的UI窗体分为4类管理(普通窗体, 固定窗体, 弹出窗体, 独立窗体), 再将窗体制作成预制体, 动态加载与释放;
使用UIManager.getInstance().showForms("窗体名字");
-- UIROOT(UIManager脚本挂载结点)
---- normal(普通窗体)
---- fixed(固定窗体)
---- popup(弹出窗体)
---- Independent(独立窗体)
---- UIMaskScript(UIMaskManager挂载结点, 为窗体添加阴影)
---- UIAdaptationScript(AdaptationManager挂载结点, 用于窗体适配)
不同类型的窗体放置在不同的节点上, 统一管理
-- UIManager ***
UI窗体管理类, 控制的所有窗体的加载, 显示,隐藏和销毁等功能
-- BaseUIForm **
UI窗体的基类, 你的自定义窗体脚本应当继承它, 设置脚本的UIType, MaskType属性, 并重写init方法
-- UIMaskManager **
UI窗体的遮罩管理类, 为UI窗体添加一个背景阴影
-- UIMaskScript *
设置遮罩样式和取消遮罩
-- AdaptationManager **
适配管理, 用于适配固定窗体(Fixed)的贴边处理,上下左右贴边,并且可以适配刘海屏
-- BaseUIBinder **
自动绑定编辑器上的结点, 自定义脚本继承BaseUIView脚本即可使用, 你也可以手动继承BaseUIBinder脚本, 并且调用_preInit方法即可
-- ButtonPlus **
button组件扩展, 添加了统一的音效播放, 长按检查和屏蔽连续点击
-- CocosHelper **
封装了一些cocos的api, 方便使用
-- GEventManager **
订阅发布模式工具, 处理全局事件GEventManager.on("事件名称", 回调方法, target); target表示处理对象
-- ResLoader **
处理窗体的加载, 会对加载的窗体检查其引用的资源
-- ConfigUIFrame *
配置UI窗体 名称与路径的对应关系
-- SysDefine *
设置一些定义的路径和对应结点名称
我们将这个场景分成5个部分,
1, 表示Top部分的玩家信息
2, 表示左侧的玩家列表
3, 表示房间入口按钮
4, 表示底部的功能列表
5, 表示背景
前4个我们将其挂载在Fixed结点上, 5号挂载在Normal结点上并设置HideOther属性然后使用AdaptationManager组件使结点在个个位置适配
演示视屏: 暂无
1, 下载项目, 将其中的assets\Script下的UIFrame文件夹拷贝到自己的项目, 如果你希望使用ButtonPlus脚本, 那么还需将packages下的文件夹拷贝到你的项目packages下
2, 将assets\resources下的UIROOT预制体复制到自己的项目, 然后挂载到场景上
3, 制作自己的窗体Prefab, 在结点上挂载自定义的脚本, 并且这个脚本继承BaseUIForm
4, 在脚本中定义好UIType, MaskType等属性
5, 使用UIManager.GetInstance().ShowUIForms("你的prefab路径");即可
扩展了cc.Mask, 添加了一种枚举类型Polygon
2d光影效果, 项目在2dlight分支, 目前还在优化中 关键代码在Script/Common/light下, 有兴趣的可以看看,
集成了ECharts, 在ECharts-Support分支, 有需要的可以看看
集成Mobx，对于Mobx的使用详情可以前往Mobx的官网了解，github地址 https://github.com/mobxjs/mobx 对于cocos使用例子可以看项目中UIHall的实现
注意事项：将mobx导入为插件时需要将允许编辑器加载打上勾✅
UIManager -> UIBase UIManager控制UIBase的加载，释放，显示，隐藏 UIMaskManager -> UIMaskScript UIMaskManager控制UIMaskScript的显示，隐藏
UIBase继承UIBinder，默认自动绑定UI节点，添加onShow, onHide，showAnimation, hideAnimation的接口 生命周期 load -> onShow -> onLoad -> start -> onHide -> onDestory
EventCenter替换GEventManager，EventCenter使用双层Map，优化了emit的速度
去掉了一些冗余属性和方法，优化了属性，方法名称，精简才是王道
1, 将BaseUIBinder分离出来作为BaseUIView的父类, 如果希望使用BaseUIBinder的功能, 请为你的结点添加BaseUIView组件, 你也可以自己继承BaseUIBinder, 然后调用_preInit方法
为什么这么做? 对于UIForm的控制我尝试过多种方法, 这一次是希望实现一个类似MVC的控制结构, 对于一个UIForm, 我们为其添加C(控制)和V(视图)组件 例如, 我在LoginForm预制体添加的组件一样, 将Form的动画, 显示放在View脚本中, 而事件的监听, 游戏逻辑则放在Control脚本中, 当然View脚本不是必须的 你也可以只实现Control脚本
2, 场景切换(在本单场景管理, 即是Normal结点的更换), 添加加载过度动画
如何使用: 1, 在游戏的Main脚本中设置UIIndependentManager.getInstance().setLoadingForm("UIForm/LoadingForm"); 过度场景 2, 在加载场景时使用UIManager.GetInstance().ShowUIFormWithLoading("UIForm/HallForm"); 如上, 在HallForm中需要提前加载的UIform或者其他资源, 可以放在HallForm的load方法中, 这样就会在load内资源加载完毕, 在关闭LoadingForm, 完美实现场景切换
3, 新增了Independent结点与类型 Independent类似常驻结点, 是独立于其他窗体的特殊窗体, 不会受到其他窗体的影响, 例如加载过度窗体, 就属于独立窗体, 不会因为其他窗体设置了HideOther属性就将其隐藏
扩展button, 为button组件添加了
- 点击button播放音效
- 屏蔽连续点击
需要注意的是, ButtonPlus.ts需要配合插件使用, 插件路径位于UIFrameWorld\packages\buttonplus, 原因是 在ButtonPlus中@inspector('packages://buttonplus/inspector.js'), 需要引入插件中的inspector.js, 用户也可以在inspector自定义编辑器上ButtonPlus显示格式.
添加UIHelper自动绑定规范命名的结点, UIHelper的功能, 在用脚本控制UI的 时候, 绑定UI是一件很烦人的事情, 尤其是将UI拖到面板上绑定, 就更加繁琐, 或者在onload, start上 使用getChildByName() 或者cc.find() 查找结点, 又会显得代码冗长大部分时候, 在我创建这个结点的时候, 我就已经想好要让这个结点完成什么功能了(针对渲染结点), 所有我希望在取名字的时候,通过特殊的命名规则, 就可以在脚本中直接使用此结点, UIHelper就来完成此功能
- 给结点取一个规范的名字, 例如 _Label$NickName _Sprite&HeadImage
我分别解释每一部分的意思
- _表示这个结点需要被自动绑定
- Label表示脚本中属性的类型
- $表示分隔符, 后面紧接这个表示变量名字
- NickName就表示这个变量的名字
所以在脚本中, 你可以通过 this._Labels.NickName 获得这个结点上的cc.Label组件
需要注意的是 自动绑定的结点必须是是挂载脚本的结点或者子节点, 如图
只会在BindTest结点的子节点自动绑定结点, 那么我现在有一个结点希望自动绑定, 但是其父节点没有挂载脚本, 怎么办呢. UIHelper还提供了了bindNode()方法, 将对方结点或者其父节点传入, 那么你就可以在其他脚本将结点自动绑定
还需要注意的是 重复绑定, 因为每次进行查询绑定操作时, 都会对其所有的子节点进行查找, 所有可能会出现重复绑定!
BaseUIForm中添加CloseAndDestory属性, 当此属性为true时, 关闭此窗体将会销毁此结点,并且释放结点资源 对于已经显示的窗体, 不会二次显示
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent