Namespace: scene

Classes

AbstractText

AnimatedSprite

BitmapText

Container

Culler

DOMContainer

FillGradient

Graphics

GraphicsContext

GraphicsPath

HTMLText

Mesh

MeshGeometry

MeshPlane

MeshRope

MeshSimple

NineSliceGeometry

NineSlicePlane

NineSliceSprite

Particle

ParticleContainer

ParticleContainerPipe

PerspectiveMesh

PerspectivePlaneGeometry

PlaneGeometry

RenderContainer

RenderLayer

RopeGeometry

ShapePath

Sprite

Text

TilingSprite

ViewContainer

Interface Definitions

AnimatedSpriteOptions

Constructor options used for AnimatedSprite instances.

Properties:

Name	Type	Description
animationSpeed	number	The speed that the AnimatedSprite will play at. Higher is faster, lower is slower.
autoPlay	boolean	Whether to start the animation immediately on creation.
autoUpdate	boolean	Whether to use Ticker.shared to auto update animation time.
loop	boolean	Whether or not the animate sprite repeats after playing.
onComplete	() => void	User-assigned function to call when an AnimatedSprite finishes playing.
onFrameChange	(currentFrame: number) => void	User-assigned function to call when an AnimatedSprite changes which texture is being rendered.
onLoop	() => void	User-assigned function to call when loop is true, and an AnimatedSprite is played and loops around to start again.
textures	AnimatedSpriteFrames	An array of Texture or frame objects that make up the animation.
updateAnchor	boolean	Update anchor to Texture's defaultAnchor when frame changes.

See:

• AnimatedSprite

BaseDestroyOptions

Base destroy options.

Properties:

Name	Type	Description
children	boolean	Destroy children recursively.

Example

// Destroy the sprite and all its children.
sprite.destroy({ children: true });

BaseGradientOptions

Represents the style options for a linear gradient fill.

Properties:

Name	Type	Default	Description
colorStops	{ offset : number, color : ColorSource }[]		Array of colors stops to use in the gradient
textureSize	number		The size of the texture to use for the gradient - this is for advanced usage. The texture size does not need to match the size of the object being drawn. Due to GPU interpolation, gradient textures can be relatively small! Consider using a larger texture size if your gradient has a lot of very tight color steps
textureSpace	TextureSpace		Whether coordinates are 'global' or 'local'
type	GradientType		The type of gradient
wrapMode	WRAP_MODE	'clamp-to-edge'	The wrap mode of the gradient. This can be 'clamp-to-edge' or 'repeat'.

ContainerOptions

Constructor options used for Container instances.

const container = new Container({
   position: new Point(100, 200),
   scale: new Point(2, 2),
   rotation: Math.PI / 2,
});

Properties:

Name	Type	Description
alpha	number
angle	number
blendMode	BLEND_MODES
boundsArea	Rectangle
children	C[]
isRenderGroup	boolean
parent	Container
pivot	PointData | number
position	PointData
renderable	boolean
rotation	number
scale	PointData | number
skew	PointData
tint	ColorSource
visible	boolean
x	number
y	number

See:

• Container

ContextDestroyOptions

Options when destroying a graphics context.

// destroy the graphics context and its texture
graphicsContext.destroy({ context: true, texture: true });

Properties:

Name	Type	Description
context	boolean	Destroy the graphics context as well.

DOMContainerOptions

Options for the DOMContainer constructor.

Properties:

Name	Type	Description
anchor	PointData | number	The anchor point of the container.
element	HTMLElement	The DOM element to use for the container.

FillStyle

A fill style object.

Properties:

Name	Type	Description
alpha	number	The alpha value to use for the fill.
color	ColorSource	The color to use for the fill.
fill	FillPattern | FillGradient | null	The fill pattern to use.
matrix	Matrix | null	The matrix to apply.
texture	Texture | null	The texture to use for the fill.
textureSpace	TextureSpace	The fill units to use.

FrameObject

A reference to a frame in an AnimatedSprite

Properties:

Name	Type	Description
texture	Texture	The Texture of the frame.
time	number	The duration of the frame, in milliseconds.

GraphicsOptions

Constructor options used for Graphics instances.

const graphics = new Graphics({
   fillStyle: { color: 0xff0000, alpha: 0.5 },
   strokeStyle: { color: 0x00ff00, width: 2 },
});

Properties:

Name	Type	Description
context	GraphicsContext	The GraphicsContext to use, useful for reuse and optimisation
roundPixels	boolean	Whether or not to round the x/y position.

See:

• Graphics

IParticle

Represents a particle with properties for position, scale, rotation, color, and texture.

Properties:

Name	Type	Description
anchorX	number	The x-coordinate of the anchor point.
anchorY	number	The y-coordinate of the anchor point.
color	number	The color of the particle as a hexadecimal number.
rotation	number	The rotation of the particle in radians.
scaleX	number	The scale factor in the x-axis.
scaleY	number	The scale factor in the y-axis.
texture	Texture	The texture of the particle.
x	number	The x-coordinate of the particle.
y	number	The y-coordinate of the particle.

LinearGradientOptions

Options specific to linear gradients. A linear gradient creates a smooth transition between colors along a straight line defined by start and end points.

Properties:

Name	Type	Description
end	PointData	The end point of the gradient. This point defines where the gradient ends. It is represented as a PointData object containing x and y coordinates. The coordinates are in local space by default (0-1), but can be in global space if specified.
start	PointData	The start point of the gradient. This point defines where the gradient begins. It is represented as a PointData object containing x and y coordinates. The coordinates are in local space by default (0-1), but can be in global space if specified.
type	"linear"	The type of gradient. Must be 'linear' for linear gradients.

MeshGeometryOptions

Options for the mesh geometry.

Properties:

Name	Type	Description
indices	Uint32Array	The indices of the mesh.
positions	Float32Array	The positions of the mesh.
shrinkBuffersToFit	boolean	Whether to shrink the buffers to fit the data.
topology	Topology	The topology of the mesh.
uvs	Float32Array	The UVs of the mesh. If not provided, they will be filled with 0 and match the size of the positions.

MeshOptions

Properties:

Name	Type	Description
geometry	GEOMETRY	Includes vertex positions, face indices, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU. Can be shared between multiple Mesh objects.
roundPixels	boolean	Whether or not to round the x/y position.
shader	SHADER | null	Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Mesh objects.
state	State	The state of WebGL required to render the mesh.
texture	Texture	The texture that the Mesh uses. Null for non-MeshMaterial shaders

MeshPlaneOptions

Constructor options used for MeshPlane instances.

const meshPlane = new MeshPlane({
   texture: Texture.from('snake.png'),
   verticesX: 20,
   verticesY: 20,
});

Properties:

Name	Type	Description
texture	Texture	The texture to use on the plane.
verticesX	number	The number of vertices in the x-axis
verticesY	number	The number of vertices in the y-axis

See:

• MeshPlane

MeshRopeOptions

Constructor options used for MeshRope instances.

const meshRope = new MeshRope({
   texture: Texture.from('snake.png'),
   points: [new Point(0, 0), new Point(100, 0)],
   textureScale: 0,
});

Properties:

Name	Type	Description
points	PointData[]	An array of points that determine the rope.
texture	Texture	The texture to use on the rope.
textureScale	number	Rope texture scale, if zero then the rope texture is stretched. Positive values scale rope texture keeping its aspect ratio. You can reduce alpha channel artifacts by providing a larger texture and downsampling here. If set to zero, texture will be stretched instead.

See:

• MeshRope

NineSliceGeometryOptions

Options for the NineSliceGeometry.

Properties:

Name	Type	Description
anchor	PointData	The anchor point of the NineSliceSprite.
bottomHeight	number	The height of the bottom row.
height	number	The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane.
leftWidth	number	The width of the left column.
originalHeight	number	The original height of the texture
originalWidth	number	The original width of the texture
rightWidth	number	The width of the right column.
topHeight	number	The height of the top row.
width	number	The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane.

NineSliceSpriteOptions

Constructor options used for NineSliceSprite instances.

const nineSliceSprite = new NineSliceSprite({
   texture: Texture.from('button.png'),
   leftWidth: 20,
   topHeight: 20,
   rightWidth: 20,
   bottomHeight: 20,
});

Properties:

Name	Type	Description
anchor	PointData | number	The anchor point of the NineSliceSprite.
bottomHeight	number	Height of the bottom horizontal bar (D)
height	number	Height of the NineSliceSprite, setting this will actually modify the vertices and not UV's of this plane.
leftWidth	number	Width of the left vertical bar (A)
rightWidth	number	Width of the right vertical bar (B)
roundPixels	boolean	Whether or not to round the x/y position.
texture	Texture	The texture to use on the NineSliceSprite.
topHeight	number	Height of the top horizontal bar (C)
width	number	Width of the NineSliceSprite, setting this will actually modify the vertices and not the UV's of this plane.

See:

• NineSliceSprite

ParticleContainerOptions

Options for the ParticleContainer constructor.

Properties:

Name	Type	Description
dynamicProperties	Record<string, boolean>	Specifies which properties are dynamic.
particles	Array<IParticle>	An array of particles to add to the container.
roundPixels	boolean	Indicates if pixels should be rounded.
shader	Shader	The shader to use for rendering.
texture	Texture	The texture to use for rendering - if not provided the texture of the first child is used.

ParticleProperties

Represents the properties of a particle that can be dynamically updated.

Properties:

Name	Type	Attributes	Description
color	boolean	<optional>	Indicates if color is dynamic.
position	boolean	<optional>	Indicates if position is dynamic.
rotation	boolean	<optional>	Indicates if rotation is dynamic.
uvs	boolean	<optional>	Indicates if UVs are dynamic.
vertices	boolean	<optional>	Indicates if vertices are dynamic.

PerspectivePlaneGeometryOptions

Constructor options used for PerspectivePlaneGeometry instances.

Properties:

Name	Type	Description
height	number	The height of the plane
width	number	The width of the plane

PerspectivePlaneOptions

Constructor options used for PerspectiveMesh instances.

const meshPlane = new PerspectiveMesh({
 texture: Texture.from('snake.png'),
 verticesX: 20,
 verticesY: 20,
 x0: 0,
 y0: 0,
 x1: 100,
 y1: 0,
 x2: 100,
 y2: 100,
 x3: 0,
 y3: 100
});

Properties:

Name	Type	Description
x0	number	top left corner x value
x1	number	top right corner x value
x2	number	bottom right corner x value
x3	number	bottom left corner x value
y0	number	top left corner y value
y1	number	top right corner y value
y2	number	bottom right corner y value
y3	number	bottom left corner y value

See:

• PerspectiveMesh

PlaneGeometryOptions

Constructor options used for PlaneGeometry instances.

const planeGeometry = new PlaneGeometry({
   width: 100,
   height: 100,
   verticesX: 10,
   verticesY: 10,
});

Properties:

Name	Type	Description
height	number	Height of plane
verticesX	number	Number of vertices on x-axis
verticesY	number	Number of vertices on y-axis
width	number	Width of plane

See:

• PlaneGeometry

RadialGradientOptions

Options specific to radial gradients. A radial gradient creates a smooth transition between colors that radiates outward in a circular pattern. The gradient is defined by inner and outer circles, each with their own radius.

Properties:

Name	Type	Description
center	PointData	The center point of the inner circle where the gradient begins. In local coordinates by default (0-1).
innerRadius	number	The radius of the inner circle where the gradient begins.
outerCenter	PointData	The center point of the outer circle where the gradient ends. In local coordinates by default (0-1).
outerRadius	number	The radius of the outer circle where the gradient ends.
rotation	number	The rotation of the gradient in radians, useful for making the gradient elliptical. NOTE: Only applied to radial gradients used with Graphics.
scale	number	The y scale of the gradient, use this to make the gradient elliptical. NOTE: Only applied to radial gradients used with Graphics.
type	"radial"	The type of gradient. Must be 'radial' for radial gradients.

RenderContainerOptions

Options for the RenderContainer constructor.

Properties:

Name	Type	Description
addBounds	(bounds: BoundsData) => void	how to add the bounds of this object when measuring
containsPoint	(point: Point) => boolean	how to know if the custom render logic contains a point or not, used for interaction
render	RenderFunction	the optional custom render function if you want to inject the function via the constructor

RenderLayerOptions

Options for configuring a RenderLayer.

Properties:

Name	Type	Default	Description
sortableChildren	boolean	false	If true, the layer's children will be sorted by zIndex before rendering If false, you can manually sort the children using sortRenderLayerChildren when ever you need!
sortFunction	(a: Container, b: Container) => number		Custom sort function to sort layer children. Default sorts by zIndex.

RopeGeometryOptions

Constructor options used for RopeGeometry instances.

const ropeGeometry = new RopeGeometry({
   points: [new Point(0, 0), new Point(100, 0)],
   width: 10,
   textureScale: 0,
});

Properties:

Name	Type	Description
points	PointData[]	An array of points that determine the rope.
textureScale	number	Rope texture scale, if zero then the rope texture is stretched. By default the rope texture will be stretched to match rope length. If textureScale is positive this value will be treated as a scaling factor and the texture will preserve its aspect ratio instead. To create a tiling rope set baseTexture.wrapMode to 'repeat' and use a power of two texture, then set textureScale=1 to keep the original texture pixel size. In order to reduce alpha channel artifacts provide a larger texture and downsample - i.e. set textureScale=0.5 to scale it down twice.
width	number	The width (i.e., thickness) of the rope.

See:

• RopeGeometry

SimpleMeshOptions

Options for the simple mesh.

Properties:

Name	Type	Description
indices	Uint32Array	if you want to specify the indices
texture	Texture	The texture to use
topology	Topology	the topology, can be any of the Topology values
uvs	Float32Array	if you want to specify the uvs
vertices	Float32Array	if you want to specify the vertices

SpriteOptions

Options for the Sprite constructor.

Properties:

Name	Type	Description
anchor	PointData | number	The anchor point of the sprite.
roundPixels	boolean	Whether or not to round the x/y position.
texture	Texture	The texture to use for the sprite.

StrokeAttributes

A stroke attribute object, used to define properties for a stroke.

Properties:

Name	Type	Description
alignment	number	The alignment of the stroke.
cap	LineCap	The line cap style to use.
join	LineJoin	The line join style to use.
miterLimit	number	The miter limit to use.
pixelLine	boolean	If the stroke is a pixel line. NOTE: this is only available for Graphic fills
width	number	The width of the stroke.

StrokeStyle

A stroke style object.

TextDestroyOptions

Options when destroying a text.

// destroy the text and its style
text.destroy({ style: true });

Properties:

Name	Type	Description
style	boolean	Destroy the text style as well.

TextureDestroyOptions

Options when destroying textures. Most of these use cases are internal.

// destroy the graphics context and its texture
graphicsContext.destroy({ texture: true });

Properties:

Name	Type	Description
texture	boolean	Destroy the texture as well.
textureSource	boolean	Destroy the texture source as well.

TilingSpriteOptions

Constructor options used for TilingSprite instances. Extends scene.TilingSpriteViewOptions

const tilingSprite = new TilingSprite({
   texture: Texture.from('assets/image.png'),
   width: 100,
   height: 100,
   tilePosition: { x: 100, y: 100 },
   tileScale: { x: 2, y: 2 },
});

Properties:

Name	Type	Default	Description
anchor	PointData | number	{x: 0, y: 0}	The anchor point of the sprite
applyAnchorToTexture	boolean	false
height	number	256	The height of the tiling sprite.
roundPixels	boolean		Whether or not to round the x/y position.
texture	Texture	Texture.WHITE	The texture to use for the sprite.
tilePosition	PointData	{x: 0, y: 0}	The offset of the image that is being tiled.
tileRotation	number	0	The rotation of the image that is being tiled.
tileScale	PointData	{x: 1, y: 1}	Scaling of the image that is being tiled.
width	number	256	The width of the tiling sprite. #

See:

• TilingSprite
• scene.TilingSpriteViewOptions

View

A view is something that is able to be rendered by the renderer.

Properties:

Name	Type	Description
_roundPixels	0 | 1	this is an int because it is packed directly into an attribute in the shader
batched	boolean	whether or not this view should be batched
bounds	BoundsData	this is the AABB rectangle bounds of the view in local untransformed space.
containsPoint	(point: Point) => boolean	Checks if the point is within the view
renderPipeId	string	an identifier that is used to identify the type of system that will be used to render this renderable eg, 'sprite' will use the sprite system (based on the systems name
uid	number	a unique id for this view
_lastUsed	number

Type Definitions

graphics.fill(0xff0000);
graphics.fill(new FillPattern(texture));
graphics.fill(new FillGradient(0, 0, 200, 0));
graphics.fill({
  color: 0xff0000,
  alpha: 0.5,
  texture?: null,
  matrix?: null,
});
graphics.fill({
  fill: new FillPattern(texture),
});
graphics.fill({
  fill: new FillGradient(0, 0, 200, 0),
});

graphics.stroke(0xff0000);
graphics.stroke(new FillPattern(texture));
graphics.stroke(new FillGradient(0, 0, 200, 0));
graphics.stroke({
  color: 0xff0000,
  width?: 1,
  alignment?: 0.5,
});
graphics.stroke({
  fill: new FillPattern(texture),
  width: 1,
  alignment: 0.5,
});
graphics.stroke({
  fill: new FillGradient(0, 0, 200, 0),
  width: 1,
  alignment: 0.5,
});