HTML5游戏引擎（四）02-第五章 Egret绘制-显示容器——显示容器继承自DisplayObjectContainer类 & Sprite-常用矢量图的容器 & 显示列表-管理容器和非容器对象

HTML5游戏引擎（四）02-第五章 Egret绘制-显示容器——所有的显示容器全部继承自 DisplayObjectContainer类 & Sprite-常用矢量图的容器 & 显示列表-管理和组织容器和非容器对象

显示容器

1.基本概念

所有的显示容器全部继承自 DisplayObjectContainer 类，该类继承自 DisplayObject 。也就是说，在Egret中，所有的容器都继承自 DisplayObject。

在Egret中,DisplayObjectContainer 封装了一些显示列表中常用的功能，将在后面文档中详细介绍。这些常用操作主要分为四类：

• 添加、删除子对象
• 访问子对象
• 检测子对象
• 设置叠放次序

在Egret中，显示对象被分为两大类：一种是可以包括其他显示对象的显示对象容器，简称为“容器”。另外一种是单纯的显示对象，除自身以外不能包括其他显示对象，简称“非容器对象”。

2.Sprite

在Egret中，Sprite是一个常用矢量图的容器。

Sprite继承自 DisplayObjectContainer，同时添加了Graphics功能。

关于Graphics功能，会在矢量绘图部分进行详细讲解。

3.自定义容器

自定义容器，可编写一个类，继承 DisplayObjectContainer 。如果要同时实现Graphics绘图功能，可继承 Sprite。

下面是一个自定义容器类的示例，该示例定义了一个GridSprite类。这个类默认绘制一个红蓝相间的格子。

class GridSprite extends egret.Sprite
{
    public constructor()
    {
        super();
        this.drawGrid();
    }
    private drawGrid()
    {
        this.graphics.beginFill( 0x0000ff );
        this.graphics.drawRect( 0, 0, 50,50 );
        this.graphics.endFill();
        this.graphics.beginFill( 0x0000ff );
        this.graphics.drawRect( 50, 50, 50, 50);
        this.graphics.endFill();
        this.graphics.beginFill( 0xff0000 );
        this.graphics.drawRect( 50, 0, 50,50 );
        this.graphics.endFill();
        this.graphics.beginFill( 0xff0000 );
        this.graphics.drawRect( 0, 50, 50,50 );
        this.graphics.endFill();
    }
}

在文档类中，实例化 GridSprite 即可。

var _myGrid:GridSprite = new GridSprite();  
this.addChild( _myGrid );

显示列表

显示列表用来管理和组织容器和非容器对象，当某个显示对象处在显示列表中，就可以在画面中看到该对象。当显示对象从显示列表中移除后，该对象从画面中消失。

在Egret内部维护着一个显示列表，开发者无需关心该列表是如何运行，只需对自己的显示对象进行相应的操作。下面以一个例子说明显示列表的工作方式。

表达下图所示的场景

在实际的操作中，可以把显示列表看成树状结构。

在这个树状结构中，处于最上层的是“舞台”。对应到程序中，是 stage 对象。舞台是Egret显示架构中最根本的显示容器。每个Egret应有且只有一个stage对象。舞台是这个显示树结构的根节点。

在舞台中，我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类，这个文档类必须是一个显示对象容器。

在这个场景中，包含了一个场景背景，背景是由背景图和一颗大树组成的。另外两个元素分别是人物和草地。其树状结构如下图：

上面的树状结构图就是Egret的“显示列表”。