1

APPENDIX B - SCALEFORM MINI-GAME TUTORIALS PART 3/3

48

2

Creating a Progress Bar Mini-Game in UDK Replicate an often used gameplay mechanic, used in games like Lef4Dead! These tutorials are recommended for users that are familiar with UDK and Adobe Flash to an intermediate level. Also it is recommended that users have some knowledge of how to setup Scaleform in UDK. If unfamiliar with Scaleform, it is recommended to the user to at least complete the first two Scaleform tutorials by Mathew Doyle on the following link: http://gameware.autodesk.com/scaleform/support/documentation These tutorials show you how to install the Scaleform GFX previewer in Adobe Flash, so you can test your .swf files to see if they would work in UDK. They also show you what settings need to be adjusted for .swf compatibility and how to use custom images.

3

Setting Up The Tutorial Files To start these tutorials, the user first needs to open the “Tutorial CD Files” folder on the supplied disc and access the “Tutorial_Files” folder. This folder contains the flash files and UDK maps we require throughout these tutorials.

Alternatively, you can download these folders from the following link: http://www.gamefront.com/files/21548379/Tutorial+CD+Files.rar The “Scaleform_Flash” folder needs to be copied and pasted to the following directory: [UDK\UDK-2011-10\UDKGame\Flash] The “Scaleform_UDK_Maps” folder needs to be copied and pasted to the following directory: [UDK\UDK-2011-10\UDKGame\Content\Maps]

To start this tutorial, we will use the files in the “ProgressBar” folder in the copied “Scaleform_Flash” folder. Here we will use the “ProgressBar_Start.fla” for this tutorial, but the user can view a completed version in the “ProgressBar_End.fla” for reference. Here we will use the “ProgressBar_Start.fla” for this tutorial, but the user can view a completed version in the “ProgressBar_End.fla” for reference.

4

Getting Started In Flash After opening “ProgressBar_Start.fla”, you can see that the image file “ProgressBox.png” has already been imported into the Library and the layers have already been named.

Firstly the “ProgressBox.png” needs to be placed on the first and second keyframe on the “Animations” layer. Place them both in the same position and scale them to the same scale you want.

On the second keyframe on the “AS2” layer, we want to name it “Complete” in the name section of the properties so we can reference it using Actionscript later.

Now on the first keyframe in the “Animation” layer, we want to turn the image into a movieclip by pressing F8 to “Convert to Symbol”.

We then want to name this movieclip “bar_MC” in the properties so we can control this movieclip later using Actionscript.

5

Progress Bar Animation Inside the movieclip, we need to extend the frames to 37. This layer can then be named “Image” and a layer called “Bar Progress” can be created underneath this frame.

On this layer, a yellow box should be made to fill the empty progress bar fully. Now every frame on this layer should be made into a keyframes. The first keyframe should be empty and the yellow bar on the last keyframe should be full. The yellow bar image on the keyframes between the first and last keyframe should then be deleted bit by bit on every keyframe, so we have a “frame by frame animation” of the bar filling. Once this is done, create a new layer called “Background” under this layer and make a dark bar to be placed under the progress bar box, so the bar box is filled on this layer

Next the “Actionscript” layer should be created and placed at the top. The first keyframe needs a “Stop();” script added to stop the rewind function we will add later. A keyframe should then be added to the last frame and the Actionscript in the screenshot should be added. This script is used make the main timeline stop on the second keyframe we named “Complete”, as well as removed the rewind and key listener we will add later.

6

Progress Complete Animation Now on the main timeline we need to turn the second keyframe image into a movieclip using “Convert to Symbol”.

Inside the movieclip, we need to extend the timeline to 8 frames and then name the layer “Animation”.

We then want to make a yellow bar to fill the progress bar and group it, then place it under the “ProgressBox.png”. With box images selected, they can then be converted into a graphic by pressing F8 to convert to symbol.

Next we want to add a keyframe to the end of the timeline and place an “Alpha Colour Effect” on the graphics in both keyframes. The first keyframe should be “Visible” and the last should be “Invisible”.

The second keyframe image can then be positioned lower, followed by making the whole timeline a classic tween. We now have our dropping fade animation.

A new “Actionscript” layer should now be created in a layer above. A keyframe should then be added to the last frame and the Actionscript in the screenshot should be added.

This stops the animation and triggers an “FSCommand” with a unique name, which we will reference in UDK later for a function.

7

Actionscript Key Listener We now have our animations, so we now need to add the key press function. To do this, we need to select the first keyframe on the “AS2” layer and add the Actionscript in the screenshot. This script adds a key listener for the “E Key”. When this key is held down, the “bar_MC” movieclip will play and when the key is up, the movieclip rewinds at x3 speed. Finally the second keyframe on the “AS2” layer needs to be selected and the Actionscript in the screenshot needs to be added. This script stops the animation, removes the key listener and removes the rewind function.

The Flash side of this tutorial is now complete. The progress bar mini-game should now work perfectly, so give it a test to create the .swf. A test in the “Scaleform GFX Launcher” is also recommended to see if the images will appear in UDK and the FSCommand activates properly.

With this done, we can now move on to the UDK side of this tutorial.

8

Getting Started in UDK

To continue this tutorial, we will use the UDK map files in the copied “Scaleform_UDK_Maps” folder. The “ProgressBar_Tutorial_Start.udk” map will be used for this tutorial, but the user can view a completed version in the “ProgressBar_Tutorial_End.udk” map for reference.

The “ProgressBar_Tutorial_Start.udk” map needs to be opened, which is a map with made up of two rooms. The small room is where we will setup the mini-game on the control console to open the door and a level complete script is already added past the door. The first task is to set a start “Trigger” next to the power console asset, place a “Player Start” in the small room and convert the door asset into a “Mover”, so it can be animated later.

9

Kismet Scripting Begins Now opening Kismet, a “Progress Bar Mini-Game” box is set for the player to place their kismet script. We need to add the “Touch Trigger” node with an unlimited max trigger count and create a “Matinee” cutscene for the door opening.

At this point the user should import .swf created from the “ProgressBar_Start.fla” file into UDK using the content browser. A package called “Scaleform_Flash” will then be created from the folder structure.

The task now is to communicate with the .swf from the package. To do this we need to add an “openGFXmovie” node and a “closeGFXmovie” node. The openGFXmovie node needs to be wired up to the trigger touched and connected to the closeGFXmovie node using the trigger untouched, using a variable wiring them both by their “Movie Player” connector.

The .swf then needs to be applied to the openGFXmovie and the variable connected to the “Movie Player” connecters.

We now have the mini-game “appearing” when the trigger is touched and “disappear” when it is untouched.

10

Kismet Scripting Continued The .swf file created earlier had an FSCommand called “Win”, which triggered when the progress bar was complete. Using UDK, we will now reference this FSCommand by adding an FSComamnd node and linking it to the .swf package in the “Movie” property. We then need to type “Win” in the FSCommand Property.

We can now create a “Toggle” and wire the event to the trigger. With this we can now wire the FSCommand to set off events once the Progress Bar mini-game is completed. It should be wired to the toggle to turn off the trigger and then wired to the “Matinee” to open the door and the closeGFXmovie node, to close the mini-game.

Finally we can add “Sound” nodes and tweak the timing using “Delays”. With this done, the mini-game is setup completely. Now the level should be “fully rebuilt and tested”.

11

Tutorial Completed

This Progress Bar tutorial is now “complete” and you should now fully understand how to implement your own mini-game. You should also now be able to implement your own rendition of this progress bar and implement the Actionscript functions used in this tutorial.

“Congratulations” on completing “all 3 parts” of the Scaleform Mini-Game Tutorial. You should now have enough experience in creating your own rendition of a popular mini-game. Give it a try, and remember that the “GameLevel_Demo.udk” can be found in the “Level Example” folder, in the “Tutorial CD Files” folder. It contains a good example of how “all three mini-games” can be used together in a level.