使用Pixi.js在雪碧图上创建拖尾效果(V4)

// 创建Pixi应用程序实例
const app = new PIXI.Application();

// 将Pixi应用程序添加到HTML文档中的某个元素中
document.body.appendChild(app.view);

// 加载雪碧图纹理
PIXI.loader.add('sprite', 'path/to/sprite.png').load(() => {
  // 创建精灵对象
  const sprite = new PIXI.Sprite(PIXI.loader.resources.sprite.texture);

  // 设置精灵对象的位置和尺寸
  sprite.x = 100;
  sprite.y = 100;
  sprite.width = 50;
  sprite.height = 50;

  // 创建拖尾效果的数组
  const trailSprites = [];

  // 更新函数
  function update() {
    // 清空画布
    app.renderer.clear();

    // 更新拖尾效果的精灵对象
    for (let i = 0; i < trailSprites.length; i++) {
      const trailSprite = trailSprites[i];

      // 更新位置和透明度
      trailSprite.x += 1;
      trailSprite.alpha -= 0.01;

      // 绘制精灵对象
      app.renderer.render(trailSprite);
    }

    // 添加当前精灵对象的位置和透明度到拖尾效果的数组中
    const trailSprite = new PIXI.Sprite(sprite.texture);
    trailSprite.x = sprite.x;
    trailSprite.y = sprite.y;
    trailSprite.alpha = 1;
    trailSprites.push(trailSprite);

    // 限制拖尾效果的数组长度
    if (trailSprites.length > 30) {
      trailSprites.shift();
    }

    // 绘制当前精灵对象
    app.renderer.render(sprite);

    // 循环调用更新函数
    requestAnimationFrame(update);
  }

  // 开始循环调用更新函数
  update();
});