Disabling Image Element removes Material Data

Help & Support
#1

Hey, I have run into a bug (or maybe I’m doing something wrong), if you assign a material at runtime to a image Element, and then disable and enable the object, the image Element will return back to the initial material set in the editor.

Do anyone have a workaround for this as I need materials in our UI and we are switching between screens quite a lot.

Example: https://playcanvas.com/editor/scene/1244945

My current “fix” is to check in update, but I really dislike this approach.

TimeProgressBarManager.prototype.update = function(dt){
    if(this.entity.element.material != this.material){
        this.entity.element.material = this.material;
    }
};
#2

This sounds more like a bug :frowning:

Can you create an issue on the Engine repo please with the project: https://github.com/playcanvas/engine

My guess is that it’s related to this line of code:

    onEnable() {
        var asset;
        if (this._materialAsset) {
            asset = this._system.app.assets.get(this._materialAsset);
            if (asset && asset.resource !== this._material) {
                this._bindMaterialAsset(asset);
            }
        }
        if (this._textureAsset) {
            asset = this._system.app.assets.get(this._textureAsset);
            if (asset && asset.resource !== this._texture) {
                this._bindTextureAsset(asset);
            }
        }
        if (this._spriteAsset) {
            asset = this._system.app.assets.get(this._spriteAsset);
            if (asset && asset.resource !== this._sprite) {
                this._bindSpriteAsset(asset);
            }
        }

        this._element.addModelToLayers(this._renderable.model);
    }

If you set the element materialAsset to null, that might workaround this.

this.entity.element.materialAsset = null;
this.entity.element.material = yourMaterial;
2 Likes
#3

Thanks for the quick response :slight_smile: I’ll make a bug report asap.

setting materialAsset to null ends up resulting in only some of the materials being rendered, so think I’ll stick to the filthy hack I posted above for now.

#4

It has to be done in the order shown above. Setting materialAsset after material is set will null out the material too

#5

I did it in that order, oddly 1 out of 3 assets just stopped rendering, will look a little deeper into it but I’m about to shut down for the day.

1 Like
#6

Has been reported now.

2 Likes
Assigning a custom material to UI Element