TileSprite

A TileSprite is a Sprite that has a repeating texture.

The texture can be scrolled and scaled independently of the TileSprite itself. Textures will automatically wrap and

are designed so that you can create game backdrops using seamless textures as a source.

You shouldn't ever create a TileSprite any larger than your actual canvas size. If you want to create a large repeating background

that scrolls across the whole map of your game, then you create a TileSprite that fits the canvas size and then use the tilePosition

property to scroll the texture as the player moves. If you create a TileSprite that is thousands of pixels in size then it will

consume huge amounts of memory and cause performance issues. Remember: use tilePosition to scroll your texture and tileScale to

adjust the scale of the texture - don't resize the sprite itself or make it larger than it needs.

Prior to Phaser 4, TileSprite did not support rotation.

In WebGL, it required the texture to be a power of two in size,

and did not support compressed textures or DynamicTextures.

It could introduce aliasing artifacts for textures that were not

a power of two in size.

These restrictions have been lifted in v4.

Constructor

new TileSprite(scene, x, y, width, height, textureKey, [frameKey])

Parameters

name	type	optional	description
scene	Phaser.Scene	No	The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
x	number	No	The horizontal position of this Game Object in the world.
y	number	No	The vertical position of this Game Object in the world.
width	number	No	The width of the Game Object. If zero it will use the size of the texture frame.
height	number	No	The height of the Game Object. If zero it will use the size of the texture frame.
textureKey	string	No	The key of the Texture this Game Object will use to render with, as stored in the Texture Manager. Cannot be a DynamicTexture.
frameKey	string | number	Yes	An optional frame from the Texture this Game Object is rendering with.

---

Scope: static

Extends

Phaser.GameObjects.GameObject
Phaser.GameObjects.Components.Alpha
Phaser.GameObjects.Components.BlendMode
Phaser.GameObjects.Components.ComputedSize
Phaser.GameObjects.Components.Depth
Phaser.GameObjects.Components.Flip
Phaser.GameObjects.Components.GetBounds
Phaser.GameObjects.Components.Lighting
Phaser.GameObjects.Components.Mask
Phaser.GameObjects.Components.Origin
Phaser.GameObjects.Components.RenderNodes
Phaser.GameObjects.Components.ScrollFactor
Phaser.GameObjects.Components.Texture
Phaser.GameObjects.Components.Tint
Phaser.GameObjects.Components.Transform
Phaser.GameObjects.Components.Visible

Source: src/gameobjects/tilesprite/TileSprite.js#L21
Since: 3.0.0

Inherited Members

From Phaser.GameObjects.Components.Alpha:

• alpha
• alphaBottomLeft
• alphaBottomRight
• alphaTopLeft
• alphaTopRight

From Phaser.GameObjects.Components.BlendMode:

• blendMode

From Phaser.GameObjects.Components.ComputedSize:

• displayHeight
• displayWidth
• height
• width

From Phaser.GameObjects.Components.Depth:

• depth

From Phaser.GameObjects.Components.Filters:

• filterCamera
• filters
• filtersAutoFocus
• filtersFocusContext
• filtersForceComposite
• maxFilterSize
• renderFilters

From Phaser.GameObjects.Components.Flip:

• flipX
• flipY

From Phaser.GameObjects.Components.Lighting:

• lighting
• selfShadow

From Phaser.GameObjects.Components.Mask:

• mask

From Phaser.GameObjects.Components.Origin:

• displayOriginX
• displayOriginY
• originX
• originY

From Phaser.GameObjects.Components.RenderNodes:

• customRenderNodes
• defaultRenderNodes
• renderNodeData

From Phaser.GameObjects.Components.ScrollFactor:

• scrollFactorX
• scrollFactorY

From Phaser.GameObjects.Components.Texture:

• frame
• texture

From Phaser.GameObjects.Components.Tint:

• isTinted
• tint
• tintBottomLeft
• tintBottomRight
• tintFill
• tintTopLeft
• tintTopRight

From Phaser.GameObjects.Components.Transform:

• angle
• hasTransformComponent
• rotation
• scale
• scaleX
• scaleY
• w
• x
• y
• z

From Phaser.GameObjects.Components.Visible:

• visible

From Phaser.GameObjects.GameObject:

• active
• body
• cameraFilter
• data
• displayList
• ignoreDestroy
• input
• name
• parentContainer
• renderFlags
• scene
• state
• tabIndex
• type
• vertexRoundMode

---

Public Members

anims

anims: Phaser.Animations.AnimationState

Description:

The Animation State component of this TileSprite.

This component provides features to apply animations to this TileSprite.

It is responsible for playing, loading, queuing animations for later playback,

mixing between animations and setting the current animation frame to this Sprite.

Source: src/gameobjects/tilesprite/TileSprite.js#L253
Since: 3.0.0

---

canvas

canvas: HTMLCanvasElement

Description:

The Canvas element that the TileSprite renders its fill pattern in to.

Only used in Canvas mode.

Source: src/gameobjects/tilesprite/TileSprite.js#L163
Since: 3.12.0

---

context

context: CanvasRenderingContext2D

Description:

The Context of the Canvas element that the TileSprite renders its fill pattern in to.

Only used in Canvas mode.

Source: src/gameobjects/tilesprite/TileSprite.js#L173
Since: 3.12.0

---

dirty

dirty: boolean

Description:

Whether the Tile Sprite has changed in some way, requiring an re-render of its tile texture.

Such changes include the texture frame and scroll position of the Tile Sprite.

This is irrelevant in WebGL mode.

Source: src/gameobjects/tilesprite/TileSprite.js#L140
Since: 3.0.0

---

fillCanvas

fillCanvas: HTMLCanvasElement

Description:

The Canvas that the TileSprites texture is rendered to.

This is used to create a WebGL texture from.

Source: src/gameobjects/tilesprite/TileSprite.js#L224
Since: 3.12.0

---

fillContext

fillContext: CanvasRenderingContext2D

Description:

The Canvas Context used to render the TileSprites texture.

Source: src/gameobjects/tilesprite/TileSprite.js#L234
Since: 3.12.0

---

fillPattern

fillPattern: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper, CanvasPattern

Description:

The texture that the Tile Sprite is rendered to, which is then rendered to a Scene.

In WebGL this is a WebGLTextureWrapper. In Canvas it's a Canvas Fill Pattern.

Source: src/gameobjects/tilesprite/TileSprite.js#L243
Since: 3.12.0

---

renderer

renderer: Phaser.Renderer.Canvas.CanvasRenderer, Phaser.Renderer.WebGL.WebGLRenderer

Description:

The renderer in use by this Tile Sprite.

Source: src/gameobjects/tilesprite/TileSprite.js#L154
Since: 3.0.0

---

tilePositionX

tilePositionX: number

Description:

The horizontal scroll position of the Tile Sprite.

Source: src/gameobjects/tilesprite/TileSprite.js#L586
Since: 3.0.0

---

tilePositionY

tilePositionY: number

Description:

The vertical scroll position of the Tile Sprite.

Source: src/gameobjects/tilesprite/TileSprite.js#L609
Since: 3.0.0

---

tileRotation

tileRotation: number

Description:

The rotation of the Tile Sprite texture, in radians.

Source: src/gameobjects/tilesprite/TileSprite.js#L632
Since: 4.0.0

---

tileScaleX

tileScaleX: number

Description:

The horizontal scale of the Tile Sprite texture.

Source: src/gameobjects/tilesprite/TileSprite.js#L653
Since: 3.11.0

---

tileScaleY

tileScaleY: number

Description:

The vertical scale of the Tile Sprite texture.

Source: src/gameobjects/tilesprite/TileSprite.js#L676
Since: 3.11.0

---

Inherited Methods

From Phaser.Events.EventEmitter:

• addListener
• emit
• eventNames
• listenerCount
• listeners
• off
• on
• once
• removeAllListeners
• removeListener
• shutdown

From Phaser.GameObjects.Components.Alpha:

• clearAlpha
• setAlpha

From Phaser.GameObjects.Components.BlendMode:

• setBlendMode

From Phaser.GameObjects.Components.ComputedSize:

• setDisplaySize
• setSize

From Phaser.GameObjects.Components.Depth:

• setAbove
• setBelow
• setDepth
• setToBack
• setToTop

From Phaser.GameObjects.Components.Filters:

• enableFilters
• focusFilters
• focusFiltersOnCamera
• focusFiltersOverride
• renderWebGLFilters
• setFiltersAutoFocus
• setFiltersFocusContext
• setFiltersForceComposite
• setFilterSize
• setRenderFilters
• willRenderFilters

From Phaser.GameObjects.Components.Flip:

• resetFlip
• setFlip
• setFlipX
• setFlipY
• toggleFlipX
• toggleFlipY

From Phaser.GameObjects.Components.GetBounds:

• getBottomCenter
• getBottomLeft
• getBottomRight
• getBounds
• getCenter
• getLeftCenter
• getRightCenter
• getTopCenter
• getTopLeft
• getTopRight

From Phaser.GameObjects.Components.Lighting:

• setLighting
• setSelfShadow

From Phaser.GameObjects.Components.Mask:

• clearMask
• createGeometryMask
• setMask

From Phaser.GameObjects.Components.Origin:

• setDisplayOrigin
• setOrigin
• setOriginFromFrame
• updateDisplayOrigin

From Phaser.GameObjects.Components.RenderNodes:

• initRenderNodes
• setRenderNodeData
• setRenderNodeRole

From Phaser.GameObjects.Components.RenderSteps:

• addRenderStep
• renderWebGLStep

From Phaser.GameObjects.Components.ScrollFactor:

• setScrollFactor

From Phaser.GameObjects.Components.Texture:

• setTexture

From Phaser.GameObjects.Components.Tint:

• clearTint
• setTint
• setTintFill

From Phaser.GameObjects.Components.Transform:

• copyPosition
• getLocalPoint
• getLocalTransformMatrix
• getParentRotation
• getWorldPoint
• getWorldTransformMatrix
• setAngle
• setPosition
• setRandomPosition
• setRotation
• setScale
• setW
• setX
• setY
• setZ

From Phaser.GameObjects.Components.Visible:

• setVisible

From Phaser.GameObjects.GameObject:

• addedToScene
• addToDisplayList
• addToUpdateList
• destroy
• disableInteractive
• getData
• getDisplayList
• getIndexList
• incData
• removedFromScene
• removeFromDisplayList
• removeFromUpdateList
• removeInteractive
• setActive
• setData
• setDataEnabled
• setInteractive
• setName
• setState
• setVertexRoundMode
• toggleData
• toJSON
• update
• willRender
• willRoundVertices

---

Public Methods

preDestroy

<instance> preDestroy()

Description:

Internal destroy handler, called as part of the destroy process.

Access: protected

Source: src/gameobjects/tilesprite/TileSprite.js#L554
Since: 3.9.0

---

preUpdate

<instance> preUpdate(time, delta)

Description:

Update this TileSprite's animations.

Access: protected

Parameters:

name	type	optional	description
time	number	No	The current timestamp.
delta	number	No	The delta time, in ms, elapsed since the last frame.

Source: src/gameobjects/tilesprite/TileSprite.js#L302
Since: 3.0.0

---

setFrame

<instance> setFrame(frame)

Description:

Sets the frame this Game Object will use to render with.

The Frame has to belong to the current Texture being used.

It can be either a string or an index.

Parameters:

name	type	optional	description
frame	string | number	No	The name or index of the frame within the Texture.

Overrides: Phaser.GameObjects.Components.Texture#setFrame

Returns: Phaser.GameObjects.TileSprite - This Game Object instance.

Source: src/gameobjects/tilesprite/TileSprite.js#L317
Since: 3.0.0

---

setSizeToFrame

<instance> setSizeToFrame()

Description:

No-op method for compatibility with Animation.

Returns: Phaser.GameObjects.TileSprite - This Tile Sprite instance.

Source: src/gameobjects/tilesprite/TileSprite.js#L351
Since: 4.0.0

---

setTilePosition

<instance> setTilePosition([x], [y])

Description:

Sets Phaser.GameObjects.TileSprite#tilePositionX and Phaser.GameObjects.TileSprite#tilePositionY.

Parameters:

name	type	optional	description
x	number	Yes	The x position of this sprite's tiling texture.
y	number	Yes	The y position of this sprite's tiling texture.

Returns: Phaser.GameObjects.TileSprite - This Tile Sprite instance.

Source: src/gameobjects/tilesprite/TileSprite.js#L363
Since: 3.3.0

---

setTileRotation

<instance> setTileRotation([radians])

Description:

Sets Phaser.GameObjects.TileSprite#tileRotation.

Parameters:

name	type	optional	default	description
radians	number	Yes	0	The rotation of the tiling texture, in radians.

Source: src/gameobjects/tilesprite/TileSprite.js#L389
Since: 4.0.0

---

setTileScale

<instance> setTileScale([x], [y])

Description:

Sets Phaser.GameObjects.TileSprite#tileScaleX and Phaser.GameObjects.TileSprite#tileScaleY.

Parameters:

name	type	optional	default	description
x	number	Yes		The horizontal scale of the tiling texture. If not given it will use the current tileScaleX value.
y	number	Yes	"x"	The vertical scale of the tiling texture. If not given it will use the x value.

Returns: Phaser.GameObjects.TileSprite - This Tile Sprite instance.

Source: src/gameobjects/tilesprite/TileSprite.js#L406
Since: 3.12.0

---