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
• tintMode
• 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
• isDestroyed
• 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 TileSprite.

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 a 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 TileSprite's 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 TileSprite's 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#L641
Since: 3.0.0

---

tilePositionY

tilePositionY: number

Description:

The vertical scroll position of the Tile Sprite.

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

---

tileRotation

tileRotation: number

Description:

The rotation of the Tile Sprite texture, in radians.

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

---

tileScaleX

tileScaleX: number

Description:

The horizontal scale of the Tile Sprite texture.

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

---

tileScaleY

tileScaleY: number

Description:

The vertical scale of the Tile Sprite texture.

Source: src/gameobjects/tilesprite/TileSprite.js#L731
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

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

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:

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

---

Public Methods

addedToScene

<instance> addedToScene()

Description:

Adds this TileSprite to the Scene's update list, so that its preUpdate method is called each game step to advance its animations. Called automatically when this Game Object is added to a Scene.

Overrides: Phaser.GameObjects.GameObject#addedToScene

Source: src/gameobjects/tilesprite/TileSprite.js#L290
Since: 3.50.0

---

preDestroy

<instance> preDestroy()

Description:

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

Access: protected

Source: src/gameobjects/tilesprite/TileSprite.js#L609
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#L316
Since: 3.0.0

---

removedFromScene

<instance> removedFromScene()

Description:

Removes this TileSprite from the Scene's update list, stopping its preUpdate method from being called. Called automatically when this Game Object is removed from a Scene.

Overrides: Phaser.GameObjects.GameObject#removedFromScene

Source: src/gameobjects/tilesprite/TileSprite.js#L303
Since: 3.50.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#L331
Since: 3.0.0

---

setSize

<instance> setSize(width, height)

Description:

Sets the size of this TileSprite's output region.

This does not change the scale.

If you have enabled this Game Object for input, changing the size will also change the size of the hit area, unless you have defined a custom hit area.

Parameters:

name	type	optional	description
width	number	No	The width of this Game Object.
height	number	No	The height of this Game Object.

Overrides: Phaser.GameObjects.Components.ComputedSize#setSize

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

Source: src/gameobjects/tilesprite/TileSprite.js#L575
Since: 4.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#L365
Since: 4.0.0

---

setTilePosition

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

Description:

Sets the horizontal and vertical scroll position of the tiling texture, updating Phaser.GameObjects.TileSprite#tilePositionX and Phaser.GameObjects.TileSprite#tilePositionY. Either value may be omitted to leave it unchanged.

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#L377
Since: 3.3.0

---

setTileRotation

<instance> setTileRotation([radians])

Description:

Sets the rotation of the tiling texture, in radians, updating Phaser.GameObjects.TileSprite#tileRotation. The texture rotates around its own origin, independently of the TileSprite's world rotation.

Parameters:

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

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

---

setTileScale

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

Description:

Sets the horizontal and vertical scale of the tiling texture, updating Phaser.GameObjects.TileSprite#tileScaleX and Phaser.GameObjects.TileSprite#tileScaleY. The scale is independent of the TileSprite's own scale. If only x is provided, both axes are set to the same value.

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#L424
Since: 3.12.0

---