Lean how to make a QTE in UDK!

1. APPENDIX A - SCALEFORM MINI-GAME TUTORIALS PART 2/3
34
1

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.
2

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:
[UDKUDK-2011-10UDKGameFlash]
The “Scaleform_UDK_Maps” folder needs to be
copied and pasted to the following directory:
[UDKUDK-2011-10UDKGameContentMaps]
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.
3

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.
4

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”.
5

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.
6

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.
7

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.
8

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.
9

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.
10

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”.
11

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.
12

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”.
13

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.
14