Namespace: scene

Classes

AbstractText

AnimatedSprite

BitmapText

Container

Culler

Graphics

GraphicsContext

HTMLText

Mesh

MeshGeometry

MeshPlane

MeshRope

MeshSimple

NineSliceGeometry

NineSlicePlane

NineSliceSprite

PlaneGeometry

RenderContainer

RopeGeometry

ShapePath

Sprite

Text

TilingSprite

Interface Definitions

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 });

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[]
culled	boolean
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.

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.

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

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.

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	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
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
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

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

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

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.
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	{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
addBounds	(bounds: Bounds) => void	Adds the current bounds of this view to the supplied bounds
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

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,
});