Question

我正在开发一个html 5 javascript游戏。它有很强的纹理背景。我正在寻找一个3D背景项目并在运行中交换它。因此，在这种情况下，我们看到一个房间有一个关闭的门 - 然后当一个js事件被触发时 - 图像被换出来显示一扇门。

我正在尝试创建该功能，虽然我可以交换图像 - 我无法阻止它跳跃。

所以一个新的图像路径进来 - 我null并删除旧的背景并用新的替换它。我已经读过将它添加到纹理缓存中 - 不知道该怎么做？这是我第一次使用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));
};

pixijs在没有跳跃的情况下交换图像

1 个答案: