Creates a PIXI.TilingSprite


  import { onMount } from 'svelte'
  import { TilingSprite, Loader, onTick } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  let count = 0
  let scale = { x: 1, y: 1 }
  let tilePosition = { x: 0, y: 0 }

  onTick((delta) => {
    count += 0.01 * delta

    scale = { x: 2 + Math.sin(count), y: 2 + Math.cos(count) }
    tilePosition = { x: tilePosition.x + 1, y: tilePosition.y + 1 }


Component API


Name Type Default Description
anchor PointLike The anchor sets the origin point of the text.
blendMode The blend mode to be applied to the sprite.
Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.
clampMargin number 0.5 Changes frame clamping in corresponding textureTransform, shortcut.
Change to -0.5 to add a pixel to the edge, recommended for transparent trimmed textures in atlas
height number The height of the TilingSprite, setting this will actually modify the scale to achieve the value set.
instance PIXI.TilingSprite The PIXI.TilingSprite instance. Can be set or bound to.
pluginName string Plugin that is responsible for rendering this element.
roundPixels boolean 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.
texture PIXI.Texture The texture of the tiling sprite.
tilePosition PointLike The offset of the image that is being tiled.
tileTransform PIXI.Transform Tile transform
uvMatrix PIXI.TextureMatrix Matrix that is applied to UV to get the coords in Texture normalized space to coords in BaseTexture space.
uvRespectAnchor boolean Flags whether the tiling pattern should originate from the origin instead
of the top-left corner in local space.

This will make the texture coordinates assigned to each vertex dependent on the value of the anchor.
Without this, the top-left corner always gets the (0, 0) texture coordinate.
width number The width of the sprite, setting this will actually modify the scale to achieve the value set.

Additional props are passed on to Container


Name Props Fallback


Name Type Detail
added forwarded
click forwarded
create forwarded
mousedown forwarded
mousemove forwarded
mouseout forwarded
mouseover forwarded
mouseup forwarded
mouseupoutside forwarded
pointercancel forwarded
pointerdown forwarded
pointermove forwarded
pointerout forwarded
pointerover forwarded
pointertap forwarded
pointerup forwarded
pointerupoutside forwarded
removed forwarded
removedFrom forwarded
rightclick forwarded
rightdown forwarded
rightup forwarded
rightupoutside forwarded
tap forwarded
touchcancel forwarded
touchend forwarded
touchendoutside forwarded
touchmove forwarded
touchstart forwarded