Image "Draw as box" depends on resolution?

Hello everyone.
I redcently encountered a problem that I had to add a 9-patch image which should support horizontal “extension” to UI. During implementation I had to change image resolution from 128x128 to 512x128, and I noticed two things:

  1. With higher horizontal resolution, image starts applying 9-patch on higher width: with 128x128 it started working at around 108 width, but with 512x128 image was stretching until 416. Is there some logic behind such behavior? And is there a way to make 512x128 to 9-patch starting from same width as 128x128?
  2. Overall image scale is concerning: lines of 128x128 looked quite thick, but lines from 512x128 are lot thinner. Is it somehow related to the first question? And is there a way to make them look the same?
    Attached screenshots with image params and files I used for images.

Hexagon1.psd (29.4 KB)
Hexagon2.psd (47.2 KB)


Unreal has no real 9-patching like unity’s 9-slicing.

Unreal takes the corners as they are and stretches everything according to your margin settings.

What you do with that is:

on a 128x128 Image, a Left margin of 0.25 would be 32px from the left
while on a 512 width image, it would be at 128px from the left

The margin is the percentage of All pixels in width and height, you want to stay fixed on screen, while all in between stretches.

a margin of left and right of 0.25 would mean on a 512px image, the left 128px stay, the right 128px stay… and the center 256 pixel stretch.

Yes, that’s how it should work, but the issue is that these 128px on left and right in 512 image are stretching, while I expected that they stay in place and stretch only the center.
That’s what confusing me, as I thought that left and right parts (in my case) should alway be static - 32 for 128x128 or 128 for 512x128, they shouldn’t stretch, but as I displayed on screenshots, 512 still has it stretching until reaching certain threshold.
Just for information: for 128x128 and 512x128 margin 0.4 should fully cover these “side arrows” which stretching I’m talking about.

i see…
you try to use a 512x128 image in a lower size than the image is made in…
your margin/box/border images always should be in the lowest resolution needed…

f.e. if i want to use buttons in a size of 32x32, i won’t use images as frame, that are bigger than 32x32 (mostly smaller)…
same goes for 128x128 buttons… images max size should be less or equal that.

else… it can confuse the margin and stretch or compress images…

Now it makes sense. So just in case, did I get it right that in 2nd point in the question (regarding thickness issue) is caused because first image already has enough “horizontal scale” fitting the size while second one is too small and thus is “compresed”, making it look like it has thinner lines?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.