Weird black square around UI elements in responsive UI?

Questions
1

Playground: https://playground.babylonjs.com/#5X33HT#3

(The Playground doesn’t work because of a weird bug in a Textblock.initfunction(), but I can’t solve it. All of the code is there though.)

In the Playground example, I have a loading screen designed to scale to the screen’s resolution. The end result is something like this:

Capture d'écran 2024-10-16 100239

The issue is those weird squares around the ui elements. it’s not just on this canvas, even fullscreen UIs I made with the online GUI editor have this issue. In my script, I use

 const parent = CreateFullscreenUI();
    parent.idealWidth = 3840;
    parent.idealHeight = 2160;
    parent.useSmallestIdeal = true;
    parent.renderAtIdealSize = true;
    parent.rootContainer.scaleX = 2.5;
    parent.rootContainer.scaleY = 2.5;

to create the UI and set it as responsive. The rescaling itself works as intended, but at the cost of those squares. This happens both for script-based UIs and imported ones from the online GUI editor. Any help would be welcome.

2

It’s because you left the export before the function definition, I guess it’s copy-pasted from a module :slight_smile:
Here is the fix :

I have no issue on my side, though :
Screencast from 16-10-2024 10:28:29

1 Like
3

Neither do I.
But may be you changed the PG from the original. Like I can see a loose ‘rectangle’ in the hierarchy of this latest PG. Would that have been the parent. In case, you could try just set the border to 0 for the parent and also put the color to transparent. Just to play it safe.

4

Thank you for fixing the compilation error. I was in a hurry to get rid of this thing, and I wasn’t thourough with my work.

I also have no issues in the playground, no matter the screen resolution. This only happens in my project. This UI doesn’t use any custom textures, only the default GUI components. I have no idea what might be causing this.

5

But what about the background (red) color ? With the same code you have it red on your side, and transparent in the PG ? :thinking:

Weird, because that’s exactly what I was thinking of. Basically, transparent textures often cause these artifact on borders, depending on the interpolation method at rescale. (Interpolation can cause the fact that on borders the alpha is no longer exactly zero, unless it’s set to “nearest”. A very classic issue on Blender for example)

6

Hmm? Thought the same but these aren’t images. They are just an ellipse. The screenshot is a bit small to make sure, but it looks to me like each ellipse is actually drawing a rectangle (border) on the parent??!!

7

The UI in my project is red just for better readability, so that the square outlines are more visible.

So it might be the interpolation method at rescale? I did rescale all my UIs to fit without having to change their coordinates. But if this is the case, wouldn’t the artifacts be visible on all UIs, not just a select few? How do I change this property, if it is possible?

8

Then we are not dealing with the same code :wink:

9

The original UI (the one in the PG) had a color of “#000000AA”, making the artefacts more difficult to notice. I just changed the rectangle.color property to take the screenshot in my original post. Apart from that, the code is strictly identic.

10

I’m sorry to ask but why is the color ‘aa’ on the alpha in the first place, if you want it transparent?

11

I didn’t want a transparent background, just a slightly dark film over the scene in case I had some meshes to render behind the UI. I don’t think the color is relevant to the issue though, since the artefacts appear anyway.

1 Like
12

sorry again. Just for the sake of making this clear (if anyone reads it later, although as you say, likely not related) ‘color’ on a rectangle is for the border, not the ‘background’. I’m just saying because (as you may know) on resize and without the border set to zero or the ‘color’ set to transparent, it is possible to have lines drawed on the rectangle. Which I thought would be the case here. But apparently isn’t :sweat_smile:

13

Sorry, I actually meant “backgroundColor”, not just “color”, which is for the border indeed. Just a typo in my previous comment :slight_smile:

1 Like
14

For a lack of finding an alternative, the best solution I could find was givin up on the scaling and manually redimension each ui element myself, for each layout affected by these artefacts.

1 Like
15

That’s kind of sad :sleepy:. I hope the upcoming improvements to the PG allowing to load external script (and may be from react, vue or vite?) will make it easier to understand this kind of issue. It’s always frustrating when it works in PG and not in app. (for the OP of course, but also for the Team and Community) :grimacing: