starling教程-显示列表(The Display List )

显示列表

 

starling和flash本地的显示列表有一样的规则，在没有东西添加进stage之前，stage是null的。在本地flash中，为了能更安全的使用stage，我们通常使用一些Flash中的重要的事件，这些事件在starling中同样可用：

•  Event.ADDED : the object was added to a parent. 
•  Event.ADDED_TO_STAGE  : the object was added to a parent that is connected to the stage, thus becoming 
visible now. 
•  Event.REMOVED : the object was removed from a parent. 
•  Event.REMOVED_FROM_STAGE  : the object was removed from a parent that is connected to the stage, 
thus becoming invisible now.

在下面的例子中，我们会经常用到这些事件，就像在flash中一样，这些事件可以用在初始化，组件销毁等很多重要的地方。

 

下面是DisplayObject类声明的部分方法列表：

•  removeFromParent : Removes the object from its parent, if it has one. 
•  getTransformationMatrixToSpace :  Creates a matrix that represents the transformation from the local 
coordinate system to another. 
•  getBounds : Returns a rectangle that completely encloses the object as it appears in another coordinate system. 
•  hitTestPoint : Returns the object that is found topmost on a point in local coordinates, or nil if the test fails. 
•  globalToLocal : Transforms a point from global (stage) coordinates to the local coordinate system. 
•  localToGlobal : Transforms a point from the local coordinate system to global (stage) coordinates.

下面是DisplayObject类声明的部分属性，让人高兴的是大部分的属性都和flash本事的display一样，并且还有一些拓展的属性，比如用来动态改变一个DisplayObject类注册点的pivotX和pivotY，如下：

•  transformationMatrix : The transformation matrix of the object relative to its parent. 
•  bounds : The bounds of the object relative to the local coordinates of the parent. 
•  width : The width of the object in points. 
•  height : The height of the object in points. 
•  root : The topmost object in the display tree the object is part of. 
•  x : The x coordinate of the object relative to the local coordinates of the parent. 
•  y : The y coordinate of the object relative to the local coordinates of the parent. 
•  pivotX : The x coordinate of the object’s origin in its own coordinate space (default: 0). 
•  pivotY : The y coordinate of the object’s origin in its own coordinate space (default: 0). 
•  scaleX : The horizontal scale factor. “1” means no scale, negative values flip the object. 
•  scaleY : The vertical scale factor. “1” means no scale, negative values flip the object. 
•  rotation : The rotation of the object in radians. (In Sparrow, all angles are measured in radians.) 
•  alpha : The opacity of the object. 
•  visible : The visibility of the object. An invisible object will be untouchable. 
•  touchable : Indicates if this object (and its children) will receive touch events. 
•  parent : The display object container that contains this display object. 
•  stage : The stage the display object is connected to, or null if it is not connected to a stage.

 

就像在flash本地的api中一样，Sprite是你可以使用的最轻量级的容器。Sprite继承自DisplayObjectContainer， 而DisplayObjectContainer继承自DisplayObject，我们的例子中的Game都是集成字Sprite的，是一个DisplayObjectContainer。

下面是DisplayObjectContainer的一部分api：

•  addChild : Adds a child to the container. It will be at the topmost position.
•  addChildAt : Adds a child to the container at a certain index. 
•  dispose : Removes the GPU buffers and all the listeners registered to the o
•  removeFromParent : Removes the child from its parent. 
•  removeChild : Removes a child from the container. If the object is not a ch
•  removeChildAt : Removes a child at a certain index. Children above the c
•  removeChildren : Removes all children from the container. 
•  getChildAt : Returns a child object at a certain index. 
•  getChildByName : Returns a child object with a certain name (non-recursi
•  getChildIndex : Returns the index of a child within the container. 
•  setChildIndex : Changes the index of the specified child.

•  swapChildren : Swaps the indexes of two children. 
•  swapChildrenAt : Swaps the indexes of two children. 
•  contains : Determines if a certain object is a child of the container (recursively).

 

一旦你进入了stage之后你就可以使用绝大部分DisplayObjectContainer的api，当然了你可以为stage设置一个颜色。Starling默认会采用SWF的背景色，你可以通过设置下面的SWF标签来实现：

[SWF(width="1280", height="752", frameRate="60", backgroundColor="#990000")]

你也可以通过stage对象来手工设置一个颜色，stage对象可以通过任意一个添加到显示列表中的DisplayObject对象中获得：

package  
{ 
    import starling.display.Quad; 
    import starling.display.Sprite; 
    import starling.events.Event; 
 
    public class Game extends Sprite 
    { 
      private var q:Quad; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      // set the background color to blue 
      stage.color = 0x002143; 
       
      q = new Quad(200, 200); 
      q.setVertexColor(0, 0x000000); 
      q.setVertexColor(1, 0xAA0000); 
      q.setVertexColor(2, 0x00FF00); 
      q.setVertexColor(3, 0x0000FF); 
      addChild ( q ); 
    } 
    } 
} 

 现在我们还没有使用任何texture（纹理），我们主要是用两个三角形拼了一个Quad，并且每个顶点拥有不同的颜色（会自动篡改成gpu可识别的颜色）。

当然了你可以调用quad的color属性来实现纯色的quad：

package  
{ 
    import starling.display.Quad; 
    import starling.display.Sprite; 
    import starling.events.Event; 
 
    public class Game extends Sprite 
    { 
    private var q:Quad; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      q = new Quad(200, 200); 
      q.color = 0x00FF00; 
      q.x = stage.stageWidth - q.width >> 1; 
      q.y = stage.stageHeight - q.height >> 1; 
      addChild ( q ); 
    } 
    } 
} 

效果如下：

 

下面我们来使用Event.ENTER_FRAME事件修改quad的颜色来实现一个简单缓动特效：

package  
{ 
  import starling.display.Quad; 
    import starling.display.Sprite; 
    import starling.events.Event; 
 
    public class Game extends Sprite 
  { 
    private var q:Quad; 
     
    private var r:Number = 0; 
    private var g:Number = 0; 
    private var b:Number = 0; 
     
    private var rDest:Number; 
    private var gDest:Number; 
    private var bDest:Number; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      resetColors(); 
       
      q = new Quad(200, 200); 
      q.x = stage.stageWidth - q.width >> 1; 
      q.y = stage.stageHeight - q.height >> 1; 
      addChild ( q ); 
       
      s.addEventListener(Event.ENTER_FRAME, onFrame); 
    } 
     
    private function onFrame (e:Event):void 
    {   
      r -= (r - rDest) * .01; 
      g -= (g - gDest) * .01; 
      b -= (b - bDest) * .01; 
       
      var color:uint = r << 16 | g << 8 | b; 
      q.color = color; 
       
      // when reaching the color, pick another one 
      if ( Math.abs( r - rDest) < 1 && Math.abs( g - gDest) < 1 && Math.abs( b - bDest) ) 
        resetColors(); 
    } 
     
    private function resetColors():void 
    { 
      rDest = Math.random()*255; 
      gDest = Math.random()*255; 
      bDest = Math.random()*255; 
    } 
    } 
}

我们可以使用rotation这个属性来旋转quad，但是注意，在Starling中使用的是弧度而Flash Player中使用的是角度。这样做是为了保持Sparrow和Starling的一致性（Sparrow是Strarling的姊妹篇,同一作者）。如果你想使用度数来实现旋转的话，只要使用 starling.utils.deg2rad 这个放来来转换一下就可以了：

sprite.rotation = deg2rad(Math.random()*360);

我们可以在运行时设置DisplayObject的pivotX和pivotY属性来改变注册点：

q.pivotX = q.width >> 1; 
q.pivotY = q.height >> 1;

 

对于as3开发者来说使用starling会感觉很自然，下面的这个例子，一个quad和一个textfield被添加到一个sprite中，并且可以作为一个组合一起移动，这和我们使用本地的显示列表时一样的：

package  
{ 
    import starling.display.DisplayObject; 
    import starling.display.Quad; 
    import starling.display.Sprite; 
    import starling.events.Event; 
    import starling.text.TextField; 
 
    public class Game extends Sprite 
    { 
    private var q:Quad; 
    private var s:Sprite; 
     
    private var r:Number = 0; 
    private var g:Number = 0; 
    private var b:Number = 0; 
     
    private var rDest:Number; 
    private var gDest:Number; 
    private var bDest:Number; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      resetColors(); 
       
      q = new Quad(200, 200); 
       
      s = new Sprite(); 
       
      var legend:TextField = new TextField(100, 20, "Hello Starling!", "Arial", 14, 0xFFFFFF); 
       
      s.addChild(q); 
      s.addChild(legend); 
       
      s.pivotX = s.width >> 1; 
      s.pivotY = s.height >> 1; 
       
      s.x = (stage.stageWidth - s.width >> 1 ) + (s.width >> 1); 
      s.y = (stage.stageHeight - s.height >> 1) + (s.height >> 1); 
       
      addChild(s); 
 
      s.addEventListener(Event.ENTER_FRAME, onFrame); 
    } 
     
    private function onFrame (e:Event):void 
    {   
      r -= (r - rDest) * .01; 
      g -= (g - gDest) * .01; 
      b -= (b - bDest) * .01; 
       
      var color:uint = r << 16 | g << 8 | b; 
      q.color = color; 
       
      // when reaching the color, pick another one 
      if ( Math.abs( r - rDest) < 1 && Math.abs( g - gDest) < 1 && Math.abs( b - bDest) ) 
        resetColors(); 
       
      (e.currentTarget as DisplayObject).rotation += .01; 
    } 
     
    private function resetColors():void 
    { 
      rDest = Math.random()*255; 
      gDest = Math.random()*255; 
      bDest = Math.random()*255; 
    } 
     
    } 
} 

我们现在围绕着注册点旋转这个包含quad和textfield的sprite：

我们的代码现在看起来开始有些杂乱了，那么我们提取一些代码来组建一个CustomSprite类，用这个类封装颜色的变化、quad和textfield。代码如下：

package 
{ 
    import starling.display.Quad; 
import starling.display.Sprite; 
import starling.events.Event; 
import starling.text.TextField; 
 public class CustomSprite extends Sprite 
 { 
  private var quad:Quad; 
  private var legend:TextField; 
   
  private var quadWidth:uint; 
  private var quadHeight:uint; 
   
  private var r:Number = 0; 
  private var g:Number = 0; 
  private var b:Number = 0; 
   
  private var rDest:Number; 
  private var gDest:Number; 
  private var bDest:Number; 
   
  public function CustomSprite(Number, height:Number, colo
  {   
    // reset the destination color component  
    resetColors(); 
     
    // set the width and height 
    quadWidth = width; 
    quadHeight = height; 
     
    // when added to stage, activate it 
    addEventListener(Event.ADDED_TO_STAGE, activate); 
  } 
   
  private function activate(e:Event):void 
  { 
    // create a quad of the specified width 
    quad = new Quad(quadWidth, quadHeight); 
    // add the legend 
    legend = new TextField(100, 20, "Hello Starling!", "Arial
     
    // add the children 
    addChild(quad); 
    addChild(legend); 
     
    // change the registration point 
    pivotX = width >> 1; 
    pivotY = height >> 1; 
  } 
   
  private function resetColors():void 
  { 
    // pick random color components 
    rDest = Math.random()*255; 
    gDest = Math.random()*255; 
    bDest = Math.random()*255; 
  } 
   
  /** 
   * Updates the internal behavior 
   *  
   */     
    public function update ():void 
    {   
      // easing on the components 
      r -= (r - rDest) * .01; 
      g -= (g - gDest) * .01; 
      b -= (b - bDest) * .01; 
       
      // assemble the color 
      var color:uint = r << 16 | g << 8 | b; 
      quad.color = color; 
 
      // when reaching the color, pick another one 
      if ( Math.abs( r - rDest) < 1 && Math.abs( g - gDest) < 1 && Math.abs( b - bDest) ) 
        resetColors(); 
       
      // rotate it! 
      //rotation += .01; 
    } 
  } 
} 

这样的话，我们的Game类变为这样：

package  
{ 
  import starling.display.Sprite; 
    import starling.events.Event; 
 
    public class Game extends Sprite 
    { 
    private var customSprite:CustomSprite; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      // create the custom sprite 
      customSprite = new CustomSprite(200, 200); 
       
      // positions it by default in the center of the stage 
      // we add half width because of the registration point of the custom sprite (middle) 
      customSprite.x = (stage.stageWidth - customSprite.width >> 1 ) + (customSprite.width >> 1); 
      customSprite.y = (stage.stageHeight - customSprite.height >> 1) + (customSprite.height >> 1); 
       
      // show it 
      addChild(customSprite); 
 
      // need to comment this one ? ;) 
      stage.addEventListener(Event.ENTER_FRAME, onFrame); 
    } 
     
    private function onFrame (e:Event):void 
    {       
      // we update our custom sprite  
      customSprite.update(); 
    } 
    } 
} 

注意，我们使用CustomSprite中的update方法来在主sprite中进行循环操作（即一个组建提取的概念）, 通过使用这样的方法，我们增加一个全局暂停的方法将会变的很简单。

让我们来给我们的小测试增加一些功能，让我们的quad跟随鼠标移动。在下面的代码中，我们新增了一小段代码来实现这个功能：

package  
{ 
    import flash.geom.Point; 
 
    import starling.display.Sprite; 
    import starling.events.Event; 
    import starling.events.Touch; 
    import starling.events.TouchEvent; 
 
    public class Game extends Sprite 
    { 
    private var customSprite:CustomSprite; 
    private var mouseX:Number = 0; 
    private var mouseY:Number = 0; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      // create the custom sprite 
      customSprite = new CustomSprite(200, 200); 
       
      // positions it by default in the center of the stage 
      // we add half width because of the registration point of the custom sprite (middle) 
      customSprite.x = (stage.stageWidth - customSprite.width >> 1 ) + (customSprite.width >> 1); 
      customSprite.y = (stage.stageHeight - customSprite.height >> 1) + (customSprite.height >> 1); 
       
      // show it 
      addChild(customSprite); 
 
      // we listen to the mouse movement on the stage 
      stage.addEventListener(TouchEvent.TOUCH, onTouch); 
      // need to comment this one ? ;) 
      stage.addEventListener(Event.ENTER_FRAME, onFrame); 
    } 
 
    private function onFrame (e:Event):void 
    { 
      // easing on the custom sprite position 
         customSprite.x -= ( customSprite.x - mouseX ) * .1; 
      customSprite.y -= ( customSprite.y - mouseY ) * .1; 
 
      // we update our custom sprite 
      customSprite.update(); 
    } 
 
    private function onTouch (e:TouchEvent):void 
    { 
      // get the mouse location related to the stage 
      var touch:Touch = e.getTouch(stage); 
      var pos:Point = touch.getLocation(stage); 
      // store the mouse coordinates 
      mouseX = pos.x; 
      mouseY = pos.y; 
    } 
    } 
} 

这里需要注意的是，我们没有使用任何鼠标事件，实际上在starling中没有鼠标的概念。下面将会很快提到这里（event模块）。

通过监听 TouchEvent.TOUCH事件，我们可以处理任何鼠标/手指的运动（starling的设计其实目标很明确就是照着平板去的，让你的程序技能在pc有很好的交互，到了平板上依旧ok，不用重复编码）。比如典型的MousEvent.MOUSE_MOVE事件。上例中，我们使用TouchEvent监听来获得鼠标位置，并存贮到变量中，然后在frame监听中使用简单的赋值来移动customSprite。

 

就像前面提到的，Starling不只是可以简化gpu编程，并且简化了对象的释放操作。假设我们想要在点击的quad的时候将它从场景中移除，代码如下：

package  
{ 
    import flash.geom.Point; 
 
    import starling.display.DisplayObject; 
    import starling.display.Sprite; 
    import starling.events.Event; 
    import starling.events.Touch; 
    import starling.events.TouchEvent; 
    import starling.events.TouchPhase; 
 
    public class Game extends Sprite 
    { 
    private var customSprite:CustomSprite; 
    private var mouseX:Number = 0; 
    private var mouseY:Number = 0; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
     
    private function onAdded ( e:Event ):void 
    { 
      // create the custom sprite 
      customSprite = new CustomSprite(200, 200); 
       
      // positions it by default in the center of the stage 
      // we add half width because of the registration point of the custom sprite (middle) 
      customSprite.x = (stage.stageWidth - customSprite.width >> 1 ) + (customSprite.width >> 1); 
      customSprite.y = (stage.stageHeight - customSprite.height >> 1) + (customSprite.height >> 1); 
       
      // show it 
      addChild(customSprite); 
 
      // we listen to the mouse movement on the stage 
      stage.addEventListener(TouchEvent.TOUCH, onTouch); 
      // need to comment this one ? ;) 
      stage.addEventListener(Event.ENTER_FRAME, onFrame); 
        // when the sprite is touched 
        customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 
    } 
 
    private function onFrame (e:Event):void 
    { 
      // easing on the custom sprite position 
        customSprite.x -= ( customSprite.x - mouseX ) * .1; 
      customSprite.y -= ( customSprite.y - mouseY ) * .1; 
 
      // we update our custom sprite 
      customSprite.update(); 
    } 
 
    private function onTouch (e:TouchEvent):void 
    { 
      // get the mouse location related to the stage 
      var touch:Touch = e.getTouch(stage); 
      var pos:Point = touch.getLocation(stage); 
 
      // store the mouse coordinates 
      mouseX = pos.x; 
      mouseY = pos.y; 
    } 
 
        private function onTouchedSprite(e:TouchEvent):void 
        { 
            // get the touch points (can be multiple because of multitouch) 
            var touch:Touch = e.getTouch(stage); 
            var clicked:DisplayObject = e.currentTarget as DisplayObject; 
 
            // detect the click/release phase 
            if ( touch.phase == TouchPhase.ENDED ) 
            { 
                // remove the clicked object 
                removeChild(clicked); 
            } 
        } 
    } 
} 

注意在这里我们移除了子对象但是并没有移除Event.ENTER_FRAME监听，我们可以使用hasEventListener来看看customSprite的监听是否被移除掉了：

private function onTouchedSprite(e:TouchEvent):void 
{ 
  // get the touch points (can be multiple because of multitouch) 
  var touch:Touch = e.getTouch(stage); 
  var clicked:DisplayObject = e.currentTarget as DisplayObject; 
 
    // detect the click/release phase 
    if ( touch.phase == TouchPhase.ENDED ) 
    { 
         // remove the clicked object 
         removeChild(clicked); 
 
     // outputs : true 
     trace ( clicked.hasEventListener(e.type) ); 
    } 
} 

为了能安全的移除子对象，你可以启用removeChild方法中的第二个参数dispose。它可以自动的将被删除的子对象的所有监听移除：

private function onTouchedSprite(e:TouchEvent):void 
{ 
  // get the touch points (can be multiple because of multitouch) 
  var touch:Touch = e.getTouch(stage); 
  var clicked:DisplayObject = e.currentTarget as DisplayObject; 
 
    // detect the click/release phase 
    if ( touch.phase == TouchPhase.ENDED ) 
    { 
    // remove and dispose all the listeners 
    removeChild(clicked, true); 
 
    // outputs : false 
    trace ( clicked.hasEventListener(e.type) ); 
    } 
} 

如果子对象也是一个容器，还包含着其他子对象，那么这些所有的对象也都将被移除掉（是不是非常方便！）。其他用来移除对象的api也可以使用dispose参数，比如：removeChildren或者removeChildAt。这里需要注意的是dispose操作也会清除掉gpu针对该对象的缓冲，但是该对象的texture不会被清除（为了复用嘛，并且starling中的texture和本地对象中的bitmapdata类似）。你可以通过调用Texture/TextureAtlas的dispose方法来释放texture。

 

你也可以通过调用任何DisplayObject对象的dispose方法来移除对象的所有监听：

clicked.dispose()