Animation 如何在PIXI.Sprite到达某个位置时动态更改PIXI.Sprite的纹理-PIXI.js?
我有一个扩展PIXI.Sprite的类。在这里,我最初创建了精灵。我使用的纹理是一个精灵表,我通过为纹理创建随机帧,从spritesheet.png的随机部分创建精灵。在那里我添加了10000个精灵,并在随机方向上移动它们。然后在另一个类中添加PIXI.Sprite类,该类将PIXI.ParticleContainer扩展了10000倍Animation 如何在PIXI.Sprite到达某个位置时动态更改PIXI.Sprite的纹理-PIXI.js?,animation,pixi.js,Animation,Pixi.js,我有一个扩展PIXI.Sprite的类。在这里,我最初创建了精灵。我使用的纹理是一个精灵表,我通过为纹理创建随机帧,从spritesheet.png的随机部分创建精灵。在那里我添加了10000个精灵,并在随机方向上移动它们。然后在另一个类中添加PIXI.Sprite类,该类将PIXI.ParticleContainer扩展了10000倍 createTexture() { this.textureWidth = 2048; this.rectX = () => {
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;
}
当精灵点击窗口边框时,我调用PIXI类中的change texture方法。精灵:
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时,我看到帧和原点已更改,但新纹理未被渲染
有人知道问题出在哪里吗?我如何解决它?最后,我找到了我的精灵在纹理更改时不更新的原因。 这是因为我将它们添加为Pixi.ParticleContainer的子级,它的功能不如Pixi.Container,默认情况下不会更新子级的UV。 解决方案是在创建PIXI.ParticleContainer时将UV设置为true。 看起来是这样的:新的PIXI.ParticleContainer(10000,{uvs:true})。 这将解决更改未更新的纹理以及上载和应用UV的问题。
我达到了这样一种状态:只有在第一个创建的精灵被销毁后,所有精灵的纹理才会发生变化。而且所有新的纹理都是相同的,这不是我在代码中所做的。。。