Updated 16 June 2014
This tutorial covers a quick method of creating a very simple HUD or screen overlay using Kismet and Flash. Assuming you have your image ready, this should take you about two minutes to put together. You can use it as a starting point for a Kismet-based HUD if you'd like, but I'd recommend it as a means of prototyping or for simple screen overlays, as things will get messy pretty quickly.
This tutorial covers a quick method of creating a very simple HUD or screen overlay using Kismet and Flash. Assuming you have your image ready, this should take you about two minutes to put together. You can use it as a starting point for a Kismet-based HUD if you'd like, but I'd recommend it as a means of prototyping or for simple screen overlays, as things will get messy pretty quickly.
 |
| A sample of what you can do with this method |
Update 16 June 2014: Step Zero: prepare your UDK map
Thanks to commenter Glorius for pointing out that this does not automatically work right for the UTDeathmatch game mode, as I was using UDKGame for my project. If you're using Deathmatch, the first thing you will want to do is hide the HUD that comes with it. This is something that can quickly be done in Kismet, don't worry. You just need the "Toggle HUD" node attached to an "On Level Load" node through the "hide" option, with the target set to "All Players." Here's a picture of that for clarity:
 |
| Simple, but effective |
Please comment below if this does not work for you for some reason. It should not affect the pseudo-HUD I'm about to show you, but it should hide your ammo and map graphics if you're using Deathmatch and any other graphics from game modes that use an UnrealScript-based HUD.
Step one: prepare your image
In this case, I wanted a pseudo-HUD that would show the player how to equip the different items in their inventory once they picked them up. My first draft was a sloppy .jpeg, while my final version (shown above) was done in Illustrator. What program and file-type you use is up to you-- just make sure it's of the quality you want and something that will play nice with Flash. I'm not entirely sure about scaling yet, so I recommend saving it at whatever size you want it to be on the screen.
Step two: making the Flash file
After you have the image ready, you'll want to drop it into Flash. For this project I just went with their default canvas size, but you might want to alter it to be the right resolution or ratio for your image and game. If you haven't used Flash before, you can just drag your image in from wherever you saved it on your computer. Get the image place where you want-- again, for noobs like me, there are align tools under "Modify..." When it loos good, hit "File > Export > Export Movie..."
This part I'm a little iffy about because my files derped when I moved my UDK environment to a different hard drive after the project was completed, so bear with me. You'll want to create a new folder in UDK's Flash repository, which can be found at (wherever you put it)\UDK-(build#)\UDKGame\Flash So you'll be saving your .swf files in UDK-(build#)\UDKGame\Flash\YOUR_FOLDER Name the folder and file whatever you want, but avoid using whitespace in your filenames, as it can confuse UDK.
Step three: import the Flash file in your content browser
Hopefully you already know how to do this. I don't recall it needing any special treatment, so just import it like you would anything else and save it in your project's package. If you're not sure how to import things, open up your Content Browser and hit the "Import" button at the bottom of the window and then find the file.
Step four: putting it together in Kismet
This part is also pretty simple. The logic is on level load, start up the "movie" we made. Here's a diagram of the Kismet:
 |
| Yay Kismet! |
In the "OpenGFxMovie" node, you'll need to use the drop-down bar to select the .swf file to open. I just left all the other settings on default. Now when you start up the game, your fancy screen overlay should show up!
Step five: polish and expanding the code
From here on, you're on your own. Maybe you'll want to tweak the Flash file to look better, maybe you'll want to show and hide the overlay with a button press, or maybe you'll want to get fancier with the code and have it actually do something interesting. My next little tutorial will cover how to put replaceable text into Flash files and edit said text in Kismet.
It's pretty hacky and doesn't do anything interesting on its own, but this is a very quick way to get something up on the screen without writing a single line of UnrealScript. It suited my purposes perfectly, and I hope it'll benefit someone else out there as well. If you have any problems or questions, please let me know. It's been a while since I put this system together, so I might not have written the most precise instructions.
Happy deving!
