Unity3D框架插件uFrame实用参考手册(一)

1.概览

uFrame是提供给Unity3D开发者使用的一个框架插件，它本身模仿了MVVM这种架构模式（事实上并不包含Model部分，且多出了Controller部分）。因为用于Unity3D，所以它向开发者提供了一套基于Editor的可视化编辑工具，可以用来管理代码结构等。本文为uFrame1.6版本在项目中实践的记录，主要包括一些uFrame中的基本概念以及应用的流程。

2.新建uFrame工程

本小节主要内容包括：

• 在uFrame新建工程
• 在uFrame的可视化编辑器中打开工程仓库
• 在uFrame的可视化编辑器中设置工程的命名空间，用来在生成模板代码时使用

2.1.在uFrame中新建工程

[u]Frame->New Project。

如图：

此时，打开MyProject文件夹，我们创建的uFrame的工程仓库已经创建好了。

我们可以对这个文件进行重命名，以符合自己的习惯。

到此，我们就完成了在uFrame中创建一个新的工程的任务。

2.2.在uFrame的可视化编辑器中打开工程仓库

点击Editor的工具栏，选中Window->uFrame Designer:

在uFrame的编辑器中，我们可以选择我们刚刚创建的uFrame工程。

这样，我们就在uFrame的编辑器中打开了刚刚创建的uFrame工程了。

2.3.设置工程的命名空间

选中在2.1中生成的工程仓库文件，我们在它的inspector面板中可以设置这个工程的命名空间。

至此，整个工程的基本设置就已经完成了，下面我们继续进一步进行一些具体的操作。

3.创建子系统

本小节主要内容包括：

• 介绍uFrame中图（Graph）的概念
• 创建一个MVVM图（MVVM Graph）
• 创建一个子系统图（Subsystem Graph）

3.1.uFrame中的图（graph）

我们可以通过uFrame的可视化编辑器（designer）来创建一个图，在designer的左侧我们可以打开图的选择框：

选择框中列出的是可以创建的图的类型。

需要我们注意的是，此时创建的图会自动和此时选中的工程链接，且图文件会在被选中的工程的文件夹中创建。

3.2.创建MVVM图

我们可以看到创建完之后，这个图只包括一个节点（Node），该节点代表图本身，我们可以称它为图节点（Graph node）。

而且，一个图文件也在我们的工程文件夹中被创建了出来。

如果需要修改图的名字，我们可以直接在designer中修改图节点的名字，右键点击节点，选择Rename即可。

3.3.创建子系统图

下面就让我们在MVVM图之下添加一些子系统，来丰富这个工程的功能吧。

我们只需要在空白处点击右键，即可弹出一个选择菜单：

选择Add Sub System即可在FoxMain环境中添加一个子系统了。

注意：此处需要提醒各位注意，不同的环境下选择菜单的内容是不同的，可添加的元素也不同，例如在此处的MVVM Kernel图中我们可以创建SubSystem，而Element节点只能在SubSystem中创建，同样，View节点只能在Element节点中创建。所以想要创建目标节点时，一定要确定现在的环境（可以通过左上角看到当前所在的环境，例如现在是FoxMain）。

4.创建节点(Node)

本小节主要内容包括：

• 解释什么是Element节点并创建Element节点
• 解释什么是View节点并创建View节点

4.1.Element节点

在designer中，Element节点主要定义了ViewModel和Controller，Element中的数据主要有三部分组成：

• 属性Property，主要是单个数据
• 集合Collection，主要是数据集合
• 命令Command，主要定义了一些命令，由Controller执行。

由于它们是常规的C#类型，并没有继承Unity3D中的Monobehaviour，因此它们不依赖Unity3D，所以它们是可移植的。

而在Unity3D中，我们通过创建和Unity3D相关的View来绑定ViewModel，从而表现ViewModel中的数据。

下面我们就在刚刚创建的UISys子系统中创建一个Element节点，并命名为Login。

右键点击designer的空白处，可以弹出一个选择菜单，其中包括很多Add选项，例如Command、Element等等。选择Add Element，一个名为Login的Element节点便被创建出来了。

注意：观察designer的左上角，可以看到我们此时处在UISys中，即我们现在在UISys图（graph）中。之所以要在此提示各位注意这一点，是由于节点可以以子系统的图节点为目标添加，也可以以别的节点为目标添加，如果我们双击Login节点，就变成了以Login节点为目标添加。

4.2.View节点

View是展示层，它通过绑定ViewModel来展示ViewModel中的数据。举一个例子各位可能会更容易理解这个意思：假设我们的游戏中有一个PlayerViewModel，针对这一个ViewModel我们在游戏中可以有多种表现方式，例如：我们可以有一个PlayerView对应游戏中的玩家模型，根据ViewModel中的数据展示各种动作、或者位移。也可以有一个PlayerInfoView对应游戏中的玩家数据UI，根据同一个ViewModel中的数据，展现例如玩家血量、经验值等等信息。

而绑定了同一个ViewModel的多个View的不同之处就在于，各个View只关注ViewModel上它们所需要的数据，各个View之间也应该尽可能的保持独立性。

那么下面我们就来创建一个View节点。

双击Login节点进入以Login为目标的环境，和创建Element节点的过程类似，右键点击空白处弹出选择菜单，这次菜单中包括Add View的选项，如下图：

（我们还可以看到左上角已经从之前的UISys变成了现在的Login）

这样，一个View节点便被创建出来了。

现在分别代表ViewModel和View的节点已经被创建出来了，接下来我们就要创建ViewModel上的数据了。