Change background image

[Dilantha]

Hello,

Im trying to change the background image of a game built using pixijs. Im just wondering what is the best way to do it ?.  Currently im using the below method but the problem is i have to redraw all the other child elements after i change the background. Thank you

 

const parent = app.view.parentNode;
    var imagePath = "images/"+image;

    var landscapeTexture = PIXI.Texture.fromImage(imagePath);


    var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 0, parent.clientWidth, parent.clientHeight));

    background = new PIXI.Sprite(texture2);
    app.stage.addChild(background)

 

 

[ivan.popelyshev]

Hi! Maybe its 2:52AM at fault, but I dont understand whats going on here  Can you explain it further?

[Dilantha]

Hi @ivan.popelyshev

Thanks for replying. Sorry if its not clear. Let me explain further.

Im creating a simple jigsawpuzzle game and Im following the method explained in below thread .

Now i want to add a background to the game. For that im using the method i have explained in the post. My problem is, whenever i change the background image i also have to redraw the puzzle pieces again. So im wondering is there a better way to do this where i can just change the background layer without having to redraw all the pieces ?

 

[ivan.popelyshev]

You used `beginTextureFIll()` , right? And now all the graphics objects are built you dont want to rebuild them. PixiJS has great support of Texture->BaseTexture link but in this case it lacks

If your images have the same size, or supposed to be resized to the same size - you can use one RenderTexture and put it to graphics fills everywhere. Changing context is easy - just `renderer.render(myTexture, mySprite)` where mySprite is a scaled sprite with the backing texture you want.

If textures have different size, it might be that just resizing that renderTexture will work, I make that assumption based on my knowledge of how `beginTextureFill()` works. Its not an official feature, and I dont have guarantees that it will work, I just think it can: Graphics stores normalized UV's coords. On the first render (or when you call updateBatches) Graphics stores UV's and then it should not matter if you change renderTexture size.

Edited February 3, 2020 by ivan.popelyshev