【Egret Engine】DisplayObjectContainerについて

　今日は DisplayObjectContainer について触れてみたいと思います。

　DisplayObjectContainer すべての display container の元となるクラスです。そして DisplayObjectContainer は DisplayObject の派生クラスです。
Egret において、すべての display container は DisplayObject の派生クラスとも言えます。

　DisplayObjectContainer の機能は大きく以下の４つに区分できます。

・子オブジェクトの追加と削除
・子オブジェクトへのアクセス
・子オブジェクトの検出
・表示順の設定

　Egret でよく使われる DisplayObjectContainer は Sprite です。
　Sprite は DisplayObjectContainer に描画機能を追加した派生クラスです。

class sampleSprite extends egret.Sprite {
   public constructor() {
       super()
       this.graphics.beginFill(0x0000ff, 1)
       this.graphics.drawRect(0, 0, 200, 80)
       this.graphics.endFill()
   }
}
class Main extends egret.DisplayObjectContainer {
   public constructor() {
       super();
       // グランド矩形描画
       let spr:sampleSprite = new sampleSprite()
       spr.x = 50
       spr.y = 50
       this.addChild(spr)
       // 矩形描画
       let shp:egret.Shape = new egret.Shape()
       shp.graphics.beginFill(0x111111, 1)
       shp.graphics.drawRect(0, 0, 200, 80)
       shp.graphics.endFill()
       shp.scaleX = 0.5
       shp.scaleY = 0.5
       spr.addChild(shp)
   }
}

　上のコードでは Shape の座標を指定していませんが、 Sprite の子オブジェクトであるため描画開始座標が画面の原点ではありません。

　矩形描画の前に、以下のコードを足してみて下さい。

       let anc:egret.Shape = new egret.Shape()
       anc.graphics.beginFill(0xff0000, 1)
       anc.graphics.drawCircle(0, 0, 5)
       anc.graphics.endFill()
       spr.addChild(anc)

　右下の欠けた円（というか弧）が描画されましたね。
　子オブジェクトは、最後に追加したオブジェクトが最も手前に表示されます。 spr.addChild(anc) の位置を spr.addChild(shp) のあとに持ってくれば、円がきれいに描かれます。

　Egret は Stage という DisplayObjectContainer の派生クラスをトップに持ち、その子として様々な表示オブジェクトを追加していきます。
当たり前に使っている Main クラスも DisplayObjectContainer の派生クラスですね。これもまた内部で Stage に追加されているのでしょう。