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.
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.
That’s pretty cool 
…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 
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?
Just wanted to say that I also think that better handling of this in the GUI would be a welcomed addition 
. I’m eager to read the answer from the Team 
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 
Otherwise, I will look into that very soon.
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 
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 . I’d rather let you work on that launch and put stars 
in my eyes once again with the launch of v7 
… but yes, after that, it would be appreciated (at least by me) if Yours could look into this possible improvement for the BJS GUI 
Yes, that sounds correct to me. Greatly appreciate you looking into it
Finally found some time to look into it.
There is an open PR that I will appreciate if you can test - Nine patch for fox UIs with ideal width and ideal height by RaananW · Pull Request #15110 · BabylonJS/Babylon.js (github.com)
Playground to test - https://playground.babylonjs.com/?snapshot=refs/pull/15110/merge#QMQI2Z#1
this issue came back, not sure when, but whats weird is if I disable the fix done here, by setting idealRatio to 1 in _renderNinePatch no matter what, it fixes it, some maybe the issue was fixed twice somewhere else and now this is broken?