GUI 9 Patch stretch not working well with adaptive scaling

With adaptive scaling, Babylon js will preserve the edges/corners of a 9-patch GUI image.
This is causing problems as my entire GUI is scaling down but the corners and edges of the 9 patch are not.

You can test this by adjusting the size of the window here:

Is there a workaround to make sure the edges also scale with adaptive scaling, is there something I’m missing altogether?

cc @RaananW

I believe the babylon.js 9-slice defines corner/edges in terms of pixels on the original image. You probably want the scaling of those slices to be relative to the adaptive scaling that gets applied to GUI elements when setting idealWidth/Height? Is that correct?

Relevant docs:

I don’t believe adaptive scaling of the slices is built-in to BJS, but others will have a more definitive answer.

1 Like

You probably want the scaling of those slices to be relative to the adaptive scaling that gets applied to GUI elements when setting idealWidth/Height? Is that correct?

Yes that is exactly correct.

I don’t believe adaptive scaling of the slices is built-in to BJS, but others will have a more definitive answer.

Looks to be the case, was hoping someone else had run into this problem and has a workaround.

Perhaps you can scale the 9-slice image independently, instead of relying on the idealSize adaptive scaling to do it for you?

Here is an example:

This playground sizes the GUI slices according to original image resolution upon load. This is probably not what you want, but helps to show the demo. In real use, you would want to size to whatever makes sense. But for this demo, if the window is then resized, it will scale the slice image up/down within minimum and maximum limits, independent of the GUI element itself.

I believe this could also be combined with the adaptive scaling, but I am not able to visualize exactly what you want to happen yet. Another approach might be to dynamically scale the slices source image according to your canvas/window size before using it as a dynamic texture.

2 Likes

That’s pretty cool :heart_eyes: …and no, I also believe this is not (yet) part of the BJS GUI. Though, looking at your demo, may be the Team could build on this :thinking: cc @carolhmj

Okay, your code worked but was not respecting the aspect ratio as idealWidth / idealHeight normally does. I fixed this here, and now it’s working as it should. Here you can set the dialogue to have whatever width and height you want and it’s able to adaptively scale.

I believe this is the behavior 9-slice should have by default?

2 Likes

Just wanted to say that I also think that better handling of this in the GUI would be a welcomed addition :+1:. I’m eager to read the answer from the Team :sweat_smile:

Trying to follow up, and looking at the examples.
If I understand correctly, idealWidth and height don’t work as expected when 9 Patch is set. Scale should be set like the last example. Please correct me if I am wrong :slight_smile: Otherwise, I will look into that very soon.

2 Likes

Hum. Yes, that’s one thing. But before that, it starts with

so the request extends to both PGs above, kindly provided by the smart users of the Community (that’s not me :face_with_hand_over_mouth: of course) …but then yes, I suppose the last PG sums it all up.

We (I mean ‘I’) know that now might not be the best time for you Guys :sweat_smile:. I’d rather let you work on that launch and put stars :star_struck: in my eyes once again with the launch of v7 :child:… but yes, after that, it would be appreciated (at least by me) if Yours could look into this possible improvement for the BJS GUI :pray: :hugs:

1 Like

Yes, that sounds correct to me. Greatly appreciate you looking into it :slight_smile:

1 Like