[Go to] Starling tutorial-touch events (4)

As mentioned above, Starling is a companion article of Sparrow. Because of this, the touch event mechanism in Starling is actually designed for mobile device touch interaction, so when you use it to develop desktop applications that use mouse interaction, you may feel a bit confused at first glance.

First, if you look at the Starling class structure, the difference between Starling and the local display list structure is that it does not have the interactiveobject class (the interactiveobject class is the abstract base class of all the display objects that users can use the mouse and keyboard to interact ), all Display objects use the default interaction. In other words, these interactions are defined in displayobject (Starling registers events from the local stage, then, use its own structure to combine the local mouseevent and touchevent into its own unique touchevent. In this way, when developing a desktop application, it can be transplanted to the mobile platform without any modifications, as you know, tablets are becoming increasingly popular !).

We have used the touch event before. We start with the most basic things, such as capturing events triggered when the mouse touches quad. To achieve this, we use the touchevent. Touch event:

1 // when the sprite is touched 
2 _customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 

Do you think this is a very limited function? In fact, it is very powerful, because you can get many different States from this single event. Whenever the mouse or finger interacts with a graphic object, touchevent. Touch is triggered.

Let's take a further look at the following code. we trace the phase attribute of the touch object in the ontouch method:

 1 private function onTouch (e:TouchEvent):void 
 2 { 
 3   // get the mouse location related to the stage 
 4     var touch:Touch = e.getTouch(stage); 
 5     var pos:Point = touch.getLocation(stage); 
 6  
 7     trace ( touch.phase ); 
 8  
 9     // store the mouse coordinates 
10     _mouseY = pos.y; 
11     _mouseX = pos.x; 
12 } 

 

When we start to interact with a quad until we click it, this process will trigger different phase. The constant attributes of all phase in the touchphase class are as follows:

1 •  began : A mouse or finger starts interacting (similar to a mouse down state). 
2 •  ended : A mouse or finger stop interacting (similar to a native click state). 
3 •  hover : A mouse or finger is hovering an object. (similar to a native mouse over state) 
4 •  moved : A mouse or finger is moving an object (similar to a native  mouse down state + a mouse move state). 
5 •  stationary : A mouse or finger stopped interactng with an object and stays over it. 

Let's take a look at some other common attributes of the touchevent class:

1 •  ctrlKey : A boolean returning the state of the ctrl key (down or not). 
2 •  getTouch: Gets the first Touch object that originated over a certain target and are in a certain phase. 
3 •  getTouches : Gets a set of Touch objects that originated over a certain target and are in a certain phase. 
4 •  shiftKey: A boolean returning the state of the shift key (down or not). 
5 •  timestamp : The time the event occurred (in seconds since application launch). 
6 •  touches : All touches that are currently happening. 

The shiftkey and ctrlkey attributes are very useful when you use a keyboard combination key. In summary, a touch event is associated with each interaction, whether it is the mouse or the finger.

 

Let's take a look at the touch PAI:

 1 •  clone : Clones the object. 
 2 •  getLocation: Converts the current location of a touch to the local coordinate system of a display object. 
 3 •  getPreviousLocation: Converts the previous location of a touch to the local coordinate system of a display 
 4 object. 
 5 •  globalX: The x-position of the touch in screen coordinates. 
 6 •  globalY : The y-position of the touch in screen coordinates. 
 7 •  id: A unique id for the object. 
 8 •  phase : The current phase the touch is in. 
 9 •  previousGlobalX : The previous x-position of the touch in screen coordinates. 
10 •  previousGlobalY : The previous y-position of the touch in screen coordinates 
11 •  tapCount : The number of taps the finger made in a short amount of time. Use this to detect double-taps, etc. 
12 •  target : The display object at which the touch occurred. 
13 •  timestamp : The moment the event occurred (in seconds since application start). 
14  

 

Simulate multi-point touch

When developing mobile devices, you often want to use multi-touch interactive operations, such as enlarging and downgrading images. When you develop on a desktop computer without a mobile device, you will need to use the Starling built-in multi-point touch simulation mechanism.

To use this mechanism, you need to set the simulatemultitouch attribute of the Starling class to true:

 

package
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import starling.core.Starling; 
     
    [SWF(width="1280", height="752", frameRate="60", backgroundColor="#002143")] 
    public class Startup extends Sprite 
    { 
        private var mStarling:Starling; 
         
        public function Startup() 
        { 
           // stats class for fps 
      addChild ( new Stats() ); 
       
      stage.align = StageAlign.TOP_LEFT; 
      stage.scaleMode = StageScaleMode.NO_SCALE; 
     
      // create our Starling instance 
              mStarling = new Starling(Game, stage); 
      // emulate multi-touch 
      mStarling.simulateMultitouch = true; 
             // set anti-aliasing (higher the better quality but slower performance) 
             mStarling.antiAliasing = 1; 
             // start it! 
      mStarling.start(); 
        } 
    } 
} 

After setting according to the code above, press Ctrl. Two small circles will appear to simulate multi-point touch. The following illustration illustrates this point:

In the following code, we will use a small dot that simulates multi-point touch to deform a quad, just like using two fingers.

We take out two touch points and calculate the distance between them:

 1 package  
 2 { 
 3     import flash.geom.Point; 
 4  
 5     import starling.display.Sprite; 
 6     import starling.events.Event; 
 7     import starling.events.Touch; 
 8     import starling.events.TouchEvent; 
 9     import starling.events.TouchPhase; 
10  
11     public class Game extends Sprite 
12     { 
13     private var customSprite:CustomSprite; 
14      
15         public function Game() 
16         {   
17       addEventListener(Event.ADDED_TO_STAGE, onAdded); 
18         } 
19  
20     private function onAdded ( e:Event ):void 
21     { 
22       // create the custom sprite 
23       customSprite = new CustomSprite(200, 200); 
24        
25       // positions it by default in the center of the stage 
26       // we add half width because of the registration point of the custom sprite (middle) 
27       customSprite.x = (stage.stageWidth - customSprite.width >> 1 ) + (customSprite.width >> 1); 
28       customSprite.y = (stage.stageHeight - customSprite.height >> 1) + (customSprite.height >> 1); 
29        
30       // show it 
31       addChild(customSprite); 
32  
33       // we listen to the mouse movement on the stage 
34       //stage.addEventListener(TouchEvent.TOUCH, onTouch); 
35       // need to comment this one ? ;) 
36       stage.addEventListener(Event.ENTER_FRAME, onFrame); 
37       // when the sprite is touched 
38       customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 
39     } 
40  
41     private function onFrame (e:Event):void 
42     { 
43       // we update our custom sprite 
44       customSprite.update(); 
45     } 
46  
47     private function onTouchedSprite(e:TouchEvent):void 
48     { 
49             // retrieves the touch points 
50             var touches:Vector.<Touch> = e.touches; 
51  
52             // if two fingers 
53             if ( touches.length == 2 ) 
54             { 
55                 var finger1:Touch = touches[0]; 
56                 var finger2:Touch = touches[1]; 
57  
58                 var distance:int; 
59                 var dx:int; 
60                 var dy:int; 
61  
62                 // if both fingers moving (dragging) 
63                 if ( finger1.phase == TouchPhase.MOVED && finger2.phase == TouchPhase.MOVED ) 
64                 { 
65                     // calculate the distance between each axes 
66                     dx = Math.abs ( finger1.globalX - finger2.globalX ); 
67                     dy = Math.abs ( finger1.globalY - finger2.globalY ); 
68                      
69                     // calculate the distance 
70                     distance = Math.sqrt(dx*dx+dy*dy); 
71  
72                     trace ( distance ); 
73                 } 
74             } 
75     } 
76     } 
77 } 

Next we will explain how to operate the texture (texture.

[Go to] Starling tutorial-touch events (4)