Page History

Overview

After completing this topic you will be able to:

• Create a user interface (UI) for your game using Vectorian Giotto.
• Make your UI interactive with ActionScript using FlashDevelop.
• Implement a UI using Flowgraph.
• Learn to use the UI Emulator.

Download and install the following tools:

• Vectorian Giotto
• Notepad++: http://notepad-plus-plus.org/
• FlashDevelop: http://www.flashdevelop.org/

Getting Started with the Graphical UI

After installing the tools start Vectorian Giotto. This program will be used to create the graphical side of the UI.

Setting Up the Document

• Go to File > New Movie.

First, we are going to set the document settings.

• Go to Modify > Document.
• Enter 1280 for the width.
• Enter 720 for the height.
• Enter 30 for the frame rate.
• Set the ruler units to be in pixels.

Vectorian Giotto never asks you to save your work, so make sure you save regularly as well as before closing.

1. Go to File > Save.

Since Vectorian Giotto doesn't have a workspace or something, you will have to keep it tidy yourself.

• Make a folder "Giotto workspace" .
• In that folder add another folder called "TutorialProject".
• In that folder save your file as "TutorialButton".

At the top of the screen you will find the timeline. It is smart to keep the background and the components separate, on different layers.

• Double click on the existing layer, Layer1.
• Rename it to something like "Background", or "BG".
• Right click on the layer, and add a new layer.
• Rename this one to "Components".

Creating the Graphical User Interface

Creating the Button

• On the right, select a color of your choice from the color palette, and on the left select the Rectangle Tool .
• Make sure the component layer is selected at the top.
• Draw a box on the canvas which will represent the button.

• Select the Text Tool on the left, and again, pick a color on the right.
• Click on the button and type some text.
• Click on the Selection Tool and move your text in place.

Now we are going to turn this shape with text into a button.

• Right click on the rectangle you have just drawn, and select "Convert to symbol".
• Give it a name, e.g. "TestButton".
• Make sure to select Button, not movieclip, and click on "OK".

Now the shape has been replaced with your button. If you double click on it you will zoom in on it, the timeline will change and we can edit the buttons properties.

It now has four states:

• Right click on the second frame ("Over") > Insert keyframe.
• Do this for the other states as well.

Now we can change the appearance of the button in different states.

• Go to the Over state and move the color slider around, you could choose to just change the brightness. Do the same for the Down and Hit state.
• Click on "Go To Movie" to return to your scene, otherwise everything you will do next will be done inside the button instead of in the scene.

Creating the MessageBox

Now we will add some text to our scene which we can edit in real-time later.

• Select the Text Tool on the left.
• Pick a color on the right. Make sure not to pick black. The UI emulator which we will use later has a black background, so for testing purposes it is easier to choose red for example
• Draw a text field.

Your scene should look something like this:

Exporting the UI

Now, since we want to use the button and the text field in script, we will give them a sensible name.

• Click on the button and give it a name.
  
• Do the same for the textbox in the middle.
  

Also, because we are using fonts, we need to embed them in the SWF file.
To do this use the Selection Tool, and click on the MessageBox in the middle.

At the bottom in the properties:

• Set its type to dynamic.
• Click on the "sel" button, this will make sure the text cannot be selected during run-time.
• Set the button's alignment to be in the center.
• Click on "Embed...".
• Select all the four lines and click on "OK". This will make sure that the font is included in the SWF and thus can be rendered.

• Save your file again.
• Go to File > export Flash movie.
• And export it to the same folder. It will ask you to compress the movie, do not check the box and just click on "OK".

Now you should have the following files in your project folder:

• TutorialButton.vgd
• TutorialButton.swf

The SWF file currently contains only the graphical part of the UI, in the next part you will be creating the code to support it.

Making the User Interface Interactive

Setting Up the Project

• Open up FlashDevelop and go to: Project > New project.
• Under ActionScript 2, Select Empty project. If the AS2 templates are missing please get the templates from here.
• Give the project a name, e.g. "TutorialProject".
• Go to "Browse".
• Find your project folder.
• Click on "make new folder".
• Name it "code".
• Click on "OK".
• Click on "OK" again to create your project.

This will place the code in a folder next to the SWF, nice and tidy.

Now on the right you will see your project is created (TutorialProject(AS2)).

• Right click on it, and choose Add > New Class.
• Give it a name (ButtonTestClass for example).
• Click on "OK".

Now we have a project and a class which we will use to hook Flash up to CRYENGINE via Scaleform.

• Right click on the class and select Always Compile. This will make sure it compiles the class when you run the project.

Let's look at the project properties.

• Right click on your project, and go to Properties.
  
  

Here you will see 5 tabs, we will be editing only 2.

• First, the "Output" tab, this tab will hold all the info about the new exported file.
• Make sure the Platform is on Flash Player and version 8.0.
• The compilation target can stay on "Application".
• Click on browse and locate the folder with the SWF but make sure to give it a different name e.g "TutorialButtonInjected.swf". This gives a clear difference between the graphic SWF and the injected one.
• Set the dimensions and the frame rate to the same values as in your Vectorian Giotto project, 1280 x 720, 30 fps.

• Go to the "Injection" tab. This one holds the settings which are used to inject our ActionScript code into the graphical SWF file.
• Tick the "Enable Code Injection" checkbox.
• In the Input SWF file box, locate your UI file we have just created with Vectorian Giotto (TutorialButton.swf).

Adding the ActionScript

Now the project is ready to inject your ActionScript into the SWF file.

This file needs an entry point which looks like this:

static var ButtonTest:ButtonTestClass;
public static function main(mc:MovieClip):Void
{
    ButtonTest = new ButtonTestClass();
}

This piece of code is executed in the beginning, it instantiates the ButtonTestClass and stores it in ButtonTest.

This means the constructor is called, and that is where we will put everything we need to initialize.

In the constructor the following code will deal with a buttonpress:

public function ButtonTestClass() 
{
    _root.ButtonClick.onPress = function()
    {
        fscommand("ButtonClickPressed");
    }
}

This overwrites the onPress function for the button with our own. Notice the "_root.ButtonClick". This is the path to the object, it will always start with _root, and then with whatever you named your button.

"fscommand" lets the Flash object communicate with its owner, in our case the Scaleform inside the engine. This command is used to send an event to CRYENGINE which you can catch in Flow Graph and process (this process will be explained later).

And finally, let's add a function to the constructor that can alter the text in the MessageBox for us:

_root.MessageLabel.ChangeMessage = function(message:String)
{
    _root.MessageLabel.text = message;
}

Here again, note the "_root.MessageLabel".

Here is the full code for the ActionScript file:

class ButtonTestClass
{
	static var ButtonTest:ButtonTestClass;

	public static function main(mc:MovieClip):Void
	{
		ButtonTest = new ButtonTestClass();
	}

    public function ButtonTestClass() 
    {
        _root.ButtonClick.onPress = function()
        {
	       	fscommand("ButtonClickPressed");
        }

        _root.MessageLabel.ChangeMessage = function(message:String)
        {
            _root.MessageLabel.text = message;
        }
    }
}

Exporting the Injected Movie to the Game

• Save your file.
• Project > Build Project.

This will inject the code into the given SWF file, and save it to the output file. If you want to run your project you can go to: Project > test project

It won't do much at this point because clicking the button will only generate an event that needs to be processed, but you can see how your UI looks like and if it runs without errors.

Now we are going to get our UI to run in a game.

• Go to your project folder.
• Copy the TutorialButtonInjected.swf.
• Paste it in: <GameFolder>\Libs\UI.
• Drag and drop the .swf file onto the converter tool located in: <root>\Tools\gfxexport.exe.
  • This will then create a proper GFx file for the engine to use.

Now in order for the engine to read it, it will need a UI element, which is stored in an XML file.

• Open up Notepad++.
• Paste the following code in the file:

<!-- Category name, of your own choosing -->
<UIElements name="TutorialHUD">

  <!-- Object name, again, of your own choosing -->
  <UIElement name="TutorialButton" render_lockless="1">
    
   <!-- Point it to the correct files and give it some default settings -->
    <GFx file="TutorialButtonInjected.gfx" layer="0">
      <Constraints>
         <Align mode="dynamic" valign="center" halign="center" scale="0" max="0" />
      </Constraints>
    </GFx>

	<!-- Map the function to change the message in the box -->
	<functions>
		<function name="ChangeMessage" funcname="MessageLabel.ChangeMessage">
			<param name="message" desc="" type="String"/>
		</function>
	</functions>

	<!-- Here we will define the event that the buttonClick will generate -->
    <events>
      <event name="OnClick" fscommand="ButtonClickPressed" desc="" />
    </events> 
 	
  </UIElement>
  
</UIElements>

• Save it as: <sdk_root>\GameSDK\Libs\UI\UIElements\TutorialButton.xml

Setting Up the UI Inside CRYENGINE

Test the UI in the UI Emulator

You can actually test your UI before dropping it in game with the help of the UI Emulator. To do this, go to: View > Open View Pane > UI Emulator

Under "Elements" there is a list of different UIs, yours should be listed among them.

• Click on your UI.
• Open up the properties below.
• Set the property "visible" to true.

Now you should see your UI in the emulator window.

• Open up "Flags".
• Set the property "Mouse Events" to true.

Now the UI will accept mouse events and the button will react to your mouse in the previewer.

You can even test the function you've just made and added.

• Open up "Functions".
• Double click on "ChangeMessage".
• You can change the "message" parameter and click on call to see if it works.

Use FlowGraph to Display your UI in Game

The FlowGraph For Displaying the UI

The last step is to get it actually running in your level and have the button responding to your clicks.

• Go to File > New.
• Give it a name and click on "OK".

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

• Open the flowgraph editor by clicking the FG button (or View > Open view pane > FlowGraph).
• File > New UI Action, give it a name.
• Optional: You can now move the UI action by right clicking and selecting change folder if you want to.

Now there is a blank sheet showing, your empty FlowGraph. Let's add nodes to start, end and configure the UI.

• Right click and go to Add Start Node.
• Right click and go to Add node -> UI -> Display -> Config.
• Right click and go to Add node -> UI -> Display -> Constraints.
• Right click and go to Add node -> UI -> Display -> Display.

In the three UI nodes:

• Double click on "Element".
• Click on "...".
• Select your UI element from the list.

Now set the following flags to true:

In Config:

• Cursor
• MouseEvents

In Constraints:

• Scale

Now link all the FlowGraph nodes together as shown below.

The FlowGraph for Handling Events and Functions

Let's add the events and functions to FlowGraph as mentioned earlier.

Add the event we defined:

• Right Click, Add node, UI, Events, TutorialButton, OnClick.

Add the function we made:

• Right Click, Add node, UI, Functions, TutorialButton, ChangeMessage.
• Now simply link OnClicks' "onEvent" to ChangeMessage's "Call" and give the message parameter a value by double clicking on it.

• Click on your main viewport.
• Press Ctrl+G to enter the game.

You should have a UI now which responds when you click on the button. The result might be skewed due to your viewport settings, in the emulator you can view it at different resolutions and see an accurate result.

Tips and Tricks

FlashDevelop

• Use the Prebuild and Postbuild commands to speed up the development process.
• You can set the output path directly to the folder: <GameFolder>/Libs/UI. This saves you another step in the development process.
• You can swap out Vectorian Giotto for different visual SWF editors if you prefer another one.

总览

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

• 使用 "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 文件。

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

static var ButtonTest:ButtonTestClass;
public static function main(mc:MovieClip):Void
{
    ButtonTest = new ButtonTestClass();
}

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

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

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

public function ButtonTestClass() 
{
    _root.ButtonClick.onPress = function()
    {
        fscommand("ButtonClickPressed");
    }
}

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

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

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

public static function ChangeMessage(message:String)
{
    _root.MessageLabel.text = message;
}

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

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

class ButtonTestClass
{
	static var ButtonTest:ButtonTestClass;

	public static function main(mc:MovieClip):Void
	{
		ButtonTest = new ButtonTestClass();
	}

    public function ButtonTestClass() 
    {
        _root.ButtonClick.onPress = function()
        {
	       	fscommand("ButtonClickPressed");
        }
    }

	public static function ChangeMessage(message:String)
	{
		_root.MessageLabel.text = message;
	}
}

导出注入的影片至游戏

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

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

1. 项目 > 测试项目

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

现在将使 UI 在游戏中运行

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

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

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

<!-- Category name, of your own choosing -->
<UIElements name="TutorialHUD">

  <!-- Object name, again, of your own choosing -->
  <UIElement name="TutorialButton" render_lockless="1">
    
   <!-- Point it to the correct files and give it some default settings -->
    <GFx file="TutorialButtonInjected.gfx" layer="0">
      <Constraints>
         <Align mode="dynamic" valign="center" halign="center" scale="0" max="0" />
      </Constraints>
    </GFx>

	<!-- Map the function to change the message in the box -->
	<functions>
		<function name="ChangeMessage" funcname="ButtonTestClass.ChangeMessage">
			<param name="message" desc="" type="String"/>
		</function>
	</functions>

	<!-- Here we will define the event that the buttonClick will generate -->
    <events>
      <event name="OnClick" fscommand="ButtonClickPressed" desc="" />
    </events> 
 	
  </UIElement>
  
</UIElements>
?

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。

Overview

After completing this topic you will be able to:

• Create a user interface (UI) for your game using Vectorian Giotto.
• Make your UI interactive with ActionScript using FlashDevelop.
• Implement a UI using Flowgraph.
• Learn to use the UI Emulator.

Download and install the following tools:

• Vectorian Giotto: http://vectorian.com/giotto/
• Notepad++: http://notepad-plus-plus.org/
• FlashDevelop: http://www.flashdevelop.org/

Getting Started with the Graphical UI

After installing the tools start Vectorian Giotto. This program will be used to create the graphical side of the UI.

Setting Up the Document

• Go to File > New Movie.

First, we are going to set the document settings.

• Go to Modify > Document.
• Enter 1280 for the width.
• Enter 720 for the height.
• Enter 30 for the frame rate.
• Set the ruler units to be in pixels.

Vectorian Giotto never asks you to save your work, so make sure you save regularly as well as before closing.

1. Go to File > Save.

Since Vectorian Giotto doesn't have a workspace or something, you will have to keep it tidy yourself.

• Make a folder "Giotto workspace" .
• In that folder add another folder called "TutorialProject".
• In that folder save your file as "TutorialButton".

At the top of the screen you will find the timeline. It is smart to keep the background and the components separate, on different layers.

• Double click on the existing layer, Layer1.
• Rename it to something like "Background", or "BG".
• Right click on the layer, and add a new layer.
• Rename this one to "Components".

Creating the Graphical User Interface

Creating the Button

• On the right, select a color of your choice from the color palette, and on the left select the Rectangle Tool .
• Make sure the component layer is selected at the top.
• Draw a box on the canvas which will represent the button.

• Select the Text Tool on the left, and again, pick a color on the right.
• Click on the button and type some text.
• Click on the Selection Tool and move your text in place.

Now we are going to turn this shape with text into a button.

• Right click on the rectangle you have just drawn, and select "Convert to symbol".
• Give it a name, e.g. "TestButton".
• Make sure to select Button, not movieclip, and click on "OK".

Now the shape has been replaced with your button. If you double click on it you will zoom in on it, the timeline will change and we can edit the buttons properties.

It now has four states:

• Right click on the second frame ("Over") > Insert keyframe.
• Do this for the other states as well.

Now we can change the appearance of the button in different states.

• Go to the Over state and move the color slider around, you could choose to just change the brightness. Do the same for the Down and Hit state.
• Click on "Go To Movie" to return to your scene, otherwise everything you will do next will be done inside the button instead of in the scene.

Creating the MessageBox

Now we will add some text to our scene which we can edit in real-time later.

• Select the Text Tool on the left.
• Pick a color on the right. Make sure not to pick black. The UI emulator which we will use later has a black background, so for testing purposes it is easier to choose red for example
• Draw a text field.

Your scene should look something like this:

Exporting the UI

Now, since we want to use the button and the text field in script, we will give them a sensible name.

• Click on the button and give it a name.
  
• Do the same for the textbox in the middle.
  

Also, because we are using fonts, we need to embed them in the SWF file.
To do this use the Selection Tool, and click on the MessageBox in the middle.

At the bottom in the properties:

• Set its type to dynamic.
• Click on the "sel" button, this will make sure the text cannot be selected during run-time.
• Set the button's alignment to be in the center.
• Click on "Embed...".
• Select all the four lines and click on "OK". This will make sure that the font is included in the SWF and thus can be rendered.

• Save your file again.
• Go to File > export Flash movie.
• And export it to the same folder. It will ask you to compress the movie, do not check the box and just click on "OK".

Now you should have the following files in your project folder:

• TutorialButton.vgd
• TutorialButton.swf

The SWF file currently contains only the graphical part of the UI, in the next part you will be creating the code to support it.

Making the User Interface Interactive

Setting Up the Project

• Open up FlashDevelop and go to: Project > New project.
• Under ActionScript 2, Select Empty project. If the AS2 templates are missing please get the templates from here.
• Give the project a name, e.g. "TutorialProject".
• Go to "Browse".
• Find your project folder.
• Click on "make new folder".
• Name it "code".
• Click on "OK".
• Click on "OK" again to create your project.

This will place the code in a folder next to the SWF, nice and tidy.

Now on the right you will see your project is created (TutorialProject(AS2)).

• Right click on it, and choose Add > New Class.
• Give it a name (ButtonTestClass for example).
• Click on "OK".

Now we have a project and a class which we will use to hook Flash up to CRYENGINE via Scaleform.

• Right click on the class and select Always Compile. This will make sure it compiles the class when you run the project.

Let's look at the project properties.

• Right click on your project, and go to Properties.
  
  

Here you will see 5 tabs, we will be editing only 2.

• First, the "Output" tab, this tab will hold all the info about the new exported file.
• Make sure the Platform is on Flash Player and version 8.0.
• The compilation target can stay on "Application".
• Click on browse and locate the folder with the SWF but make sure to give it a different name e.g "TutorialButtonInjected.swf". This gives a clear difference between the graphic SWF and the injected one.
• Set the dimensions and the frame rate to the same values as in your Vectorian Giotto project, 1280 x 720, 30 fps.

• Go to the "Injection" tab. This one holds the settings which are used to inject our ActionScript code into the graphical SWF file.
• Tick the "Enable Code Injection" checkbox.
• In the Input SWF file box, locate your UI file we have just created with Vectorian Giotto (TutorialButton.swf).

Adding the ActionScript

Now the project is ready to inject your ActionScript into the SWF file.

This file needs an entry point which looks like this:

static var ButtonTest:ButtonTestClass;
public static function main(mc:MovieClip):Void
{
    ButtonTest = new ButtonTestClass();
}

This piece of code is executed in the beginning, it instantiates the ButtonTestClass and stores it in ButtonTest.

This means the constructor is called, and that is where we will put everything we need to initialize.

In the constructor the following code will deal with a buttonpress:

public function ButtonTestClass() 
{
    _root.ButtonClick.onPress = function()
    {
        fscommand("ButtonClickPressed");
    }
}

This overwrites the onPress function for the button with our own. Notice the "_root.ButtonClick". This is the path to the object, it will always start with _root, and then with whatever you named your button.

"fscommand" lets the Flash object communicate with its owner, in our case the Scaleform inside the engine. This command is used to send an event to CRYENGINE which you can catch in Flow Graph and process (this process will be explained later).

And finally, let's add a function to the constructor that can alter the text in the MessageBox for us:

_root.MessageLabel.ChangeMessage = function(message:String)
{
    _root.MessageLabel.text = message;
}

Here again, note the "_root.MessageLabel".

Here is the full code for the ActionScript file:

class ButtonTestClass
{
	static var ButtonTest:ButtonTestClass;

	public static function main(mc:MovieClip):Void
	{
		ButtonTest = new ButtonTestClass();
	}

    public function ButtonTestClass() 
    {
        _root.ButtonClick.onPress = function()
        {
	       	fscommand("ButtonClickPressed");
        }

        _root.MessageLabel.ChangeMessage = function(message:String)
        {
            _root.MessageLabel.text = message;
        }
    }
}

Exporting the Injected Movie to the Game

• Save your file.
• Project > Build Project.

This will inject the code into the given SWF file, and save it to the output file. If you want to run your project you can go to: Project > test project

It won't do much at this point because clicking the button will only generate an event that needs to be processed, but you can see how your UI looks like and if it runs without errors.

Now we are going to get our UI to run in a game.

• Go to your project folder.
• Copy the TutorialButtonInjected.swf.
• Paste it in: <GameFolder>\Libs\UI.
• Drag and drop the .swf file onto the converter tool located in: <root>\Tools\gfxexport.exe.
  • This will then create a proper GFx file for the engine to use.

Now in order for the engine to read it, it will need a UI element, which is stored in an XML file.

• Open up Notepad++.
• Paste the following code in the file:

<!-- Category name, of your own choosing -->
<UIElements name="TutorialHUD">

  <!-- Object name, again, of your own choosing -->
  <UIElement name="TutorialButton" render_lockless="1">
    
   <!-- Point it to the correct files and give it some default settings -->
    <GFx file="TutorialButtonInjected.gfx" layer="0">
      <Constraints>
         <Align mode="dynamic" valign="center" halign="center" scale="0" max="0" />
      </Constraints>
    </GFx>

	<!-- Map the function to change the message in the box -->
	<functions>
		<function name="ChangeMessage" funcname="MessageLabel.ChangeMessage">
			<param name="message" desc="" type="String"/>
		</function>
	</functions>

	<!-- Here we will define the event that the buttonClick will generate -->
    <events>
      <event name="OnClick" fscommand="ButtonClickPressed" desc="" />
    </events> 
 	
  </UIElement>
  
</UIElements>

• Save it as: <sdk_root>\GameSDK\Libs\UI\UIElements\TutorialButton.xml

Setting Up the UI Inside CRYENGINE

Test the UI in the UI Emulator

You can actually test your UI before dropping it in game with the help of the UI Emulator. To do this, go to: View > Open View Pane > UI Emulator

Under "Elements" there is a list of different UIs, yours should be listed among them.

• Click on your UI.
• Open up the properties below.
• Set the property "visible" to true.

Now you should see your UI in the emulator window.

• Open up "Flags".
• Set the property "Mouse Events" to true.

Now the UI will accept mouse events and the button will react to your mouse in the previewer.

You can even test the function you've just made and added.

• Open up "Functions".
• Double click on "ChangeMessage".
• You can change the "message" parameter and click on call to see if it works.

Use FlowGraph to Display your UI in Game

The FlowGraph For Displaying the UI

The last step is to get it actually running in your level and have the button responding to your clicks.

• Go to File > New.
• Give it a name and click on "OK".

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

• Open the flowgraph editor by clicking the FG button (or View > Open view pane > FlowGraph).
• File > New UI Action, give it a name.
• Optional: You can now move the UI action by right clicking and selecting change folder if you want to.

Now there is a blank sheet showing, your empty FlowGraph. Let's add nodes to start, end and configure the UI.

• Right click and go to Add Start Node.
• Right click and go to Add node -> UI -> Display -> Config.
• Right click and go to Add node -> UI -> Display -> Constraints.
• Right click and go to Add node -> UI -> Display -> Display.

In the three UI nodes:

• Double click on "Element".
• Click on "...".
• Select your UI element from the list.

Now set the following flags to true:

In Config:

• Cursor
• MouseEvents

In Constraints:

• Scale

Now link all the FlowGraph nodes together as shown below.

The FlowGraph for Handling Events and Functions

Let's add the events and functions to FlowGraph as mentioned earlier.

Add the event we defined:

• Right Click, Add node, UI, Events, TutorialButton, OnClick.

Add the function we made:

• Right Click, Add node, UI, Functions, TutorialButton, ChangeMessage.
• Now simply link OnClicks' "onEvent" to ChangeMessage's "Call" and give the message parameter a value by double clicking on it.

• Click on your main viewport.
• Press Ctrl+G to enter the game.

You should have a UI now which responds when you click on the button. The result might be skewed due to your viewport settings, in the emulator you can view it at different resolutions and see an accurate result.

Tips and Tricks

FlashDevelop

• Use the Prebuild and Postbuild commands to speed up the development process.
• You can set the output path directly to the folder: <GameFolder>/Libs/UI. This saves you another step in the development process.
• You can swap out Vectorian Giotto for different visual SWF editors if you prefer another one.

总览

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

• 使用 "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 文件。

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

static var ButtonTest:ButtonTestClass;
public static function main(mc:MovieClip):Void
{
    ButtonTest = new ButtonTestClass();
}

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

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

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

public function ButtonTestClass() 
{
    _root.ButtonClick.onPress = function()
    {
        fscommand("ButtonClickPressed");
    }
}

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

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

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

public static function ChangeMessage(message:String)
{
    _root.MessageLabel.text = message;
}

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

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

class ButtonTestClass
{
	static var ButtonTest:ButtonTestClass;

	public static function main(mc:MovieClip):Void
	{
		ButtonTest = new ButtonTestClass();
	}

    public function ButtonTestClass() 
    {
        _root.ButtonClick.onPress = function()
        {
	       	fscommand("ButtonClickPressed");
        }
    }

	public static function ChangeMessage(message:String)
	{
		_root.MessageLabel.text = message;
	}
}

导出注入的影片至游戏

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

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

1. 项目 > 测试项目

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

现在将使 UI 在游戏中运行

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

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

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

<!-- Category name, of your own choosing -->
<UIElements name="TutorialHUD">

  <!-- Object name, again, of your own choosing -->
  <UIElement name="TutorialButton" render_lockless="1">
    
   <!-- Point it to the correct files and give it some default settings -->
    <GFx file="TutorialButtonInjected.gfx" layer="0">
      <Constraints>
         <Align mode="dynamic" valign="center" halign="center" scale="0" max="0" />
      </Constraints>
    </GFx>

	<!-- Map the function to change the message in the box -->
	<functions>
		<function name="ChangeMessage" funcname="ButtonTestClass.ChangeMessage">
			<param name="message" desc="" type="String"/>
		</function>
	</functions>

	<!-- Here we will define the event that the buttonClick will generate -->
    <events>
      <event name="OnClick" fscommand="ButtonClickPressed" desc="" />
    </events> 
 	
  </UIElement>
  
</UIElements>
?

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。