Unreal Script: An Introduction Parts 6 Brandon Holbert

Unreal Script: An Introduction Parts 6 Brandon Holbert

6. Scaleform In this section we’ll go over creating – A Main menu using Scaleform with a play game button and mouse control – Player HUD with an ammo bar We’ll be creating a very simple map with a PLAY button. Open flash and start a new Flash (Actionscript 2.0) file

Scaleform If you haven’t done so enable the scaleform extension in flash – Help Manage Extensions. Click install at the top of the window – In the file browser that pops up you need to look for the scaleform mxp file ( UDKDirectory \Binaries\GFx\ CLIK and find “Scaleform CLIK.mxp” – Then to show the launcher tool go to Window Other Panels Scaleform Launcher (Window is next to Help) Always import png’s

Menus Goto File Publish Settings – In the Flash tab set the Player to Flash Player 8 – Set the Script to Action Script 2.0 – This is because Action Script 3.0 and the later flash players aren’t supported in UDK yet. Create a menu logo and/or button for your menu in your favorite image editor and save it as a PNG – Remember that UDK only supports images that are sized with a power of 2 (256, 512, 1024,etc.) this image will need to be imported with the SWF into UDK in future steps. So make sure that your version of UDK can import the image(s) properly.

Menu Cont’d Back in flash import you picture to your stage – (Import Import to stage) NOTE: Your abilities in Flash and image editing will determine how you will create images, buttons, and other menu items. For instance I created a button in photoshop and imported it into Flash and made it a button. But if you can figure out how to draw in flash you can convert your drawing to a button as well (actually easier). Okay so now you have an image for a button (you may have others that aren’t buttons) on the screen. Select it and go to Modify convert to symbol – remove the default name and put something meaningful in there like “btnPlay”, “btnExit”, etc In the drop down select button. Then hit OK.

Menu Image Prep For all images in your Flash library (everything in your flash project that you’re working on). You’ll want to set them up to properly run in UDK. UDK doesn’t import file extensions properly and will reassign names if you’re not careful. So in your library tab right click your images and go to properties. In properties – Remove the file extension and check off allow smoothing – At the bottom check off Export for ActionScript and Export in Frame 1 – Remove the file extension for the identifier name – The compression drop down list set it to Lossless (PNG/GIF) If you don’t see the settings at the bottom for action script click the advanced button.

Menu Cont’d With our button still selected, right click it and select Edit In place. You’ll notice you have replaced your timeline with an events list. The events listed should be UP, Over, Down, Hit. You have the freedom to modify any of the states you would like but in this tutorial we will select the Up, Over and Down states – right click select Insert KeyFrame So now you should have Up, Over, Down keyframes.

Menu Cont’d Highlight the state you wish to modify, and just like editing a keyframe in any other scenario in Flash, go on and modify the screen. I did the Over state and just drew a line on the screen to tell me that I’m hovering over the button. Up Over Down

Menu Cont’d To test what you have so far. Go to the top menu bar Control test, or click the Test with FxMediaPlayer button. – If you don’t have that button go to Window Other Panels Scaleform Launcher When you’re done you want to head back to the main timeline. So in the top left you should see “Scene 1” next to your button name. Click scene 1 to go back. Now we need to make a cursor.

Menu Cont’d Create a new layer and lock the other one(s) In this layer same as before import or create a drawing, and this will represent your mouse cursor. – I just drew 4 lines to make a mouse look-a-like Select the image and go back to Modify Convert to Symbol. Convert your selection to a movie clip.

Menu Cont’d Now we want to test what we have Before we head back to UDK, In “UDK\UDKGame\Flash\” create a folder for your flash file. For any images you added to flash (like for the button) that will also need to be imported separately. Include a sub folder and place those images in there. – A folder for the SWF and FLA and a sub folder for the png’s – Otherwise if you forget that step UDK will take them from their current location on your hard drive, but that wont’ work once you deploy your game! – Also make sure that your pipeline for flash goes to this folder. If not, you will notice that UDK isn’t showing your latest changes! That’s a pain in the neck.

Menu Cont’d Create a new map for your Menu (you don’t have to if you want to include your map in the menu). In the content browser in UDK Editor import your SWF file. You’ll notice that you may not be able to choose what package it imports to, but you can move it after you import it When you’re done you should see your SwfMovie object and any images imported with it that go with your flash file.

Menu Cont’d Go into Kismet In kismet add a Level Loaded object. – Event Level Loaded Also add a GFx Movie object – Action GFx UI Open GFx Movie – Connect Loaded and Visible from the Level Loaded to the In on Open GFx Movie With your SWF movie selected in the Content browser (double check) and the Open GFx Movie object selected go under the Action Open Movie set of options and look for “Movie”. Click the green arrow on the right side to add your selection to that line. If you play the level in the editor you should see your work in progress.

Menu Cont’d If you didn’t like what you saw. Go back before we get into action script. AC2 Code! Okay we need to get the cursor moving. In flash select your cursor object, right click and go to Actions. The window that pops up is your Actions script code window. Put this in there – onClipEvent(enterFrame) { x root. xmouse; y root. ymouse; } All that says is when our cursor is within our frame we want to move the movieclip’s X and Y coordinates. Press ctrl Enter and you can test your SWF file. You should see your cursor moving with your mouse now.

Menu Cont’d Now edit the Actions on your Play button Enter this – on (press) { fscommand("loadmap"); } Fscommand is a method used to allow the SWF file to talk to what ever is hosting it (in our case UDK). Publish your SWF file (File Publish)

Menu Cont’d Back in UEd In the content browser right click and Reimport on your SWF file In kismet select the Open GFx Movie object and check off “Take Focus” Now add an FsCommand event (Events GFx UI FsCommand) Set the FSCommand property to the name of the command you set on your button back on flash. Here it was “loadmap” Now with your SWF file selected in your content browser set the movie property for the FSCommand object Make sure that Player Only isn’t checked

Menu Cont’d Add a console command object – Actions Misc Console Command Connect the Console Command Input to the Fscommand out Add a new command (delete any blank commands) – Set the command to “open DM-Deck” or whatever map you’d like to open Add a new Player variable (New Variable Player Player) Set the player index to 0 Set the target of console command to the player variable

HUDS This will be pretty similar to the menu creation. We’ll need a flash project, actionscript to act as a middle man between the SWF movie we’ll make and unreal, and of course we need unreal script to take our in-game data and display it on the screen. If you haven’t done so enable the scaleform extension in flash – Help Manage Extensions. Click install at the top of the window – In the file browser that pops up you need to look for the scaleform mxp file ( UDKDirectory \Binaries\GFx\CLIK and find “Scaleform CLIK.mxp” – Then to show the launcher tool go to Window Other Panels Scaleform Launcher (Window is next to Help)

Huds cont’d So open up a new flash actionscript 2.0 file Set up the publish settings just like the menu tutorial (File Publish Settings. Change to Flash Player 8.0 and AC2.0)

Huds cont’d We’re going to create a simple ammo bar If you look at the flash file that came with this tutorial you’ll see that I made an object called ammobar. In ammobar there are 3 components (bar, text, background). So let’s create it from scratch Name your current layer main. On main draw a rectangle on the screen for where you want your ammo bar to be located. Shape it and color it any way you’d like

Hud cont’d Double click the ammobar box (btw name it ammobar ) this should open up a new sub-layer for you. Name the layer you’re in now “background” and add two more layers “bar” and “text”. In the text layer add a text box to say what you’re going to display (ammo, ammo count, health, mana, etc.) In the bar layer add a rectangle In the bar layer right click and convert it to a symbol Text Bar

Hud Cont’d Choose a Movie Clip for the symbol type and give it a name – An interesting note is that here you can change how your bar will look as it “drains”. – You’ll noticed the Registration area in the symbol creation window. Next to that a 3x3 set of squares and one of them is black. That refers to the actual local reference point for that symbol. So if you want this bar to drain right to left place that black dot somewhere on the left most column, for left to right do the other way. If you want top to bottom choose something on the bottom row.

HUD cont’d Right click the bar layer and click “Actions” – Include this small bit of actions script “stop();” – This layer has a movie clip (the rectangle you just made), and we want to know that it won’t play when we don’t want it to.

Huds Cont’d What your window should look like

Huds Cont’d Don’t forget to name and save your work. Navigate back to scene 1. – In Scene1 you should only have 1 layer and 1 object called ammobar and it contains 3 items. The background, the text, and the bar. Double click it to check this.

HUD cont’d Add a new layer to Scene1 and call it actions –This is where you’ll add your action script. –For this tutorial we’re going to do some cool 3D effect, but there are many more to try out for yourself –Right-click the the keyframe on the actions layer in the timeline and select “Actions” –Input this code:

Hud Cont’d

Huds Cont’d If you run that code verbatim it may not work Make sure that your instance name for your ammobar object in scene 1 is called “AmmoBox”. This is also a good point to go back and double check that all of your instance names for your components inside ammobar have values. This is important because this is how flash will know what you’re talking about. So you must name everything so you can reference it in flash and in udk. A good thing to note is that if you can’t see what you want in flash through the scaleform launcher. Then you won’t see it in game. So make sure it runs correctly in flash first.

HUD cont’d Now With the scaleform launcher you should be able to run it and see that your object with the 3D effect we applied to it.

HUDS Cont’d Just like we did with the menu, import your SWF and any images that go along with it into the desired UDK package using the UDK editor

HUDs Cont’d Okay there will be 3 files that you’ll need to update to get your new HUD in game. – You game mode need to know what HUDType to call – You need to handle how the HUD draws to the screen and how UDK will interact with the Flash symbols like the ammo bar

HUDs Cont’d Change your default hud type – In this tutorial we’re using IntroGame as our game type. IntroGame just inherits from UTDeathmatch and changes a few of its base properties – In the IntroGame class add to the default properties HUDType class'UnrealScriptIntro.tutorialHUD' bUseClassicHUD true //This allows us to manually set HUDType – We’ll create that tutorialHUD class next

HUDs Cont’d Create a new class and call it tutorialHUD, or whatever you set your default property to in IntroGame. tutorialHUD will inherits from UTHUDBase We’re just going to add a variable and add to the PostBeginPlay() and PostRender() methods – In PostBeginPlay() we want to tell UDK that we have a HUD swf file that we want to use as our hud and that we want to play it. So we call the movie’s initialize function inherited from GFxMoviePlayer and we also want to call the Tick() every time the PostRender event is called.

HUD: Code for tutorialHUD.uc class tutorialHUD extends UTHUDBase; var HUDMoviePlayer HudMovie; // the reference to our hud movie singular event Destroyed() { if(HudMovie ! none) { //garbage collection HudMovie.Close(true); HudMovie none; // similar to setting it to NULL } super.Destroyed(); } //Call the post begin play function, only run on Client side simulated function PostBeginPlay() { super.PostBeginPlay(); HudMovie new class'HudMoviePlayer'; // Set the timing mode to match up to what will run in UDK HudMovie.SetTimingMode(TM Real); //init HudMovie HudMovie.Init(LocalPlayer(PlayerOwner.Player)); } // This is called for every tick the HUD should be updated event PostRender() { HudMovie.TickHUD(); } DefaultProperties { }

tutorialHUD.uc What we just did was declare a HUDMoviePlayer object The event Destroyed() is our garbage collector. We want to remove and close our HUDMovie reference We add to PostBeginPlay that we want to set our HUDMovie and initialize it In PostRender() we want to update the properties that we will use to change the look of the HUD. This will be with the TickHUD() function.

HUD Cont’d Now we have tutorialHUD and it manipulates this HUDMoviePlayer object. We need to create that class now

HUD: Code for HUDMoviePlayer.uc class HudMoviePlayer extends GFxMoviePlayer; // state variables, holds the current state for the ammo count var float LastAmmoCount; // variables for holding the flash movieclip references var GFxObject AmmoMC; var GFxObject AmmoBarMC; // Called from tutorialHud's PostBeginPlay() function Init(optional LocalPlayer PC) { //start and load the SWF file Start(); Advance(0.f); // Set the last count variable so it gets updated on the first tick LastAmmoCount -201; AmmoMC GetVariableObject(" root.AmmoBox"); AmmoBarMC GetVariableObject(" root.AmmoBox.left"); super.Init(PC); }

HUD: Code for HUDMoviePlayer.uc // a function that will be called every frame function TickHUD() { local UTPawn utp; local UTWeapon item; utp UTPawn(GetPC().Pawn); // We need to make sure there is a pawn that exists so we can talk to it if(utp none) { return; } item UTWeapon(utp.Weapon); LastAmmoCount UTWeapon(utp.Weapon).AmmoCount; AmmoBarMC.SetFloat(" xscale", (LastAmmoCount 100) ? 100.0f : LastAmmoCount); } // a function for rounding off a float function int RoundNum(float num) { local int convertedNumber; convertedNumber int(num); if(num 0.5f) { return convertedNumber 1; } else { return convertedNumber; } }

HUD: Code for HUDMoviePlayer.uc function float GetPercentage(int val, int max) { return (float(val) / float(max)) * 100.0f; } DefaultProperties { bDisplayWithHudOff false MovieInfo SwfMovie'MyPackage.FlashMovie.tutorialHUD' //Package name, package section, file name bEnableGammaCorrection false }

HUDMoviePlayer.uc We have variables at the top that represent the items that we want to manipulate (The AmmoBox, and the ammobar) Next is the Init function. In here we call two actionscript esque calls: “Start()” and “Advance()” This tells UDK that we want to play our HUD. So show it on the screen. Also in init we set our variables to the items in the SWF file (the instance names). Finally we call the GFxMoviePlayer’s Init() function.

HUDMoviePlayer.uc TickHUD() updates our HUD every tick So here we want to access our player’s stats. In this case it’s the weapon’s ammo. But you could have player properties like mana, health, and other things that you’d want to keep track of also. In order to show that we are using ammo we scale back the size of our ammo bar in the x (horizontal) direction. So we adjust a property of that bar using “ xscale” which comes from actions script, and we set that to our new value. We finally add a couple default properties We tell UDK that we want to display our hud so we make sure that bDisplayWithHudOff is false We also set our MovieInfo object to reference our imported SWF file, and the location of that file is the full name of the SWFMovie object in the UDK editor’s Content browser.

Hud Cont’d If you’ve imported you most recent copy of your SWF file and that file includes objects that have instance names and action script that properly references them and you’ve followed along with the code samples and adjusted the code when needed then you should be able to run your game and see your new hud! Just properly import and play the game

HUDs Notes Two classes to look into for extra info UTGFxHudWrapper.uc GFxMinimapHud.uc There are sample files that you can mess with in the Development\Flash\AC2 The base folder for any UT hud. Every HUDBase movie (HUD, PauseMenu, InventoryMenu, etc ) are all managed by the HudWrapper class and there is a team based wrapper too for team based games UTGame – GenericPlayerInitialization Tells the game what wrapper to use, after PostLogin() – This is where you define the team hud wrapper or the normal one