Change Text Element Into Image

Help & Support
1

Hi all,

I’m running into some trouble dynamically swapping a text element into an image element. A provided example that should work is here: https://playcanvas.com/editor/scene/945531

My best guess is that the swap isn’t getting marked as dirty by whatever does redrawing, which you can also see in the editor by simply swapping the element to an image element and then adding a texture. However, if after you do that, you tick the ‘Mask’ option on and off, it will appear. I presume that it’s because setting a mask triggers a redraw.

I might also be approaching this incorrectly, but either way, does anyone know how it can be solved?

1 Like
2

Hi @TingleyWJ,

I am not sure if it’s doable to just edit the element type, that needs some digging.

But I think you can definitely remove and re-add the component:

    this.entity.removeComponent('element');
    
    this.entity.addComponent('element', {
        type: pc.ELEMENTTYPE_IMAGE,
        textureAsset: pc.app.assets.find('Arrow.png')
    });
3

Looks like it doesn’t actually set up the rendering until you re-enable the component or entity.

Change the type, disable and then reenable the component should work.

2 Likes
4

Good point, the following code seems to be working on the example project posted:

    this.entity.element.type = pc.ELEMENTTYPE_IMAGE;
    this.entity.element.textureAsset = pc.app.assets.find('Arrow.png');
    
    this.entity.element.enabled = false;
    this.entity.element.enabled = true;
5

This fix does indeed work, but now I’ve run into another issue:

I’m attempting to use a sprite that I’ve cut from a sprite sheet, and in my main project (not the example one), it keeps spitting out the error:

WebGL: INVALID_VALUE: uniform1iv: no array

I’ve updated the example project to replicate the issue, but it also adds the following error (in addition to the error above):

[.WebGL-000001ACB5C01010] GL_INVALID_OPERATION: Mismatch between texture format and sampler type (signed/unsigned/float/shadow).

The latter of which pings on <!DOCTYPE html> if you follow the debug.

6

Is this with any UI element, or specifically one that went from text to image?

Honestly, it sounds easier to just use 2 entities and swap between the two.

7

Specifically one that has been swapped from text to image.

Probably is. I’ll give it a go - was just trying to do a swap for convenience, but clearly this is anything but.

Update - Just having another entity already set up as image works fine.

8

That sounds like a bug. I have to remember to add it to the GitHub repo, thanks!