Monday, March 14, 2011

Beginning Flash and ActionScript Game Programming Part 10: Input and Event Handling

Beginning Flash and ActionScript Game Programming Part 10: Input and Event Handling:

Beginning Flash and ActionScript Game Programming Part 10: Input and Event Handling

In the previous sections, we looked at how to create graphics on screen using vector drawing.

In this section, we’ll look at Flash and Actionscript specific concepts, event handling, and keyboard and mouse input.

Events and Event Handling

In Actionscript, there is a concept called “event handling”. Basically that certain events can be dispatched for actions, such as if a key is pressed, and you create listeners that are able to “catch” the events after being fired, and handle them.

This lets us capture and handle keyboard and mouse input, as well as several other event types.

Handling Mouse Input

So lets start by moving the smiley face around on screen, using the mouse.

Modify your “Main.as” class to look like below.

Main.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 /**
  * ...
  * @author Chris Moeller
  */
 public class Main extends Sprite 
 {
  public var smiley_face:Sprite;
  public var smiley_is_cursor:Boolean;
  public function Main():void 
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }
 
  private function init(e:Event = null):void 
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   // entry point
   smiley_is_cursor = true;
 
   smiley_face = new Sprite();
   addChild(smiley_face);
 
   //draw the main circle
   smiley_face.graphics.beginFill(0xffff00);
   smiley_face.graphics.lineStyle(10, 0x000000);
   smiley_face.graphics.drawCircle(800 / 2, 600 / 2, 300);
   smiley_face.graphics.endFill();
 
   //draw the eyes
   smiley_face.graphics.lineStyle(0);
   smiley_face.graphics.beginFill(0x000000);
   //left eye (from our perspective)
   smiley_face.graphics.drawEllipse(290, 150, 75, 110);
 
   //right eye (from our perspective)
   smiley_face.graphics.drawEllipse(450, 150, 75, 110);
   smiley_face.graphics.endFill();
 
   //draw the mouth
 
   //draw left curve
   smiley_face.graphics.lineStyle(7);
   smiley_face.graphics.moveTo(250, 340);
   //first two are anchor point, second two are destination
   smiley_face.graphics.curveTo(240, 380, 190, 380);
 
   //now lets draw the right curve
   smiley_face.graphics.moveTo(550, 340);
   smiley_face.graphics.curveTo(560, 380, 613, 380);
 
   //and draw the final mouth curve
   smiley_face.graphics.lineStyle(10);
   smiley_face.graphics.moveTo(233, 373);
   smiley_face.graphics.curveTo(400, 600, 567, 373);
 
   //now to add input
   //start with the mouse
   stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMoveSmiley);
   smiley_face.addEventListener(MouseEvent.CLICK, SelectSmiley);
  }
  public function MouseMoveSmiley(e:MouseEvent):void
  {
   if (smiley_is_cursor)
   {
    smiley_face.x = mouseX-smiley_face.width/2;
    smiley_face.y = mouseY - smiley_face.height / 2;
   }
  }
  public function SelectSmiley(e:MouseEvent):void 
  {
   if(smiley_is_cursor)
    smiley_is_cursor = false;    
   else
    smiley_is_cursor = true; 
  }
 
 }
 
}

I set it up now so that by default, the smiley face will follow the cursor, and be at the center. When you click on the smiley once, it will follow your cursor, but if already following, it will leave it in it’s place.

The new lines added are:

Line 14: ‘smiley_is_cursor’ is a variable created to keep track of whether the smiley face is following the mouse. If set to true, we’ll have it follow the mouse, or false, stay where it is.

Line 25: We set ‘smiley_is_cursor’ to true, so that initially the smiley face moves with the cursor, so people can see something working.

Line 65: We add a listener to our “stage” object. This object is setup by default by flash, and is basically the “top level” object in flash. So we add a listener to it to catch any movement on the flash window, and to call the function “MouseMoveSmiley” whenever the mouse moves (when the MOUSE_MOVE function fires).

Line 66: We add another listener for whenever a click is detected, but we add this one onto the smiley face sprite. This way, whenever the smiley face is clicked, it calls the “SelectSmiley” function.

Line 68: This function is called whenever the mouse is moved, and is required to have a ‘MouseEvent’ passed to it in the parameters.
Inside of here, we check to see if the smiley is set to the cursor, and if so, we set the x and y position of the smiley sprite to that of the mouse, and take away half the width and height so that the smiley face is centered around the mouse.

Line 76: This function is called whenever the smiley face has been clicked. It will check whether the ‘smiley_is_cursor’ variable is set to true, if so set it to false, otherwise set it to true. So everytime this function is called, it will basically flip between setting the smiley face to follow the cursor or stay in place.

Tutorial Demo

This is what this will look like when you compile:
(use mouse to move smiley face, click to place it, click on it again to move it around)

Handling Keyboard Input

[...]

на
Ярлыки: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)