CODEWITHSUNDEEP
javascriptpixi.js
The Old County
The Old County

Reputation: 109

pixijs swapping out an image without it jumping

I am working on a html 5 javascript game. It has a heavily textured background. I am looking at having one 3d background item and swapping it out on the fly. So in this instance we see a room with a closed door - then when a js event is fired - the image is swapped out to show an open door.

I am trying to create the function and although I can swap the image - I am unable to stop it from jumping.

so a new image path comes in - I null and remove the old backdrop and replace it with the new. I have read about adding it to the texture cache - not sure how to do that? Its 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;

    }
};

Upvotes: 0

Views: 1663

Answers (1)

Karmacon
Karmacon

Reputation: 3200

The reason for the "jump" is that the image being swapped in takes some time to load before it can be displayed on the screen. To prevent this, you can load the image into the TextureCache ahead of time, so when you swap images, there won't be any delay.

//set the initial backdrop image
this.backdrop = PIXI.Sprite.fromImage("Image1.png");
this.backdrop.anchor.x = 0.5;
this.backdrop.anchor.y = 0.5;
this.backdrop.scale.x = 1.2;
this.backdrop.scale.y = 1.2;

//this will store the second image into the texture cache
PIXI.Texture.fromImage("Image2.png");

//if you need to keep track of when the image has finished loading,
//use a new PIXI.ImageLoader() instead.


GroundPlane.prototype.resetBackdrop = function (imagePath)
{
    //Update the image Texture
    this.backdrop.setTexture(PIXI.Texture.fromFrame(imagePath));
};

Upvotes: 2

Related Questions