Designoid Games

A lot of games use the directional pad or arrow keys for movement. When you move to mobile devices with only a touchscreen, you lose one of the staples of your game controls. I’ll show a simple way of getting your D-pad back and hopefully allowing you to make the transition to mobile easier.

We need to listen to the TOUCH_BEGIN, TOUCH_MOVE and TOUCH_END events. If you’re familiar with mouse events already, you can think of BEGIN as MOUSE_DOWN and END as MOUSE_UP. The biggest difference between a mouse and touch screen is that there can be multiple touches so you need to keep track of which is which. If you got three fingers on the screen and only follow the events, it’s gonna be a mess.

How to keep track of the touches then? Each touch has touchPointID associated with it so whenever a touch event is fired, you can dig it up and compare it with all your known touch IDs. For now we will use the first touch to occur and assign that for our D-pad.

Before anything else, let’s set the input mode for the Multitouch class to Touch_Point. This means Flash will only track the basic touch events like when the touch begins, when it moves and when it ends.

1
2
3

private function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}

private function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}

Then add some basic listeners for Touch events.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// ... extends Sprite
 
private var dpadTouchID:int=-1;
 
public function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
 
  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
}
 
private function touchBegin(e:TouchEvent):void{
  dpadTouchID = e.touchPointID;
}
 
private function touchEnd(e:TouchEvent):void{
  dpadTouchID = -1;
}

// ... extends Sprite

private var dpadTouchID:int=-1;

public function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
}

private function touchBegin(e:TouchEvent):void{
  dpadTouchID = e.touchPointID;
}

private function touchEnd(e:TouchEvent):void{
  dpadTouchID = -1;
}

Something I’ve noticed is that touchPointID’s always start from 0 and go up. We’ll use -1 to tell when there is no touch assigned to the D-Pad.

We shouldn’t assume that there’s only gonna be one touch because there probably will be atleast 2. We’ll add some checks to make sure we’re only looking at the correct touch and add a event listener for TOUCH_MOVE so we can track the movement of the finger.

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

// ... extends Sprite
 
private var dpadTouchID:int=-1;
 
public function init():void{
  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
  addEventListener(TouchEvent.TOUCH_MOVE, touchMove);
}
 
private function touchBegin(e:TouchEvent):void{
  if(dpadTouchID == -1){
    dpadTouchID = e.touchPointID;
  }
}
 
private function touchEnd(e:TouchEvent):void{
  if(e.touchPointID == dpadTouchID){
    dpadTouchID = -1;
  }
}
 
private function touchMove(e:TouchEvent):void{
//make sure a D-Pad touch is assigned at all, and then check if it matches
  if(dpadTouchID != -1){
    if(e.touchPointID == dpadTouchID){
      // success! let's print out the x and y!
      trace('D-Pad is moving!', e.stageX, e.stageY);
    }
  }
 
}

// ... extends Sprite

private var dpadTouchID:int=-1;

public function init():void{
  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
  addEventListener(TouchEvent.TOUCH_MOVE, touchMove);
}

private function touchBegin(e:TouchEvent):void{
  if(dpadTouchID == -1){
    dpadTouchID = e.touchPointID;
  }
}

private function touchEnd(e:TouchEvent):void{
  if(e.touchPointID == dpadTouchID){
    dpadTouchID = -1;
  }
}

private function touchMove(e:TouchEvent):void{
//make sure a D-Pad touch is assigned at all, and then check if it matches
  if(dpadTouchID != -1){
    if(e.touchPointID == dpadTouchID){
      // success! let's print out the x and y!
      trace('D-Pad is moving!', e.stageX, e.stageY);
    }
  }

}

The red area shows where the touch area is for the finger, right now its overlapping right and up arrows.

Ok, now we’re tracking the D-pad touch around. It’s still pretty much acting like a mouse though. We want to use the touch tracking for a D-pad so we’ll need to figure out based on those X and Y coordinates if the finger is on top of any of the D-Pad buttons. Just for examples sake, we’ll draw a simple graphic to represent the four directional buttons. The buttons are 100×100 pixels in size. The touch area we’ll be using is going to be 60 pixels so it’s small enough to still be precise but big enough so that it can cover two buttons at a time. This way you get 8 directions easily.

Right now we’re using the 60×60 square for the finger area but TouchEvent’s have some interesting properties you might want to look into later. For example; pressure, sizeX and sizeY. Those should come in handy when creating more sophisticated controls.

Next create some simple graphics for the buttons. We’ll name them upArrow, downArrow, leftArrow and rightArrow. They should be a descendant of the DisplayObject class for this.

You want to re-check which buttons your finger is touching whenever it has moved and when it’s first pressed into the screen. So we should modify touchMove(e) and touchBegin(e) to check that.

Stay tuned for part 2!