Pixi.js: Question: How to update source image of baseTexture for v5

[abdullah]

I have been refactoring my code base from 4.8.7 to 5.0.0-rc.3. The BaseTexture class has been changed. There was updateSourceImage method that I was using for regularly updating the source of texture. How can I update baseTexture source without updating /swaping Texture?

### Expected Behavior

### Current Behavior

### Possible Solution

### Steps to Reproduce

Environment

• pixi.js version: 5.0.0-rc.3
• Browser & Version: 73.0.3683.103 (Official Build) (64-bit)
• OS & Version: macOS Majove 10.14.3
• Running Example: -

[ivanpopelyshev]

In v5 all of dynamic behaviour of BaseTexture was moved to TextureResource, that way user can specify much more things related to the texture than in v4, for example create gradient resource:
https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js
Even more syntax suggar: https://www.pixiplayground.com/#/edit/CRxSABTpybY_HbFtWu6FO

If you want just notify texture that canvas was updated, its possible: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/BaseTexture.js#L442

If you want to upload new texture resource on the same place as it the old one was, its not possible:
https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/BaseTexture.js#L423

However you can extend BaseImageResource that way it supports swapping canvas or image.
https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js
https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/CanvasResource.js

[abdullah]

Thanks for your answer.

I have checked code base.
BaseTexture loads image via autoDetectResource then it returns ImageResource that loads the image.

I have refactor updateSourceImage from

PIXI.utils.clearTextureCache();
const url = await this.fetchImage();
this.texture.baseTexture.updateSourceImage(url);
next();

to

PIXI.utils.clearTextureCache();
const url = await this.fetchImage();
this.sprite.texture.baseTexture.resource.source.src = url; // Source is HTMLImageElement so I can reassign src property.
await this.sprite.texture.baseTexture.resource.load(); // Force to re-load.

Swapping texture causes flashing on the scene. My new question is that does it causes any problem?

[ivanpopelyshev]

There's no guarantee, when I made new ImageResource, that was not my focus, Unfortunately, I didnt think what happens if someone swaps the source. I thought about createImageBitmap and a few other things. To get you an answer I need extra research and that takes time, and I believe that's your work.

SUMMARY: I have no idea :)

[abdullah]

Pixi is a great and powerful library so thanks for your effort and answers :)

[ivanpopelyshev]

@abdullah you were right, I'm actually adding support for source change.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.