Unity 技术开放日 | 绝对干货 - Unity App开发利器，UIWidgets技术介绍

Unity APP 开发利器，UIWidgets 技术可以通过与 flutter 引擎的深度集成，将最新的前端开发 Workflow 引入 Unity，帮助开发者实现更加流畅、绚丽的 App 级别 UI 渲染和交互表现。

在 Unity 技术开放日深圳站，来自 Unity 的技术专家为大家详细解读了这项技术。

大家好，我是 UIWidgets 团队的开发者，今天给大家分享一下 UIWidgets 技术。

UIWidgets 是一个 APP 级别的 UI 技术解决方案，让用户摆设原始 CSS，用更短的时间和更简的方法开发出更酷炫的 UI。

当我们接触第三方客户的时候他们都会有一个问题，既然已经有了一些 UI 系统，为什么我们还要自己做一些新的 UI 系统呢？跟大家讲一下我们的开发初心。

我们团队的成员中，有很多在加入 Unity 之前长期从事 APP 的开发，对于移动互联网的技术有一些了解。在团队头脑风暴的时候会遇到一个问题：Unity UI 系统为什么看起来相对简陋，没有一些流畅酷炫的效果。所以我们就想要在 Unity 中也能实现 APP 级别的 UI 效果，UIWidgets 应运而生。我们希望即使是UI 初学者也可以在 UIWidgets 中非常轻松地入门，快速开发出酷炫的 UI。

现在有很多开源的成熟 APP 技术，所以我们觉得没有必要重复造轮子。在一个跨平台的 APP 开源技术当中，我们看上了 Flutter。它拥有十分高效的开发方式、海量的社区、Google 大厂的支持，已经有大量用户基于这项技术试错，所以我们选择了它来助力 UIWidgets 的开发。

在 2019 年的时候，我们刚刚起步，对应 Flutter 的 1.5.4 全部由 C# 来实现。在 2020 年的时候，为了达到更低的能耗和更高的帧率，我们开始转向更接近 Flutter 的方式，将技术分为两层：上层为 C#，下层有 C++，渲染部分由 Skia 来实现。

一路走来，我们获得了很多开发者的认可，曾经的 Repo 有接近 2000 个 Star，250 个 Fork；迁移到新的后也有 300 个收藏，接近 35 个 Fork。开发的过程中，大家给我们提了很多建设性的意见，我们也在积极更新。希望大家都来玩一下，发发 Issue，希望对于大家的 UI 开发更有帮助。

UIWidgets 有以下几个特点：

第一，UIWidgets 有 APP 级别的 UI 渲染和交互效果；

第二，易上手、高性能的开发者体验；结合 Unity 自身的 3D 内容和 Asset Store 上各位大神的插件，可以让用户开发出更丰富的内容；

第三，我们在跟客户交流的过程中，发现有大量 APP 级别的 UI+3D 结合场景的需求，UIWidgets 可以很好地满足。

那么 UIWidgets 到底有什么亮点：

第一，矢量图形绘制。

UGUI 里任何一个基础的元素都需要一个 Texture，即使是基础的按纽也需要图，图放大之后往往会有模糊的情况。

如果用 UIWidgets 就没有这样的烦恼，因为 UIWidgets 都是矢量图。图中圆角矩形、中间的文字和右边的图标都是矢量作图，不用占用太多的纹理，随意放大清晰度也不会降低。中间的文字和右边的图标都是来自于字体库，是常见的 TTF 文件。大家可以自由缩放、自由定制，随意导入自己想要的设计。

其二，强大的动画支持。

我们不仅支持静态的图，还可以支持动态的图，比如十分常见的 GIF，还支持 Lottie 动画（Lottie 也是矢量做画的格式）。右边这个就是一个 Lottie 动画，它只需要几 KB 的 json 文件，节省了大量的资源。

其三，自适应高效布局。

左边和右边的场景使用的是同一份代码，标题这里是有自动换行的，下面相应的图标也有相应的自动布局。UIWidgets 对于不同的大小屏幕和 DPI 都可以自动进行配置，不需要用户进行额外的操作。

其四，海量开源组件。

我们有一些比较基础的组件，比如各种各样 BUTTON，带框不带框，带背景的，toggle 可以点击 Enable 和 Disabel 等等组件。

还有一些相对复杂一点的组件，可变换顺序的 List，相对直观的时钟，可随意切换页面动画。右边是比较常见的 Navigator Drawer，有时用户想点击一下，弹出来一个窗口，进行一些设置。

同时，Flutter 第三方社区库有 2 万多个 Packages，虽然都是用 Dark 写的，但是我们的亲身经历告诉我们，从 Dark 转换到 C# 是相对比较容易的。我们把 Flutter Free Maker 十万多行代码都转化成为了 C#。如果你们不太满意，代码也是完全开源的，可以在基础组件的基础之上修改出自己想要的组件。

其五是高效渲染。

作为 Unity Auto Streaming 的使用者，大家对于移动端的性能都是比较敏感的。特别是 UI，Unity 现在自带的 UI 有一个很大的痛点：即使 UI 不动也会占用比较高的 DrawCall。为了解决这个问题，以往会用比较复杂的动静分离，而我们 UIWidgets 中解决了这个问题。

因为 UI 只有发生改变的时候才会更新，并且只会更新发生改变的部分。由此，在 UI 不变的情况下，每一帧只需要一个 DrawCall 就可以把 UI 做成一个整体，放在一个场景里面。最终，我们把 DrawCall 压缩到了一个 Batch 里面。

最后，多平台支持。

依托于 Unity 强大的跨平台功能，相同的一份 UIwidgets 代码可以在多个平台上布局。现在实现的 Mac Os 、iOS、安卓和 Window 等等部署，可以看出效果是一模一样的。

接下来跟大家分享一下如何使用。

UIWidgets 完全开源，是开箱即用的。输入几行代码 Code 下来拉到 UIWidgets 的代码行，用 Package Manager 直接导入就可以使用，并且里面有大量的 Sample 场景，可以帮助初学者快速上手开发。

https://github.com/Unity-Technologies/com.unity.uiwidgets

代码即 UI

UIWidgets 与传统的 UI 构建方式不一样，它将设计与程序完全分离，设计师只需要关注设计样式，而各种各样的逻辑和事件绑定，则完全由程序员用代码来控制，这对于程序员和设计师双方而言，都是相当友好的。

比如说左侧是右边 Button 的所有代码，不仅包含了 Button 的所有样式，如圆角、颜色、显示的文字、不同事件的响应、长按或者短按都显示在上面。非常简单明了，直接调用了 Unity 的方法，比较方便地开发调用 Unity 编辑器里面任何的命令，当然也可以是你自己写的 Script。

不仅 Button 是这样的，所有的组件都是这样的。

对于这方面我们还有一点需要提一下，UIWidgets 对于大型团队的开发也是有帮助的，传统 UGUI 当 merge conflict 之后，Merge 其实是比较费时费力的。由于我们是代码 Merge，所以完美解决了耗事耗力的问题。

UIWidgets 支持多种部署方式，可以放在 Unity 的 3D 场景当中，也可以放在 UGUI 的最上层作为 UI 的一部分，甚至你还可以用 UIWidgets 开发出自己要的 Editor Window，可以自己设计一些组件，更加加速自己开发的一些流程。

最后稍微讲一下 UIWidgets 的核心架构。

UIWidgets 它的架构分为两层，上层是由 C# 实现的 UIWidgets Framework，包含开发者接触比较多的，已经预设好的各种 Widgets 组件，Rendering 要用封装好的渲染命令和动画相关的绘制逻辑。

下层主要是是 C++ Engine 的部分，涉及多线程的调度，以及调用绘图命令。

很显然，我们还依赖于 Flutter 和 Unity， Flutter fml 帮助我们实现多线程的管理以及 Isolate 的管理，Skia 做图做画，Unity 会提供键盘输入、触控输入，同时它还会触发 UIWidgets 的 Vsync。

接下来请另一个同时来演示一下实际的应用场景。

大家好，接下来我为大家演示一下 UIWidgets 的一个基本开发方式。我现在界面打开的是 Connect App 的项目工程。我今天会在这个项目的基础上做一些小改动，简单演示一下我们的开发过程是怎样的。

首先明确我们想要实现的效果，是在图中搜索栏右侧加一个按纽，按下按纽会弹起显示一个 Dialog，出现一个矢量做图的动画。

这就是项目里面的代码，有横向的列表、搜索栏，我们只需要在后面新增一个 Button，就可以给这个 Button 一个图标或者文字进行定义了。

这里随便定义了一个，有了图标之后还可以给它一个 Padding（指上下左右的边距），比如这里给左右边距稍微宽一点，上下的边距稍微窄一点，Button 的定义就好了。

现在切回到场景当中可以看到，这边已经有了一个刚添加进来的 Button，但是点击它其实是没有效果的，因为在代码里面没有添加相应的事件。

代码的响应也是加入到事件里的。

添加一个点击事件，这个点击事件里面显示一个Dialog，配置一些属性 Context，这个 Context 就是当前的 Context，还有弹出的 Dialog Panel 的背景颜色（设置半透明 0.5），还可以设置背景板是否可点击。

现在已经有了背景板，但里面是没有内容的。现在可添加一些内容，比如添加一个纵向的列表，它可以接收一个 List Widget，放置一个 Continer，可以给一个宽/高，同样可以复制一个颜色，比如说蓝色。现在再回到场景当中看一眼。

这里显示了一个高宽都是 30 的 Continer，接下来要做的就是，把它放在正中央，里面加入一个动画。

采用居中格式，采用 Child New Lottie 动画，准备好了一个 .Json 的文件。到目前为止已经完成了，我们看一下效果。

最后稍微总结一下：

UIWidgets 的代码就在这里，大家可以多玩一玩。如果你的 APP 当中有很多 3D 场景可以用 UIWidgets 开发；如果游戏当中有是非常复杂的 UI 界面，也可以用 UIWidgets；用 Unity 进行移动互联网的团队开发也可以用 UIWidgets。

这个是 UIWidgets 的 QQ 群，有任何问题都欢迎在群里提问。谢谢大家！

UIWidgets QQ 群：234207153

Unity 官方微信

第一时间了解Unity引擎动向，学习最新开发技巧