Namespace: scene

Classes

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	Container[]
culled	boolean
isRenderGroup	boolean
parent	Container
pivot	PointData
position	PointData
renderable	boolean
rotation	number
scale	PointData
skew	PointData
tint	ColorSource
visible	boolean
x	number
y	number

See:

• Container

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

HTMLTextStyleOptions

Options for HTML text style, extends scene.TextStyle.

Properties:

Name	Type	Attributes	Description
cssOverrides	Array<string>	<optional>	CSS style(s) to add.
tagStyles	Record<string, HTMLTextStyleOptions>	<optional>	Tag styles.

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	PointLike[]	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

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 NineSlicePlane, 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 NineSlicePlane.
topHeight	number	Height of the top horizontal bar (C)
width	number	Width of the NineSlicePlane, 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 custom render function

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	PointLike[]	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

SpriteOptions

Options for the Sprite constructor.

Properties:

Name	Type	Description
anchor	PointData	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.

TextOptions

Options for the Text class.

Properties:

Name	Type	Description
anchor	PointData	The anchor point of the text.
renderMode	"canvas" | "html" | "bitmap"	the render mode - canvas renders to a single canvas, html renders using css, bitmap uses a bitmap font
resolution	number	The resolution of the text.
roundPixels	boolean	Whether or not to round the x/y position.
style	TextStyle | HTMLTextStyleOptions | HTMLTextStyle	The text style
text	TextString	The copy for the text object. To split a line you can use '\n'.

Example

const text = new Text({
   text: 'Hello Pixi!',
   style: {
      fontFamily: 'Arial',
      fontSize: 24,
   fill: 0xff1010,
   align: 'center',
 }
});

TextStyleOptions

Constructor options used for TextStyle instances.

const textStyle = new TextStyle({
   fontSize: 12,
   fill: 'black',
});

Properties:

Name	Type	Description
align	'left' | 'center' | 'right' | 'justify'	Alignment for multiline text, does not affect single line text
breakWords	boolean	Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
dropShadow	boolean | Partial<TextDropShadow>	Set a drop shadow for the text
fill	string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern	A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g., ['#000000','#FFFFFF'] MDN
fontFamily	string | string[]	The font family, can be a single font name, or a list of names where the first is the preferred font.
fontSize	number | string	The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
fontStyle	'normal' | 'italic' | 'oblique'	The font style.
fontVariant	'normal' | 'small-caps'	The font variant.
fontWeight	'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'	The font weight.
leading	number	The height of the line, a number that represents the vertical space that a letter uses.
letterSpacing	number	The amount of spacing between letters, default is 0
lineHeight	number	The line height, a number that represents the vertical space that a letter uses
padding	number	Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
stroke	FillStyleInputs	A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'
textBaseline	'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom'	The baseline of the text that is rendered.
whiteSpace	'normal' | 'pre' | 'pre-line'	Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.
wordWrap	boolean	Indicates if word wrap should be used
wordWrapWidth	number	The width at which text will wrap, it needs wordWrap to be set to true

See:

• scene.TextStyle

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

Type Definitions