Issues with stretching a hexagon

Trying to 9 Slice a Hexagon Image, heres what I’m trying to replicate.

It works fine with smaller sizes

image

But after a certain size I guess 9 slice starts stretching the y-axis.

image

This is intended function of 9-Slicing. However, I’m wondering if there is a method to stretch the X-Axis and not the Y-Axis.

1 Like

you could try cropping the ends off the hexagon in a photo editor and just insert them both as images then set their positions correspondingly at the ends

1 Like

You probably set the SliceCenter for the Y axis incorrectly. Change the minimum Y to 0 and the maximum Y to the height of your image :slight_smile:

1 Like

Thanks it seems to work better.

image

So I tried testing it and this came up.

image

When the Y Size of the ImageLabel is smaller than the Y Size of the Image, it starts to clip off. The image size is 100x100 and the ImageLabel’s Y was tested at 75.

If all else fails, you can always split your frame into three parts:

image

The red numbers are the width of each part of the frame, assuming that the width of each triangle is 20 pixels. The blue numbers are their horizontal positions.

2 Likes

Will try and use it as a last resort, there no way to fix the clipping with 9 slice?

Only possible solutions I have are shrinking the hexagon size, but quality loss is bound to happen.

What does your source image look like? You should be able to upload an image that is essentially just the slanted corners and then slice through the center. Say your source image is 20,20 in size you could set your slices to be at (10,10) and (10,10).

Slices(9) will always try to preserve the height of non-scale areas, so will be legit that it get clipped when your height is smaller than slice center.
Suggestion from me would be switching your slice center between above method 1 and 2 when your rect size exceeds(2)/within(1) your texture height.
Suggestion from our experienced designer is that you have multiple size images and switch to a lower res one when needed.