animation - 动画 - 如何在PIXI.Sprite达到一定位置Pixi.js时动态改变PIXI.Sprite的纹理?

55 3

我有一个PIXI.Sprite扩展类,我开始创建sprite ,我使用的纹理是一个spritesheet,我为该纹理创建随机帧,从spritesheet.png的随机部分创建sprites ,我添加了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();


}



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

有人知道问题在哪里,我该如何修复它?

时间: 原作者:

101 2

最后,我发现了我的精灵没有更新纹理变化的原因,解决方案是在创建PIXI.ParticleContainer时将uvs设置为true ,看起来像这样:new PIXI.ParticleContainer({ uvs : true }),这将解决更改不更新纹理的问题,并上传和应用uvs。

原作者:
...