Senior Capstone: a Simple HUD or Screen Overlay in Kismet and Flash

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.

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!

Return to senior capstone scripting tutorial index

Guide: How to make Maya not blur the heck out of a pixel art texture

Updated 26 Jan, 2014

Hello again!  This is pretty much a more detailed copy/paste from this post about making pixel art textures for 3D models and using said models in UDK.  Since Googling my problem gave me three pages of useless information before I dug up the answer, I figured I'd write a fresh post specifically about this issue in the hopes someone else will be able to find it when they also Google the problem.  Luckily, it's a very simple fix once you figure out which option is messing things up!

Please note that I'm running Maya 2013, so I cannot say for sure this will help with older versions.

"Help!  Maya is blurring my textures so bad that my renders look like they've been smeared in Vaseline!"

This is because Maya is dumb and just assumes you want an ugly filter on any images you use in your shaders.  To remedy this, click on the shader you're using as your texture and follow its color node until you get to the image's settings.  At the top of these settings, there is an option called "filter type."  Set that bastard to "off" and you should suddenly have nice, crisp renders!

Default is "blurry as mud" it seems...

To get the same effect in your viewport, hit the "shading" menu in the viewport's options, click on the little box next to "hardware texturing," and set the filter there to "unfiltered."  Better?  Good!

Ooh, such a sharp texture now!

I hope this helps anyone who is looking for this information.  I'm not sure how I even managed to find it, honestly, as it was buried deep in an archived thread from a few years ago.  Now if you'll excuse me, I need to redo some truly terrible renders...

Updated 26 Jan, 2014  I cannot seem to find a good combination of settings in the render options that fit multiple resolutions.  For the above project using 128*128 textures, I think I just used Maya Software with "edge anti-aliasing" turned to the highest quality.  However, for my current project using 32*32 textures, Maya Software is leaving huge pixel-wide lines on the model, but Mental Ray is working fine with just about every setting I try.  I would recommend just trying them all until something looks good, unfortunately.  Let me know if you find a good "catch-all" rendering method!