Skip to content

Texture Swap

<script lang="ts" setup>
import { Texture } from 'pixi.js'
import { ref } from 'vue'
import { onTick, useScreen } from 'vue3-pixi'

const asserts = {
  flowerTop: Texture.from('https://pixijs.com/assets/flowerTop.png'),
  eggHead: Texture.from('https://pixijs.com/assets/eggHead.png'),
}

const screen = useScreen()

const rotation = ref(0)
const current = ref<keyof typeof asserts>('flowerTop')

onTick(() => rotation.value += 0.01)

function swap() {
  current.value = current.value === 'flowerTop' ? 'eggHead' : 'flowerTop'
}
</script>

<template>
  <sprite
    :texture="asserts[current]"
    :x="screen.width / 2"
    :y="screen.height / 2"
    :rotation="rotation"
    :anchor="0.5"
    @click="swap"
  />
</template>