Jump to content

Change background image


Recommended Posts


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



Link to comment
Share on other sites

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 ?


Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...