基于TypeScript的通用游戏UI框架的使用 #7
AILHC
started this conversation in
Game Development Blogs
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
前言
之前发了一篇文章分享了我设计和实现这个基于TypeScript的通用游戏UI框架的过程和想法,但没有详细的介绍如何使用。
文章链接:通用游戏UI框架的设计与实现
这次就讲清楚如何使用~
介绍
display-ctrl是一个基于TypeScript的零依赖、跨引擎、高效、灵活、高可扩展的显示控制库(UI框架库)
您可以根据项目,以及项目所使用的引擎,定制资源处理和控制器基类。
合理的抽象底层,让您可以继承管理器基类,使用基类接口就可以简单扩展出符合自身需求的接口。
同时这个库使用了TypeScript的高阶的类型推断,给您带来极度舒适的接口调用体验。
这个库无任何依赖,可单独使用。
在仓库中同时提供了基于CocosCreator2.4.2和CocosCreator3D实现的库(包含layer层级管理库的实现)
github:EasyGameFramework
特性
如何使用?
安装
通过npm安装
本地link npm包
a. clone 项目仓库
b. 在packages/display-ctrl文件夹下
c. 在项目游戏项目目录下
使用源码
a. clone 项目仓库
b. 直接复制packages/display-ctrl/src下的ts源码到项目文件夹下使用
定制一下
实现引擎层
我已经提供了两个CocosCreator版本的实现参考
可以直接安装(同上)
每个项目都有自己的资源处理需求,所以这部分逻辑解耦出来,让使用者注入资源处理器。
开始使用
基础使用(以CocosCreator2.4.2为例):创建一个普通的界面
在测试场景,新建一个node节点,放点图片,spine动画什么的。
然后拖到resources/display-ctrl-test-views下
删掉场景中的界面节点
来一串基本操作:调用管理器接口
所传数据也有类型提示,需要在任意地方声明(最好是在对应的控制器代码文件中声明)
这里以MutiInsView为例,具体可见:
examples\egf-ccc-full\assets\tests\display-ctrl\view-ctrls\MutiInsView.ts
当业务需要使用数据让指定界面更新渲染时调用,以加载界面为例
这个更新所传的数据也可以有类型提示,详情可见:examples\egf-ccc-full\assets\tests\display-ctrl\view-ctrls\MutiInsView.ts
自定义资源处理显示控制器
在业务开发中,可能有些界面的资源处理逻辑特殊,需要自定义,框架提供了自定义资源处理的接口
管理器的其他接口
具体的接口声明可以看:dp-ctrl-interfaces.ts 中的IMgr
等等
其他可能性
其实游戏主角也可以是显示控制器实例
通过IShowConfig定制更多可能性,比如页面显示动画播放完回调
利用管理器的基础接口扩展出管理栈式UI的逻辑
最后
欢迎关注我的公众号,更多内容持续更新
公众号搜索:玩转游戏开发
或扫码:![img](https://camo.githubusercontent.com/56f4c8384c8fd7a744f31f48ab64b84ce277606484aa393a47b1d9eae05f34d1/68747470733a2f2f70332d6a75656a696e2e62797465696d672e636f6d2f746f732d636e2d692d6b3375316662706663702f61626430633134633963393534653536616632306164623731666130306461397e74706c762d6b3375316662706663702d7a6f6f6d2d312e696d616765)
QQ 群: 1103157878
博客主页: https://ailhc.github.io/
掘金: https://juejin.cn/user/3069492195769469
github: https://github.com/AILHC
Beta Was this translation helpful? Give feedback.
All reactions