Inside PixiJS: Display objects and their hierarchy

How does everything work?

A display-object is anything renderable in PixiJS. It must extend from PIXI.DisplayObject , or preferably PIXI.Container . These stub classes are a bit important to understand how the PixiJS UI is hierarchically organized and rendered.

DisplayObject

PIXI.DisplayObject is the base class of all renderable items. It provides the basic structure for them and integrates with PIXI.Container . I’ve listed important properties and methods below:

• alpha and worldAlpha : alpha specifies the opacity of this object w.r.t to the parent. worldAlpha is the “multiplied” alpha, or the opacity w.r.t. to the fully opaque screen.
• parent : The parent of this display-object. It is null if this is the root node in the UI. You should change this using setParent .
• transform : This is a PIXI.Transform instance that is a wrapper around the transformation matrix for this object. This allows you to translate, scale, rotate, and skew the object on drawing. I’ve…