Working on the UI art for my game, its hexagonal themed, and I’m struggling with it.
The idea is the hexagons have two parts, the core, which is the bulk of it, and an outline, a rim that will have varying thickness, they will also have a width, where we make the center wider, rotation, and also size.
Now the issues I’m facer are:
- The rim.
this rim is giving me trouble, notably adjusting its thickness, I tried using another bigger hexagon behind the first to be the rim, but when adjusting the size and with of it the rim thickness wasn’t regular. and please note I want the rim to be independent of scale, so if there’s two hexagons of different sizes with their thickness set to the same thing, the rims would appear the same thickness, not how ever many times different the scale is.
I’m thinking I’ll need like a vectorized image or something for it, but I’m not sure, any advice? (you can see what I’m looking for with rim thickness in the bottom right column of the image).
- The width.
So I want to adjust how wide it is, but not like increasing the scale along that axis, which would warp the hexagon, but just increasing how wide the middle of the hexagon is (shown in the second column), now from what I could find this is called “3-slice scaling”, but Unity doesn’t have that, but it does have “9-slice scaling”, and I tried to fake 3-slice scaling with it by putting the vertical dividers in various spots, but nothing worked.
Anyone have any advice of how to do this?
See the idea is I’d make something, a prefab or whatever, that would have a script with a collection of variables (notably so if it is like two images their variables can be adjusted together):
- Scale, how big the hexagon is (column one).
- Width, how wide it is (compare with column two).
- Rotation, the rotation of the hexagon (see column three and compare).
- Thickness, which is how thick the rim should be (column four).
- Core color, the color of the inner part (upper right).
- Rim color, the color of the outline rim thing (also upper right).
And then I’d take this prefab thing, and arrange it around the canvas, adjusting the variables to get what I want. and then the colors would also change in game (I already have code for that, it’s just the outline and width that’s giving me trouble), and it’d just work.
notably the reason I wanna make this special image instead of just making custom sprites for each UI element, is that the UI’s all have this hex theme (or simple squares and circles) so it will be very reusable for all the UI’s, and notably will allow for any changes to the design and layout to be done easily, where if I made a sprite for each bit I’d need to make new ones if I changed that bit, but with this I just adjust it.
Also in the center of the image you can see the idea for the UI, showing how these simple hexagons can make the shapes I want. compare with the top left of the image for how it will look without the overhang (yes I’m aware the angles are different from the sketch). but this does require the sprites to go off the visible part of the canvas, and I haven’t tested if the canvas allows that, so uh, does it allow you to have an image hanging way off it and only having part of the sprite be visible, or does it insist on keeping the whole thing in the canvas?
So yeah, how to get a sprite with 3-slice scaling, is that what I want, or would something else work?
And how to adjust the outline thickness, do I need a vectorized thing, and if so how? Or would something else work, and if so what, and how?
And tips, advice, or recommendations like learning resources or tools?
Please and thank you