横板格斗类游戏实战：UI框架的制作

UI框架是我们经常在项目开发中需要解决的一个问题，面试也经常被问道。很多框架设计的新人甚至有一些有相当丰富经验的开发者把这个问题想的过于复杂，我们就从需求开始分析，来解决UI框架的设计问题,设计出来一个足够简单又足够好用的UI框架。一个好用的UI框架要做到以下几点原则:

(1) UI视图与UI的代码进行完全的分离。UI代码操作与控制UI视图中的节点来显示结果与接收来自用户的操作。

(2)代码与视图分离后，要提供一种方法，非常方便的能将结果更新到UI视图上;

(3)代码与视图分离后，需要提供一些方法，可以在代码中封装监听事件的接口，让监听事件更方便。

以上3条原则确定后，大的机制就确定了，一个界面视图+界面控制代码，提供接口与方式非常方便的能操作视图。

对啦！这里有个游戏开发交流小组里面聚集了一帮热爱学习unity的零基础小白，也有一些正在从事unity开发的技术大佬，欢迎你来交流学习。

很多UI框架的同学，还要设计什么红点系统，什么弹窗系统，其实大可以不必，UI框架做到上面那一层就可以了，至于具体的弹出式对话框怎么做，如何做，基于上面的机制来实现对应的策略就可以了，所以我们做UI框架不做这些策略，具体的什么红点提示这些，我们放到游戏逻辑层去做，当作普通的开发需求就可以了。不要把系统弹窗和红点这种设计到框架代码中。

讲完基本的机制以后，我们来看下具体如何实现的，任何一个GUI的视图上面不会挂一个与逻辑相关的代码组件，只会挂UI操作组件，如Sprite, Button等(也可以自己实现的,比如摇杆)。所以我们搭建代码界面的时候，就是纯界面的拖拉，加了按钮，不挂响应函数等。做好视图以后，视图放特定的位置，接下来就是显示UI视图，由UI框架提供接口，传入视图Prefab的路径,就能把视图显示在Canvas场景中，生成UI视图节点放场景后，再把对应的代码挂到UI视图的根节点上。这里做一个约定，为了方便代码维护，UI视图的名字对应的UI视图的控制代码，是在UI视图的名字后面加一个_Ctrl。这样我们要查找一个UI视图的控制代码，只要赋值一下UI视图的名字，找到带_Ctrl的代码就可以了。如图1.6-1,UI视图预制体与对应的UI代码的对应关系，这样维护起来就非常方便。代码可以使用编辑器扩展，在制作完成与之体后自动生成对应的模板。

图(1.6-1)

同时所有的UI控制代码我们放一个文件夹下,如图1.6-2

图(1.6-2)

接下来看下UIMgr中的的实例化UI界面的接口代码，如图1.6-3:

图(1.6-3)

(1)实例化一个UI视图节点,到对应的UI场景中;

(2)挂控制脚本到UI视图的根节点,并返回UI视图节点;

接下来我们来看下UI框架如何实现原则(2)(3)，方便操作界面视图与监听视图事件。解决方案如下:

编写一个UICtrl的基类，它继承自Component组件类，然后在基类中实现方法，往UI控件上面添加事件响应函数如图1.6-4所示:

图(1.6-4)

这样监听UI的操作事件就变得很轻松了，只要传入监听事件得节点在视图中得路径层次，就可以完成事件的监听。

如何方便的把UI的结果显示到对应的组件上，这个就更简单了，因为我们显示UI结果的几个组件我们可以在初始化的时候，写好对应的成员，初始化的时候，把组件获取到，后面只要显示数据到这个组件，直接操作就可以了。如图1.6-5:

这样后续要更新UI的结果的时候，直接把结果更新到这些组件上即可。

今天的教程分享就到这里，具体代码可以阅读UIMgr.ts与UICtrl.ts，把实现原理自己再掌握一遍。