javascript - pixjs 交换图像而不跳跃

Question

我正在开发一个 html 5 javascript 游戏。它有一个纹理丰富的背景。我正在考虑拥有一个 3D 背景项目并即时交换它。因此，在本例中，我们看到一个门关着的房间 - 然后当触发 js 事件时 - 图像被交换以显示一扇开着的门。

我正在尝试创建该函数，尽管我可以交换图像 - 我无法阻止它跳跃。

因此出现了一个新的图像路径 - 我将其清空并删除旧背景并将其替换为新背景。我已经阅读过有关将其添加到纹理缓存的内容 - 不知道该怎么做？这是我第一次使用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;

    }
};       

Answer 1

“跳转”的原因是换入的图像需要一些时间才能加载才能显示在屏幕上。为了防止这种情况，您可以提前将图像加载到TextureCache中，这样当您交换图像时，就不会出现任何延迟。

//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));
};