After completing this topic you will be able to:
Download and install the following tools:
After installing the tools start Vectorian Giotto. This program will be used to create the graphical side of the UI.
First, we are going to set the document settings.
Vectorian Giotto never asks you to save your work, so make sure you save regularly as well as before closing.
Since Vectorian Giotto doesn't have a workspace or something, you will have to keep it tidy yourself.
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.
Now we are going to turn this shape with text into a button.
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:
State | Description |
---|---|
Up | Mouse is not on the button |
Over | Mouse is on the button (not clicking anything) |
Down | Button is pressed (mouse button pressed) |
Hit | Button is hit (mouse released after press) |
Now we can change the appearance of the button in different states.
Now we will add some text to our scene which we can edit in real-time later.
Your scene should look something like this:
Now, since we want to use the button and the text field in script, we will give them a sensible name.
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:
Now you should have the following files in your project folder:
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.
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)).
Now we have a project and a class which we will use to hook Flash up to CRYENGINE via Scaleform.
Let's look at the project properties.
Here you will see 5 tabs, we will be editing only 2.
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;
}
}
}
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.
<GameFolder>\Libs\UI.
<root>\Tools\gfxexport.exe
.Now in order for the engine to read it, it will need a UI element, which is stored in an XML 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>
<sdk_root>\GameSDK\Libs\UI\UIElements\TutorialButton.xml
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.
Now you should see your UI in the emulator window.
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.
If you have no background in your UI and the text is black, you won't be able to read it since the UI emulator's background is black as well. So for testing purposes it is wise to add a background, or use colored elements.
The last step is to get it actually running in your level and have the button responding to your clicks.
We don't need to bother with adding anything to the level, the water will be fine for now.
Now there is a blank sheet showing, your empty FlowGraph. Let's add nodes to start, end and configure the UI.
In the three UI nodes:
Now set the following flags to true:
In Config:
In Constraints:
Now link all the FlowGraph nodes together as shown below.
Let's add the events and functions to FlowGraph as mentioned earlier.
Add the event we defined:
Add the function we made:
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.
<GameFolder>/Libs/UI
. This saves you another step in the development process.After completing this topic you will be able to:
Download and install the following tools:
After installing the tools start Vectorian Giotto. This program will be used to create the graphical side of the UI.
First, we are going to set the document settings.
Vectorian Giotto never asks you to save your work, so make sure you save regularly as well as before closing.
Since Vectorian Giotto doesn't have a workspace or something, you will have to keep it tidy yourself.
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.
Now we are going to turn this shape with text into a button.
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:
State | Description |
---|---|
Up | Mouse is not on the button |
Over | Mouse is on the button (not clicking anything) |
Down | Button is pressed (mouse button pressed) |
Hit | Button is hit (mouse released after press) |
Now we can change the appearance of the button in different states.
Now we will add some text to our scene which we can edit in real-time later.
Your scene should look something like this:
Now, since we want to use the button and the text field in script, we will give them a sensible name.
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:
Now you should have the following files in your project folder:
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.
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)).
Now we have a project and a class which we will use to hook Flash up to CRYENGINE via Scaleform.
Let's look at the project properties.
Here you will see 5 tabs, we will be editing only 2.
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;
}
}
}
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.
<GameFolder>\Libs\UI.
<root>\Tools\gfxexport.exe
.Now in order for the engine to read it, it will need a UI element, which is stored in an XML 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>
<sdk_root>\GameSDK\Libs\UI\UIElements\TutorialButton.xml
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.
Now you should see your UI in the emulator window.
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.
If you have no background in your UI and the text is black, you won't be able to read it since the UI emulator's background is black as well. So for testing purposes it is wise to add a background, or use colored elements.
The last step is to get it actually running in your level and have the button responding to your clicks.
We don't need to bother with adding anything to the level, the water will be fine for now.
Now there is a blank sheet showing, your empty FlowGraph. Let's add nodes to start, end and configure the UI.
In the three UI nodes:
Now set the following flags to true:
In Config:
In Constraints:
Now link all the FlowGraph nodes together as shown below.
Let's add the events and functions to FlowGraph as mentioned earlier.
Add the event we defined:
Add the function we made:
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.
<GameFolder>/Libs/UI
. This saves you another step in the development process.