如何在 PIXI.Sprite 到达特定位置 - Pixi.js 时动态更改 PIXI.Sprite 的纹理？

Question

我有一个扩展 PIXI.Sprite 的 class。在这里，我最初创建了精灵。我使用的纹理是一个 spritesheet，我通过为纹理创建随机帧来从 spritesheet.png 的随机部分创建 sprites。在那里我添加了 10000 个精灵并在随机方向上移动它们。然后我将 PIXI.Sprite class 添加到另一个 class 中，它扩展了 PIXI.ParticleContainer 10,000 次。

 createTexture() {
    this.textureWidth = 2048;
    this.rectX = () => {
        let number;
        while (number % 32 !== 0) number = Math.floor(Math.random() * this.textureWidth) + 0;
        return number;
    }
    this.rectY = () => {
        let number;
        while (number % 32 !== 0) number = Math.floor(Math.random() * 128) + 0;
        return number;
    }
    this.initialTexture = PIXI.Texture.from(this.resources[assets.images[0].src].name);
    this.rectangle = new PIXI.Rectangle(this.rectX(), this.rectY(), 32, 32);
    this.initialTexture.frame = this.rectangle;
    this.texture = new PIXI.Texture(this.initialTexture.baseTexture, this.initialTexture.frame);
    this.texture.requiresUpdate = true;
    this.texture.updateUvs();
    this.timesChangedVy = 0;
}

当 Sprite 碰到 window 边界时，我在 PIXI.Sprite 的 class 中调用更改纹理的方法：

changeTexture() {
    let newTexture = PIXI.Texture.from(this.resources[assets.images[0].src].name);
    let rectangle = new PIXI.Rectangle(this.rectX(), this.rectY(), 32, 32);
    newTexture.frame = rectangle;
    // this.texture.frame = rectangle
    this.texture = newTexture;
    // this.texture = new PIXI.Texture.from(this.resources[assets.images[0].src].name)
    // this.texture._frame = rectangle
    // this.texture.orig = rectangle
    // this._texture = newTexture
    // this.texture = new PIXI.Texture(newTexture.baseTexture, rectangle)
    this.texture.update()
    this.texture.requiresUpdate = true;
    this.texture.updateUvs();
}

我尝试了不同的方法。当我 console.log 更改后的纹理时，我看到框架和原点已更改，但未渲染新纹理。

有人知道问题出在哪里吗？我该如何解决？

Answer 1

最后，我找到了我的精灵不随纹理变化更新的原因。这是因为我将它们添加为 Pixi.ParticleContainer 的子项，它的功能比 Pixi.Container 少，并且默认情况下不更新子项的 Uvs。解决方案是在创建 PIXI.ParticleContainer 时将 uvs 设置为 true。它看起来像这样：new PIXI.ParticleContainer(10000, { uvs: true })。这将解决更改纹理不被更新和 uvs 将被上传和应用的问题。 https://pixijs.download/dev/docs/PIXI.ParticleContainer.html

如何在 PIXI.Sprite 到达特定位置 - Pixi.js 时动态更改 PIXI.Sprite 的纹理？

How to dynamically change texture of PIXI.Sprite when PIXI.Sprite reaches certain position - Pixi.js?

animation

pixi.js