PIXI.Sprite

class Sprite extends PIXI.Container

The Sprite object is the base for all textured objects that are rendered to the screen

A sprite can be created directly from an image like this:

let sprite = PIXI.Sprite.from('assets/image.png');

The more efficient way to create sprites is using a PIXI.Spritesheet, as swapping base textures when rendering to the screen is inefficient.

PIXI.Loader.shared.add("assets/spritesheet.json").load(setup);

function setup() {
  let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet;
  let sprite = new PIXI.Sprite(sheet.textures["image.png"]);
  ...
}

Constructor

new PIXI.Sprite(texture: PIXI.Texture) → {}

Parameters:
Name	Type	Attributes	Description
texture	PIXI.Texture	<optional>	The texture for this sprite.

Summary

Properties from Sprite

PIXI.ObservablePoint	anchor
PIXI.BLEND_MODES	blendMode = PIXI.BLEND_MODES.NORMAL
number	height The height of the sprite, setting this will actually modify the scale to achieve the value set.
boolean	isSprite = true
string	pluginName = 'batch'
boolean	roundPixels = false If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.
PIXI.Texture	texture The texture that the sprite is using.
number	tint = 0xFFFFFF The tint applied to the sprite. This is a hex value.
number	width The width of the sprite, setting this will actually modify the scale to achieve the value set.
PIXI.ObservablePoint	protected _anchor = `this.texture.defaultAnchor`
number	protected _cachedTint = 0xFFFFFF
number	protected _height
HTMLCanvasElement	protected _tintedCanvas = undefined
number	protected _width
Float32Array	protected uvs
Float32Array	protected vertexData

Methods from Sprite

PIXI.Sprite	static from(source: string \| PIXI.Texture \| HTMLCanvasElement \| HTMLVideoElement, options: object)
void	calculateTrimmedVertices() Calculates worldTransform * vertices for a non texture with a trim. store it in vertexTrimmedData.
void	calculateVertices() Calculates worldTransform * vertices, store it in vertexData.
boolean	containsPoint(point: IPointData)
void	destroy(options: IDestroyOptions \| boolean)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle)
void	renderCanvas(renderer: PIXI.CanvasRenderer)
void	protected _calculateBounds() Updates the bounds of the sprite.
void	protected _onTextureUpdate() When the texture is updated, this event will fire to update the scale and frame.
void	protected _render(renderer: PIXI.Renderer)

Properties inherited from Container

T[]	children
boolean	interactiveChildren = true
boolean	sortableChildren
boolean	sortDirty Should children be sorted by zIndex at the next updateTransform call.

Properties inherited from DisplayObject

boolean	_accessibleActive = false
boolean	_accessibleDiv = undefined
PIXI.Bounds	_bounds The bounds object, this is used to calculate and store the bounds of the displayObject.
PIXI.Bounds	_localBounds Local bounds object, swapped with `_bounds` when using `getLocalBounds()`.
boolean	accessible = false
boolean	accessibleChildren = true
string	accessibleHint = undefined
string	accessiblePointerEvents = 'auto'
?string	accessibleTitle = undefined
string	accessibleType = 'button'
number	alpha The opacity of the object.
number	angle
boolean	buttonMode
boolean	cacheAsBitmap
number	cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number	cacheAsBitmapResolution = null
boolean	cullable Should this object be rendered if the bounds of this object are out of frame?
PIXI.Rectangle	cullArea
string	cursor = undefined
boolean	destroyed Readonly flag for destroyed display objects.
PIXI.Rectangle	filterArea
PIXI.Filter[] \| null	filters
PIXI.IHitArea	hitArea = undefined
boolean	interactive = false
boolean	isMask Does any other displayObject use this object as a mask?
PIXI.Matrix	localTransform
PIXI.Container \| PIXI.MaskData \| null	mask
string	name = undefined
PIXI.Container	parent The display object container that contains this display object.
PIXI.ObservablePoint	pivot
PIXI.ObservablePoint	position
boolean	renderable
number	rotation
PIXI.ObservablePoint	scale The scale factors of this object along the local coordinate axes.
PIXI.ObservablePoint	skew
PIXI.DisplayObject	smartMask = undefined
PIXI.Transform	transform
boolean	visible
number	worldAlpha
PIXI.Matrix	worldTransform
boolean	worldVisible
number	x
number	y
number	zIndex The zIndex of the displayObject.
number	protected _boundsID Flags the cached bounds as dirty.
PIXI.Rectangle	protected _boundsRect Cache of this display-object's bounds-rectangle.
boolean	protected _destroyed If the object has been destroyed via destroy(). If true, it should not be used.
PIXI.Filter[]	protected _enabledFilters
number	protected _lastSortedIndex
PIXI.Rectangle	protected _localBoundsRect Cache of this display-object's local-bounds rectangle.
PIXI.Container \| PIXI.MaskData	protected _mask
PIXI.Container	protected _tempDisplayObjectParent
number	protected _zIndex

Methods inherited from Container

PIXI.DisplayObject	addChild(children: PIXI.DisplayObject) Adds one or more children to the container.
PIXI.DisplayObject	addChildAt(child: PIXI.DisplayObject, index: number)
void	calculateBounds() Recalculates the bounds of the container.
	containerUpdateTransform()
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.DisplayObject	removeChild(children: PIXI.DisplayObject)
T	removeChildAt(index: number)
T[]	removeChildren(beginIndex: number, endIndex)
void	render(renderer: PIXI.Renderer) Renders the object using the WebGL renderer.
void	setChildIndex(child: T, index: number)
void	sortChildren() Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.
void	swapChildren(child: T, child2: T)
void	updateTransform() Updates the transform on all children of this container for rendering.
void	protected _renderWithCulling(renderer: PIXI.Renderer)
void	protected onChildrenChange(_length: number)
void	protected renderAdvanced(renderer: PIXI.Renderer)

Methods inherited from DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	disableTempParent(cacheParent: PIXI.Container)
boolean	dispatchEvent(e: Event) Dispatch the event on this PIXI.DisplayObject using the event's PIXI.EventBoundary.
	displayObjectUpdateTransform()
PIXI.Container	enableTempParent() Used in Renderer, cacheAsBitmap and other places where you call an `updateTransform` on root
PIXI.Rectangle	getBounds(skipUpdate: boolean, rect: PIXI.Rectangle) Calculates and returns the (world) bounds of the display object as a Rectangle.
PIXI.Point	getGlobalPosition(point: PIXI.Point, skipUpdate: boolean)
	removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
PIXI.Container	setParent(container: PIXI.Container)
this	setTransform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number, pivotX: number, pivotY: number)
P	toGlobal(position: IPointData, point: P, skipUpdate: boolean)
P	toLocal(position: IPointData, from: PIXI.DisplayObject, point: P, skipUpdate: boolean)
PIXI.Rectangle	updateSmartMask(recursive: boolean, skipUpdate: boolean)
void	protected _recursivePostUpdateTransform() Recursively updates transform of all objects from the root to this one internal function for toLocal()

Inherited Events from Container

childAdded

Inherited Events from DisplayObject

	added
	childRemoved
	click
	clickcapture Capture phase equivalent of `click`.
	destroyed
	mousedown
	mousedowncapture Capture phase equivalent of `mousedown`.
	mouseenter Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	mouseentercapture Capture phase equivalent of `mouseenter`
	mouseleave Fired when the mouse pointer exits a DisplayObject and its descendants.
	mouseleavecapture Capture phase equivalent of `mouseleave`.
	mousemove
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseout
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseover
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseup
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutside
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancel
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	pointerdown
	pointerdowncapture Capture phase equivalent of `pointerdown`.
	pointerenter Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	pointerentercapture Capture phase equivalent of `pointerenter`
	pointerleave Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.
	pointerleavecapture Capture phase equivalent of `pointerleave`.
	pointermove
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointerout
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerover
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertap
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerup
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutside
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclick
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdown
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightup
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutside
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tap
	tapcapture Capture phase equivalent of `tap`.
	touchcancel
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchend
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutside
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmove
	touchmovecapture Capture phase equivalent of `touchmove`.
	touchstart
	touchstartcapture Capture phase equivalent of `touchstart`.
PIXI.FederatedWheelEvent	wheel Fired when a the user scrolls with the mouse cursor over a DisplayObject.
PIXI.FederatedWheelEvent	wheelcapture Capture phase equivalent of `wheel`.

Public Properties

anchor Sprite.ts:555

anchor: PIXI.ObservablePoint

The anchor sets the origin point of the sprite. The default value is taken from the Texture and passed to the constructor.

The default is (0,0), this means the sprite's origin is the top left.

Setting the anchor to (0.5,0.5) means the sprite's origin is centered.

Setting the anchor to (1,1) would mean the sprite's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.


 const sprite = new PIXI.Sprite(texture);
 sprite.anchor.set(0.5); // This will set the origin to center. (0.5) is same as (0.5, 0.5).

blendMode Sprite.ts:44

blendMode: PIXI.BLEND_MODES = PIXI.BLEND_MODES.NORMAL

The blend mode to be applied to the sprite. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.

height Sprite.ts:541

height: number

The height of the sprite, setting this will actually modify the scale to achieve the value set.

isSprite Sprite.ts:185

isSprite: boolean = true

Used to fast check if a sprite is.. a sprite!

pluginName Sprite.ts:51

pluginName: string = 'batch'

Plugin that is responsible for rendering this element. Allows to customize the rendering process without overriding '_render' & '_renderCanvas' methods.

roundPixels Sprite.ts:504

roundPixels: boolean = false

If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.

Advantages can include sharper image quality (like text) and faster rendering on canvas. The main disadvantage is movement of objects may appear less smooth.

To set the global default, change PIXI.settings.ROUND_PIXELS.

texture Sprite.ts:597

texture: PIXI.Texture

The texture that the sprite is using.

tint Sprite.ts:580

tint: number = 0xFFFFFF

The tint applied to the sprite. This is a hex value.

A value of 0xFFFFFF will remove any tint effect.

width Sprite.ts:527

width: number

The width of the sprite, setting this will actually modify the scale to achieve the value set.

Protected Properties

_anchor Sprite.ts:93

protected _anchor: PIXI.ObservablePoint = `this.texture.defaultAnchor`

The anchor point defines the normalized coordinates in the texture that map to the position of this sprite.

By default, this is (0,0) (or texture.defaultAnchor if you have modified that), which means the position (x,y) of this Sprite will be the top-left corner.

Note: Updating texture.defaultAnchor after constructing a Sprite does not update its anchor.

https://docs.cocos2d-x.org/cocos2d-x/en/sprites/manipulation.html

_cachedTint Sprite.ts:77

protected _cachedTint: number = 0xFFFFFF

Cached tint value so we can tell when the tint is changed. Value is used for 2d CanvasRenderer.

_height Sprite.ts:64

protected _height: number

The height of the sprite (this is initially set by the texture)

_tintedCanvas Sprite.ts:4

protected _tintedCanvas: HTMLCanvasElement = undefined

Cached tinted texture.

_width Sprite.ts:58

protected _width: number

The width of the sprite (this is initially set by the texture).

uvs Sprite.ts:86

protected uvs: Float32Array

This is used to store the uvs data of the sprite, assigned at the same time as the vertexData in calculateVertices().

vertexData Sprite.ts:110

protected vertexData: Float32Array

This is used to store the vertex data of the sprite (basically a quad).

Public Methods

from Sprite.ts:488

static from(source: string | PIXI.Texture | HTMLCanvasElement | HTMLVideoElement, options: object) → {PIXI.Sprite}

Helper function that creates a new sprite based on the source you provide. The source can be - frame id, image url, video url, canvas element, video element, base texture

Parameters:
Name	Type	Attributes	Description
source	string \| PIXI.Texture \| HTMLCanvasElement \| HTMLVideoElement		Source to create texture from
options	object	<optional>	See PIXI.BaseTexture's constructor for options.

Returns:
Type	Description
PIXI.Sprite	The newly created sprite

calculateTrimmedVertices Sprite.ts:303

calculateTrimmedVertices() → {void}

Calculates worldTransform * vertices for a non texture with a trim. store it in vertexTrimmedData.

This is used to ensure that the true width and height of a trimmed texture is respected.

Returns:
Type	Description
void

calculateVertices Sprite.ts:219

calculateVertices() → {void}

Calculates worldTransform * vertices, store it in vertexData.

Returns:
Type	Description
void

containsPoint Sprite.ts:430

containsPoint(point: IPointData) → {boolean}

Tests if a point is inside this sprite

Parameters:
Name	Type	Description
point	IPointData	the point to test

Returns:
Type	Description
boolean	The result of the test

destroy Sprite.ts:457

destroy(options: IDestroyOptions | boolean) → {void}

Destroys this sprite and optionally its texture and children.

Parameters:
Name	Type	Attributes	Default	Description
options	IDestroyOptions \| boolean	<optional>		Options parameter. A boolean will act as if all options have been set to that value
options.children		<optional>	false	if set to true, all the children will have their destroy method called as well. 'options' will be passed on to those calls.
options.texture		<optional>	false	Should it destroy the current texture of the sprite as well
options.baseTexture		<optional>	false	Should it destroy the base texture of the sprite as well

Returns:
Type	Description
void

getLocalBounds Sprite.ts:394

getLocalBounds(rect: PIXI.Rectangle) → {PIXI.Rectangle}

Gets the local bounds of the sprite object.

Parameters:
Name	Type	Attributes	Description
rect	PIXI.Rectangle	<optional>	Optional output rectangle.

Returns:
Type	Description
PIXI.Rectangle	The bounds.

renderCanvas Container.ts:17

renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

Protected Methods

_calculateBounds Sprite.ts:373

protected _calculateBounds() → {void}

Updates the bounds of the sprite.

Returns:
Type	Description
void

_onTextureUpdate Sprite.ts:193

protected _onTextureUpdate() → {void}

When the texture is updated, this event will fire to update the scale and frame.

Returns:
Type	Description
void

_render Sprite.ts:360

protected _render(renderer: PIXI.Renderer) → {void}

Renders the object using the WebGL renderer

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The webgl renderer to use.

Returns:
Type	Description
void