Mastering a Scaleform GFx HUD (5 Part Series)

[Matt Doyle]

I'm in the process of creating a HUD tutorial series for UDK. It will cover all parts of the UDK HUD created by Scaleform in the September 2010 UDK build, beginning with the wrapper class, the actual HUD class, elements such as the pause menu, and finally culminating in the mini-map.

These are more intermediate to advanced level tutorials. Most of them will assume you already know how to write UnrealScript and ActionScript, and use the Flash IDE. The tutorials will cover the HUD in brief, explaining the most important concepts, but will not go into great detail on every topic due to time limits.

Please feel free to ask clarifying questions in this thread and I'll endeavor to answer them.

Mastering a GFx HUD


Part 1 - HUD Overview (http://www.youtube.com/watch?v=5QX8fg5H54I)
Part 2 - UTGFxHudWrapper.uc (http://www.youtube.com/watch?v=fs7oXi94ZRk)
Part 3 - GFxMinimapHud.uc (Part 1) (http://www.youtube.com/watch?v=3QY-RpjG6-U)
Part 4 - GFxMinimapHud.uc (Part 2) (http://www.youtube.com/watch?v=_mpvcXDSh4M)
Part 5 - GFxMinimap.uc

[alvarofer0020]

Yes! :d :d :d

[tegleg]

awesome!
thats just what we need
thanks mr doyle

[seenooh]

I'd like to thank you Mr. Doyle for dedicating your time to help make creation of our UI simple and smooth. I accomplished almost half of what you're going to present, thanks to your high-quality 14-part video tutorials! I'm very interested in the inventory part as I haven't reached to that point yet in our project. I'm very much excited, this will ease my task when the time comes.

Thank you Sir.

[marcusmattingly]

Excellent! Exactly what I (and probably many many others) need.

Thank you for being so active in this community, it is appreciated.

[daimaku]

thank you matt, your tutorials are awesome !!!!

[miresakhani91]

Thanks Mr. Doyle
Your video tutorials are great.

[ZeJudge]

You are the greatest :)

[FlowState]

While I've gotten most of what I need hacked together, I'd love to see the official way to do it.

The tutorials you've already created have been a godsend, we really do appreciate it.

[Crusha K. Rool]

Fine, I was almost doing it this way (http://udn.epicgames.com/Three/MasteringUnrealScriptInterfaces.html#Chapter%2013% 20%E2%80%93%20Interfaces), but maybe it's easier with full Scaleform implementation.

[Sir. Polaris]

I also want to thank you for being active in this community.

A programming note: How are you going to make these tutorials? will they be broken down into small eatable bits?

[tegleg]

are you going to have a text version of at least the code?
its very difficult and encourages mistakes to try and copy code from a video
thanks

[Crusha K. Rool]

I also want to thank you for being active in this community.

A programming note: How are you going to make these tutorials? will they be broken down into small eatable bits?

I think yes, as that was what he did in all the previous Scaleform tutorials. ;)

[Matt Doyle]

The tutorials will be broken up into small videos, no more than 10 minutes each. I will not be posting code, as all the code is already available in the UDK sample HUD files. The tutorial will essentially cover how the UDK HUD is put together, where it is called/initialized from, and how it is updated.

In preparation for the tutorial videos, I encourage you to look at the following files:

UTGFxHudWrapper.uc
GFxMinimapHud.uc
GFxMinimap.uc

UT3_HUD.fla
UT3_minimap.fla
UT3_scoreboard.fla

[Nysuatro]

This is great. Looking forward learning more about scaleform.
Thanks Matt Doyle

[Sir. Polaris]

Thanks Matt :)

#EDIT

Alright so I am prepped for your arrival. I made a sexy banner and everything :D

http://udkc.info/images/c/c9/Mastering_a_scaleform_hud_-_intro_shot_large.jpg

[Hboybowen]

Yay 2 more days

[Matt Doyle]

UPDATE - I am writing the tutorial with great ferocity and hoping to have it ready to capture by the end of today. However, its proving to be a very large topic to cover, and I may not quite finish by tomorrow (Friday). If not, expect the first video early next week.

[gegebel]

Thx for the update Matt, most appreciated :D

[marcusmattingly]

I for one have no problem waiting a few extra days for a great HUD tutorial series. Thanks for the update and keep up the good work.

[Matt Doyle]

Looks like I'll have the first tutorial done today by close of business. And tutorial #2, where I begin dissecting code will be done by next Friday.

[miresakhani91]

I'm Waiting And I'm so excited for publishing.

[Matt Doyle]

Well, I'm down to 20 minutes before I have to leave the office this weekend, and I am on the final edit/render from After Effects. All the audio & video have been captured, and cut. But I've got to put it all in a final format and upload it to YouTube. That's an hour of work and upload time so I don't think I'm going to publish today. But if I don't manage to come in on Saturday and publish then, the first tutorial will be uploaded first thing Monday morning guys.

FYI - the first tutorial is an overview of how the HUD is put together. Don't expect any code explanations until tutorial 2, next week.

[TheAgent]

Great great job, thanks alot for the support

[Matt Doyle]

Video is rendering. I'll upload it to Youtube today (Monday - Oct 25).

[Wyldhunt]

Thank you Matt.
These videos are great.

[TheAgent]

So wheres the video! : P

[Matt Doyle]

Rendering a second version. There were some last minute changes that had to go in.

[TheAgent]

Cool, hope your weekend wasn't too hectic glad you have some time for these videos.

[LordNelson7]

I am waiting for this as well. It will be very enlightening.

[Matt Doyle]

Part 1 is now live. Check the first post of this thread to get the link.

[TheAgent]

Thanks alot for the video!

[roughbeats]

Thank you!

[Nysuatro]

Good stuff. Looking forward to the next one.

[CloDel Studios]

Wow, that came out really good. Thank you for your great work, can't wait for the next.

[Nysuatro]

When do you plan to release the next video ?

[Matt Doyle]

I had planned to release one today, but I got sidetracked working on some other things. The new release schedule is on the first post of this thread now.

[Sir. Polaris]

and so it begins!

[guvenc]

Great stuff Matt. Thanks for the tutorials.

[Matt Doyle]

Part 2 is live.

[HRuivo]

Thank you very much! This videos are a big help.

[LordNelson7]

Excellent information!

[Matt Doyle]

Doh! I had to make some minor revisions and upload a new video #2 to Youtube. But Youtube is experiencing some processing problems. I'll keep trying to get the revised video online until it works - so hang in there folks.

Video #3 script has been written and is in review. If all goes well on that, I hope to have it online by Friday, if not Monday (11/15/2010)

[aZzy]

Wow nice videos man, thanks for your time!

Its people like you who boost this communities reputation :D

Thanks a bundle mate,
aZzy

[guvenc]

So i am trying to make my own pause menu but first i want to sure about all the systems work correctly in my own packages. For that reason i took the “UDKGame\Flash\UDKHud\udk_pausemenu.fla” file and re publish it in flash. After that i created a custom folder in “UDKGame\Flash\hudtest” and put the new swf file in it. After that i imported it from the udk editor and replace the package name in UTHUDBase.uc PauseMenuMovie.MovieInfo = with my new package name.
When i press esc key in the game the pause menu opens but i can’t use the buttons and the buttons names are “textfield” as you can see in the ss http://dl.dropbox.com/u/8035546/hud_err.jpg
Where am i doing wrong does anyone has any idea ?

[Matt Doyle]

You need to initialize your widgets (buttons) when they appear. What build are you using of UDK? If you're in pre-October, I'd recommend something like this:


var GFxClikWidget MyButton;

event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
{
switch(WidgetName)
{
case ('myBtn'):
MyButton = GFxClikWidget(Widget);
MyButton.AddEventListener('CLIK_press', OnButtonPress);
StartButton.SetString("label", "press me");
break;
default:
break;
}
return true;
}

Also - if you're using the UDK pause menu SWF file - be sure you add this to your class paths before republishing the file:

C:\UDK\UDK-2010-09\UDKGame\Flash\ActionScript

Be sure to replace the \UDK\UDK-2010-09\ part with whatever your actual path to UDK is.

[guvenc]

Oh i forgot to update actionscript path in flash :) thanks for the advice Matt :)

[Kyle_Katarn]

These are fantastic, please, please, please keep them coming :]

[Matt Doyle]

A few more coming, but I've had to put them on the back-burner due to shifted priorities. Hopefully, I'll be able to finish them soon.

[Kyle_Katarn]

Sounds good. No pressure. :]

[Kobaltic]

Whats the latest info on this?

[Matt Doyle]

New video up (Part 3).

[CloDel Studios]

yay, thank you sir
Ive been looking forward to this, gona watch it now.

Thanx again for all your help with this, I know your very busy.

[Sir. Polaris]

I second this

[Matt Doyle]

Part 4 will be available tomorrow.

[Matt Doyle]

Part 4 is live.

[CloDel Studios]

Wow, thanx again Matt, this is very informative as always. ;)

[alexbdev]

Very helpful videos. :)

[nemirc]

Hello there. I was trying to make a toggleable crosshair using the logic behind the pause menu (as in making it "appear" and "disappear" by pressing a key like described on the videos. I setup keyframes on the timeline to control the transparency of the crosshair, and then control the playback by setting uplike this:



function bool Start(optional bool StartPaused = false)
{
super.Start();
Advance(0);
RootMC = GetVariableObject("_root");
return TRUE;

}

function ShowCrosshair()
{
RootMC.GotoAndPlay("5"); // I tried using the "labels" on the timeline but didn't work so I was trying to call the key number directly
}

function HideCrosshair()
{
RootMC.GotoAndPlay("11");
}


But I couldn't get it to work. Strangely enough, they DO compile without errors.

Help pliz? :-/

[Matt Doyle]

GotoAndPlay is only for labeled keyframes.

You should use GotoAndPlayI(5) and GotoAndPlayI(11)

[nemirc]

Hi there, I FINALLY got it to work. I dug into the UT hud classes and saw the showmenu command was inside the UTHUDBase class (exec function showmenu() and all that jazz), so I added my exec functions to my hud base instead of the player controller and it works perfectly.

Thanks a lot for the tutorials! I wasn't exactly trying to create a pause menu, but surely they helped a lot on what I was trying to do!

[mengxiaohui888]

great! that is what I am looking for! thank U!

[LordNelson7]

I am still trying to figure this out, how do I go about loading a movie from script? I know now that the objects in the .flv file are referenced from script, but what is the function or class that initially loads the movie(.flx file)?

[nemirc]

You load the Flash .SWF file, not a .FLV movie.

The loading is done using a GFx class extending GFxMovie. For example, in my case, a simple crosshair:



class MyGFxCrosshair extends MyGFxTweenableMoviePlayer;

var GFxObject CrosshairMC;
var GFxObject ReticuleMC;



function Init(optional LocalPlayer player)
{
//Start and load the SWF Movie
Start();
Advance(0.f);
CrosshairMC = GetVariableObject("_root.crosshair");
ReticuleMC = GetVariableObject("_root.crosshair.reticule");

}

DefaultProperties
{
//this is the HUD. If the HUD is off, then this should be off
bDisplayWithHudOff=false
//The path to the swf asset we will create later
MovieInfo=SwfMovie'MyGFxHud.MyGFxCrosshair'
//Just put it in...
bEnableGammaCorrection = false
}



Note that I'm extending the TweenableMoviePlayer class, because I am using animated motion tweens to make the cross appear and go away. Basically it goes like this, the "function Init" thing starts up the SWF movie, and inside that you create the references to the different objects as needed (for example if you're using a health bar or a bullet counter).

Then you create the default properties and there you make the call to your previously-imported-into-UDK movie, with the "MovieInfo..." line.

I hope this helps.

[LordNelson7]

This helps immensely, as I didn't know how to make the file actually play, I am going to play around with this tonight and see if I can get an inventory system up.

Thanks very much!

[LordNelson7]

So where do I upload the .SWF file to?

Thanks for your time.

[nemirc]

You save the flash file and flash movie under UDKGAME\Flash\whateveryoursubfolderis
Then you import it just like any other asset into the content browser.

[LordNelson7]

Can I use Scaleform without extending UT classes?

My project uses non-UT classes.

Oh yea, and I tried using the method above to load a .swf, I have the right paths and everything, but it's not working. I was thinking that the part---

function Init(optional LocalPlayer player)

---might have to match the player variable in the project, or is my assumption incorrect?

[LordNelson7]

It works, but I can't get it to access from script like you mention above. The only way it will work is with Kismet. I can use a "open movie" function in Kismet and it will load it, but if I try to do it from script it won't work.

Why? I will play around with it and try to get it to work.

Any help is greatly appreciated.

[nemirc]

You extend the base GFx Classes.

What are you trying to do exactly BTW? Displaying a HUD, a crosshair, a message box?
GFxHUD movies are loaded from your HUDBase class. Maybe this tutorial can help a little http://widff.co.uk/DevBlog/?p=1503

However, you should REALLY check the UTHUDbase class, and the scaleform tutorials on Youtube so you know how the flash HUD is loaded from code.

[LordNelson7]

I am trying to create an inventory system, one where items are dragged onto a character and then an object(such as a helm) is equipped on the game character.

The thing is, I don't want to use any of the UT classes because, although they've already implemented a lot of stuff, the things I want to do I don't know how to implement with the UT classes, but the code that I have so far works great without extending any of the UT classes.

[LordNelson7]

Now I am having problems referencing a function in a class from a class extending GFXMoviePlayer. I have a scaleform movie that plays, and a button set up that runs a function that calls a function from the player controller.

When I click the button it says "Accessed None" then it lists my player controller. I believe I am not referencing the playercontroller correctly, so what is the proper method from a class extending GFXMoviePlayer?

[Charleon]

Now I am having problems referencing a function in a class from a class extending GFXMoviePlayer. I have a scaleform movie that plays, and a button set up that runs a function that calls a function from the player controller.

When I click the button it says "Accessed None" then it lists my player controller. I believe I am not referencing the playercontroller correctly, so what is the proper method from a class extending GFXMoviePlayer?

I think it would be something like this:

local PlayerController PC;
local MyCustomPlayerController MCPC;

PC = GetPC();
MCPC = MyCustomPlayerController(PC);

where MyCustom... is your custom class that extends PlayerController or UTPlayerController

[Gmax5]

When is the Mini Map tutorial? I am pretty sure that is most struggling to get working (custom wise).

[Matt Doyle]

Unfortunately, I haven't had the time to make a minimap tutorial. However, the minimap that ships with UDK provides everything that is needed to learn how to build your own. You just have to get in there and reverse engineer the code and Flash files.