TilingSprite

Usage

<script>
  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 }
  })
</script>

<TilingSprite
  texture={PIXI.Texture.from('/assets/tiling-sprite.jpeg')}
  {tilePosition}
  {scale}
  width={400}
  height={400}
/>

Component API

Props

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

Slots

Name	Props	Fallback
default

Events

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`

Previous Ticker