Skip to content

TilingSprite

Creates a TilingSprite

<script lang="ts" setup>
import { reactive } from 'vue'
import { onTick, useScreen } from 'vue3-pixi'
const screen = useScreen()

const tileScale = reactive({ x: 1, y: 1 })
const tilePosition = reactive({ x: 0, y: 0 })

let count = 0
onTick(() => {
  count += 0.005
  tileScale.x = 2 + Math.sin(count)
  tileScale.y = 2 + Math.cos(count)
  tilePosition.x += 1
  tilePosition.y += 1
})
</script>

<template>
  <tiling-sprite
    texture="/assets/tiling-sprite.jpeg"
    :width="screen.width"
    :height="screen.height"
    :tile-scale="tileScale"
    :tile-position="tilePosition"
  />
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { onTick, useScreen } from 'vue3-pixi'
const screen = useScreen()

const tileScale = reactive({ x: 1, y: 1 })
const tilePosition = reactive({ x: 0, y: 0 })

let count = 0
onTick(() => {
  count += 0.005
  tileScale.x = 2 + Math.sin(count)
  tileScale.y = 2 + Math.cos(count)
  tilePosition.x += 1
  tilePosition.y += 1
})
</script>

<template>
  <tiling-sprite
    texture="/assets/tiling-sprite.jpeg"
    :width="screen.width"
    :height="screen.height"
    :tile-scale="tileScale"
    :tile-position="tilePosition"
  />
</template>

API

TilingSprite Attributes

NameTypeDefaultDescription
texturestring objectundefinedThe texture to use on the TilingSprite.
tile-scale

number array object

1The scale factor of the tile.
tile-scale-xnumber1The scale factor of the tile's x axis.
tile-scale-ynumber1The scale factor of the tile's y axis.
tile-position

number array object

0The offset position of the tile.
tile-position-xnumber0The offset position of the tile's x axis.
tile-position-ynumber0The offset position of the tile's y axis.
tile-transformobjectfalseWhether or not anchor and position transforms should be applied to tiles.

more props in Container Props and PIXI.TilingSprite

TilingSprite Events

NameTypeDescription
renderfunctioncustom render function

more events in Container Events