Change image ui sprite in runtime

Help & Support
1

Hi, playcanvas developers.

I find unexpected behaviour with ui image and sprite field with using mobile browser. When i change sprite field like this this.entity.element.sprite = this.spriteAsset.resource; in initialize function all work fine, but when i change sprite field after initialize changed sprite look incorrect.

example project PlayCanvas | HTML5 Game Engine

2

Hi @top_player112,

Could you elaborate on what looks incorrect? Also, you can create a sprite asset with multiple frames and then cycle through sprite frame, or make an animated sprite asset with all of your frames.

3

Hi,

I finding different behavior with changing sprites on pc browser and mobile browser. On pc browser all looking fine, but on mobile browser sprite look different (with different sprite sheet offsets). I using Xiaomi Redmi Note 8 and chrome browser.

4

Do you have a reproducible project you can share for people to try and reproduce?

Sprite sheet offsets shouldn’t change between platforms :thinking:

Edit: Oh sorry, I didn’t see the ink above

5

Hi @top_player112, @yaustar,

I tested the above link with Firefox Mobile and it works normally, but it does look off on Chrome Mobile. I’m wondering if updating the asset resource instead of the spriteFrame has anything to do with it.

6

I think I know what’s going on. The texture size dimensions are more than 4K which is usually the texture size limit on mobiles so it gets downsized to a fit the limits :thinking:

Looks like the sprite offsets don’t do handle that well and assume the original dimensions?

7

I’ve downsized the sprite atlas here to check and it looks better here. I will file a bug in the engine though as this is not a scalable fix.

https://playcanvas.com/editor/scene/1138022

Edit: Filed a bug: https://github.com/playcanvas/engine/issues/3119

Looks like it only happens on UI elements, not normal sprites :thinking:

8

Thank for operative work :sweat_smile: