1

SCALEFORM MINI-GAME TUTORIALS PART 1/3

2

Creating a Slider Mini-Game in UDK Replicate an often used gameplay mechanic, used in games like Bioshock! 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 “Slider” folder in the copied “Scaleform_Flash” folder. Here we will use the “Slider_Start.fla” for this tutorial, but the user can view a completed version in the “Slider_End.fla” for reference.

4

Getting Started In Flash After opening “Slider_Start.fla”, you can see that the image files “Hacking_Unlocked.png”, “Hacking_Shocked.png”, “Hacking_Alarm.png”, “Hacking.png” and “Cursor.png” has already been imported into the Library. The layers have also already been named.

Firstly the four hacking image files need to be placed on each of the four keyframes on the “Background Image” layer. Place the “Hacking.png” on the first keyframe, “Hacking_Unlocked.png” on the second keyframe, “Hacking_Alarm.png” on the third keyframe and “Hacking_Shocked.png” on the last keyframe. Make sure they are positioned and scaled the same. Next the “Cursor.png” should be placed on the “Cursor” layer keyframe. It should be scaled to the appropriate size and be rotated to the start position with the pivot moved to the center of the screw image.

Next on the “Actionscript” Layer, we want to name each keyframe in the properties frame name, so we can reference these frames using Actionscript later. The first keyframe should be named “Start”, the second should be named “Green”, the third should be named “Red” and the last should be named “Yellow”.

Now on the keyframe in the “Cursor” layer, we want to turn the image into a graphic by pressing F8 to “Convert to Symbol”. We then want to repeat this method to place the graphic in a movieclip.

5

Cursor Animation Now we want to name the movieclip “Cursor_MC” in the properties so we can control this movieclip later using Actionscript.

Inside the movieclip, we need to extend the timeline to 122 frames on the “Animation” layer and a keyframe should then be made on frame 59 and the last frame. An Actionscript layer should also be created on the layer above.

The first and last keyframe graphic should both be identical pointing at the starting position to the right side. The second keyframe image should be rotated to the end position to the left. Now a classic tween should be made to the timeline to create the looping animation of the cursor sliding back and forth. Now every frame on the “Actionscript” layer should be keyframed and the Actionscript in the screenshot should be added to them. This script makes the cursor stop when the “E Key” is pressed and the main timeline will stop on the keyframe we named "Green". Now watching the cursor animation, each keyframe should be selected and the script name “Green” should be renamed to “Red” when the cursor hovers over the red areas and “Yellow” when the cursor hovers over the yellow areas. This will ensure that the main timeline will play the correct outcome when the “E Key” is pressed during the animation.

6

Main Timeline Actionscript We now need to add the script functions to the keyframes on the “Actionscript” layer on the main timeline. Now the first frame should have a “stop();” script and the following three should have the Actionscript in the screenshots applied to them.

The second keyframe needs the “Unlocked” fscommand. The third keyframe needs the “Alarm” fscommand. The last keyframe needs the “Buzzed” fscommand.

This script stops the main timeline and the FSCommands are uniquely named to allow us to reference them in UDK to activate functions.

7

Success and Failure Feedback We now need to add the feedback animations for the cursor stopping in the Green and Red areas. So on the second keyframe on the “Screen Animations” layer, we need to create a green square with the dimensions of 1280x720. It should then be placed at the centre of the screen and turned into a graphic. After being turned into a graphic, it then needs to be turned into a movieclip. Within the movieclip we should name the layer “Animation” and extend the timeline to 28 frames. A keyframe should be made on frame 14 and the last frame. An “Actionscript” layer should also be created above with a keyframe at the end of the timeline with a “stop();” Actionscript applied to it.

The “Alpha” “Colour Effect” should then be used on all three keyframes to make the first and last keyframe invisible. The timeline then needs to be turned into a classic tween to create our green flash fade animation.

This should then be repeated for the third keyframe on the “Screen Animations” layer in the main timeline. A red square should be used for a red flash fade animation.

8

Buzzed Feedback The last keyframe on the “Screen Animations” layer should have an electrical shock animation. To do this we need to scribble a blue electrical effect and turn it into a movieclip. Inside the movieclip the main timeline needs to be extended to 41 frames and the layer should be called “Animation”. A key frame should then be added to frame 16, frame 30 and the last frame. Each keyframe needs a different blue scribble and then we can create a shape tween on the timeline. This creates a nice shifting animation that resembles an electrical spark. An “Actionscript” layer should then be created above this layer and a keyframe should be added to the last frame. The Actionscript in the screenshot should then be added to the keyframe. This script continues the cursor animation and sends the main timeline back to the first keyframe we named “Start”. The Flash side of this tutorial is now complete. The slider 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 FSCommands activate properly. With this done, we can now move on to the UDK side of this tutorial.

9

Getting Started in UDK

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

Once the “Slider_Tutorial_Start.udk” map is opened, you can see that it is 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” asset, so it can be animated later.

10

Kismet Scripting Begins Now opening Kismet, a “Slider Mini-Game” box is set for the player to place their kismet script.

We need to add the “Touch Trigger” and “Use Trigger”, both with an unlimited max trigger count. A “Matinee” cutscene also needs to be created for the door opening.

Next we should add a “Toggle” and wire both triggers to the event connector, so we can later disable the triggers. The used trigger should be connected to the turn off connector of the toggle.

The purpose of the touch trigger is to inform the player of the interaction, so we will want to connect a “Play Announcement” node with the message “Hack Console (Press E)”. We also need to make a “Toggle Cinematic Mode”, which we need to connect to the used trigger to lock the player during the mini-game.

11

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

Here we can now 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 connected to the closeGFXmovie node, using a “Variable” wiring them both by their “Movie Player” connectors.

The .swf then needs to be applied to the “Movie” property for the openGFXmovie and the variable connected to the “Movie Player” connecters. The openGFXmovie node should then be wired into the used trigger to activate the mini-game. The closeGFXmovie node needs to be wired to the toggle cinematic mode to turn it off, so the player can move when the mini-game closes.

12

Kismet FSCommands We can now reference the FSCommands we made in the .swf file earlier by creating FSCommand nodes.

Three “FSCommand” nodes need to be created and linked to the .swf in the “Movie” property. The nodes then need to be named in the properties. The first should be named “Unlocked”, the second should be named “Alarm” and the last should be named “Buzzed”.

The “Unlocked” and “Alarm” FSCommands need to be wired to the closeGFXmovie node, to end the mini-game once the green and red area is selected in the mini-game. The “Unlocked” FSCommand also needs to be wired to the open door animation to complete the mini-game objective.

The “Alarm” FSCommand should be wired to the toggle to turn the trigger back on, because the red area simply closes the mini-game.

The “Buzzed” FSCommand then needs to hooked up to a “Modify Health” node to lower the player health by 30 each time the orange area is selected. This will modify the player health and continue the animation. Now need to close it when the player dies. To do this we need to add an “Attach to Event” node and wire a “Death” event node to it. An investigator “Variable” from the used trigger should be hooked to the modify health target and the attach event attachee. The death node should then be wired to the closeGFXmovie and the toggle, to turn the triggers back on. This is to ensure that once the used trigger is activated, the user will be the recipient of the modify health and attached to closing the .swf file once the player dies. It also allows the player to retry the mini-game after death.

13

Kismet Final Touches

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 then be “fully rebuilt and tested”.

14

Tutorial Completed

This Slider 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 timer game and implement the Actionscript functions used in this tutorial.

You should now continue to “Tutorial Part 2” or look at all three tutorials compiled together, in the example map “MiniGameLevel_Demo.udk”. It can be found in the “Level Example” folder, in the “Tutorial CD Files” folder.