Egret Engine Development Guide: Visual Programming_node.js

Display objects and display lists

"Display object", the precise meaning is an object that can be displayed on the stage. Objects that can be displayed include graphics, text, videos, pictures, etc. that can be directly seen, as well as display object containers that cannot be seen but actually exist.

In Egret, visual graphics are composed of display objects and display object containers.

If we want to express the scene in the picture above, how should we describe it through a tree?

Show object hierarchy

In Egret, display objects are divided into two categories: one is a display object container that can include other display objects, referred to as "container" for short. The other is a pure display object that cannot include other display objects except itself, referred to as "non-container object".

In actual operation, we can think of such a structure as a tree structure. Containers can be understood as branches, and non-container objects can be understood as leaves.

In this tree structure, the top level is the "stage". Corresponding to the program, we can see a <font face="NSimsun">stage</font> object. The stage is the most fundamental display container in the Egret display architecture. Each Egret application has one and only one stage object. The stage is the root node of this display tree structure.

In the stage, we also have a main container. This container is the container created by the document class. Each Egret will have a document class, which must be a display object container.

In this scene, we include a scene background, which is composed of a background image and a big tree. The other two elements are composed of figures and a grassy field.

Show list

The tree display object structure diagram we see above is actually Egret’s “display list”.

It is very convenient to use the display list to manage container and non-container objects. When a display object is in the display list, we can see the object in the screen. When we remove the display object from the display list, the object disappears from the screen.

Egret maintains a display list internally. Developers do not need to care about how the list operates. You only need to perform corresponding operations on your own display objects.

Show object type

Egret strictly encapsulates all objects around the concept of display list during the architectural design process. In Egret, all display objects inherit from the <font face="NSimsun">DisplayObject</font> class. <font face="NSimsun">DisplayObject</font> The class is the "display object" we described earlier. In Egret, all "containers" inherit from <font face="NSimsun">DisplayObjectContainer</font>.

In order to uniformly manage the display list, all display objects are unified into the DisplayObject class. All display objects inherit from DisplayObject, and DisplayObject inherits from EventDispatcher. That is to say, all display objects can send events.

DisplayObjectContainer The parent class of the display object container is also DisplayObject.

We have simplified the concept again in actual operation, which can be summarized into two rules:

Classes that directly inherit from DisplayObject are non-containers. Classes that inherit from DisplayObjectContainer are containers.