Kira

Kira

Hi, I'm Kira, a computer science student passionate about Digital Media and Artificial Intelligence. My current technical skillset: Unity & C#, Unreal & C++, Python & AI. Thank you for taking the time to get to know me!

UI框架工作流设计

我在网易做了一年左右的UI框架与工程管理工作，包括建立MVVM-UI框架、搭建UI工作流、进行工程重构、优化引擎UI源码、开发工具等，为某大型游戏项目的UI开发流程奠定了基础，并行之有效的推广和复用到其他项目。
下面就从我的角度分析一下游戏UI框架工作流应该包含哪些部分：

基于MVVM的UI框架设计

主要组成
  • Proxy：逻辑
  • View ：表现
  • Data ：纯数据
  • UIMgr
  • UIEdit编辑器

流程
创建UI：UIMgr→Data→View
更新UI：Input→Logic→Proxy→View
关闭UI：UIMgr→Proxy→View

工作流
UX：制作UI并在Edit编辑器查看效果，自动生成并配置Data
策划：可用UIEdit在游戏验证效果和初步蓝图功能
程序：开发Proxy、与外部系统打交道，开发View的进一步表现、如Shader特效之类

框架细节
Data 只存放UI配置相关信息，为只读数据（如Tag，Layer，File，hookNode等）
View 索引Data，依此进行初始化(创建)
View 拥有最小所需渲染数据(Properties)
Proxy 接受外部输入，提供对外接口
Proxy 经逻辑处理，将渲染数据包装好推送给View

一个View，可以对应多个UI或子UI
View可以存在多个实例，与具体UI对象进行索引
Proxy可以支持一对多，同时控制多个View
UIMgr，可分为ViewMgr、ProxyMgr等，对生命周期、大体逻辑进行控制，提供一些通用功能

注意点：表现与逻辑分离，proxy设置UI逻辑状态(数据)，view设置UI表现状态(数据)，两者很多时候不一致（如proxy向view设置状态导致数据变化的时候），不能混用
开发响应式的UI行为，在数据修改时推动逻辑变化，也就是数据驱动。这样有助于修改验证
将通用部分抽出为组件、扩展、utility、结构等

为什么UI逻辑与表现需要分离？
  1. 数据驱动，表现一定基于逻辑
  2. 先来后到，逻辑、数据未到，表现不可乱来（服务器数据为准）
  3. UI逻辑数据和表现数据架构上就分离，可解耦，可拆卸，让UI同学在编辑器完成表现工作，程序同学专注逻辑工作，达成效果更好的配合
  4. 方便Proxy一对多，控制多个View和与所有外界系统打交道，隔绝系统直接访问UI的现象（bug maker）

其他支持
  • Pool
  • UI分层
  • 动效与状态机
  • 设置渲染顺序
  • LanguageConvert

热插拔支持
除核心部分外，业务UI以Add-Ons的形式存在，独立存放于各文件夹。大部分UI在架构上已与其他部分解耦，但逻辑上仍可能存在依赖，这也可能导致 当我们需要热插入某个UI时，因其依赖其他UI或系统，必须也热插入 其依赖的组件。同样，当拔出某个UI或系统时，也要考虑其被依赖部分的处理。

UI引擎
UI对象
  • Node
  • Widget（Button，Text，Slider，Sprite，ProgressTimer...）
  • Timeline（Play Keyframe Anim）
  • EventDispatcher（TouchInput，事件传递，按照Priority，给到各listener）
  • 坐标转换（anchorPoint，WorldSpace，ScreenPos）
  • 屏幕适配（OnUIResize，FullScreen）
  • 内存管理（retain，release）

Layout
  • Panel
  • Mask
  • LayoutRefresh etc...

3D-UI
  • AddFakeBoard
  • 3D Camera
  • RenderTexture
  • ShowRoom（mini world）

UI工程
Tool
  • AutoClean（废弃资源清理）
  • 图集打包（自动/手动）
  • Debugger（UITree调试等）
  • ProjectArchitecture（工程框架结构搭建）
  • batTool（如name normalize，dependency browser，illegal resource checker）
  • 多机型适配工具
  • 统一拼接结构框架（控件复用）
  • 动态色值表
  • Code Refactor（Reflector）
  • Automatic Check Robot
> 重点在于通过工具辅助或规范开发者完成工作，自动化地维持工程的正确性

UI Workflow（制作、验证、修改、实装）
UI制作工程 与 游戏UI工程，应分开管理。UI制作内容会更超前、游戏内尚未实装，游戏UI工程主包含游戏内实装的UI版本

UI功能
  • 基础：Timer、Event、Component、Extensions
  • UI样式配置（换皮肤支持）
  • ScrollView
  • TextFit
  • ColorfulField...

渲染优化
  • 采样方式（点/线性采样）
  • 资源异步预加载、分帧加载
  • 清晰文字渲染（font自动整数倍size+贴图quad取整）
  • 贴图mipmap
  • 抗锯齿
  • 减少Drawcall（如合批渲染）
  • 定制render pipeline
  • 自定义渲染顺序
  • Tradeoff机制
  • Atlas patch支持（热更新）

其他
  • 程序、策划、UX、QA 职能协作
  • 短期需求验证 与 中长期内容规划
  • 版本管理

我在网易只做了一年左右（还不到）的UI工作，主要是UI工程和框架相关，以上覆盖可能不全，结合我个人的接触（cocos、ugui、qt等渲染引擎）和理解为主。因保密原因，细节不能放出

网易主基于CocosUI引擎，但是相比原版已经基本都改造掉
但是框架比较老，所以要迭代成新的

一开始先做了UI工程重构：将UI工程和相应UI脚本重构，
对UI框架进行了初步的改良，优化控件，做了一些UI工具等

后续跟进了Proxy-View模式的新框架，以及UI编辑器相关的替换，制定UI开发流程





















Published by Kira on

comments powered by Disqus