Pixi纹理精灵和动画实现

<template>
  <div>

  </div>
</template>

<script setup>
import * as PIXI from 'pixi.js'
const app = new PIXI.Application({
  width:window.innerWidth,
  height:window.innerHeight,
  backgroundColor:0x1099bb,
  resolution:window.devicePixelRatio ||1,
  antialias:true, //抗锯齿
});
document.body.appendChild(app.view);

// 创建纹理
const texture = PIXI.Texture.from("./texture/剑.png")

// 创建一个精灵
const sprite = new PIXI.Sprite(texture)

// 设置精灵锚点
sprite.anchor.set(0.5, 0.5)

// 设置精灵的位置
sprite.x = app.screen.width / 2
sprite.y = app.screen.height / 2

// 设置精灵旋转45度
sprite.rotation = Math.PI/4

// 设置精灵缩放
sprite.scale.set(2, 2)

// 设置精灵透明度
sprite.alpha = 0.8

// 设置精灵的锚点
 app.stage.addChild(sprite)

// ticker实现动画
app.ticker.add((delta)=>{
  sprite.rotation += 0.01 * delta
})



</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
</style>