Egret快速入门

根据Egret的官方文档整理的最简单教程。

最基本的显示

    private onAddToStage(event: egret.Event) {

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin

            context.onUpdate = () => {
                console.log('hello,world')
            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        /// 加载bird数据
        var imgLoader:egret.ImageLoader = new egret.ImageLoader;
        // 调用imgLoadHandler方法 添加点击事件 
        imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this );
        imgLoader.load( "resource/assets/plane.png" );

    }

    private _txInfo:egret.TextField;
    private _bgInfo:egret.Shape;

    private imgLoadHandler(evt:egret.Event):void{
        var bmd:egret.BitmapData = evt.currentTarget.data;
        /*** 本示例关键代码段开始 ***/
        /// 将已加载完成的图像显示出来
        var bird:egret.Bitmap = new egret.Bitmap( bmd );
        bird.x = 100;
        bird.y = 100;
        this.addChild( bird );
        /*** 本示例关键代码段结束 ***/

        /// 为定位设置基准点(即锚点)
        bird.anchorOffsetX = bmd.width / 2;
        bird.anchorOffsetY = bmd.height / 2;
        bird.x = this.stage.stageWidth * .5;
        bird.y = this.stage.stageHeight * .5;

        /// 设置提示信息
        this._txInfo = new egret.TextField;
        this.addChild( this._txInfo );

        this._txInfo.size = 28;
        this._txInfo.x = 50;
        this._txInfo.y = 50;
        this._txInfo.textAlign = egret.HorizontalAlign.LEFT;
        this._txInfo.textColor = 0x000000;
        this._txInfo.type = egret.TextFieldType.DYNAMIC;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;        
        this._txInfo.text ="轻触屏幕调整显示对象位置";

        this._bgInfo = new egret.Shape;
        this.addChildAt( this._bgInfo, this.numChildren - 1 );

        this._bgInfo.x = this._txInfo.x;
        this._bgInfo.y = this._txInfo.y;
        this._bgInfo.graphics.clear();
        this._bgInfo.graphics.beginFill( 0xffffff, .5 );
        this._bgInfo.graphics.drawRect( 0, 0, this._txInfo.width, this._txInfo.height );
        this._bgInfo.graphics.endFill();

        /// 添加点击事件 点击屏幕 移动图像位置
        this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, ( evt:egret.TouchEvent )=>{
            bird.x = evt.localX ;
            bird.y = evt.localY ;
        }, this );
    }

锚点及旋转缩放

class Main extends egret.DisplayObjectContainer {

    /// 旋转及缩放步长设定
    private static STEP_ROT:number = 3;
    private static STEP_SCALE:number = .03;

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {

        var imgLoader:egret.ImageLoader = new egret.ImageLoader;
        imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this );
        imgLoader.load( "resource/assets/bule_plane.png" );
    }

    private _bird:egret.Bitmap;
    private _txInfo:egret.TextField;

    private imgLoadHandler( evt:egret.Event ):void{
        /// 展示用显示对象： 白鹭小鸟
        this._bird = new egret.Bitmap( evt.currentTarget.data );
        this.addChild( this._bird );

        this._bird.anchorOffsetX = this._bird.width/2;
        this._bird.anchorOffsetY = this._bird.height/2;
        this._bird.x = this.stage.stageWidth / 2;
        this._bird.y = this.stage.stageHeight * 0.618;

        /// 提示信息
        this._txInfo = new egret.TextField;
        this.addChild( this._txInfo );

        this._txInfo.size = 28;  /* private _txInfo:egret.TextField; */
        this._txInfo.x = 50;
        this._txInfo.y = 50;
        this._txInfo.textAlign = egret.HorizontalAlign.LEFT;
        this._txInfo.textColor = 0x000000;
        this._txInfo.type = egret.TextFieldType.DYNAMIC;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;

        this.launchAnimations();
    }

    /// 用于记录当前的模式，模式切换通过触摸舞台触发
    private _iAnimMode:number;
    private _nScaleBase:number;

    private launchAnimations():void {
        this._iAnimMode = AnimModes.ANIM_ROT;
        this.stage.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{
            this._iAnimMode = ( this._iAnimMode + 1 ) % 3;
        }, this );

        this._nScaleBase = 0;

        /// 根据当前模式调整旋转度数或缩放正弦基数形成相应动画
        this.addEventListener( egret.Event.ENTER_FRAME, ( evt:egret.Event )=>{

            /*** 本示例关键代码段开始 ***/
            switch ( this._iAnimMode ){
                case AnimModes.ANIM_ROT:        /// 仅旋转
                    this._bird.rotation += Main.STEP_ROT;
                    break;
                case AnimModes.ANIM_SCALE:        /// 仅缩放，缩放范围 0.5~1
                    this._bird.scaleX = this._bird.scaleY = 0.5 + 0.5* Math.abs( Math.sin( this._nScaleBase += Main.STEP_SCALE ) );
                    break;
            }
            /*** 本示例关键代码段结束 ***/

            this._txInfo.text = 
                  "旋转角度:" + this._bird.rotation 
                +"\n缩放比例:" + this._bird.scaleX.toFixed(2)
                +"\n\n轻触进入" +(["缩放","静止","旋转"][this._iAnimMode])+ "模式";

            return false;  /// 友情提示： startTick 中回调返回值表示执行结束是否立即重绘
        }, this );        
    }    
}

/// 控制动画的类型
class AnimModes{
    public static ANIM_ROT:number = 0;
    public static ANIM_SCALE:number = 1;
}

碰撞检测

constructor –> onAddToStage –> imgLoadHandler –> launchCollisionTest –> touchHandler –> checkCollision(进行检测，触发文字更新。)

/**
 * @copyright www.egret.com
 * @author city
 * @desc 碰撞检测分为两种模式，一种是对显示对象所在的矩形包围盒检测，另一种是其透
 *      明度不为零的区域检测。
 *      为达到一个好的交互，本示例代码较多，但是核心检测碰撞只有一个API，就是
 *      代码中的`hitTestPoint`。
 */


class Main extends egret.DisplayObjectContainer {

    /// 旋转及缩放步长设定
    private static STEP_ROT:number = 3;
    private static STEP_SCALE:number = .03;

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {

        var imgLoader:egret.ImageLoader = new egret.ImageLoader;
        imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this );
        imgLoader.load( "resource/assets/bule_plane.png" );
    }

    private _iTouchCollideStatus:number;
    private _bShapeTest:boolean;

    private launchCollisionTest():void {

        this._iTouchCollideStatus = TouchCollideStatus.NO_TOUCHED;
        this._bShapeTest = false;
        this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this );

        this.updateInfo( TouchCollideStatus.NO_TOUCHED );
    }

    private checkCollision( stageX:number, stageY:number ):void {
        /*** 本示例关键代码段开始 ***/
        var bResult:boolean = this._bird.hitTestPoint( stageX, stageY, this._bShapeTest );
        /*** 本示例关键代码段结束 ***/

            /// 小圆点同步手指位置
        this._dot.x = stageX;
        this._dot.y = stageY;

        /// 文字信息更新
        this.updateInfo( bResult ? TouchCollideStatus.COLLIDED : TouchCollideStatus.TOUCHED_NO_COLLIDED );
    }

    private touchHandler( evt:egret.TouchEvent ){
        switch ( evt.type ){
            case egret.TouchEvent.TOUCH_MOVE:
                this.checkCollision( evt.stageX, evt.stageY );
                break;
            case egret.TouchEvent.TOUCH_BEGIN:
                if( !this._txInfo.hitTestPoint( evt.stageX, evt.stageY ) ){ /// if代码确保触摸开始位置不在文字区域
                    this.stage.addEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this );
                    this.stage.once( egret.TouchEvent.TOUCH_END, this.touchHandler, this );
                    this.addChild( this._dot );
                    this.checkCollision( evt.stageX, evt.stageY );
                }
                break;
            case egret. TouchEvent.TOUCH_END:
                this.stage.removeEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this );
                this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this );
                if( this._dot.parent ){
                    this._dot.parent.removeChild( this._dot );
                }
                this.updateInfo( TouchCollideStatus.NO_TOUCHED );
                break;
        }
    }

    private updateInfo( iStatus:number ){
        this._txInfo.text =
            "碰撞检测结果：" + ( ["放上手指！","想摸我？", "别摸我！！！"][iStatus] )
            +"\n\n碰撞检测模式：" +( this._bShapeTest ? "非透明像素区域" : "矩形包围盒" )
            +"\n（轻触文字区切换）";
    }    

    private _bird:egret.Bitmap;
    private _dot:egret.Shape;
    private _txInfo:egret.TextField;


    private imgLoadHandler( evt:egret.Event ):void {
        /// 展示用显示对象： 白鹭小鸟
        this._bird = new egret.Bitmap( evt.currentTarget.data );
        this.addChild( this._bird );

        this._bird.anchorOffsetX = this._bird.width / 2;
        this._bird.anchorOffsetY = this._bird.height / 2;
        this._bird.x = this.stage.stageWidth * 0.5;
        this._bird.y = this.stage.stageHeight * 0.618;

        /// 小圆点，用以提示用户按下位置
        this._dot = new egret.Shape;
        this._dot.graphics.beginFill( 0x00ff00 );
        this._dot.graphics.drawCircle( 0, 0, 5 );
        this._dot.graphics.endFill();

        /// 提示信息
        this._txInfo = new egret.TextField;
        this.addChild( this._txInfo );

        this._txInfo.size = 28;
        this._txInfo.x = 50;
        this._txInfo.y = 50;
        this._txInfo.textAlign = egret.HorizontalAlign.LEFT;
        this._txInfo.textColor = 0x000000;
        this._txInfo.type = egret.TextFieldType.DYNAMIC;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;
        this._txInfo.touchEnabled = true;
        this._txInfo.addEventListener( egret.TouchEvent.TOUCH_TAP, ( evt:egret.TouchEvent )=>{
            evt.stopImmediatePropagation();
            this._bShapeTest = ! this._bShapeTest;
            this.updateInfo( TouchCollideStatus.NO_TOUCHED );
        }, this );

        this.launchCollisionTest();
    }

}

/// 点击控制动画的辅助类
class TouchCollideStatus{
    public static NO_TOUCHED:number = 0;
    public static TOUCHED_NO_COLLIDED:number = 1;
    public static COLLIDED:number = 2;
}

遮罩的用法

/**
 * @copyright www.egret.com
 * @author city
 * @desc 任何显示对象都可以作为其他显示对象的遮罩。
 *      显示对象作为遮罩后，就好像在屏幕的垂直方向有一个直射光源对齐投射产生影子
 *      。被遮罩的显示对象只能显示遮罩被投射后的影子区域。
 */


class Main extends egret.DisplayObjectContainer {


    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {        
        var imgLoader:egret.ImageLoader = new egret.ImageLoader;
        /// 在这里用imgLoadHandler添加一个图片
        imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this );
        imgLoader.load( "resource/assets/bule_plane.png" );
    }

    /// 开启一个遮层
    private launchMask():void {
        this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this );
    }

    private updateBird( stageX:number, stageY:number ):void {
        /// 小鸟同步手指位置
        this._bird.x = stageX;
        this._bird.y = stageY;

    }    

    /// 监听遮层的代码
    private touchHandler( evt:egret.TouchEvent ){
        switch ( evt.type ){
            case egret.TouchEvent.TOUCH_MOVE:
                this.updateBird( evt.stageX, evt.stageY );
                break;
            case egret.TouchEvent.TOUCH_BEGIN:
                this.stage.addEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this );
                this.stage.once( egret.TouchEvent.TOUCH_END, this.touchHandler, this );

                /*** 本示例关键代码段开始 ***/
                this._shpBeMask.mask = this._bird;
                /*** 本示例关键代码段结束 ***/

                this.updateBird( evt.stageX, evt.stageY );
                break;
            case egret. TouchEvent.TOUCH_END:
                this.stage.removeEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this );
                this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this );

                this._shpBeMask.mask = null;
                this._bird.$maskedObject = null;
                break;
        }
    }    

    private _shpBeMask:egret.Shape;  // 声明一个egret的shap对象 用作遮层
    private _bird:egret.Bitmap;
    private _txInfo:egret.TextField;

    private imgLoadHandler( evt:egret.Event ):void {

        /// 用以被遮罩的形状
        this._shpBeMask = new egret.Shape;
        this._shpBeMask.graphics.lineStyle( 0x000000 )
        this._shpBeMask.graphics.beginFill( this.getRdmClr() );
        this._shpBeMask.graphics.drawEllipse( 0, 0, 200, 300 );
        this._shpBeMask.graphics.endFill();
        this._shpBeMask.x = ( this.stage.stageWidth - 200 ) / 2;
        this._shpBeMask.y = ( this.stage.stageHeight - 300 ) / 2;
        this.addChild( this._shpBeMask );

        /// 展示用显示对象： 白鹭小鸟
        this._bird = new egret.Bitmap( evt.currentTarget.data );
        var wHalfBird:number = this._bird.width / 2;
        var hHalfBird:number = this._bird.height / 2;
        this._bird.anchorOffsetX = wHalfBird;
        this._bird.anchorOffsetY = hHalfBird;
        /// 给一个随机的初始位置
        this._bird.x = wHalfBird + ( this.stage.stageWidth - wHalfBird * 2 ) * Math.random() ;
        this._bird.y = hHalfBird + ( this.stage.stageHeight - hHalfBird * 2 ) * Math.random() ;
        this.addChild( this._bird );

        /// 提示信息
        this._txInfo = new egret.TextField;
        this.addChildAt( this._txInfo, 0 );

        this._txInfo.size = 28;
        this._txInfo.x = 50;
        this._txInfo.y = 50;
        this._txInfo.width = this.stage.stageWidth - 100;
        this._txInfo.textAlign = egret.HorizontalAlign.LEFT;
        this._txInfo.textColor = 0x000000;
        this._txInfo.type = egret.TextFieldType.DYNAMIC;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;
        this._txInfo.touchEnabled = true;
        this._txInfo.text ="接触屏幕后白鹭小鸟将变为椭圆形状的遮罩区域，可以移动手指（白鹭小鸟）并观察椭圆在遮罩下的显示变化";

        this.launchMask();
    }

    private getRdmClr():number{
        return ( Math.floor( Math.random() * 0xff ) << 16 )
            + ( Math.floor( Math.random() * 0xff ) << 8 )
            + Math.floor( Math.random() * 0xff ) ;
    }

}

删除与添加对象

this.removeChild(upLeftBird);

this.addChild(upLeftBird);

/**
 * @copyright www.egret.com
 * @author dily
 * @desc 向一个容器中添加或者删除一个显示对象。
 *      整个示例分四个区域，如果当前区域有对象点击则移除，如果没有显示对象则添加
 *      一个显示对象。
 */

class Main extends egret.DisplayObjectContainer {

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {
        var imgLoader:egret.ImageLoader = new egret.ImageLoader;
        imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this );
        imgLoader.load( "resource/assets/bule_plane.png" );
    }

    private _txInfo:egret.TextField;
    private imgLoadHandler( evt:egret.Event ):void{
        // 存储加载完毕的数据
        var data = evt.currentTarget.data;

        /*** 以下代码使用shape和graphics区分四个区域 ***/
        var upLeft = new egret.Shape();
        upLeft.graphics.beginFill(0xf7acbc);
        upLeft.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2);
        upLeft.graphics.endFill();
        upLeft.touchEnabled = true;
        upLeft.x = 0;
        upLeft.y = 0;
        this.addChild(upLeft);

        var upRight = new egret.Shape();
        upRight.graphics.beginFill(0xdeab8a);
        upRight.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2);
        upRight.graphics.endFill();
        upRight.touchEnabled = true;
        upRight.x = this.stage.stageWidth/2;
        upRight.y = 0;       
        this.addChild(upRight);

        var downLeft = new egret.Shape();
        downLeft.graphics.beginFill(0xef5b9c);
        downLeft.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2);
        downLeft.graphics.endFill();
        downLeft.touchEnabled = true;
        downLeft.x = 0;
        downLeft.y = this.stage.stageHeight/2;         
        this.addChild(downLeft);

        var downRight = new egret.Shape();
        downRight.graphics.beginFill(0xfedcbd);
        downRight.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2);
        downRight.graphics.endFill();
        downRight.touchEnabled = true;
        downRight.x = this.stage.stageWidth/2;
        downRight.y = this.stage.stageHeight/2;   
        this.addChild(downRight);

        /*** 先初始化四个白鹭小鸟 ***/
        var upLeftBird:egret.Bitmap = new egret.Bitmap( data );
        upLeftBird.x = upLeft.x + upLeft.width/2 - upLeftBird.width/2;
        upLeftBird.y = upLeft.y + upLeft.height/2 - upLeftBird.height/2;

        var upRightBird:egret.Bitmap = new egret.Bitmap( data );
        upRightBird.x = upRight.x + upRight.width/2 - upRightBird.width/2;
        upRightBird.y = upRight.y + upRight.height/2 - upRightBird.height/2;

        var downLeftBird:egret.Bitmap = new egret.Bitmap( data );
        downLeftBird.x = downLeft.x + downLeft.width/2 - downLeftBird.width/2;
        downLeftBird.y = downLeft.y + downLeft.height/2 - downLeftBird.height/2;

        var downRightBird:egret.Bitmap = new egret.Bitmap( data );
        downRightBird.x = downRight.x + downRight.width/2 - downRightBird.width/2;
        downRightBird.y = downRight.y + downRight.height/2 - downRightBird.height/2;

        /*** 以下代码四个区域添加监听事件 ***/
        upLeft.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{
            /*** 本示例关键代码段开始 ***/
            if(this.contains(upLeftBird)){
                this.removeChild(upLeftBird);
            }else{
                this.addChild(upLeftBird);
            }
            /*** 本示例关键代码段结束 ***/
        }, this );      

        upRight.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{
            /*** 本示例关键代码段开始 ***/
            if(this.contains(upRightBird)){
                this.removeChild(upRightBird);
            }else{
                this.addChild(upRightBird);
            }
            /*** 本示例关键代码段结束 ***/
        }, this );      

        downLeft.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{
            /*** 本示例关键代码段开始 ***/
            if(this.contains(downLeftBird)){
                this.removeChild(downLeftBird);
            }else{
                this.addChild(downLeftBird);
            }
            /*** 本示例关键代码段结束 ***/
        }, this );      

        downRight.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{
            /*** 本示例关键代码段开始 ***/
            if(this.contains(downRightBird)){
                this.removeChild(downRightBird);
            }else{
                this.addChild(downRightBird);
            }
            /*** 本示例关键代码段结束 ***/
        }, this );       

        /// 提示信息
        this._txInfo = new egret.TextField;
        this._txInfo.size = 28;
        this._txInfo.textAlign = egret.HorizontalAlign.CENTER;
        this._txInfo.textColor = 0x843900;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;
        this._txInfo.text = "点击不同色块";
        this._txInfo.x = this.stage.stageWidth/2 - this._txInfo.width/2;
        this._txInfo.y = 10;
        this.addChild( this._txInfo );
    }

}

深度管理

this.setChildIndex(rightBird, this.numChildren - 1);

/**
 * @copyright www.egret.com
 * @author dily
 * @desc 显示对象的深度管理。
 *      点击不同白鹭小鸟提升到最上层。
 */

class Main extends egret.DisplayObjectContainer {

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {
        var imgLoader1:egret.ImageLoader = new egret.ImageLoader;
        imgLoader1.once( egret.Event.COMPLETE, this.imgLoadHandler1, this );
        imgLoader1.load( "resource/assets/bule_plane.png" );


    }

    private _txInfo:egret.TextField;
    private imgLoadHandler1( evt:egret.Event ):void{
        // 存储加载完毕的数据
        var data = evt.currentTarget.data;

        /*** 先初始化四个白鹭小鸟 ***/
        var upBird:egret.Bitmap = new egret.Bitmap( data );
        upBird.x = this.stage.stageWidth / 2 - upBird.width / 2;
        upBird.y = this.stage.stageHeight/2 - upBird.height/2 - 100;
        upBird.touchEnabled = true;
        upBird.pixelHitTest = true;
        this.addChild(upBird);

        var leftBird:egret.Bitmap = new egret.Bitmap( data );
        leftBird.x = -50;
        leftBird.y = this.stage.stageHeight / 2 - leftBird.height / 2;
        leftBird.touchEnabled = true;
        leftBird.pixelHitTest = true;
        this.addChild(leftBird);

        var rightBird:egret.Bitmap = new egret.Bitmap( data );
        rightBird.x = this.stage.stageWidth - rightBird.width;
        rightBird.y = this.stage.stageHeight / 2 - rightBird.height / 2;
        rightBird.touchEnabled = true;
        rightBird.pixelHitTest = true;

        this.addChild(rightBird);
        /*** 以下代码三个按钮添加监听事件 ***/
        upBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            /*** 本示例关键代码段开始 ***/
            this.setChildIndex(upBird, this.numChildren - 1);
            /*** 本示例关键代码段结束 ***/
        }, this );      

        leftBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            /*** 本示例关键代码段开始 ***/
            this.setChildIndex(leftBird, this.numChildren - 1);
            /*** 本示例关键代码段结束 ***/
        }, this );      

        rightBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            /*** 本示例关键代码段开始 ***/
            this.setChildIndex(rightBird, this.numChildren - 1);
            /*** 本示例关键代码段结束 ***/
        }, this); 

        /// 提示信息
        this._txInfo = new egret.TextField;
        this._txInfo.size = 28;
        this._txInfo.textAlign = egret.HorizontalAlign.CENTER;
        this._txInfo.textColor = 0x843900;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;
        this._txInfo.text = "点击不同白鹭小鸟提升到最上层";
        this._txInfo.x = this.stage.stageWidth/2 - this._txInfo.width/2;
        this._txInfo.y = 10;
        this.addChild( this._txInfo );
    }
}

容器的使用

/**
 * @copyright www.egret.com
 * @author dily
 * @desc 区分两个不同的容器
 *      点击不同颜色按钮，将白鹭小鸟放到不同的容器中，拖动容器小鸟随着容器移动
 */

class Main extends egret.DisplayObjectContainer {

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {
        var imgLoader1:egret.ImageLoader = new egret.ImageLoader;
        imgLoader1.once( egret.Event.COMPLETE, this.imgLoadHandler , this );
        imgLoader1.load( "resource/assets/bule_plane.png" );
    }

    private _txInfo:egret.TextField;
    private leftTF:egret.TextField;
    private rightTF:egret.TextField;

    private imgLoadHandler( evt:egret.Event ):void{
        // 存储加载完毕的数据
        var data = evt.currentTarget.data;

        /*** 先初始化1个白鹭小鸟 ***/
        var egretBird: egret.Bitmap = new egret.Bitmap(data);
        egretBird.x = this.stage.stageWidth / 2 - egretBird.width / 2;
        egretBird.y = this.stage.stageHeight / 2 + 50;;
        this.addChild(egretBird);
        egretBird.touchEnabled = false;

        /*** 按钮生成代码 ***/
        /// 生成左边的按钮 添加到舞台中
        this.leftTF = new egret.TextField;
        this.leftTF.size = 28;
        this.leftTF.textAlign = egret.HorizontalAlign.CENTER;
        this.leftTF.textColor = 0xffffff;
        this.leftTF.background = true;
        this.leftTF.backgroundColor = 0xd71345;
        this.leftTF.text = "红色容器";
        this.leftTF.x = this.stage.stageWidth/4 - this.leftTF.width/2;
        this.leftTF.y = 120;
        this.leftTF.touchEnabled = true;
        this.addChild(this.leftTF);
        /// 生成右边的按钮 添加到舞台中
        this.rightTF = new egret.TextField;
        this.rightTF.size = 28;
        this.rightTF.textAlign = egret.HorizontalAlign.CENTER;
        this.rightTF.textColor = 0xffffff;
        this.rightTF.background = true;
        this.rightTF.backgroundColor = 0x102b6a;
        this.rightTF.text = "蓝色容器";
        this.rightTF.x = this.stage.stageWidth/2 + this.stage.stageWidth/4 - this.rightTF.width/2;
        this.rightTF.y = 120;
        this.rightTF.touchEnabled = true;
        this.addChild(this.rightTF);

        /*** 以下代码使用实现两个容器 ***/
        /// leftCon是左边的容器
        var leftCon = new egret.DisplayObjectContainer();
        this.addChild(leftCon);

        /// 在左边的容器leftCon中放一个正方形leftCage
        var leftCage = new egret.Shape();
        leftCage.graphics.lineStyle(10, 0xd71345, 1, true)
        leftCage.graphics.lineTo(0,0);
        leftCage.graphics.lineTo(250,0);
        leftCage.graphics.lineTo(250,250);
        leftCage.graphics.lineTo(0,250);
        leftCage.graphics.lineTo(0,0);
        leftCage.graphics.endFill();
        leftCon.addChild(leftCage);

        leftCon.x = this.stage.stageWidth / 4 - leftCon.width / 2;
        leftCon.y = 200;

        var rightCon = new egret.DisplayObjectContainer();
        this.addChild(rightCon);

        var rightCage = new egret.Shape();
        rightCage.graphics.lineStyle(10, 0x102b6a, 1, true)
        rightCage.graphics.lineTo(0, 0);
        rightCage.graphics.lineTo(250, 0);
        rightCage.graphics.lineTo(250, 250);
        rightCage.graphics.lineTo(0, 250);
        rightCage.graphics.lineTo(0, 0);
        rightCage.graphics.endFill();
        rightCon.addChild(rightCage);

        rightCon.x = this.stage.stageWidth / 2 + this.stage.stageWidth / 4 - rightCon.width / 2;
        rightCon.y = 200;

        /// 提示信息
        this._txInfo = new egret.TextField;
        this._txInfo.size = 28;
        this._txInfo.width = 550;
        this._txInfo.textAlign = egret.HorizontalAlign.CENTER;
        this._txInfo.textColor = 0x000000;
        this._txInfo.lineSpacing = 6;
        this._txInfo.multiline = true;
        this._txInfo.text = "点击不同颜色按钮，将白鹭小鸟放到不同的容器中，拖动容器小鸟随着容器移动";
        this._txInfo.x = this.stage.stageWidth/2 - this._txInfo.width/2;
        this._txInfo.y = 10;
        this.addChild( this._txInfo );

        console.log("**********************************");
        console.log(this.getChildIndex(egretBird));
        console.log(leftCon.getChildIndex(egretBird));
        console.log(rightCon.getChildIndex(egretBird));
        console.log("**********************************");

        /*** 以下代码两个按钮添加监听事件 ***/
        /**
         * 为左边的按钮添加点击事件
         */
        this.leftTF.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            /*** 本示例关键代码段开始 ***/
            console.log("点击左边按钮：100000");
            console.log(this.getChildIndex(egretBird));
            console.log(this);
            /// this是指舞台，this.getChildIndex(egretBird)!=-1说明egretBird在舞台里面
            /// 则先把舞台的egretBird去掉 再给leftCon加上一个egretBird
            if (this.getChildIndex(egretBird) != -1) {
                this.removeChild(egretBird);
                leftCon.addChild(egretBird);
                egretBird.x = leftCage.width/2 - egretBird.width/2;
                egretBird.y = leftCage.height / 2 - egretBird.height / 2;
                console.log("点击左边按钮：在舞台里面");
            /// 否则检查egretBird是否在右边容器rightCon里面的时候 先把rightCon台的egretBird去掉 再给leftCon加上一个egretBird
            } else if (rightCon.getChildIndex(egretBird) != -1) {
                rightCon.removeChild(egretBird);
                leftCon.addChild(egretBird);
                egretBird.x = leftCage.width / 2 - egretBird.width / 2;
                egretBird.y = leftCage.height / 2 - egretBird.height / 2;
                console.log("点击左边按钮：在右边按钮里面");
            }else{
                console.log("点击左边按钮：已经在左边容器里面了");
            }
            /// 设置允许左边的框可以点击允许拖动 右边的框不能点击不能拖动
            leftCon.touchEnabled = true;
            rightCon.touchEnabled = false;
            /*** 本示例关键代码段结束 ***/
        }, this);

        this.rightTF.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            /*** 本示例关键代码段开始 ***/
            console.log("点击右边按钮：100000");
            console.log(this.getChildIndex(egretBird));
            console.log(this);
            if (this.getChildIndex(egretBird) != -1) {
                this.removeChild(egretBird);
                rightCon.addChild(egretBird);
                egretBird.x = rightCage.width / 2 - egretBird.width / 2;
                egretBird.y = rightCage.height / 2 - egretBird.height / 2;
                console.log("点右边按钮：在舞台里面");
            } else if (leftCon.getChildIndex(egretBird) != -1) {
                leftCon.removeChild(egretBird);
                rightCon.addChild(egretBird);
                egretBird.x = rightCage.width / 2 - egretBird.width / 2;
                egretBird.y = rightCage.height / 2 - egretBird.height / 2;
                console.log("点击右边按钮：在左边按钮里面");
            }else{
                console.log("点击左边按钮：已经在右边容器里面了");
            }
            leftCon.touchEnabled = false;
            rightCon.touchEnabled = true;
            /*** 本示例关键代码段结束 ***/
        }, this); 

        /*** 对于两个容器添加拖动代码 ***/
        /// 先确保点在框里面，然后修改对应容器的位置即可 因为容器里面的图片也会移动
        var leftDrag: boolean = false;
        var rightDrag: boolean = false;
        leftCon.addEventListener(egret.TouchEvent.TOUCH_BEGIN, () => {
            leftDrag = true;
        }, this); 
        leftCon.addEventListener(egret.TouchEvent.TOUCH_END, () => {
            leftDrag = false;
        }, this); 
        this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, (e) => {
            if(leftDrag){
                leftCon.x = e.stageX - leftCage.width/2;
                leftCon.y = e.stageY - leftCage.height/2;
            }
        }, this); 

        rightCon.addEventListener(egret.TouchEvent.TOUCH_BEGIN, () => {
            rightDrag = true;
        }, this); 
        rightCon.addEventListener(egret.TouchEvent.TOUCH_END, () => {
            rightDrag = false;
        }, this); 
        this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, (e) => {
            if(rightDrag){
                rightCon.x = e.stageX - rightCage.width/2;
                rightCon.y = e.stageY - rightCage.height/2;
            }
        }, this); 
    }
}