Scaleform Mini-Games Tutorial 1/3
Upcoming SlideShare
Loading in...5

Scaleform Mini-Games Tutorial 1/3



Scaleform Mini-Games Tutorial 1/3

Scaleform Mini-Games Tutorial 1/3



Total Views
Views on SlideShare
Embed Views



11 Embeds 766 650 70 25 6 4 4 3 1 1 1 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Scaleform Mini-Games Tutorial 1/3 Scaleform Mini-Games Tutorial 1/3 Document Transcript

  • Creating a SliderMini-Game in UDKReplicate an often used gameplay mechanic, used in games like Bioshock!These tutorials are recommended for users that are familiar with UDKand Adobe Flash to an intermediate level. Also it is recommended thatusers have some knowledge of how to setup Scaleform in UDK.If unfamiliar with Scaleform, it is recommended to the user to at leastcomplete the first two Scaleform tutorials by Mathew Doyle on thefollowing link: tutorials show you how to install the Scaleform GFX previewerin Adobe Flash, so you can test your .swf files to see if they wouldwork in UDK. They also show you what settings need to be adjustedfor .swf compatibility and how to use custom images. 2
  • 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: “Scaleform_Flash” folder needs to be copiedand pasted to the following directory:[UDKUDK-2011-10UDKGameFlash]The “Scaleform_UDK_Maps” folder needs to becopied 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 acompleted version in the “Slider_End.fla” for reference. 3
  • Getting Started In FlashAfter 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” hasalready been imported into the Library. The layers have also alreadybeen named.Firstly the four hacking image files need to be placed on each of the four keyframeson the “Background Image” layer. Place the “Hacking.png” on the first keyframe,“Hacking_Unlocked.png” on the second keyframe, “Hacking_Alarm.png” on thethird keyframe and “Hacking_Shocked.png” on the last keyframe. Make sure theyare positioned and scaled the same.Next the “Cursor.png” should be placed on the “Cursor” layerkeyframe. It should be scaled to the appropriate size and berotated to the start position with the pivot moved to the center ofthe 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 theimage into a graphic by pressing F8 to “Convert to Symbol”.We then want to repeat this method to place the graphic in amovieclip. 4
  • Cursor AnimationNow we want to name the movieclip “Cursor_MC” in theproperties so we can control this movieclip later usingActionscript.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 lastframe. An Actionscript layer should also be created on the layer above.The first and last keyframe graphic should both be identical pointing at the startingposition to the right side. The second keyframe image should be rotated to the endposition to the left. Now a classic tween should be made to the timeline to create thelooping animation of the cursor sliding back and forth.Now every frame on the“Actionscript” layer should bekeyframed and the Actionscript in thescreenshot should be added to them.This script makes the cursor stop whenthe “E Key” is pressed and the maintimeline will stop on the keyframe wenamed "Green".Now watching the cursor animation, eachkeyframe should be selected and the script name“Green” should be renamed to “Red” when thecursor 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 “EKey” is pressed during the animation. 5
  • Main Timeline ActionscriptWe 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 shouldhave 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 toallow us to reference them in UDK to activate functions. 6
  • Success and Failure FeedbackWe now need to add the feedback animations for the cursorstopping 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 dimensionsof 1280x720. It should then be placed at the centre of thescreen and turned into a graphic. After being turned into agraphic, 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 lastframe. An “Actionscript” layer should also becreated above with a keyframe at the end of thetimeline 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
  • Buzzed FeedbackThe last keyframe on the “Screen Animations” layer should havean electrical shock animation. To do this we need to scribble a blueelectrical effect and turn it into a movieclip.Inside the movieclip the main timeline needs to beextended to 41 frames and the layer should becalled “Animation”. A key frame should then beadded to frame 16, frame 30 and the last frame.Each keyframe needs a different blue scribble andthen we can create a shape tween on the timeline.This creates a nice shifting animation thatresembles an electrical spark.An “Actionscript” layer should then becreated above this layer and a keyframe shouldbe added to the last frame. The Actionscript inthe screenshot should then be added to thekeyframe.This script continues the cursor animation and sends the main timeline back to thefirst 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 alsorecommended to see if the images will appear inUDK and the FSCommands activate properly.With this done, we can now move on to the UDK side of this tutorial. 8
  • Getting Started in UDKTo 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 usedfor 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
  • Kismet Scripting BeginsNow opening Kismet, a “Slider Mini-Game” box is set forthe 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
  • Kismet Scripting ContinuedAt this point the user should import .swf created from the“Slider_Start.fla” file into UDK using the content browser. Apackage called “Scaleform_Flash” will then be created fromthe 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 variableconnected to the “Movie Player” connecters.The openGFXmovie node should then be wiredinto the used trigger to activate the mini-game.The closeGFXmovie node needs to be wired to thetoggle cinematic mode to turn it off, so the playercan move when the mini-game closes. 11
  • Kismet FSCommandsWe can now reference the FSCommands we made in the .swf file earlier by creatingFSCommand 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 wiredto the closeGFXmovie node, to end the mini-game once thegreen and red area is selected in the mini-game.The “Unlocked” FSCommand also needs to be wired to theopen 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 timethe orange area is selected. This will modify the player health andcontinue 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. Aninvestigator “Variable” from the used trigger shouldbe hooked to the modify health target and the attachevent attachee. The death node should then bewired to the closeGFXmovie and the toggle, to turnthe triggers back on.This is to ensure that once the used trigger isactivated, the user will be the recipient of the modifyhealth and attached to closing the .swf file once theplayer dies. It also allows the player to retry themini-game after death. 12
  • Kismet Final TouchesFinally we can add “Sound” nodes and tweak the timing using “Delays”. With thisdone, the mini-game is setup completely. Now the level should then be “fully rebuiltand tested”. 13
  • Tutorial CompletedThis Slider tutorial is now “Complete” and you should now fully understand how toimplement your own mini-game. You should also now be able to implement your ownrendition of this timer game and implement the Actionscript functions used in thistutorial.You should now continue to “Tutorial Part 2” or look at all three tutorials compiledtogether, in the example map “MiniGameLevel_Demo.udk”. It can be found in the“Level Example” folder, in the “Tutorial CD Files” folder. 14