SM1205 Interactivity Topic 07: Interactivity for Games Spring 2011SCM-CityU1.

  • Published on
    20-Dec-2015

  • View
    215

  • Download
    3

Transcript

<ul><li> Slide 1 </li> <li> SM1205 Interactivity Topic 07: Interactivity for Games Spring 2011SCM-CityU1 </li> <li> Slide 2 </li> <li> Overview Techniques Timer and its events Collision detection and response for loop and Array (review) Main example: Air Raid AirRaid.swf in W drive Release Assignment 2 See Assignment.02 folder Spring 2011SCM-CityU2 </li> <li> Slide 3 </li> <li> Skeleton Program AirRaid_skeleton.fla Spring 2011SCM-CityU3 Based on an example in book: ActionScript 3.0 Game Programming University, 2 nd Edition </li> <li> Slide 4 </li> <li> Frame 1 Spring 2011SCM-CityU4 stop(); startButton.addEventListener(MouseEvent.CLICK,clickStart); function clickStart(event:MouseEvent) { startButton.removeEventListener(MouseEvent.CLICK,clickStart); gotoAndStop(2); // go to frame for main game } stop(); startButton.addEventListener(MouseEvent.CLICK,clickStart); function clickStart(event:MouseEvent) { startButton.removeEventListener(MouseEvent.CLICK,clickStart); gotoAndStop(2); // go to frame for main game } Name: startButton </li> <li> Slide 5 </li> <li> Frame 2 Spring 2011SCM-CityU5 Name: timeLeftTxt // control the movement of the gun stage.addEventListener(MouseEvent.MOUSE_MOVE, onGunMove); function onGunMove(e:MouseEvent): void { gun.x = e.stageX; // use mouse to control guns translation } // score board initialization var shotsHit:int = 0; var timeLeft:int = 10; updateGameScore (); function updateGameScore (): void { shotsHitTxt.text = String("Score: " + shotsHit); timeLeftTxt.text = String("Time Left: " + timeLeft); } // control the movement of the gun stage.addEventListener(MouseEvent.MOUSE_MOVE, onGunMove); function onGunMove(e:MouseEvent): void { gun.x = e.stageX; // use mouse to control guns translation } // score board initialization var shotsHit:int = 0; var timeLeft:int = 10; updateGameScore (); function updateGameScore (): void { shotsHitTxt.text = String("Score: " + shotsHit); timeLeftTxt.text = String("Time Left: " + timeLeft); } Name: shotsHitTxt Name: gun </li> <li> Slide 6 </li> <li> Frame 3 Spring 2011SCM-CityU6 Name: playAgainButton playAgainButton.addEventListener(MouseEvent.CLICK,clickPlayAgain); function clickPlayAgain(event:MouseEvent) { playAgainButton.removeEventListener( MouseEvent.CLICK,clickPlayAgain); gotoAndStop(2); // go back to main frame to restart game } playAgainButton.addEventListener(MouseEvent.CLICK,clickPlayAgain); function clickPlayAgain(event:MouseEvent) { playAgainButton.removeEventListener( MouseEvent.CLICK,clickPlayAgain); gotoAndStop(2); // go back to main frame to restart game } </li> <li> Slide 7 </li> <li> SM1205 Interactivity Timer Spring 2011SCM-CityU7 </li> <li> Slide 8 </li> <li> Timer (ref)ref Usage 1: continuous updating for every user-specified interval (e.g., for programmatic animation) E.g., rotating second hand per second timer_events.swf Updating frequency is specified by you, largely independent of Flashs FPS setting E.g., for every 1 second Cf. ENTER_FRAME: animation synchronized with Flash runtimes frame rate E.g., Corresponding event listener will be invoked for 30 times per second (due to FPS = 30) Spring 2011SCM-CityU8 </li> <li> Slide 9 </li> <li> Timer (ref)ref Usage 2: count down Allowing to perform certain action after a given time period Spring 2011SCM-CityU9 </li> <li> Slide 10 </li> <li> Creating Timers Timer is a complex data type Syntax of variable definition for complex data type Number of parameters can be zero, e.g., our SymbolDuck from last class (data type by us) var duck:SymbolDuck = new SymbolDuck(); Spring 2011SCM-CityU10 var varName:ComplexType = new ComplexType(para1, , para2); </li> <li> Slide 11 </li> <li> Creating Timers Timer has two parameters (ref)ref interval: in milliseconds between timer event TimerEvent.TIMER event happens whenever a timer reaches the specified interval E.g., if interval = 1000, there is a TimerEvent.TIMER event for every second An interval lower than 20 milliseconds is NOT recommended (too fast), which may causes runtime problems repeatCount: total number of TimerEvent.TIMER needed E.g., if repeatCount = 10, the timer will stop after 10 TimerEvent.TIMER events are completed; it will then trigger a TimerEvent.TIMER_COMPLETE If zero (by default), the timer repeats infinitely Spring 2011SCM-CityU11 Timer(interval:Number, repeatCount:int = 0) </li> <li> Slide 12 </li> <li> Starting/Stopping Timers Timer instance will not start to invoke events until you call its start() method If your timer doesnt work, it is often because you forget to start the timer (common problem)! To stop the timer, call its stop() method Spring 2011SCM-CityU12 var timer:Timer = new Timer(1000, 2); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); var i:int = 0; function onTimer(e:TimerEvent): void { i++; trace("number of repetitions", i); } var timer:Timer = new Timer(1000, 2); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); var i:int = 0; function onTimer(e:TimerEvent): void { i++; trace("number of repetitions", i); } </li> <li> Slide 13 </li> <li> Example Spring 2011SCM-CityU13 var timer:Timer = new Timer(1000); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); function onTimer(evt:TimerEvent):void { watch.hand.rotation +=5; } var timer:Timer = new Timer(1000); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); function onTimer(evt:TimerEvent):void { watch.hand.rotation +=5; } </li> <li> Slide 14 </li> <li> Class Exercise New year countdown Count down from 10 to 1 Output one number per second Output Happy New Year 1 second after 1 is outputted I.e., output Happy New Year instead of 0 Hint: we need to output 11 messages, one per second Spring 2011SCM-CityU14 </li> <li> Slide 15 </li> <li> for Loop vs ENTER_FRAME/Timer All of them allow repetitive execution of some code However, unlike ENTER_FRAME or Timer, for loop itself is NOT sufficient for creating animation Because of no frame refreshing for individual (for) iterations E.g., NoAnimationWithForLoop.fla vs AnimationWithTimer.fla Spring 2011SCM-CityU15 var speed:Number = 10; for (var i:uint = 0; i &lt; 20; i++) { circle.x += speed; circle.y += speed; } var speed:Number = 10; for (var i:uint = 0; i &lt; 20; i++) { circle.x += speed; circle.y += speed; } Direct jumping </li> <li> Slide 16 </li> <li> Back to Main Example Task: creating multiple planes in a random manner Random intervals: use Timer Random side: starting from either left or right Random speed: random velocity; direction is dependent on which side the plane comes from Random altitude Random plane shape: one out of 5 plane models Spring 2011SCM-CityU16 </li> <li> Slide 17 </li> <li> Random Intervals It seems easy to make timer interval random E.g., var t:Timer = new Timer(100+100*Math.random()); But such solution still cannot make the delay for creating individual planes random E.g., waiting for 1 second before creating Plane 1; waiting for 0.78 second before creating Plane 2 In fact, with such timer, every plane will be created for a fixed interval Spring 2011SCM-CityU17 </li> <li> Slide 18 </li> <li> Random Intervals Solution setTimer function below initializes a timer with random interval. This function will be repeated at random intervals Spring 2011SCM-CityU18 var t:Timer; setTimer(); function setTimer(): void { t = new Timer(1000+Math.random()*1000, 1); t.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete); t.start(); } function timerComplete(e:TimerEvent): void { // create a plane //... // for next timer with random interval setTimer(); } var t:Timer; setTimer(); function setTimer(): void { t = new Timer(1000+Math.random()*1000, 1); t.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete); t.start(); } function timerComplete(e:TimerEvent): void { // create a plane //... // for next timer with random interval setTimer(); } setTimertimerComplete </li> <li> Slide 19 </li> <li> Example TimerWithRandomInterval.fla Spring 2011SCM-CityU19 var t:Timer; setTimer(); function setTimer(): void { t = new Timer(1000+Math.random()*1000, 1); t.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete); t.start(); } function timerComplete(e:TimerEvent): void { // create a circle and add it to stage var c:Symbol1 = new Symbol1(); c.x = stage.stageWidth * Math.random(); c.y = stage.stageHeight * Math.random(); addChild(c); // for next timer with random interval setTimer(); } var t:Timer; setTimer(); function setTimer(): void { t = new Timer(1000+Math.random()*1000, 1); t.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete); t.start(); } function timerComplete(e:TimerEvent): void { // create a circle and add it to stage var c:Symbol1 = new Symbol1(); c.x = stage.stageWidth * Math.random(); c.y = stage.stageHeight * Math.random(); addChild(c); // for next timer with random interval setTimer(); } </li> <li> Slide 20 </li> <li> Review: Dynamically Creating Display Objects in AS 1.Create a class name for your symbol E.g., MySymbol 2.Create a symbol instance in AS E.g., var s:MySymbol = new MySymbol(); 3.Display it to stage addChild(s); Spring 2011SCM-CityU20 </li> <li> Slide 21 </li> <li> Review: Instance Name vs Class Name Instance name: like variable name in AS If your AS wants to directly assess some existing symbol instance on stage, assign instance name Class name: like data type in AS If your AS wants to dynamically create new symbol instances, create class name for your symbol! Class naming style is the same as variable/instance naming style Spring 2011SCM-CityU21 This name has no special usage </li> <li> Slide 22 </li> <li> Spring 2011SCM-CityU22 </li> <li> Slide 23 </li> <li> Scope of Variables Local variables Defined in function bodies (in-between function {}) Can be used only within the function where variables are created Can prevent name collision Global variables Can be accessed everywhere Spring 2011SCM-CityU23 var v01:Number = 3; // global variable function show1() : void { var v02: Number = 4; // local variable var v03: Number = 5; // local variable trace(v01); // 3 } function show2() : void { var v02:Number = 6;// local variable trace(v02); // 6 trace(v03); // compilation error: local variable in show1 } show1(); show2(); trace(v01); // 3 trace(v02); // compilation error: local variable in show1/show2 trace(v03); // compilation error: local variable in show1 var v01:Number = 3; // global variable function show1() : void { var v02: Number = 4; // local variable var v03: Number = 5; // local variable trace(v01); // 3 } function show2() : void { var v02:Number = 6;// local variable trace(v02); // 6 trace(v03); // compilation error: local variable in show1 } show1(); show2(); trace(v01); // 3 trace(v02); // compilation error: local variable in show1/show2 trace(v03); // compilation error: local variable in show1 </li> <li> Slide 24 </li> <li> Random Speed Each plane has a random speed How to store such set of random speed values? Solution 1: create another array to store speed values For plane planes[i], its corresponding speed is planeSpeedArray[i] Spring 2011SCM-CityU24 var planeSpeedArray:Array = new Array(); </li> <li> Slide 25 </li> <li> Random Speed Solution 2: associate speed directly with each plane (much simpler!) Airplane is a complex data type For complex data type, you can create temporary properties by assignment operator Such temporary properties behave exactly the same as predefined properties like x, y, alpha etc. You might use any valid variable name as property name, e.g., Spring 2011SCM-CityU25 p.speed = Math.random() * 8 + 3; p.speedX = Math.random() * 8 + 3; </li> <li> Slide 26 </li> <li> Random Side Originally planes are designed for right-to-left flight Need to flipping shape for planes from left border By setting scaleX = -1 Exact transformation will depend on the location of registration point E.g., example below has registration at top-left corner Spring 2011SCM-CityU26 x Y x Y scaleX = -1 </li> <li> Slide 27 </li> <li> Spring 2011SCM-CityU27 </li> <li> Slide 28 </li> <li> Class Exercise Task: fire a bullet for each mouse click Create an Array: name bullets Add event listener for MouseEvent.CLICK Inside this event listener, create a bullet and add it to stage In this exercise, dont bother the movement of bullets Spring 2011SCM-CityU28 </li> <li> Slide 29 </li> <li> Make Planes Moving Review: for loop structure Starting with for keyword Example Spring 2011SCM-CityU29 for (declare counter; condition; update counter) { // statement(s) to execute repeatedly // as long as condition is true } for (declare counter; condition; update counter) { // statement(s) to execute repeatedly // as long as condition is true } for (var i:int = 1; i stage.stageWidth) Question 2: how to remove such planes from stage and planes array? Removal from stage is easy. Just use removeChild(plane); How to remove all off-screen planes from the array? Use Array.pop()? But this removes the last element of the array only. What if the element to be removed has an arbitrary index? Spring 2011SCM-CityU31 </li> <li> Slide 32 </li> <li> Removing Off-Screen Planes from Array Solution: use Arrays splice method (ref)ref splice(startIndex:int, deleteCount:uint): Array; startIndex: where the deletion begins deleteCount: number of elements to be deleted Returning an array containing the elements that were removed Spring 2011SCM-CityU32 var vegetables:Array = new Array( "spinach", "green pepper", "cilantro", "onion", "avocado"); // remove 2 elements starting at index 2 var spliced:Array = vegetables.splice(2, 2); trace(vegetables); // spinach,green pepper,avocado trace(spliced); // cilantro,onion var vegetables:Array = new Array( "spinach", "green pepper", "cilantro", "onion", "avocado"); // remove 2 elements starting at index 2 var spliced:Array = vegetables.splice(2, 2); trace(vegetables); // spinach,green pepper,avocado trace(spliced); // cilantro,onion </li> <li> Slide 33 </li> <li> Removing Off-Screen Planes from Array How can we use splice together with for loop? For example, how to remove all elements that are equal to 3 from an array below? Above solution is wrong! Why? Spring 2011SCM-CityU33 var a:Array = [3, 3, 5, 6, 7, 3, 3, 5, 7, 3]; for (var i:uint = 0; i &lt; a.length; i++) { if (a[i] == 3) { a.splice(i, 1); trace(a); } trace("final: ", a); var a:Array = [3, 3, 5, 6, 7, 3, 3, 5, 7, 3]; for (var i:uint = 0; i &lt; a.length; i++) { if (a[i] == 3) { a.splice(i, 1); trace(a); } trace("final: ", a); </li> <li> Slide 34 </li> <li> Removing Off-Screen Planes from Array Some 3 cannot be removed successfully! Spring 2011SCM-CityU34 3356733573 i=0 356733573 i=1 First 3 is sliced and i++ Iteration 0 Iteration 1 </li> <li> Slide 35 =0; i--) { if (a[i] == 3) { a.splice(i, 1); trace(a); } trace("final: ", a); 3356733573 i=9 i=8 Iteration 0 Iteration 1 335673357"&gt; </li><li> Removing Off-Screen Planes from Array Correct solution: bottom-up iteration Spring 2011SCM-CityU35 var a:Array = [3, 3, 5, 6, 7, 3, 3, 5, 7, 3]; for (var i:int = a.length -1; i &gt;=0; i--) { i...</li></ul>

Recommended

View more >