How can my user widget's images in buttons and borders be displayed on mobile platform?

Development Programming & Scripting UI
, , , , ,
1

Hello,

I am experimenting with user widgets on the Android platform. I have a simple in-game user interface (score display and pause button). The UI functions well on PC platforms, as the following (notice the pause button on the right):

117322-pc.png

Unfortunately, on mobile platforms (tested with Android and HTML5 platform) the user interface doesn’t work quite as well: The buttons and border disappeared.

117323-mobile.png

The pause button (right) is anchored on the top-right corner of the screen. It is not moved. It appears sometimes for brief periods of time, a blip, sometimes longer, a few seconds, and disappear again on mobile. Other full screen menus work fine. Other small borders or buttons with other anchor configuration have this problem too. I haven’t quite found a similar answer for this issue on the hub.

How can my user widget’s images in buttons and borders be displayed on mobile platform just as they are on PC with a consistent user experience?
Thank you for your support!
-F

2

After several days (!) of troubleshooting and recreating the issue I was finally able to fix it.
For a border or a button using an image (UI material from texture), the brush of the border must not have a null alpha (aka fully transparent). A very small value for the alpha of the brush for the border or button containing the image will do the trick and properly display on mobile platform.
That would be a defect.