Creating a Custom HUD

(For more resources related to this topic, see here.)

Mission Briefing

In this project we will be creating a HUD that can be used within a Medieval RPG and that will fit nicely into the provided Epic Citadel map, making use of Scaleform and ActionScript 3.0 using Adobe Flash CS6.

As usual, we will be following a simple step—by—step process from beginning to end to complete the project. Here is the outline of our tasks:

  • Setting up Flash

  • Creating our HUD

  • Importing Flash files into UDK

Setting up Flash

Our first step will be setting up Flash in order for us to create our HUD. In order to do this, we must first install the Scaleform Launcher.

Prepare for Lift Off

At this point, I will assume that you have run Adobe Flash CS6 at least once beforehand. If not, you can skip this section to where we actually import the .swf file into UDK. Alternatively, you can try to use some other way to create a Flash animation, such as FlashDevelop, Flash Builder, or SlickEdit; but that will have to be done on your own.

Engage Thrusters

The first step will be to install the Scaleform Launcher. The launcher will make it very easy for us to test our Flash content using the GFX hardware—accelerated Flash Player, which is what UDK will use to play it. Let's get started.

  1. Open up Adobe Flash CS6 Professional. Once the program starts up, open up Adobe Extension Manager by going to Help | Manage Extensions....

    You may see the menu say Performing configuration tasks, please wait.... This is normal; just wait for it to bring up the menu as shown in the following screenshot:

  2. Click on the Install option from the top menu on the right—hand side of the screen. In the file browser, locate the path of your UDK installation and then go into the Binaries\GFx\CLICK Tools\ folder. Once there, select the ScaleformExtensions.mxp file and then select OK.

  3. When the agreement comes up, press the Accept button; then select whether you want the program to be installed for just you or everyone on your computer.

  4. If Flash is currently running, you should get a window popping up telling you that the program will not be ready until you restart the program. Close the manager and restart the program.

  5. With your reopened version of Flash start up the Scaleform Launcher by clicking on Window | Other Panels | Scaleform Launcher.

  6. At this point you should see the Scaleform Launcher panel come up as shown in the following screenshot:

  7. At this point all of the options are grayed out as it doesn't know how to access the GFx player, so let's set that up now.

  8. Click on the + button to add a new profile. In the profile name section, type in GFXMediaPlayer. Next, we need to reference the GFx player. Click on the + button in the player EXE section. Go to your UDK directory, Binaries\GFx\, and then select GFxMediaPlayerD3d9.exe. It will then ask you to give a name for the Player Name field with the value already filled in; just hit the OK button.

    UDK by default uses DirectX 9 for rendering. However, since GDC 2011, it has been possible for users to use DirectX 11. If your project is using 11, feel free to check out and use DX11.

  9. In order to test our game, we will need to hit the button that says Test with: GFxMediaPlayerD3d9 as shown in the following screenshot:

    If you know the resolution in which you want your final game to be, you can set up multiple profiles to preview how your UI will look at a specific resolution. For example, if you'd like to see something at a resolution of 960 x 720, you can do so by altering the command params field after %SWF PATH% to include the text —res 960:720.

  10. Now that we have the player loaded, we need to install the CLIK library for our usage. Go to the Preferences menu by selecting Edit | Preferences. Click on the ActionScript tab and then click on the ActionScript 3.0 Settings... button.

  11. From there, add a new entry to our Source path section by clicking on the + button. After that, click on the folder icon to browse to the folder we want. Add an additional path to our CLIK directory in the file explorer by first going to your UDK installation directory and then going to Development\Flash\AS3\CLIK.

  12. Click on the OK button and drag—and—drop the newly created Scaleform Launcher to the bottom—right corner of the interface.

Objective Complete — Mini Debriefing

Alright, Flash is now set up for us to work with Scaleform within it, which for all intents and purposes is probably the hardest part about working with Scaleform. Now that we have taken care of it, let's get started on the HUD!

As long as you have administrator access to your computer, these settings should be set for whenever you are working with Flash. However, if you do not, you will have to run through all of these settings every time you want to work on Scaleform projects.

Creating our HUD

Now that Flash is set up, let's actually create our HUD menu.

Engage Thrusters

Now let's start create our HUD menu!

  1. Inside the main menu of Adobe Flash, create a new ActionScript 3.0 project by going to Create New | ActionScript 3.0.

  2. In the PROPERTIES section of the Properties inspector, set the Size to 1280 x 720 by clicking on the existing numbers and typing in the new values and then hitting Enter. Above the stage, find the zoom scaling that currently says 100% and change it so that you can see everything within the white box. Alternatively, you can use Ctrl + 1.

  3. Access the Library section by clicking on the tab next to the Properties tab. Outside of Flash, go to the project's assets folder.

  4. Select all of the files and drag—and—drop them into the Library tab. Wait for the import dialog to finish and you should see all of the files placed there.

  5. From there, go to the Timeline section at the bottom of the screen and create a new layer by either clicking on the new layer button at the very bottom—left corner of the program or by right—clicking on Layer1 and selecting New Layer. Double—click on the layer on the top and change its name to ActionScript. Double—click on the other layer and give it the name of Lifebar. Create two more layers, one above the Lifebar layer with the name of Overlay and one below with the name of Background. You can drag—and—drop layers to put them where you want them.

  6. Click on the first keyframe of the Background layer. Drag—and—drop the Lifebar_background.png image to the top—left corner of the stage.

  7. Continue to place the Lifebar_overlay.png file in the Overlay layer and the Lifebar_health.png file into the Lifebar layer between them.

  8. Now, we won't be touching the overlay or backgrounds anymore, so on both of those layers click on the dots under the little lock for those layers, to lock them so that we can't change it anymore. You can notice where to click and where the locks are in the following screenshot:

  9. Next, in order to reference our lifebar in code, we need to have some way to reference it. In order to do that, we're going to have to make our graphic into a movie clip. Thankfully, it's very easy. Click to select and then right—click on the lifebar object and select Convert to Symbol... (or press F8). There, in the Name section, type in lifebarMC and confirm that the Type value is Movie Clip. Once that is set, click on OK.

  10. Click on the Properties tab with the lifebar selected. In the textbox that has the instance's name in it, change the value to lifebar.

  11. Click on the Lifebar layer and then click on our health image. Then select the Free Transform tool by either clicking on the third icon on the Tools panel or by pressing the Q key (the icon selected in the following screenshot on the far right). You should see a white circle in the middle of our image; this is the point at which scaling will begin. Click and drag that circle to the far left of the image on the x axis and to the middle of the image on the y axis.

    If you'd like to see how scaling changes depending on where the white dot is, press Ctrl + T to open up the transform tool and change the value of the X scaling. Just make sure it's set to 100 before you move to the next step.

  12. Save your project by going to File | Save, and type in a name of your choice (I used hotshot_hud). Click on the stage once again and access the Properties inspector. Under Publish in Class, type in the same name (hotshot_hud). Afterwards, click on the pencil beside it and you should see the following warning:

  13. Click on the Test with: GFxMediaPlayerD3d9 button to start up our program. After it has run, close it along with the console window that opened up with it. Click on the pencil icon again and it may ask what to open with. Select Flash Professional and click OK. You should see some code in the pop—up window already written for us. Save that file (by hitting Ctrl + S) with the filename given to you, in the same folder as the .fla file (hotshot_hud).

  14. Replace the text in the file with the following code snippet:

    package { // Needed for the stage importflash.display.MovieClip; // Allows us to use Scaleform importscaleform.gfx.Extensions; //Allows us to use the Event.ENTER_FRAME event listener; // Declaring the Document class public class hotshot_hud extends MovieClip { // Variables that we will be using to show the // player's current and max health public static var currentHealth:int = 100; public static var maxHealth:int = 100; //Constructor will be called the first frame of the game public function hotshot_hud() { // Enables Scaleform Extensions.enabled = true; // Adds an event so that the Update function will // be called every single frame. addEventListener(Event.ENTER_FRAME,this.Update); } // Code that we want to run every frame of the game function Update(event:Event) { // Update our life's scale to reflect the current // ratio of currentHealth to maxHealth lifebar.scaleX = currentHealth/maxHealth; } } )

  15. Save your project by hitting Ctrl + S on both files and then click on the Test with: GFxMediaPlayerD3d9 button on the Scaleform Launcher to start up our program.

Objective Complete — Mini Debriefing

In a very simple way, we have created a good—looking HUD within Flash that we will be using in UDK with a few short steps!

Importing Flash files into UDK

Now that we have our content, let's bring it in!

Engage Thrusters

Let's now start importing Flash files into UDK.

  1. UDK can only import Flash files that are within a specific folder. Inside your file browser, go to the folder with your .fla and .as files. In that folder, you should see a file with a .swf extension. Copy that file and go to your UDK installation folder (UDKGame\Flash\) and create a new folder called Hotshot. Inside that folder, paste the .swf Flash movie file.

    You must put Flash files within the UDKGame\Flash\ folder or a subfolder of that folder. You can name the subfolder however you'd like.

  2. Start up UDK again. Open up the Content Browser window and click on the Import button. Find the movie file and click OK. You will notice that the Import dialog already sets the package name to Hotshot, so just say OK and save this package.

  3. With the movie selected, open up Kismet. Create a Level Loaded event by right—clicking and going to New Event | Level Loaded.

  4. To the right—hand side of that, create an Open GFx Movie action by right—clicking and gong to New Action | GFx UI | Open GFx Movie. Connect the Loaded and Visible outputs from the Level Loaded event to the In input of the Open GFx Movie action.

  5. Create a player variable for Player Owner by right—clicking and going to New Variable | Player | Player, and in the Properties window uncheck the All Players option.

  6. Create a new object variable for Movie Player by right—clicking on the pink arrow and selecting Create New Object Variable.

  7. Go back into the Content Browser window and select the SwfMovie that we imported previously. Back in Kismet, click on the Open GFx Movie action to see its properties; and click on the green arrow in the Movie property to see the value SwfMovie'Hotshot.hotshot_hud' be filled in.

  8. Next, create a Get Property action by right—clicking and going to New Action | Object Property | Get Property. Under the Target section, create another Player 0 variable. In the Int section, create a new integer variable. Click on the action to access its properties. Under Property Name, type Health. Connect the Success output of the Open GFx Movie action to the In input of the Get Property action. Create a delay of 0.2 seconds in the connect by right—clicking on the black square on the In input of the Get Property action and selecting Set Activate Delay.

  9. To the right—hand side of that, create a GFx SetVariable action by right—clicking and going to New Action | GFx UI | GFx SetVariable. Connect the Value section to the Int section we created in the Get Property action and the Movie Player section of the GFx SetVariable action to the Movie Player section of the Open GFx Movie action. In the action's properties, set the Variable value to hotshot_hud. currentHealth. Connect the Out output of the Get Property action to the In input of the GFx SetVariable action. Then connect the Out output of the GFx SetVariable action to the In input of the Get Property action.

    For a view of the entire Kismet sequence, please look at the following screenshot:

  10. Build your project by going to Build | Build All. Save your game by going to File | Save All, and run our game by going to Play | In Editor.

Objective Complete — Mini Debriefing

And with that, our HUD is now fully functional. As our player gains and loses health, the HUD will coincide with that value. Dropping the Kismet we created into a level will work when the HUD's visuals make a lot of sense.

Or not...but it still works perfectly.

Mission Accomplished

One can clearly see after this mission how useful having Scaleform is and how powerful a tool it can be. Specifically, we just set Flash up so that we could implement something using Scaleform by adding the Scaleform Launcher to Flash, and imported the Scaleform libraries for our use. After that, we imported custom art assets into Flash and created a Document class to hold our code, which will update our health in every frame. Once we published our project, we went back into UDK and imported the file into a level and added Kismet to load the movie and use it as our main HUD, giving us a much more polished HUD than we created previously. Also, it gave you a taste of what can be done using Scaleform, which can be easily expanded upon. Let's take one final look at what we have accomplished:


In this article we learned about how to create an HUD that can be used within a Medieval RPG and will fit nicely into the provided Epic Citadel map making use of Scaleform and ActionScript 3.0 using Adobe Flash CS6.

Resources for Article :

Further resources on this subject:

You've been reading an excerpt of:

Mastering UDK Game Development HOTSHOT

Explore Title