Egret エンジン開発ガイド: ビジュアル プログラミング_node.js

オブジェクトと表示リスト

「ディスプレイオブジェクト」、正確にはステージ上に表示できるオブジェクトのことです。表示できるオブジェクトには、直接見ることができるグラフィックス、テキスト、ビデオ、写真などのほか、目には見えないが実際に存在する表示オブジェクトコンテナも含まれます。

Egret では、ビジュアル グラフィックスは表示オブジェクトと表示オブジェクト コンテナで構成されます。

上の写真の情景を木を通して表現したい場合、どのように表現すればよいでしょうか?

オブジェクト階層を表示

Egret では、表示オブジェクトは 2 つのカテゴリに分類されます。1 つは、他の表示オブジェクトを含めることができる表示オブジェクト コンテナであり、略して「コンテナ」と呼ばれます。もう 1 つは、それ自体以外の他の表示オブジェクトを含めることができない純粋な表示オブジェクトであり、「非コンテナ オブジェクト」と呼ばれます。

実際の運用では、このような構造をツリー構造として考えることができ、コンテナは枝、コンテナ以外のオブジェクトは葉と考えることができます。

このツリー構造では、最上位が「ステージ」です。プログラムに対応して、<font face="NSimsun">stage</font> オブジェクトが表示されます。ステージは、Egret 表示アーキテクチャの最も基本的な表示コンテナです。各 Egret アプリケーションにはステージ オブジェクトが 1 つだけあります。ステージは、この表示ツリー構造のルート ノードです。

ステージにはメインコンテナもあります。このコンテナは、ドキュメント クラスによって作成されたコンテナです。各 Egret にはドキュメント クラスがあり、これは表示オブジェクト コンテナである必要があります。

このシーンには、背景画像と大きな木で構成されるシーンの背景が含まれています。他の 2 つの要素は人物と芝生のフィールドで構成されます。

リストを表示

上で見たツリー表示オブジェクトの構造図は、実際には Egret の「表示リスト」です。

表示リストを使用してコンテナオブジェクトと非コンテナオブジェクトを管理すると、表示オブジェクトが表示リストにある場合に、そのオブジェクトを画面上で見ることができ、非常に便利です。表示オブジェクトを表示リストから削除すると、オブジェクトは画面から消えます。

Egret は内部で表示リストを維持します。開発者は、独自の表示オブジェクトに対して対応する操作を実行するだけで済みます。

オブジェクトの種類を表示

Egret は、アーキテクチャ設計プロセス中に表示リストの概念に基づいてすべてのオブジェクトを厳密にカプセル化します。 Egret では、すべての表示オブジェクトは <font face="NSimsun">DisplayObject</font> クラスを継承します。 <font face="NSimsun">DisplayObject</font> クラスは、前に説明した「表示オブジェクト」です。 Egret では、すべての「コンテナ」は <font face="NSimsun">DisplayObjectContainer</font> から継承します。

表示リストを一元管理するため、全ての表示オブジェクトはDisplayObjectクラスに統一されています。すべての表示オブジェクトは DisplayObject を継承し、DisplayObject は EventDispatcher を継承します。つまり、すべての表示オブジェクトはイベントを送信できます。

DisplayObjectContainer 表示オブジェクト コンテナの親クラスも DisplayObject です。

実際の運用では概念を再度単純化しました。これは 2 つのルールに要約できます。

DisplayObject を直接継承するクラスは非コンテナです。 DisplayObjectContainer から継承するクラスはコンテナです。