Development Blog‎ > ‎

Scaleform Game Menu

posted Apr 27, 2012, 3:31 PM by Mavrik Games   [ updated May 1, 2012, 9:48 AM ]
It's been a few weeks since I've posted anything, but I've been quite busy learning how Scaleform works with the UDK. I've been setting up a rough draft of a menu system for Astra, and the learning curve was a little steeper than I imagined it would be, especially since I already had so much experience using Actionscript 3.0. My Flash skills were a little rusty (I think the last time I did anything with Flash was five or six years ago), but it all came back to me once I got into the swing of things. It did take me quite a while to figure out how to structure everything though.

I wanted a menu system with three different screens:
  1. Main Menu - The entry point, has four buttons: New Game, Load Game, Options, and Exit Game.
  2. Load Game - Three buttons, each having the name of a saved game that can be loaded (later, I'll probably change this to a list with as many saved games as you want, but for now, three seems like enough :) ). Also a "Back" button to take you back to the Main Menu.
  3. Options - A screen showing all the options that can be changed for the game. Right now, it just has the same "Back" button as the Load Game screen since I don't know what options I'll have yet.
I started out by trying to include all three screens in one SWF, but the code as well as the layout quickly became cluttered and messy. I thought about splitting the screens up into their own SWFs, but they all shared the same "theme", so I didn't want to duplicate any of my images or other resources. I then came across UDN's page about resource sharing and decided that I would make one resource SWF and a separate SWF for each screen. I made them all inherit from a "FrontEnd" class, and that cleaned things up nicely. Now I had separate SWFs without duplicating any images.

The next hurdle was trying to decide what should be handled in Actionscript/Flash and what should go in Unrealscript. The UDN recommends that you don't do any heavy lifting with Actionscript and avoid putting it on the timeline as much as possible. Also, never use code based animations unless you have to (coded tweens, animation loops, etc.). I decided to keep all the animation stuff in Flash, and I would handle the logic in Unrealscript. I also decided against using CLIK components for now, but I'll study up on those later.

Finally, it was time to plug my SWFs into the UDK. Importing was easy and setting up the level for the front end wasn't too bad, though I did have to watch a few tutorials and read some documentation. The hardest part came when I tried switching the SWF that the level was playing. I'd made different SWFs for each screen, and the Open GFx Movie Kismet node only lets you plug in one SWF to play. I debated trying to set up a Kismet system to do it (like using a command line event or something to start a second and third Open GFx Movie node), but I wanted to see if it could be done in code first. I studied the UDK FrontEnd classes, but they use a view stack system that seems completely proprietary to their own front end. I couldn't reuse a lot of their stuff for what I wanted.

I looked at the UTHUD system too, and what I found was promising. It has a separate class for the PauseMenu SWF that extends GFxMoviePlayer, and it creates a new instance when the player pauses the game. I dug around to see how they added the PauseMenu SWF to the display, but couldn't find anything. I thought that it had something to do with it being a HUD class, so I didn't bother trying it before I dismissed it. I also tried changing the MovieInfo variable of my GFxMoviePlayer class, but it didn't seem to have any effect.

Then I found this post on the forums. It seems that in order to load a different SWF and actually get it playing, you have to create a new instance of a GFxMoviePlayer (or a subclass). I decided to give it a try and eureka! My guess is it's built into the GFxMoviePlayer class somehow to add itself to the display when a new instance is created.

Finally, I wanted to populate the Load Menu buttons with names of saved games that actually existed. I needed a way to read file names, but I couldn't find anything on how to do that with Unrealscript. I knew exactly how to do this with C#, having used similar functionality for PSMU, so I wrote a quick little function in C# and used dll binding instead. There's still a lot of work to be done as far as making the menu look better (I've never claimed to be a very good artist :) ), but at least the functionality is in place and I've learned a butt load about how to use Scaleform with the UDK.