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". Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 1 of 11 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: Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 2 of 11 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) 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. Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 3 of 11 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". Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 4 of 11 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". Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 5 of 11 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 Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 6 of 11 Now the project is ready to inject your ActionScript into the SWF file. This file needs an entry point which looks like this: Snippet from ButtonTestClass.as 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: Snippet from ButtonTestClass.as 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: Snippet from ButtonTestClass.as _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: ButtonTestClass.as 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"); } Confidential. © 2009-2015 Crytek GmbH. All Rights Reserved. Page 7 of 11 _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.