Egret Engine Development Guide-Visual Programming _ node. js

This section details the architectural design and some concepts of Visual Programming display objects in Egret, hoping to help you. Show objects and display lists

"Display object" means objects that can be displayed on the stage. Objects that can be displayed include images, text, videos, and images that can be directly seen, as well as containers that cannot be seen but actually exist.

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

If we want to express the scenario, how should we describe it through a tree?

Show object level structure

In Egret, the display object is divided into two categories: one is the display object container that can include other display objects, referred to as "container ". The other is a simple Display object, which cannot include other display objects ("non-container objects" for short ".

In practice, we can regard such a structure as a tree structure. containers can be understood as branches, while non-container objects can be considered as leaves.

In this tree structure, the "stage" is at the top ". Corresponding to the program, we can seestageObject. Stage is the most fundamental display container in the Egret display architecture. Each Egret application has only one stage object. The stage is the root node that displays the tree structure.

On the stage, we also have a master container. This container is the container created by the document class. Each Egret has a document class, which must be a display object container.

In this scenario, we include a background, which consists of a background image and a big tree. The other two elements are composed of characters and a lawn.

Display list

The tree structure shown above is actually the "display list" of Egret ".

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

A display list is maintained in Egret. Developers do not need to worry about how the list runs. You only need to perform corresponding operations on your display objects.

Show Object Types

In the architectural design process, Egret strictly encapsulates all objects based on the concept of display list. In Egret, all display objects are inherited fromDisplayObjectThis class.DisplayObjectClass is the "Display object" described above ". In Egret, all containers are inherited fromDisplayObjectContainer.

To uniformly manage the display list, all display objects are unified in the DisplayObject class. All Display objects are inherited from DisplayObject, while DisplayObject is inherited from EventDispatcher. That is to say, all display objects can send events.

DisplayObjectContainer: the parent class of the object container is DisplayObject.

In practice, we can simplify the concept again, which can be summarized into two rules:

Classes directly inherited from DisplayObject belong to non-containers. Classes inherited from DisplayObjectContainer belong to containers.