[GUI] STRETCH_NINE_PATCH Tutorial

nine patch slice is px? percent?
passible change that 512px X 512px => 80px X 80px ?

BABYLON.GUI.Image.STRETCH_NINE_PATCH: Scale the image using a nine patch technique. You have to either define the sliceLeft, sliceRight, sliceTop and sliceBottom properties or store data into your image (in the first and last rows and columns) and call image.populateNinePatchSlicesFromImage = true to read that data. Demo here -

https://www.babylonjs-playground.com/#G5H9IN#2

thank you!

In pixel based on the original image size to be independant from rescale.

I want show you example at playground…

BABYLON.Tools.LoadImage(
    'https://github.com/nedcrow/babylonStudySamples/blob/master/TestResource/box.png',
    ()=>{alert('aa');},
    ()=>{alert('bb');}
);

I can’t load Image.

or can just do this?

var image3 = new BABYLON.GUI.Image("but", 
"https://github.com/nedcrow/babylonStudySamples/blob/master/TestResource/box.png");

can you show me an image3 at this playground?

https://www.babylonjs-playground.com/#G5H9IN#4

Hi. Take a look at how to import external assets
https://doc.babylonjs.com/resources/external_pg_assets#using-rawgithubusercontentcom
Then your pg will work
https://www.babylonjs-playground.com/#G5H9IN#5

1 Like

Thank you!
I’m idiot.
I should have looked closely.

‘github => raw.githubusercontent’ & minus ‘blob’

It was really simple, but I was lazy.
Anyway Thanks again!


Now,

I want ‘ㅁ’ shape.
By the way, why not ‘ㅁ’ this image’s shape.
reason is pivot of slice part’s?

https://www.babylonjs-playground.com/#G5H9IN#5

https://www.babylonjs-playground.com/#G5H9IN#9

Bottom and right should be from origin. Also I would advise to use 2px wide band to prevent interpolation on 0.5 px.

ah!
Okey i understand!
I had to know that origin size!
Thank you! And your car look so great! :+1:

Lol the car was my first ever attempt to PBR :slight_smile: in Babylon and in 3D in general.