Scaleform Mini-Games Tutorial 3/3


Published on

Learn hoe to make a progress bar!

Published in: Technology, Art & Photos
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 3/3

  2. 2. Creating a ProgressBar Mini-Game in UDKReplicate an often used gameplay mechanic, used in games like Lef4Dead!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 “ProgressBar” folder in the copied“Scaleform_Flash” folder.Here we will use the “ProgressBar_Start.fla” for this tutorial, but the user can viewa completed version in the “ProgressBar_End.fla” for reference.Here we will use the “ProgressBar_Start.fla” for this tutorial, but the user can viewa completed version in the “ProgressBar_End.fla” for reference. 3
  4. 4. Getting Started In FlashAfter opening “ProgressBar_Start.fla”, you can see thatthe image file “ProgressBox.png” has already beenimported into the Library and the layers have already beennamed. Firstly the “ProgressBox.png” needs to be placed on the first and second keyframe on the “Animations” layer. Place them both in the same position and scale them to the same scale you want.On the second keyframe on the “AS2” layer, we want toname it “Complete” in the name section of the properties sowe can reference it using Actionscript later. Now on the first keyframe in the “Animation” layer, we want to turn the image into a movieclip by pressing F8 to “Convert to Symbol”.We then want to name this movieclip “bar_MC” in theproperties so we can control this movieclip later usingActionscript. 4
  5. 5. Progress Bar AnimationInside the movieclip, we need to extend the frames to37. This layer can then be named “Image” and alayer called “Bar Progress” can be createdunderneath this frame. On this layer, a yellow box should be made to fill the empty progress bar fully. Now every frame on this layer should be made into a keyframes. The first keyframe should be empty and the yellow bar on the last keyframe should be full. The yellow bar image on the keyframes between the first and last keyframe should then be deleted bit by bit on every keyframe, so we have a “frame by frame animation” of the bar filling. Once this is done, create a new layer called “Background” under this layer and make a dark bar to be placed under the progress bar box, so the bar box is filled on this layerNext the “Actionscript” layershould be created and placed atthe top. The first keyframe needsa “Stop();” script added to stopthe rewind function we will addlater.A keyframe should then be addedto the last frame and theActionscript in the screenshotshould be added.This script is used make the main timeline stop on the second keyframe we named“Complete”, as well as removed the rewind and key listener we will add later. 5
  6. 6. Progress Complete AnimationNow on the main timeline we need to turn the second keyframeimage into a movieclip using “Convert to Symbol”. Inside the movieclip, we need to extend the timeline to 8 frames and then name the layer “Animation”.We then want to make a yellow bar to fill the progress bar andgroup it, then place it under the “ProgressBox.png”. With boximages selected, they can then be converted into a graphic bypressing F8 to convert to symbol. Next we want to add a keyframe to the end of the timeline and place an “Alpha Colour Effect” on the graphics in both keyframes. The first keyframe should be “Visible” and the last should be “Invisible”.The second keyframe image can then be positionedlower, followed by making the whole timeline a classictween. We now have our dropping fade animation. A new “Actionscript” layer should now be created in a layer above. A keyframe should then be added to the last frame and the Actionscript in the screenshot should be added.This stops the animation and triggers an “FSCommand” with a unique name, whichwe will reference in UDK later for a function. 6
  7. 7. Actionscript Key ListenerWe now have our animations, so we nowneed to add the key press function. To dothis, we need to select the first keyframeon the “AS2” layer and add theActionscript in the screenshot.This script adds a key listener for the “EKey”. When this key is held down, the“bar_MC” movieclip will play and whenthe key is up, the movieclip rewinds at x3speed.Finally the second keyframe on the “AS2”layer needs to be selected and theActionscript in the screenshot needs to beadded.This script stops the animation, removesthe key listener and removes the rewindfunction. The Flash side of this tutorial is now complete. The progress bar 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 FSCommand activates properly.With this done, we can now move on to the UDK side of this tutorial. 7
  8. 8. Getting Started in UDKTo continue this tutorial, we will use the UDK map files in the copied“Scaleform_UDK_Maps” folder. The “ProgressBar_Tutorial_Start.udk” map willbe used for this tutorial, but the user can view a completed version in the“ProgressBar_Tutorial_End.udk” map for reference. The “ProgressBar_Tutorial_Start.udk” map needs to be opened, which is a map with 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”, so it can be animated later. 8
  9. 9. Kismet Scripting BeginsNow opening Kismet, a “Progress Bar Mini-Game” box is set forthe player to place their kismet script. We need to add the “TouchTrigger” node with an unlimited max trigger count and create a“Matinee” cutscene for the door opening. At this point the user should import .swf created from the “ProgressBar_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 thepackage. To do this we need to add an“openGFXmovie” node and a “closeGFXmovie”node.The openGFXmovie node needs to be wired up to the triggertouched and connected to the closeGFXmovie node using thetrigger untouched, 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.We now have the mini-game “appearing” when the trigger is touched and“disappear” when it is untouched. 9
  10. 10. Kismet Scripting ContinuedThe .swf file created earlier had an FSCommand called “Win”,which triggered when the progress bar was complete. UsingUDK, we will now reference this FSCommand by adding anFSComamnd node and linking it to the .swf package in the“Movie” property. We then need to type “Win” in theFSCommand Property. We can now create a “Toggle” and wire the event to the trigger. With this we can now wire the FSCommand to set off events once the Progress Bar mini-game is completed. It should be wired to the toggle to turn off the trigger and then wired to the “Matinee” to open the door and the closeGFXmovie node, to close the mini-game.Finally we can add “Sound” nodes and tweak the timing using “Delays”. With thisdone, the mini-game is setup completely. Now the level should be “fully rebuilt andtested”. 10
  11. 11. Tutorial CompletedThis Progress Bar tutorial is now “complete” and you should now fully understandhow to implement your own mini-game. You should also now be able to implementyour own rendition of this progress bar and implement the Actionscript functions usedin this tutorial.“Congratulations” on completing “all 3 parts” of the Scaleform Mini-GameTutorial. You should now have enough experience in creating your own rendition ofa popular mini-game. Give it a try, and remember that the “GameLevel_Demo.udk”can be found in the “Level Example” folder, in the “Tutorial CD Files” folder. Itcontains a good example of how “all three mini-games” can be used together in alevel. 11