Trying to figure out how to do my own 9-slicing

Development Programming & Scripting UI
, , , , , , , , , , , , ,
1

I’ve found that Unreal’s basic 9-slicing tool for images and UI materials seem pretty bad, or I’m just not understanding how it works.
I want to make my own 9-slicer because i feel hampered by the tools that are out there already, but for the life of me i can’t seem to find any good information on how to do it.

So the question is, how can I separate an image or material into it’s segments based on inputted margins? Is there a resource somewhere I’ve not found yet that can help me discover what I desire?

I’ve already found the ultimate SDF resource in Indigo Quilez (Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more), and i want to combine the awesomeness of his work with a well crafted 9-slicer.

2

Which specific aspect of the built-in solution is not working for you? Any examples?

Things to note:

  • margins are percentages
  • in Border mode use the smallest image dimensions you’ll ever need and only scale up
  • not all images can be 9-sliced
  • when working with materials, don’t forget to set Image Size (256x256) below - it will affect how the material behaves

image
image1605×709 129 KB

The margin of .1 is enough in this example, as 10% of the edge is just enough to exclude from scaling.

It will always break at very small sizes as there’s not enough pixels to work with.

1 Like
3

Wow i did not get any notification that i was replied to!

Thanks for the reply and demonstration! This cleared up some of my confusion, after a bit of messing around with it.

Something i noticed was that you’re using a canvas panel here, and when i try using that as well and move stuff around and fiddle with material sizes and such, it works pretty well. However, it doesnt seem to work the same without a canvas panel. I generally try to avoid stacking canvas panels, so i guess thats why im having issues with it. it seems to be visualized much differently outside a canvas panel.

What i’m really looking for, is how to make a 9-slicer using materials. I want to be able to take any image i want, use it as a material texture, and then manipulate parameters to scale the material itself without using the default 9-slicer. this way, i can make all my stuff work within my lower level widgets, and they can work perfectly no matter where i design the widget, and without using canvas panels.

4

Canvas here to demo only - for the dramatic and visually convincing effect. :innocent:

A widget needs Desired Size, it comes from a parent - be it a border, a size box, a canvas, or directly from the viewport, or anything, really. The child conforms to it.

Admittedly, the behaviour of a material being 9-sliced is slightly different than that of a simple image. Perhaps you could provide an example of what is not working as expected.

Somehow I feel you’d reinvent the wheel and end up with what the 9-slicer does. One way or another, it’s just a bunch of math - you could take apart the existing solution, see what it does (wrong).

5

I had tried doing the same thing in the canvas, and doing it by manipulating a sizebox and i got different results. Trying again and now it works similarly. idk, maybe i did something wrong before.

Ill need to mess around with stuff a lot more.