Optional _accessibleOptional _accessibleThe bounds object, this is used to calculate and store the bounds of the displayObject.
Local bounds object, swapped with _bounds when using getLocalBounds().
Optional _textureOptional _texturesOptional accessibleOptional accessibleOptional accessibleOptional accessibleOptional accessibleOptional accessibleThe opacity of the object.
Optional Readonly childrenThe children of this event target.
If set, this shape is used for culling instead of the bounds of this object. It can improve the culling performance of objects with many children. The culling area is defined in local space.
Should this object be rendered if the bounds of this object are out of frame?
Culling has no effect on whether updateTransform is called.
The cursor preferred when the mouse pointer is hovering over.
The mode of interaction for this object
The area the filter is applied to. This is used as more of an optimization rather than figuring out the dimensions of the displayObject each frame you can set this rectangle.
Also works as an interaction mask.
Sets the filters for the displayObject.
IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer.
To remove filters simply set this property to 'null'.
The hit-area specifies the area for which pointer events should be captured by this event target.
Whether this event target should fire UI events.
Whether this event target has any children that need UI events. This can be used optimize event propagation.
Returns true if the DisplayObject has interactive 'static' or 'dynamic'
Does any other displayObject use this object as a mask?
Used to fast check if a sprite is.. a sprite!
Handler for 'click' event
Handler for 'globalmousemove' event
Handler for 'globalpointermove' event
Handler for 'globaltouchmove' event
Handler for 'mousedown' event
Handler for 'mouseenter' event
Handler for 'mouseleave' event
Handler for 'mousemove' event
Handler for 'mouseout' event
Handler for 'mouseover' event
Handler for 'mouseup' event
Handler for 'mouseupoutside' event
Handler for 'pointercancel' event
Handler for 'pointerdown' event
Handler for 'pointerenter' event
Handler for 'pointerleave' event
Handler for 'pointermove' event
Handler for 'pointerout' event
Handler for 'pointerover' event
Handler for 'pointertap' event
Handler for 'pointerup' event
Handler for 'pointerupoutside' event
Handler for 'rightclick' event
Handler for 'rightdown' event
Handler for 'rightup' event
Handler for 'rightupoutside' event
Handler for 'tap' event
Handler for 'touchcancel' event
Handler for 'touchend' event
Handler for 'touchendoutside' event
Handler for 'touchmove' event
Handler for 'touchstart' event
Handler for 'wheel' event
The display object container that contains this display object.
Optional renderCan this object be rendered, if false the object will not be drawn but the updateTransform methods will still be called.
Only affects recursive calls from parent. You can ask for bounds manually.
Abstract sortOptional styleOptional tabWorld transform and local transform of this object. This will become read-only later, please do not assign anything there unless you know what are you doing.
The visibility of the object. If false the object will not be drawn, and the updateTransform function will not be called.
Only affects recursive calls from parent. You can ask for bounds or call updateTransform manually.
Readonly worldThe multiplied alpha of the displayObject.
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.
Readonly flag for destroyed display objects.
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. Furthermore, a mask of an object must be in the subtree of its parent.
Otherwise, getLocalBounds may calculate incorrect bounds, which makes the container's width and height wrong.
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.
import { Graphics, Sprite } from 'pixi.js';
const graphics = new Graphics();
graphics.beginFill(0xFF3300);
graphics.drawRect(50, 250, 100, 100);
graphics.endFill();
const sprite = new Sprite(texture);
sprite.mask = graphics;
At the moment, CanvasRenderer doesn't support Sprite as 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).
4.0.0
The coordinate of the object relative to the local coordinates of the parent.
4.0.0
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).
4.0.0
The skew factor for the object in radians.
4.0.0
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 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.
PIXI.Container#sortableChildren
Optional options: boolean | IDestroyOptionsOptional options: AddListenerOptionsOptional options: AddListenerOptionsRest ...args: ArgumentMap<DisplayObjectEvents>[Extract<T, keyof DisplayObjectEvents>]Optional context: anyAbstract calculateBase 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().
Optional _options: boolean | IDestroyOptionsPair method for enableTempParent
Actual parent of element
Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
Calls each of the listeners registered for a given event.
Rest ...args: ArgumentMap<DisplayObjectEvents>[Extract<T, keyof DisplayObjectEvents>]Used in Renderer, cacheAsBitmap and other places where you call an updateTransform on root.
const cacheParent = elem.enableTempParent();
elem.updateTransform();
elem.disableTempParent(cacheParent);
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]PIXI.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 transforms of all objects in a container's subtree and of all ancestors are updated. The world bounds of all display objects in a container's subtree will also be recalculated.
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]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.
Optional skipUpdate: booleanSetting to true will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.
Optional rect: RectangleOptional rectangle to store the result of the bounds calculation.
Return the number of listeners listening to a given event.
Return the listeners registered for a given event.
Optional fn: ((...args) => void)Rest ...args: ArgumentMap<DisplayObjectEvents>[Extract<T, keyof DisplayObjectEvents>]Optional context: anyOptional once: booleanAdd a listener for a given event.
Rest ...args: ArgumentMap<DisplayObjectEvents>[Extract<T, keyof DisplayObjectEvents>]Optional context: anyAdd a one-time listener for a given event.
Rest ...args: ArgumentMap<DisplayObjectEvents>[Extract<T, keyof DisplayObjectEvents>]Optional context: anyAbstract removeOptional options: RemoveListenerOptionsOptional options: RemoveListenerOptionsRemove the listeners of a given event.
Optional fn: ((...args) => void)Rest ...args: ArgumentMap<DisplayObjectEvents>[Extract<T, keyof DisplayObjectEvents>]Optional context: anyOptional once: booleanAbstract renderRenders the object using the WebGL renderer.
The renderer.
Set the parent Container of this DisplayObject.
The Container to add this DisplayObject to.
Convenience function to set the position, scale, skew and pivot at once.
Optional x: numberThe X position
Optional y: numberThe Y position
Optional scaleX: numberThe X scale value
Optional scaleY: numberThe Y scale value
Optional rotation: numberThe rotation
Optional skewX: numberThe X skew value
Optional skewY: numberThe Y skew value
Optional pivotX: numberThe X pivot value
Optional pivotY: numberThe Y pivot value
Calculates the global position of the display object.
The world origin to calculate from.
Optional point: PA Point object in which to store the value, optional (otherwise will create a new Point).
Optional skipUpdate: booleanShould we skip the update transform.
Calculates the local position of the display object relative to another point.
The world origin to calculate from.
Optional from: DisplayObjectThe DisplayObject to calculate the global position from.
Optional point: PA Point object in which to store the value, optional (otherwise will create a new Point).
Optional skipUpdate: booleanShould we skip the update transform
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]PIXI.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 commutative 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]PIXI.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 PIXI.Bounds#addPointMatrix.
You can optimize this for a large number of points by using 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]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.For culling purposes, it is recommended that applications use the [cullable]PIXI.DisplayObject#cullable property.
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.Memberof
PIXI