Jump to content

Basetexture image resource source update on the fly

Arin D

Recommended Posts


I am trying to update the basetexture source with different images at different points in my game. In pixi 4 it was easy, we could use  BaseTexture.updateSourceImageO , but in Pixi 5 we dont have this at all.

Is there any straight forward way to do it in Pixi 5 ? I havent found any s far.

Migration to pixi 5 is stalled due to this. Any help is much appreciated.



Link to comment
Share on other sites

did you look at "baseTexture.resource"? you can create baseTexture out of your own resource or one of pixi classes, and that'll make loading behaviour. Please provide full minimal example if you want exact help, which classes to use, how often do you want to update source, whether its canvas or image, e.t.c.

Link to comment
Share on other sites

i did look at baseTexture.resource.

Here is the details,

using pixi 5 legacy.

myrenderer = new PIXI.autoDetectRenderer
load external graphics using XMLhttpRequest, 

create a new Image() from a blob created from  XMLhttpRequest response
const myTexture = new PIXI.BaseTexture(created image)

create a sprite, using the texture, addChild to the parent container, gets rendered.

so far so good,

I load another texture using  XMLhttpRequest, create new image again then

myTexture.resource.source.src = newly created Image

Nothing happens now, dont see the sprite texture updated




Link to comment
Share on other sites

Its not possible anymore to just change it. According to https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/textures/resources there's a special logic that helps to use createImageBitmap if needed, and because of that code is scrumbled that way .. its just not possible.

Maybe its possible to hack BaseTexture and allow to change current resource to another BaseImageResource / ImageResource. Maybe just simple "texture.update()" (Texture, not BaseTexture) will work for you.

Anyway, that research is yours, you are the only one who used undocumented feature that way.

Link to comment
Share on other sites

Got a work around , but how I wish BaseTexture.updateSourceImage() was never truncated, such useful convenient APIs are used by many developers and we dont we expect them to vanish overnight with a version upgrade. 

Thanks anyway.




Link to comment
Share on other sites

Sorry for the delay in response, nothing fancy,

const listener = async () => {
baseTexture.resource.source.removeEventListener('load', listener)
await baseTexture.resource.load()
baseTexture.resource.source.addEventListener('load', listener)
baseTexture.resource.source.src = newcontent.responseURL
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...