I'm currently developing a HTML5 JavaScript game with a heavily textured background. My goal is to incorporate a 3D background element that can be swapped out dynamically. For example, the initial scene may show a room with a closed door, but once a JavaScript event occurs, the image is replaced with one showing an open door.
Although I have been able to swap out the images successfully, I am facing an issue where the new image jumps during the transition.
When a new image path is received, I attempt to nullify and remove the old backdrop before replacing it with the new one. I've come across suggestions about adding it to the texture cache, but I'm unsure how to implement this since this is my first time using PixiJS.
GroundPlane.prototype.resetBackdrop = function (imagePath) {
if(this.backdrop) {
this.backdrop.alpha = 0;
this.removeChild(this.backdrop);
this.backdrop = null;
this.backdrop = PIXI.Sprite.fromImage(imagePath);
this.backdrop.anchor.x = .5;
this.backdrop.anchor.y = .5;/*
this.backdrop.scale.x = 1.2;
this.backdrop.scale.y = 1.2;*/
this.addChildAt(this.backdrop, 0);
this.backdrop.alpha = 1;
}
};