总览

完成了这个主题后您将能够：

• 使用 "Vectorian Giotto "为您的游戏创建用户界面 (UI)。
• 使用 "FlashDevelop" 可以使 UI 与脚本语言交互。
• 使用 "Flowgraph" 实现 UI。
• 学习使用 UI 模拟器。

下载并安装以下工具：

图形 UI 入门知识

安装工具之后开始运行 "Vectorian Giotto"。使用该程序创建 UI 的图形端。

Setting Up the Document

1. 进入 文件 > 新影片。

首先进行文档设置。

1. 进入 修改 > 文档。
2. 输入 "1280" 修改宽度。
3. 输入 "720" 修改高度。
4. 输入 "30" 修改帧速率。
5. 将标尺单位设置为像素。

"Vectorian Giotto" 不会提示您保存工作，因此在关闭之前要确保随时保存。

1. 进入 文件 > 保存。

由于 "Vectorian Giotto" 没有工作区或诸如此类的区域，因而您将需要保持其整洁。

1. 新建一个“Giotto 工作区”文件夹。
2. 在该文件夹中添加另外一个文件夹，命名为“教程项目”。
3. 在该文件夹中将您的文件保存为“按钮教程”。

在屏幕的顶端您将发现时间轴。该时间轴将后景和组件智能分开在不同的图层中。

1. 双击现有图层，图层 1。
2. 使用诸如“后景”或 "BG" 之类的名称重命名该图层。
3. 右击该图层，添加新的图层。
4. 重命名该图层为“组件”。

创建图形用户界面

创建按钮

1. 从右侧的调色板中选择一种颜色，再选择左侧的矩形工具.
2. 确保顶部的组件层已选。
3. 在画布中画一个将表示按钮的方框。

1. 再次选择左侧的文本工具，从右侧选择一种颜色。
2. 单击按钮并键入一些文本。
3. 单击选择工具  并适当地移动文本。

现在我们将使用文本将图形转换为按钮。

1. 右击您刚刚在画布中画的矩形方框，并选择“转换为符号”。
2. 指定名称，例如：文本按钮。
3. 确保要选择“按钮”，而不是影片剪辑，并单击“确定”。

现在图形已被按钮替换。双击该按钮可将其放大，将更改时间轴并且可以编辑按钮属性。

目前该按钮包括四种状态：悬上、接触、按下和点击。

1. 右击第二个框架（“接触”） > 插入关键帧。
2. 按照同样的步骤为其他状态插入关键帧。

现在我们可以改变不同状态下的按钮外观。

1. 进入“悬上”状态并移动颜色滑杆，您可以选择颜色只改变光度。按照同样的步骤为“按下”和“点击”状态改变光度。
2. 单击“进入影片”以返回您的场景，否则接下来您的操作将是在按钮中完成而不是在场景中完成。

创建消息框

现在将添加一些文本到我们的场景中，稍后我们可以在该场景中实时编辑。

1. 选择左侧的文本工具。
2. 从右侧中选择一种颜色。确保未选择黑色。由于稍后我们将要使用的 UI 模拟器是黑色后景，因此，为易于测试，可以选择例如红色
3. 绘制一个文本字段。

您的场景外观应该是这样。

导出 UI

现在，由于我们想要使用脚本中的按钮和文本字段，我们可以使用适当的名称为其命名。

1. 单击按钮并命名。
   

1. 按照同样的步骤为中间的文本框命名。
   

而且由于我们使用的是字体文件夹，我们需要将其嵌入到 SWF 文件中。请使用“选择工具”来完成此操作，并单击中间的“消息框”。

在属性的底部：

1. 设置其类型为动态类型。
2. 单击“选择”按钮，此操作将确保文本在运行时不被选取。
3. 将按钮对齐方式设置为居中。
4. 单击“嵌入...”。
5. 选择所有的四行字体并单击“确认”。此操作将确保可以显示包括 SWF 文件在内的字体。

1. 再次保存您的文件。
2. 进入 文件 > 导出 Flash 影片。
3. 并将其导出至同一文件夹。系统将询问您是否压缩影片，不需选中复选框，仅需单击“确认”。

现在您的项目文件夹中应该包含以下文件：

• TutorialButton.vgd
• TutorialButton.swf

目前 SWF 文件中仅包含 UI 的图片部分，在下一部分中您将创建支持该图片的代码。

实现用户界面交互

设置“项目”

打开 FlashDevelop 并进入

1. 项目 > 新建项目。
2. 在“脚本语言 2”下方选择空项目。.
3. 给该项目命名，例如“教程项目”。
4. 进入“浏览器”。
5. 寻找您的项目文件夹。
6. 单击“制作新文件夹”。
7. 将其命名为“代码”。
8. 单击“确认”。
9. 再次单击“确认”以创建项目。

此操作将会把代码放置于 SWF 旁边的文件夹，美观且整齐。

现在在右侧您将看到您已创建的项目（教程项目 (AS2)）。

1. 右击该项目，并选择 添加 > 新类。
2. 将其命名（例如“测试按钮类”）。
3. 并单击。

现在已有项目和类，并且我们将使用类经由 Scaleform 使 Flash 与 CryEngine 挂钩。

1. 右击该类并选择 总是编译。此操作将确保在项目运行时编译该类。
   

下面继续项目属性。

1. 右击您的项目，进入 属性。
   

在此处您将看到 5 个标签，我们将仅编辑其中 2 个。

1. 首先是“输出” 标签，此标签将暂存所有新导出文件的信息。
2. 确保该平台使用的是 Flash 播放器和 8.0 版本。
3. 编译目标可以保持在“应用程序”中。
4. 单击浏览器并使用 SWF 文件查找文件夹的位置，但要确保以不同的名称命名。例如 "TutorialButtonInjected.swf"。该名称可以显现出 SWF 图形和注入编码后图形的明显区别。
5. 设置维度和帧速率的数值与 "Vectorian Giotto" 项目中维度和帧速率的数值相同，分别设置为" 1280 x 720" 和 "30 fps"。

1. 进入“注入”标签，此标签暂存用于注入操作脚本代码到 SWF 图形文件的设置。
2. 标记“启用代码注入”复选框。
3. 在输入 SWF 文件框中，查找我们刚刚使用 "Vectorian Giotto" (TutorialButton.swf) 创建的 UI 文件的位置。

添加操作脚本

现在，项目将准备注入操作脚本到 SWF 文件。

此文件需要如下所示的入口点：

起初执行代码片段，该操作将“测试按钮类”实例化并保存于“测试按钮”中。

这意味着已调用构造函数，我们需要进行实例化的所有类皆可以在此处执行。

构造函数中以下代码将处理按下按钮：

使用我们自己的按钮重写“按下”函数。注意 "_root.ButtonClick"。
这是对象路径，该路径总是以 　"_根，开始，然后是按钮名称。

命令使 Flash 对象与其所有者实现沟通，在我们的实例中是实现 CryEngine 与其内部的 Scaleform 沟通。
该命令用于发送事件至可以捕获 Flowgraph 和 流程（稍后将对此流程进行说明）的 CryEngine。

最后，添加可以更改消息框中文本的函数。

这里再次注意"_root.MessageLabel"。

此处是操作脚本文件的完整代码：

导出注入的影片至游戏

1. 保存您的文件。
2. 项目 > 建立项目。

此操作将注入代码至给定的 SWF 文件，并将其另存至输出文件中。
若您想要运行您的项目，您可以进入

1. 项目 > 测试项目

由于点击按钮将仅生成即将处理的事件，因而此时不需多项操作，但您可以查看您的 UI 以及运行时未出现错误的外观。

现在将使 UI 在游戏中运行

1. 进入您的项目文件夹。
2. 复制 "TutorialButtonInjected.swf" 文件。
3. 粘贴至“<您的 CryEngine 文件夹> \游戏\库\UI"。
4. 用 ".gfx" 扩展名重命名该文件。

现在为使 CryEngine 能够读取该文件，将需要一个保存在 XML 文件中的 UI 元素。

1. 打开记事本++。
2. 粘贴文件中的以下代码。

1. 按照以下路径保存： "<your CryEngine directory>\Game\Libs\UI\UIElements\TutorialButton.xml"

设置 CryEngine 内部的 UI

测试 UI 模拟器中的 UI

在 UI 模拟器的帮助下，实际上可在将 UI 置于游戏中之前对其进行测试，若要完成此操作，请进入

视图 > 打开试图窗格 > UI 模拟器

注：您在此模拟器中的所有操作都具有临时性，仅供预览而不保存任何设置。

“元素”下方是不同的 UI 列表，您的 UI 应列入其中。

1. 单击您的 UI。
2. 打开下方的属性。
3. 将“可见”属性设置为真。

现在您应该在模拟器窗口中查看您的 UI。

1. 打开“标志”。
2. 设置“鼠标事件”属性为为真。

现在 UI 将接受鼠标事件并且按钮将对预览中的鼠标做出反应。

您可以测试刚刚设定和添加的函数。

1. 打开“函数”。
2. 双击“修改消息”。
3. 您可以修改“消息”参数并单击调用以查看其是否运行。

旁注：若您的 UI 中未设置后景且文本颜色设置为黑色，由于 UI 模拟器的背景也是黑色，您将无法读取该文本。
因此，为易于测试，明智的做法是添加背景或使用彩色元素。

使用 FlowGraph 以在游戏中显示您的 UI

使用 FlowGraph 显示 UI

最后一步是在您的关卡中实际运行 UI 并使按钮响应点击。

1. 进入*文件* > 新建。
2. 命名该文件并单击“确认”。

We don't need to bother with adding anything to the level, the water will be fine for now.

1. Open the flowgraph editor by clicking the FG button.
   or
2. View > Open view pane > FlowGraph.

1. 文件 > *新建 UI 操作*并命名。
2. 可选项：您现在可以通过右击实现移动 UI 操作，若想更改文件夹，也可选择更改。

现在显示的是一个空白表格，即您的空 FlowGraph。添加节点以开始、结束程序并对 UI 进行配置。

1. 右击并进入*添加节点*、UI、操作*和*开始。
2. 右击并进入*添加节点*、UI、操作*和*结束。
3. 右击并进入*添加节点*、UI、显示*和*配置。
4. 右击并进入*添加节点*、UI、显示*和*约束。

在配置和约束中：

1. 双击“元素”。
2. 单击 "..."。
3. 从列表中选择 UI 元素。

现在将把以下标记设置为真：

在配置中：

• 光标
• 鼠标事件

在约束中：

• 缩放

如下所示，现在链接所有 FlowGraph 节点。

处理事件和函数的 FlowGraph

如前面提到的添加事件和函数至 FlowGraph 。
添加我们定义的事件：

1. 右击，添加节点、UI、事件，按钮教程 和 单击。

添加我们所设定的函数：

1. 右击，添加节点、UI、函数、按钮教程 和 修改消息。
2. 现在仅链接单击“事件”到修改消息“调用”并通过双击来设定消息参数的数值。

1. 单击主视窗口。
2. 请按 Ctrl+G 键。

现在单击按钮时您的 UI 应该有所响应。由于您的视区设置，其结果可能不尽如人意，在模拟器中您可以低分辨率查看该结果并且可以得到精确的结果。

提示和诀窍

FlashDevelop

• 使用“预构建”和“构建后”命令以加快开发流程。
• 您可以直接设置输出路径到游戏/库/UI 文件夹，扩展名也是 ".gfx"。此操作可以节省开发流程中的另一步骤。
• 若您有意愿，可以用不同的视觉 SWF 编辑器交换 Vectorian Giotto。