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

Kos*_*iev 5 animation pixi.js

我有一个扩展 PIXI.Sprite 的类。在这里我最初创建了精灵。我使用的纹理是一个 spritesheet,我通过为该纹理创建随机帧,从该 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;
}
Run Code Online (Sandbox Code Playgroud)

当 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();
}
Run Code Online (Sandbox Code Playgroud)

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

有人知道问题出在哪里以及我该如何解决它吗?

Kos*_*iev 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