当 PIXI.Sprite 到达某个位置时如何动态更改 PIXI.Sprite 的纹理 - Pixi.js？答案

【问题标题】：How to dynamically change texture of PIXI.Sprite when PIXI.Sprite reaches certain position - Pixi.js?当 PIXI.Sprite 到达某个位置时如何动态更改 PIXI.Sprite 的纹理 - Pixi.js？
【发布时间】：2019-10-02 09:31:08
【问题描述】：

我有一个扩展 PIXI.Sprite 的类。在这里，我最初创建了精灵。我使用的纹理是一个精灵表，我通过为纹理创建随机帧来从这个 spritesheet.png 的随机部分创建精灵。在那里我添加了 10000 个精灵并将它们随机移动。然后我将 PIXI.Sprite 类添加到另一个扩展 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 碰到窗口边框时，我调用 PIXI.Sprite 类中的方法更改纹理：

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();
}

我尝试了不同的方法。当我在更改纹理后对纹理进行控制台记录时，我看到框架和原点已更改，但未渲染新纹理。

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

【问题讨论】：

我达到了一种状态，即所有精灵的纹理只有在第一个创建的精灵被破坏后才会改变。此外，所有新纹理都是相同的，这不是我在代码中所做的......

标签： animation pixi.js

【解决方案1】：

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

【讨论】：