This document provides a 3-part tutorial for creating a slider mini-game in UDK and Adobe Flash using Scaleform. Part 1 covers setting up the flash file to create a cursor animation controlled by keyboard input that triggers different outcomes. It also covers importing the SWF into UDK and using Kismet to link the flash commands to animations, triggers, and other game logic. The tutorial establishes the gameplay mechanics and interface within the first part.
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.
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 â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.
3
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.
4
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.
5
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.
6
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.
7
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.
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 â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.
9
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.
10
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.
11
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.
12
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â.
13
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.
14