Interaction: Sprites, Game Control

1. Interaction: Sprites, Game Control

2. Interactivity • Event basics • Mouse events • Keyboard events

3. Event Basics • To add an event to an event target: eventTarget.addEventListener(type:String, listener:Function); E.g.: varball:mvBall = new mvBall(); ball.addEventListener(MouseEvent.MOUSE_CLICK, onClickEvent); function onClickEvent(e:MouseEvent):void{ trace(“ball is hit”); } • Note:addEventListener is from EventDispatcher which DisplayObject inherits from.

4. Event Basics • To remove the event from an event target:eventTarget.removeEventListener( type:String, listener:Function); E.g.: varball:mvBall = new mvBall(); ball.addEventListener(MouseEvent.MOUSE_CLICK, onClickEvent); function onClickEvent(e:MouseEvent):void{ trace(“ball is hit”); } ball.removeEventListener(MouseEvent.MOUSE_CLICK, onClickEvent); Note: The types and the listeners function MUST be the same.

5. Mouse events • Mouse-Input events • Device: mouse, trackball, a laptop touchpad, a laptop pointing stick, and a stylus. • Event Class:MouseEvent. • MouseEvents class • MOUSE_DOWN - ROLL_OVER • MOUSE_UP - ROLL_OUT • MOUSE_CLICK - MOUSE_OUT • DOUBLE_CLICK - MOUSE_MOVE • MOUSE_OVER - MOUSE_WHEEL

6. Mouse events • MOUSE_DOWN: Happened when pressing left mouse button down • MOUSE_UP : Happened when pressing release mouse button • MOUSE_CLICK: Happened after pressing mouse down and release. • DOUBLE_CLICK: Happened after double click • ROLL_OVER: Happened only ONCE when rolling mouse over a target • ROLL_OUT: Happened only ONCE when rolling mouse over a target • MOUSE_MOVE: Happened every time whenever moving mouse over a target • MOUSE_OVER: Similar to ROLL_OVER. • MOUSE_OUT: Similar to ROLL_OUT. • MOUSE_WHEEL: Happened when scrolling mouse wheel up or down over a target.

7. Keyboard Events • Event class: KeyboardEvent. • KeyboardEventclass: • KEY_DOWN: Happened when pressing a key down. • KEY_UP: Happened when releasing up a key. • E.g.: stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage); function keyDownOnStage(e:KeyboardEvent):void{ trace(“Any key is hit”); } Note: Because some keys are short-cut in Flash Pro CS3, please run SWF file in Flash players and try to type keys again.

8. Keyboard Events • To specify a key, using keyCodefrom KeyboardEvent. E.g.: stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage); function keyDownOnStage(ke:KeyboardEvent):void{ if(ke.keyCode == 32){ trace(“Spacebar key is hit”); } } Note: trace() can use only in Flash Professional, not in Flash Players. So some key like Enter, Escape etc. shouldn’t be tested with trace().

9. To set Key Code: Using KeyboardEvent class. altKey: Boolean ctrlKey: Boolean shiftKey: Boolean Using Keyboard class. capsLock: Boolean numLock: Boolean BACKSPACE CONTROL F1 -> F15 RIGHT, LEFT, UP, DOWN etc. Setting them manually: Some keys like 1...9 or a ... Z don’t have defined key codes. So we have to set them by ourselves. final var KEY_1:uint = 49; final var KEY_A:uint = 65; final var KEY_a:uint = 97; Note: if you don’t know which number is a key, please usetrace(e.keyCode); Keyboard Events

10. Keyboard Events Example: stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage); function keyDownOnStage(e:KeyboardEvent):void{ trace(e.keyCode); // To see key code if(e.keyCode == Keyboard.LEFT){ trace("Left"); } if(e.keyCode == Keyboard.RIGHT){ trace("Right"); } }

11. Sprites & Basic Game Engine

12. Introduction to Sprites • We will now look at implementing Sprites in Flash. • We should know enough after this to create our own games. • Sprites in Flash are screen-based objects whose behaviour and actions are controlled by dedicated code that is integral to itself. • In other words, the sprite is responsible for looking after itself.

13. Introduction to Sprites • The sprite should be able to do three basic things of its own accord: • 1. Move - move around in an intelligent way and know if it’s moving into areas where it shouldn’t be. We will handle all of this by altering movie clip properties. • 2. Detect Collisions - there is a method associated with movie clips which can detect collisions for us. • 3. Act Independently - Sprite should take care of its own behaviour without interference from the main program.

14. Controlling Movement • There are a number of issues we need to consider when dealing with sprites. • Start with control. This implies simulating intelligence and giving the impression that the sprite is aware of what’s going on around it. • We do this by attaching behaviours to the sprite. This means that the sprite has characteristics associated with it that govern its behaviour. So for example the behaviour associated with the ball in Pong might simply be ‘keep moving in associated direction’.

15. Controlling Movement • We would need to make this a little more complex in order to handle bouncing off walls. • The important point is that the sprite controls its own behaviour. It is NOT the case that the game controls the sprite.

16. Controlling Movement • The basic mode of operation of a sprite is something like this: • 1. Set my movement as per my behaviour. • 2. Check whether I’m breaking any rules. • 3. If I’m breaking a rule, modify my behaviour as per the rules of my environment, otherwise move me as per my behaviour. • 4. Go back to 1.

17. Controlling Movement • In the case of the ball in Pong breaking a rule might involve hitting the side wall in which case the consequent modification of behaviour would be to change the direction of the sprite. • Let’s have a go at implementing something like this:

18. Controlling Movement 1. Open a new movie. Create a graphic symbol called circle. Create a new movie clip symbol called bouncing and drag an instance of circle into it (use the info panel to make sure that this is centered at (0,0). 2. Insert a new layer to the movie clip called actions. This should contain three key frameswhich have the following pieces of ActionScript associated with them. Frame 1: varxmove:Number=Math.floor((Math.random()*20)-10); varymove:Number=Math.floor((Math.random()*20)-10); Frame 2: this.x += xmove; this.y += ymove; if(this.x<0) { xmove = 0 - xmove; this.x=0; } else if (this.x >= 550) { xmove = 0 - xmove; this.x = 550; }

19. Controlling Movement else if(this.y<0) { ymove = 0 - ymove; this.y=0; } else if (this.y >= 400) { ymove = 0 - ymove; this.y = 400; } Frame 3 gotoAndPlay(2); 3. Drag one or more instances of this onto the stage and test it.

20. Controlling Movement • What’s happening here? • The first frame sets up two variables xmove and ymove and sets them both to a random value between -10 and +10. • Math.floor() rounds our number down to the closest integer. • Math.random() retrieves a random float between 0 and 0.999…

21. Controlling Movement • The second frame does two things. It adds xmove and ymove to the position of the ball. So suppose xmove was -5 and ymove was 10. Then it moves the ball 5 units to the left and 10 units down. • It then checks the position of the ball to see if it has moved off the screen. If it has done so it changes the sign of xmove or ymove as appropriate. • Where do the figures 400 and 550 come from => default size for the movie. Can change this.

22. Controlling Movement • We could also get the main movie to generate the instances with a loop. • Go to the main timeline, delete all instances of the movie clip except for one. Give it the instance name ball. • Right click on the bouncing symbol in the Library and choose Linkage. Check ‘Export for Actionscript’. • Then insert the following code into frame one of the main timeline.

23. Controlling Movement • varcounter:int = 10 • while (counter>0) { • varnewBouncing = new bouncing(); • addChild(newBouncing); • newBouncing.x = ball.x; • newBouncing.y = ball.y; • counter--; • } • stop();

24. Controlling Movement • What if we want to have a paddle which the user controls and can use to bounce balls back up the screen? • Well the first thing to do is to fix things so that when a ball falls off the bottom of the screen it doesn’t bounce back up.

25. Controlling Movement • We already have a segment of code which detects if the ball hits the bottom (this is attached to the second frame of the bouncing symbol). • This just reverses its direction. We want to take it out of the game. So replace it with the following code ... • else if(this.y>400) { • ymove = 0 - ymove; • this.y=400; • }

26. Controlling Movement • Now the next step might be to make a paddle. • This will simply be a movie symbol which will follow the mouse horizontally across the stage. • else if (this.y>400){ • this.y=450; • stop(); • }

27. Controlling Movement • Do this by creating a graphic symbol (called e.g. paddle) then creating a new movie clip symbol (called e.g. movingPaddle), dragging an instance of paddle onto the movie clip stage (positioning at 0,0). • Then click onto Scene 1 and drag an instance of the movie clip movingPaddleinto an appropriate position. Call the instance myPaddle. • Then add some ActionScript to move myPaddle...

28. Controlling Movement • Attach this to the first frame of the movie clip symbol movingPaddle. • Add a keyframe at frame 2 and put this code in it this.x = root.mouseX; gotoAndPlay(1);

29. Controlling Movement • We now need to get the balls to bounce off the paddle. • In order to do this we are going to use the hitTestObject() method. • This is a method attached to all movie clips where we can test if the movieClip has hit another movieClip. • We want to get each ball to test if it has hit the paddle.

30. Controlling Movement • So as it stands the ball tests if it has hit the top wall, the left wall, the right wall, the bottom (this is attached to the second frame of the bouncing symbol). • We simply add another else if to test if it has hit the paddle as follows: • else if (this.hitTestObject(MovieClip(parent).myPaddle)) { • ymove=0-ymove; • }

31. Exercise (optional) • Make it so the balls speed up as the game progresses. • Change it so that we have four paddles on each side of the screen (all controlled by the mouse position). We can only keep balls in play by hitting them with the paddles.