{"id":215,"date":"2020-07-23T22:36:18","date_gmt":"2020-07-23T22:36:18","guid":{"rendered":"https:\/\/sgarces.com\/?p=215"},"modified":"2020-07-23T22:36:18","modified_gmt":"2020-07-23T22:36:18","slug":"9-slice-control-in-ue4","status":"publish","type":"post","link":"https:\/\/sgarces.com\/?p=215","title":{"rendered":"9-Slice control in UE4"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

The Theory<\/h2>\n\n\n\n

A 9-slice control is a way to render an image that has become very popular when building UI, with widespread support. It comes down to dividing an image in 9 regions and scaling them independently. See this Wikipedia article<\/a> for more information. <\/p>\n\n\n\n

Why is this important? Consider this image:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

If we scale it uniformly, you will end up with results like this:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

However, if we split the image in 9 regions:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Then we can scale each region independently, keeping the size of the border constant and scaling the interior to fit the available space:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

9-slice in Unreal Engine 4<\/h2>\n\n\n\n

So I have good news and bad news for you. The good news is that UMG has support for 9-slice images, through the Brush interface. The bad news is that it’s pretty rigid and hard to use.<\/p>\n\n\n\n

In order to use 9-slice scaling on a Brush, you simply select Box<\/strong> in the Draw As<\/strong> option and set the Margins<\/strong>:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The Margins will specify the percentage of the image that will correspond to the slices, for each side. Unfortunately, that’s all the control you get. <\/p>\n\n\n\n

When you place an image on your UI, you’re applying a scale to change the image from the original texture size to the size it will have on the screen (at the reference resolution of 1920×1080). Ideally, you could specify the size of the slices independently, but this is not currently possible in Unreal Engine as of 4.24. The only thing that scales in the middle part<\/strong>. The size of the borders will be fixed and predetermined by the size of the original texture.<\/p>\n\n\n\n

If you want to have thinner borders, you need to create a separate, lower resolution texture. In this GIF Rectangle_thin is the same texture as Rectangle, but at half resolution:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The only way I’ve found to scale the border itself without changing the texture is using the Render Transform, which is far from ideal.<\/p>\n\n\n\n

Things get weirder<\/h2>\n\n\n\n

But wait, there’s more. Unreal provides another 9-slice mode, called a Border<\/strong>. It’s meant to work in the same way but avoid drawing the center piece. This is extremely useful to reduce fillrate when you have an image with a transparent center section.<\/p>\n\n\n\n

But Border works…funny in Unreal. Looking at the code, I can see that the implementation of Box and Border are independent (one is in FSlateElementBatcher::AddBoxElement()<\/code> the other in FSlateElementBatcher::AddBorderElement()<\/code>). And while Border has the same restriction of relying on the original texture size, it also add a layout scale that depends on your DPI Scale and even your Zoom, while working in the Editor.<\/p>\n\n\n\n

This is what it looks like when you switch between Border and Box. As long as DPI scale is set to 1.0 (I select Screen Size as Monitor 21.5″-24″ in the viewport’s top right ) the Zoom is set to 1:1, they match. But if you zoom in, they don’t:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Best practices<\/h2>\n\n\n\n

I wish the 9-slice received some love as it’s an incredibly useful tool. In the meantime, here’s what I’d recommend:<\/p>\n\n\n\n