unity ui解决方案新玩法-Blazor 1. 介绍

笔者所在公司最近需要开发一套监控设备实时运行的系统，场景本身直接使用unity引擎的dots技术栈实现，但在用户界面方面，由于没有一个统一的标准，所以都浅试了一下。

1. unity现在的运行时ui解决方案基本上有这几个：

• ugui。unity editor内置，设置好的组件可转化为prefab实现重用，其布局基于轴心、锚点设置。 ugui相关链接
  个人体验：实际使用过程中，我司设计部门出图基于figma，其样式属性基于css样式，公司内的web前端开发人员可以快速实现，但将这一套布局在实际开发时转化为ugui自带的轴心+锚点发现开发效率不太满意
  
• fgui。拥有自己独立的UI编辑器，在其中搭建完之后打成资源包，搭配对应的unity fgui sdk进行解析使用。 fgui相关链接
  个人体验：基于上一个理由，改变自己流程还好说，改变合作部门的流程阻力很大，这款解决方案推崇的设计人员也可参与在我司已经稳定的流程中并不现实，而笔者本身也不太喜欢这种UI开发方式（这里属于是个人喜好问题）
  
• uiwidgets。基于flutter，需要提前熟悉flutter相关组件开发用法，使用C#语言代替dart。 uiwidgets相关链接
  个人体验：组件的样式可以直接使用css样式，开发效率和运行效率非常高。缺点是在高版本的unity editor中不支持webgl平台，我司要求是pc本地端和webgl平台都能支持。而且2.0及以后版本需要unity的中国团队特殊打包的unity editor。（运行效率是真高，而且特别适合开发移动端app）
  
• UIE。基于现在的通用web技术包括html和css相关去编写uxml标签和uss规则，使用C#代替js实现功能逻辑。uie相关链接
  个人体验：比较契合我司的流程，奈何完善度不够，uss属性使用上有一些问题，现阶段使用在深度定制时容易发现小问题。
  
• 在unity中嵌入浏览器相关组件，直接将web页面投到unity中。
  个人体验：在我司可以做到极快的开发效率，经过实际测试，帧数能接近uiwidgets，需要特殊的方式实现页面与unity场景间互相通信，但是对应的unity开发工程师需要学习前端相关技术栈，或者通过部门资源申请调web前端开发工程师参与开发工作（这么爽不尝试一下吗）。
  那有没有一种方式既能满足设计部门与开发部门流程不变又能减少unity开发侧流程改变和学习成本呢？那就是本文将要介绍的blazor，使用C#构建web页面，降低unity开发工程师学习成本（其实和flutter一样，blazor已经支持多平台了）。blazor相关链接

2. ui界面与场景的互通方式

• 大多数情况下，web页面和unity场景需要借助额外的开发（独立于业务外）才能进行互相rpc操作，比如unity手册：与浏览器脚本交互。
  此场景下其网络通信架构类似下图：
  
  当然可能有些会将客户端与服务端通信部分合并为上半部分，UI不参与后端直接通信，即图中3不存在。
• 但是blazor有一个特点，能以非常低开发成本的方式使用SignalR这个网络库，进而方便的实现RPC功能
  此时网络通信架构就变成了：
  
  当然，此方式也有对应的缺点，即服务端不可用的情况下场景和UI无法互动。但我司当前实现里服务端不可用的情况下客户端场景内也无法渲染（场景内都依赖服务端存储的配置进行动态生成和动作），所以这个缺点我司不用关注。

3. 接下来我们来使用unity+blazor实现一个最小可用的demo，下面是需求整理与具体实现：

• 客户端场景和UI要能够存在一一绑定关系且有重连机制，具体实现
• 点击UI中的相机方向按钮或者场景模型列表，要能控制相机移动，具体实现
• 点击UI中的场景模型对应设置，要能在场景中获取正确模型并材质变化
• 在场景中控制相机移动，UI中的相机方向按钮要能联动实现样式变化
• 在场景中点击对应模型，要能在UI中展示对应模型属性

4. 结尾一些想说的话：

• 在此，我祝文中提到的和其他可能遗漏的各个UI解决方案都能发展的更好更强，各位看官也都能实现自己想要的目标！
• 大家要根据自己实际条件来选择，这东西本身没有银弹只有适合自己的，要评估个人与部门技术栈（我司软件部门全员除新入职的unity工程师，其余包括笔者均掌握至少一个angular、vue、react、flutter等前端技术栈和一个.net或Java后端技术栈）、公司各部门流程和对接方式（我司设计部门使用figma进行原型设计与素材交付）、项目的条件和特性（我司项目不是竞技类游戏不需要场景和页面快速互相响应、客户端和服务端都在内网进行部署运行）等因素去灵活选择。