The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
Current transform of the object based on local factors: position, scale, other stuff.
Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it. In PixiJS a regular mask must be a
PIXI.Graphics or a PIXI.Sprite object. This allows for much faster masking in canvas as it
utilities shape clipping. To remove a mask, set this property to null.
For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.
Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it. In PixiJS a regular mask must be a
PIXI.Graphics or a PIXI.Sprite object. This allows for much faster masking in canvas as it
utilities shape clipping. To remove a mask, set this property to null.
For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.
The center of rotation, scaling, and skewing for this display object in its local space. The position
is the projection of pivot in the parent's local space.
By default, the pivot is the origin (0, 0).
The center of rotation, scaling, and skewing for this display object in its local space. The position
is the projection of pivot in the parent's local space.
By default, the pivot is the origin (0, 0).
The coordinate of the object relative to the local coordinates of the parent.
The coordinate of the object relative to the local coordinates of the parent.
The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
The scale factors of this object along the local coordinate axes.
The default scale is (1, 1).
The scale factors of this object along the local coordinate axes.
The default scale is (1, 1).
The skew factor for the object in radians.
The skew factor for the object in radians.
Current transform of the object based on world (parent) factors.
Indicates if the object is globally visible.
The position of the displayObject on the x axis relative to the local coordinates of the parent. An alias to position.x
The position of the displayObject on the x axis relative to the local coordinates of the parent. An alias to position.x
The position of the displayObject on the y axis relative to the local coordinates of the parent. An alias to position.y
The position of the displayObject on the y axis relative to the local coordinates of the parent. An alias to position.y
The zIndex of the displayObject.
If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.
The zIndex of the displayObject.
If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.
Recursively updates transform of all objects from the root to this one internal function for toLocal()
Recalculates the bounds of the display object.
Base destroy method for generic display objects. This will automatically
remove the display object from its parent Container as well as remove
all current event listeners and internal references. Do not use a DisplayObject
after calling destroy().
Pair method for enableTempParent
Actual parent of element
Calls each of the listeners registered for a given event.
Used in Renderer, cacheAsBitmap and other places where you call an updateTransform on root
const cacheParent = elem.enableTempParent();
elem.updateTransform();
elem.disableTempParent(cacheParent);
current parent
Return an array listing the events for which the emitter has registered listeners.
Calculates and returns the (world) bounds of the display object as a Rectangle.
This method is expensive on containers with a large subtree (like the stage). This is because the bounds
of a container depend on its children's bounds, which recursively causes all bounds in the subtree to
be recalculated. The upside, however, is that calling getBounds once on a container will indeed update
the bounds of all children (the whole subtree, in fact). This side effect should be exploited by using
displayObject._bounds.getRectangle() when traversing through all the bounds in a scene graph. Otherwise,
calling getBounds on each object in a subtree will cause the total cost to increase quadratically as
its height increases.
The _bounds object stores the last calculation of the bounds. You can use to entirely skip bounds
calculation if needed.
const lastCalculatedBounds = displayObject._bounds.getRectangle(optionalRect);
Do know that usage of getLocalBounds can corrupt the _bounds of children (the whole subtree, actually). This
is a known issue that has not been solved. See [getLocalBounds]{@link PIXI.DisplayObject#getLocalBounds} for more
details.
getBounds should be called with skipUpdate equal to true in a render() call. This is because the transforms
are guaranteed to be update-to-date. In fact, recalculating inside a render() call may cause corruption in certain
cases.
The minimum axis-aligned rectangle in world space that fits around this object.
Return the number of listeners listening to a given event.
Return the listeners registered for a given event.
Add a listener for a given event.
Add a one-time listener for a given event.
Remove all listeners, or those of the specified event.
Remove the listeners of a given event.
Renders the object using the WebGL renderer.
The renderer.
Convenience function to set the position, scale, skew and pivot at once.
The DisplayObject instance
Calculates the global position of the display object.
The world origin to calculate from.
A point object representing the position of this object.
Calculates the local position of the display object relative to another point.
The world origin to calculate from.
A point object representing the position of this object
Updates the object transform for rendering.
TODO - Optimization pass!
Mixes all enumerable properties and methods from a source object to DisplayObject.
The source of properties and methods to mix in.
Generated using TypeDoc
The base class for all objects that are rendered on the screen.
This is an abstract class and can not be used on its own; rather it should be extended.
Display objects implemented in PixiJS
childrento DisplayObjectTransforms
The [transform]{@link DisplayObject#transform} of a display object describes the projection from its local coordinate space to its parent's local coordinate space. The following properties are derived from the transform:
Skewing. This can be used to deform a rectangular display object into a parallelogram.
In PixiJS, skew has a slightly different behaviour than the conventional meaning. It can be thought of the net rotation applied to the coordinate axes (separately). For example, if "skew.x" is ⍺ and "skew.y" is β, then the line x = 0 will be rotated by ⍺ (y = -x*cot⍺) and the line y = 0 will be rotated by β (y = x*tanβ). A line y = x*tanϴ (i.e. a line at angle ϴ to the x-axis in local-space) will be rotated by an angle between ⍺ and β.
It can be observed that if skew is applied equally to both axes, then it will be equivalent to applying a rotation. Indeed, if "skew.x" = -ϴ and "skew.y" = ϴ, it will produce an equivalent of "rotation" = ϴ.
Another quite interesting observation is that "skew.x", "skew.y", rotation are communtative operations. Indeed, because rotation is essentially a careful combination of the two.
Bounds
The bounds of a display object is defined by the minimum axis-aligned rectangle in world space that can fit around it. The abstract
calculateBoundsmethod is responsible for providing it (and it should use theworldTransformto calculate in world space).There are a few additional types of bounding boxes:
getBounds().getLocalBounds().Container.calculateBounds
Container already implements
calculateBoundsin a manner that includes children.But for a non-Container display object, the
calculateBoundsmethod must be overridden in order forgetBoundsandgetLocalBoundsto work. This method must write the bounds intothis._bounds.Generally, the following technique works for most simple cases: take the list of points forming the "hull" of the object (i.e. outline of the object's shape), and then add them using {@link PIXI.Bounds#addPointMatrix}.
You can optimize this for a large number of points by using {@link PIXI.Bounds#addVerticesMatrix} to pass them in one array together.
Alpha
This alpha sets a display object's relative opacity w.r.t its parent. For example, if the alpha of a display object is 0.5 and its parent's alpha is 0.5, then it will be rendered with 25% opacity (assuming alpha is not applied on any ancestor further up the chain).
The alpha with which the display object will be rendered is called the [worldAlpha]{@link PIXI.DisplayObject#worldAlpha}.
Renderable vs Visible
The
renderableandvisibleproperties can be used to prevent a display object from being rendered to the screen. However, there is a subtle difference between the two. When usingrenderable, the transforms of the display object (and its children subtree) will continue to be calculated. When usingvisible, the transforms will not be calculated.It is recommended that applications use the
renderableproperty for culling. See @pixi-essentials/cull or pixi-cull for more details.Otherwise, to prevent an object from rendering in the general-purpose sense -
visibleis the property to use. This one is also better in terms of performance.PIXI