Scaleform Mini-Games Tutorial 2/3


Published on

Lean how to make a QTE in UDK!

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Scaleform Mini-Games Tutorial 2/3

  2. 2. Creating a QTEMini-Game in UDKReplicate an often used gameplay mechanic, used in games like Heavy Rainand Shenmue!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
  3. 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: “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 “QTE” folder in the copied“Scaleform_Flash” folder.Here we will use the “QTE_Start.fla” for this tutorial, but the user can view acompleted version in the “QTE_End.fla” for reference. 3
  4. 4. Getting Started In FlashAfter opening “QTE_Start.fla”, you can see that the imagefiles “QTE_Red.png”, “QTE_Green.png” and “QTE.png”has already been imported into the Library. The layers havealso already been named.Firstly the three image files needs to be placed on each of the three keyframes onthe “Animations” layer. Place the “QTE.png” on the first keyframe,“QTE_Red.png” on the second keyframe and “QTE_Green.png” on the lastkeyframe. 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 graphicby pressing F8 to “Convert to Symbol”. Wethen want to repeat this method to place thegraphic in a movieclip. 4
  5. 5. QTE Timer AnimationInside the movieclip, we need to extend the timelineto 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 greenring needs to be created around the button image.Every frame should then be keyframed and a“frame by frame animation” of the circle fadingneeds to be created. This will form the timer bar forthis animation.Next the “Actionscript” layershould be created and placed atthe top. A keyframe should then beadded to the last frame and theActionscript in the screenshotshould be added.This script makes the main timelinestop on the keyframe we named“Failure”. 5
  6. 6. QTE Failure AnimationWe now have our timer animation complete, sowe now need to return to the main timeline andcreate the failure animation.The second and third keyframe images on the“Animations” layer should be scaled to thesame size of the scaled down button in the timeranimation. Once this is done we need to turn thesecond keyframe image into a graphic and then amovieclip using convert to symbol.Inside the movieclip, we need to extend thetimeline by 14 frames and the layer can then benamed “Button”. A keyframe should then beadded 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 shouldthen be lowered and a tween should beadded to the timeline to form thedropping button fade animation.Next the “Actionscript” layer should becreated and placed at the top. TheActionscript in the screenshot should beadded to the first keyframe and a“stop();” script should be added to thelast keyframe.This instantly triggers an “FSCommand” with a unique name which we willreference in UDK to trigger a function. The animation then stops at the end of thetimeline. 6
  7. 7. QTE Success AnimationWe now have our failure animation complete, sowe now need to return to the main timeline andcreate the success animation.The last keyframe image needs to be turned intoa graphic and then a movieclip using convert tosymbol. 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 thetimeline to form the pulsating buttonfade animation.Next the “Actionscript” layer shouldbe created and placed at the top. TheActionscript in the screenshot shouldbe added to the first keyframe and a“stop();” script should be added to thelast keyframe.Like the failure animation, this instantly triggers an “FSCommand” with a uniquename which we will reference in UDK to trigger a function. The animation then stopsat the end of the timeline. 7
  8. 8. Actionscript Key ListenerWe now have all three animations complete, so we now need to return to the maintimeline and add key listener scripts to the “Actionscript” layer.The Actionscript in the screenshotshould be added to the firstkeyframe.This script adds a key listener whichstops the main timeline on the“Success” named keyframe whenthe “E KEY” is pressed and stopsthe timeline on the “Failure” namedkeyframe if a different key is pressed.The Actionscript in the screenshotshould be added to both the secondand last keyframe.This script stops the main timelineanimation and removes the keylistener instantly.The Flash side of this tutorial is nowcomplete. The QTE mini-game shouldnow work perfectly, so give it a test tocreate the .swf. A test in the “ScaleformGFX Launcher” is also recommendedto see if the images will appear in UDKand the FSCommands activate properly.With this done, we can now move on to the UDK side of this tutorial. 8
  9. 9. Getting Started in UDKTo 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 usedfor 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 upof two rooms and a hallway. The small room is where the player will start and thehallway near the starting door is where QTE mini-game will take place. The levelcomplete 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 onenext 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” needsto be added past the crushing wall near the end room, to teleport theplayer during the cutscene. 9
  10. 10. Kismet Scripting BeginsNow opening Kismet, a “QTE Cutscene 1” box isset for you to place your kismet script. The “QTESuccess Cutscene” box should contain the successanimation 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 touchtrigger 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 shouldboth be wired to the touched trigger to enable thecinematic mode and teleport the player to the Path-Nodeduring the cutscene. 10
  11. 11. Kismet Scaleform ScriptingAt this point the user should import .swf created from the“QTE_Start.fla” file into UDK using the content browser. Apackage called “Scaleform_Flash” will then be createdfrom 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 thecloseGFXmovie node, using a “Variable” wiring themboth by their “Movie Player” connector. The .swf thenneeds to be applied to the openGFXmovie and thevariable connected to the “Movie Player” connecters.To ensure that the QTE appears at the correct timeduring the first cutscene, make sure you wire theopenGFXmovie to the touch trigger apply the appropriatedelay 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. 12. Kismet Cutscene ChoiceNow we need to add the cutscene selection for theQTE cutscene. This is done by adding a “Switch”node with two links and an “INT Counter” nodeconnected to it by a 0 value “INT Variable”.The “Dodge” FSCommand and first matineecutscene 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 "Link1” or “Link 2”. The INT variable starts at 0 and needs to be increased to 1, whichalways happens by the first cutscene being wired into the INT Counter. TheFSCommand “Dodge” also being wired into the INT counter, will ensure the INTvariable 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 theplayer 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 wantto wire the closeGFXmovie to Link 2 on the Switchnode. This ensures that the mini-game is turned off oncethe success cutscene is complete. The matinee shouldalso be wired to a toggle cinematic mode to turn it of, sothe player can resume the game. 12
  13. 13. Kismet Final TouchesWe now need to control the visibility of the “SkeletalMeshes”, so we need to create two “ToggleHidden” nodes. The one node should toggle the“first Skeletal Mesh” to visible using the triggertouched and both Switch Links should toggle it tohidden. The other node should toggle the “secondSkeletal Mesh” to visible using both Links from theswitch 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 thisdone, the QTE mini-game is setup completely. Now the level should then be “fullyrebuilt and tested”. 13
  14. 14. Tutorial CompletedThis QTE 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 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 compiledtogether, in the example map “MiniGameLevel_Demo.udk”. It can be found in the“Level Example” folder, in the “Tutorial CD Files” folder. 14