9-sliced image in the UI 4.6 not working as expected...

Hello guys…

I’m needing help for images and buttons, using SLICED type.

Even making the cut (9-slice) in the picture, when I use the image in the GUI, I have to use a huge scale and a minuscule size, to the image borders appear. If I leave the scale 1:1, the borders are so small, that do not appear.

Some help??? =D

Left with scale, right without scale …



That’s how 9 slicing works, it takes the view that the center of the image is scale-able but the edges need to be kept at the original size.

If you want the edges to scale as well then switch off 9 slicing. Other than that you’ll have to create the Image as pretty much all edge with only a minimum center that can stretch out to whatever size but you’ll still get fairly large buttons to start with.


Well the best advice is make the center of the image tiny, as you have 2 colors make it 2 pixels wide and 2 high so you can get the darker color below the lighter one. Make the rest of your image all corners. At least that way you minimize the original image size.


I managed to solve my problem by adding the “Canvas Scaler” component in my Canvas, and changing the value of the “Reference Pixels Per Unit” property.