1

APPENDIX A - SCALEFORM MINI-GAME TUTORIALS PART 2/3

34

2

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

4

Getting Started In Flash After opening “QTE_Start.fla”, you can see that the image files “QTE_Red.png”, “QTE_Green.png” and “QTE.png” has already been imported into the Library. The layers have also already been named.

Firstly the three image files needs to be placed on each of the three keyframes on the “Animations” layer. Place the “QTE.png” on the first keyframe, “QTE_Red.png” on the second keyframe and “QTE_Green.png” on the last keyframe. Make sure they are positioned and scaled the same.

On the second keyframe on the “Actionscript” layer, we want to name it “Failure” in the frame label name in the properties, so it can be referenced later in Actionscript. We also want to name the third keyframe “Success” in the frame label.

Now on the first keyframe in the “Animation” 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

QTE Timer Animation Inside the movieclip, we need to extend the timeline to 26 frames and rename the layer to “Button”.

On this layer, a keyframe needs to be added to frame 8, frame 16 and frame 26. The image on the second and last keyframe should then be scaled down. The timeline then needs to be highlighted and turned into a classic tween. This forms the pulsating button animation for our timer.

Once this is done, a new layer called “Timer” needs to be created above this layer and a green ring needs to be created around the button image. Every frame should then be keyframed and a “frame by frame animation” of the circle fading needs to be created. This will form the timer bar for this animation. Next the “Actionscript” layer should be created and placed at the top. A keyframe should then be added to the last frame and the Actionscript in the screenshot should be added. This script makes the main timeline stop on the keyframe we named “Failure”.

6

QTE Failure Animation We now have our timer animation complete, so we now need to return to the main timeline and create the failure animation. The second and third keyframe images on the “Animations” layer should be scaled to the same size of the scaled down button in the timer animation. Once this is done we need to turn the second keyframe image into a graphic and then a movieclip using convert to symbol. Inside the movieclip, we need to extend the timeline by 14 frames and the layer can then be named “Button”. A keyframe should then be added to the last frame.

An “Alpha Colour Channel” should then be added to both keyframes so the first keyframe is “Visible” and the second keyframe should be “Invisible”.

The image on the last keyframe should then be lowered and a tween should be added to the timeline to form the dropping button fade animation. Next the “Actionscript” layer should be created and placed at the top. The Actionscript in the screenshot should be added to the first keyframe and a “stop();” script should be added to the last keyframe. This instantly triggers an “FSCommand” with a unique name which we will reference in UDK to trigger a function. The animation then stops at the end of the timeline.

7

QTE Success Animation We now have our failure animation complete, so we now need to return to the main timeline and create the success animation. The last keyframe image needs to be turned into a graphic and then a movieclip using convert to symbol.

Inside the movieclip, we need to extend the timeline by 12 frames and the layer can then be named “Button”. A keyframe should then be added frame 4 and the last frame. The image on frame 4 should then be scaled to the original size.

An “Alpha Colour Channel” should then be added to second and last keyframe. The second keyframe should be “Visible” and the last keyframe should be “Invisible”.

A tween should be added to the timeline to form the pulsating button fade animation. Next the “Actionscript” layer should be created and placed at the top. The Actionscript in the screenshot should be added to the first keyframe and a “stop();” script should be added to the last keyframe. Like the failure animation, this instantly triggers an “FSCommand” with a unique name which we will reference in UDK to trigger a function. The animation then stops at the end of the timeline.

8

Actionscript Key Listener We now have all three animations complete, so we now need to return to the main timeline and add key listener scripts to the “Actionscript” layer. The Actionscript in the screenshot should be added to the first keyframe. This script adds a key listener which stops the main timeline on the “Success” named keyframe when the “E KEY” is pressed and stops the timeline on the “Failure” named keyframe if a different key is pressed. The Actionscript in the screenshot should be added to both the second and last keyframe. This script stops the main timeline animation and removes the key listener instantly. The Flash side of this tutorial is now complete. The QTE 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 “QTE_Tutorial_Start.udk” map will be used for this tutorial, but the user can view a completed version in the “QTE_Tutorial_End.udk” map for reference.

Once the “QTE_Tutorial_Start.udk” map is opened, you can see that it is made up of two rooms and a hallway. The small room is where the player will start and the hallway near the starting door is where QTE mini-game will take place. The level complete script is already added inside the other room. The first task is to set a “Player Start” in the small room and then a “Trigger” in the hallway, near the starting room door. Next two “Skeletal Meshes” should be placed by the trigger and one next to the crushing wall asset, for the cutscene we will make. In the “Skeletal Meshes” properties, the display set to “Hidden”. Finally the crushing wall asset should then be converted into a “Mover” asset, so it can be animated in the cutscene. Also a “Path Node” needs to be added past the crushing wall near the end room, to teleport the player during the cutscene.

10

Kismet Scripting Begins Now opening Kismet, a “QTE Cutscene 1” box is set for you to place your kismet script. The “QTE Success Cutscene” box should contain the success animation scripts and the “QTE Failure Cutscene” box should contain the death animation scripts.

We need to add the “Touch Trigger” node to the “QTE Cutscene 1” box with a single use max trigger count and three “Matinees” need to be created. The first should be placed in the “QTE Cutscene 1” box, the second in the “QTE Failure Cutscene” box and the last in the “QTE Success Cutscene” box.

The “first cutscene” needs to use the first skeletal mesh walking to where the second skeletal mesh is placed, next to the crushing wall. The “second cutscene” needs to show second skeletal mesh failing by getting crushed by the wall slamming into it. The “last cutscene” needs to show the second skeletal mesh successfully jumping out of the way as the wall slams, blocking the hallway.

Now with the cutscenes in place we will wire the touch trigger into the first cutscene in the “QTE Cutscene 1” box. A “Teleport” node then needs to be added with a “Player Variable” and the level “Path Node” attached, along with a “Toggle Cinematic Mode”. These should both be wired to the touched trigger to enable the cinematic mode and teleport the player to the Path-Node during the cutscene.

11

Kismet Scaleform Scripting At this point the user should import .swf created from the “QTE_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 a “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” connector. The .swf then needs to be applied to the openGFXmovie and the variable connected to the “Movie Player” connecters. To ensure that the QTE appears at the correct time during the first cutscene, make sure you wire the openGFXmovie to the touch trigger apply the appropriate delay time.

We can now reference the "FSCommands we made in the .swf file earlier by creating “FSCommand” nodes. We then need to place two of them, then link it to the .swf in the “Movie” property and name the FSCommand properties. We need to name one “Dodge” and the other “Fail”.

12

Kismet Cutscene Choice Now we need to add the cutscene selection for the QTE cutscene. This is done by adding a “Switch” node with two links and an “INT Counter” node connected to it by a 0 value “INT Variable”. The “Dodge” FSCommand and first matinee cutscene should be connected to the INT Counter. The matinee should also be connected to the switch.

In the Switch node, the “Link 1” should be connected to the failure matinee cutscene and “Link 2” should be connected to the success matinee cutscene.

The switch acts as a fork in a road, where the next cutscene played will be from "Link 1” or “Link 2”. The INT variable starts at 0 and needs to be increased to 1, which always happens by the first cutscene being wired into the INT Counter. The FSCommand “Dodge” also being wired into the INT counter, will ensure the INT variable is increased again when the “E Key is pressed” during the QTE cutscene. This ensures that the switch is always playing Link 1, but Link 2 will be selected if the player succeeds during the QTE cutscene.

Now to end the failure cutscene, we want to wire the matinee into a “Console Command” with a “quit” command. This ensures that the game will end if the player dies in the cutscene.

Now to end the successful matinee cutscene, we want to wire the closeGFXmovie to Link 2 on the Switch node. This ensures that the mini-game is turned off once the success cutscene is complete. The matinee should also be wired to a toggle cinematic mode to turn it of, so the player can resume the game.

13

Kismet Final Touches We now need to control the visibility of the “Skeletal Meshes”, so we need to create two “Toggle Hidden” nodes. The one node should toggle the “first Skeletal Mesh” to visible using the trigger touched and both Switch Links should toggle it to hidden. The other node should toggle the “second Skeletal Mesh” to visible using both Links from the switch node.

Another “Toggle Hidden” node needs to be wired to the success matinee cutscene to hide the “second Skeletal Mesh”. This ensures that the skeletal mesh can not be seen when the player resumes control. This does not need to be repeated for the failure matinee cutscene because of the quit function.

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

14

Tutorial Completed

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

You should now continue to “Tutorial Part 3” 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.