How do I scale a circular GUI to always stay on screen?

[me7474]

I have a hotbar GUI at the bottom of my screen that needs to stay circular as it will rotate and if it isn’t round it looks odd. Ive achieved this size using a UIAspectRatioConstraint but I can’t figure out how to keep it onscreen.

pictured above is the aspect ratio I designed it at, I would like it to look like this give or take on all screens, especially mobile as you can’t hotkey mobile and its important for the buttons to be easy to press.

as you can see on most phones (top image) its too small and low, on most ipads (middle) its so low its not visible and on most laptops (bottom) it is again small and low. I am still semi new to GUI work and am at a loss here, anyone know how I can scale it in a way that works for all aspect ratios?

[Reditect]

Is it one Frame that controls the Rotation of the circle?

i feel like that’d be the best approach here. Have the background be transparent and the pivot point/center/position of the Frame be the middle bottom of the screen. That should be {(0,0.5),(0,1)} I think. So, when the Frame rotates, it’s technically just one thing turning but it visually looks like all of it moving.

Or, if you don’t want a half circle on the screen (bigger radius), I think I’d be as easy as accounting for the offset from the center-bottom of the screen.

[me7474]

that’s the current setup I have, anchorpoint is 0.5, 0.5 and it rotates and plays fine when scaled properly. The thing I am more looking for help with right now is getting it positioned/scaled right (especially positioned) on all devices; I can’t find any config using scale and offset that keeps the portion I want onscreen and also keeps the width:height ratio 1:1

[Reditect]

Hmm. Keeping UI similar for different screens is a common issue, but I can’t remember solutions at the moment.

I usually only use Scale, and not offset, but I remember many saying to use a mix. I looked it up and this might help:

Mobile UI/UX for Roblox with Cindering and UndoneBuilder

I swear there was something else though, something more recent. I’ll look into it later if this doesn’t help.

[me7474]

Im pretty sure the main issue Im having is because just how much scale Im using, the cords of my main frame right now are ~{0.5, 0},{1.2, 135}. When taking into account the different aspect ratios (an iphone is nearly 2:1 while an ipad is 4:3) 1.2 vertical scale is a MAJOR difference in position.

I think I’m gonna try to write a loader that takes into account aspect ratios and repositions the GUI on game startup. I doubt it would be that hard to get a “scaled pixel”, some sort of value that moves by the same constant unit across X and Y but the unit just is tied to the screen size. The issue I think is that scale isn’t equal along X and Y, as you lower Y on a phone it lowers slower in relation to X then an ipad would. Hopefully cutting out the aspect ratio helps that.

small addon, my idea is this system would let me set the GUI x “scaled pixels” below the screen and then size it to be x/2 scaled pixels + whatever amount of scaled pixels I want to show on the actual screen. Because the vertical and horizontal sizings are in the same unit without any stretch factors from aspect ratios it should look the same on all screens (?)

[me7474]

update: works like a charm!

obviously I need to scale the text but overall seems 1:1 across devices! If anyone else comes across this in the future this is the script that fixed it:

local div = script.Parent.AbsoluteSize.X/script.Parent.AbsoluteSize.Y

script.Parent.ImageLabel.Position = UDim2.new(0.5, 0, 1 + (0.24511717274435843 * div), 0)
script.Parent.ImageLabel.Size = UDim2.new(0.732, 0, 0.732410112160143 * div, 0)

obviously you’ll need to do a tiny bit of math to get the exact numbers that go into it but it didn’t take me longer then 5 minutes.