Now the problem I am facing is the fact that the outlines are two different thickness depending on their sizes. How I made these was 2 circular images, 1 being the color (border) and then another image inside the border, made it 0.8x0.8 in size and made it white. I know why the outline appears different (because I’m using scaling) but is there anyway around this without resorting the offset? Or having to fiddle with the scalings?
I don’t want to use offset as I tried a pixel offset of 10, and it looked nice on PC, but was near invisible on xbox and was way too thick on mobile.
Honestly it isn’t a huge difference, I’m sure hardly anyone would notice. Since they are different sizes, our minds would expect it to be larger regardless.
You should be able to use 9slice (is that what it’s called? Haven’t used it in ages) to make sure the border is always the same thickness, but it would also require your icons’ images to not be terribly close to the edges.
I suggest make a separate GUIs or frames (but same UIs) for each device; desktop only, mobile only, and console only. But that would mean you need a script to check if a user is using mobile, console, or desktop device.