Hi, I’m trying to make the UI for my game but after setting up the buttons in a horizontal box, and set each button to ‘Fill’ and aligned to the centre to keep their original size and spread them out equally, but one of the buttons is being squashed because the image is too large, although when the Size is set to Auto there’s plenty of room to fit all buttons, instead it’s laid out like this, so all of their centres are equally spaced out rather than being spaced out equally in between each one, but all filling their required space. How do I get the result I want?
Hi man
not fully sure to understand, but here a stuff.
Next to fill there is a value, that you can set for every image
if you let that number to 1, every image will take a 1 slot, so the box will be divided by the sum of all these slots.
Lower example
all images are set to 1, equidistant and same size
MiddleLow example,
i set only 1 image to 3, so that will be large 3 slot, and the other images to 1,
so the box will be large 5 (3+1+1) , and the bigger image will take 3 spaces.
Mid up example
Here i set the images to 5 , 7 and 8 , so there are 20 spaces (shown one by one by the upper row)
and so i have the fist image large 5, the second 7 and last 8.
You should be able to place your buttons tweaking this , am i right?
Hi, thanks for the reply, I understand all of that, but what I’m trying to do is have each button keep the original size of the image used for it, and spread out equally, like in the Photoshop example I made for my UI here:
Something like this, where it doesn’t stretch or compress any of the images to fit, but spaces them equally to fill out the horizontal box, no matter what size each element is, and always keeps the gaps between them the same size, like this:
First row, just for scale, the circles are 100 pixels, and the horizontal box’s length is 600
Second, equally distanced between all of the elements if it accounted for looping, so there’s always a 100 pixel gap between each one
Third, equally distanced but not including a loop, so from the edges and in-between each one is the same distance
Fourth, same again but with 4 elements instead of 3
Fifth, this is closest to what my UI is meant to be, with different sized images, but still all equally spaced out and retaining their original size.
Currently all of their sizes are set to 1 on the fill thing, so they should all be 1x their original size, which they are for all of them except the ‘Inventory & Crafting’ one, that one is being compressed so the just the centre point is equally distanced, like this:
And because the image for the ‘Inventory & Crafting’ button is too big to fit in the gap left over when the centres are equally distance, it squeezes it in there.
I’m also trying to do it here for my Equipment panel, and I have the Slot widget set to custom size 56x56, but it just stretches them all out to fill the entire horizontal box instead of retaining their original shape and size. I’ve tried it on Auto and Fill, and when changing the value to fill on this one it also compresses the height even more and I can’t seem to make them square so I can at least pass it off as looking okay.
Hi man, i think you have to use Auto , and leave the correct size of the images.
Here i place some images of different size in a horizontal box, as you can see ,
You can set auto , and add some padding on the side, this will leave all sizes as they are, ignoring the size of the horizontal box or canvas,
they just respect size and padding.
If your images are not perfectly fitting you game size (And its a thing that can happen on different device with different resolution)
You can Wrap all inside a Scalebox, as you can see, the size of these images (on the name on the left)
are way too big , but putting them inside a scalebox, they will be all resized to best fit the area of the scalebox,
Both H or W
And setting them all to Auto retains the correct size, but it puts them all right next to each other rather than separating them equally, it looks like I might just have to do it manually and count the pixels in-between each button in the Photoshop document and use spacers, but that just seems stupid, surely there must be a way to equally distance them without all of this messing about, haha, it seems like something that would be used fairly commonly
Hi man,
Stolen your image, as you can see XD
i just dropped the images in the horizontal box, put them to auto(their correct size,)
All in “fill alilgn” and some padding on the left for all.
Thank you, that does the job, still not automated so I still have to count the pixels in-between but it will do, haha
Edit: Ignore that, it works fine until I go full screen, then there’s just a huge gap after Social, I even tried it with Horizontal Alignment centred and it just pushed everything to the right a bit more, and I tried using the Render Transform Translation but that didn’t work either
