It’s a frame, a canvas group, and a frame. I am trying to fix this problem I’m having where this type of progress bar method does not work correctly across all devices.
If you can please return this GUI file to me fixed and teach me how you did it, that would be amazing.
It works when centered to screen, but not in the corner of the screen.
On PC when you put it in the corner, it won’t size and position correctly on mobile. I need help. Thank you so much!
This issue is unique and there is very little help regarding canvas groups out there. If you looked it up first, you would have noticed that. But it’s no worries, I’m a forgiving person. If you could actually try to help me, that would be great. Thank you!
Sorry about the generalized answer.
I’m not familiar with Canvas Groups to be honest. I know that a lot of GUI size, scaling, and position elements are carried over between different GUI types. I just assumed that those Properties would carry over.
It’s okay! I assumed the same thing. It works for a decent amount of the screen but once you are past a certain area, it goes off of the screen. I don’t think you could reproduce this with other types of UI elements but I will do some testing with other elements if nobody is able to help me with this
Try to set the anchor point of the first frame. 1,1 = bottom right and 0,0 = top left. It’s basically the pivot of the GUI. Then, use the scale value of the position UDim2. Again, 1,1 = bottom right and 0,0 = top left.
I’m not sure how anchor point would help. I have all 3 elements anchor point set to 0.5, 0.5. When I move it to the center, it looks correct. When I move it to any corner in the entire screen, it goes off the screen. I need really specific instructions for each individual element. I promise you the file won’t bite. If a 5.2 KB size file was capable of being harmful, we would all be cooked
I’m currently on mobile and Roblox Studio doesn’t exist. It’s just a decoration in my home screen.
If you’re trying to set it to the bottom left corner, set the first frame’s anchor point to 0,1. Then, set the frame’s position to UDim2.new(0,0,1,0). To set an offset, use the offset value, for example; UDim2.new(0,10,1,-10).
The pc vs mobile demonstrates the size being completely off. The positions are correct now but the size is off. It looks smaller on mobile, the PC image is not cut off, thats the entire screen. See how much bigger it is?
That’s because you’re using the scale value for the y offset. Since you’re using a UIAspectRatioConstraint, the dominant axis is the target size. It looks like you’ve set the Y size to a really high value, and if you have a really long screen in the X axis, then the Y size gets closer to the X size. Try to reduce the Y size for the first frame.
It was a good attempt but yeah unfortunately this will not work. It is still not coming across identical no matter what size I choose. It’s definitely improved, but improvement is failure when we are talking about something as serious as getting UI’s to be the same across all devices. Improvement should not be accepted as completion for something as critical to the game as this, and my game has both PC and Mobile players, I need this to be resolved.
If you’re looking for a progress bar with the same absolute size for every device, try not to use the UIAspectRatioConstraint and use the size’s offset value of the UDim2.
Don’t be offended by this question, are we killing one monster to create another? What I mean by that is, if I kill the ratio constraint, and use the size’s offset value of the UDim2, won’t the size still appear differently across all devices? or is it the same? I thought that ratio constraint is the only way to achieve the exact same size on mobile and pc
Yeah that’s exactly why i’m trying to figure this out. I refuse to use the old progress bar method after learning about canvas group, because it is obviously better. But it seems like finding the perfect anything with Roblox can be like pulling teeth.
It’s difficult to explain in text. If you want to use the UIAspectRatio constraint, try to set the ratio first and determine which screen you want to benchmark it in, Selecting “Average laptop screen” is probably the best. Then, do a second benchmark with screen aspect ratios, for example; 4:3, 16:9, etc.
Specifically for progress bars, set its aspect ratio first. Then, set its size’s X scale to 1 and set the Y size’s scale to your target size of 0.1 or something.
No matter what size values I use, they never come out to be identical. The benchmark idea is nice, but it is really just the same fantasy I keep having of this actually having a solution, and everything I try just doesn’t make it identical.
The only problem is the device’s screen aspect ratio then. If it’s a long phone in the X axis and the UI gets bigger, reduce the Y scale. If it’s a nearly square device (VGA monitors, iPads, etc) and the size gets smaller, increase the Y size.
Either you could use UIAspectRatio, use offset values, combine both of them, or either have a setting for UI size.
We’ve already tried this. The same result occurs. Which makes me believe this is a bug, and if I can’t get a solution, will be reporting this bug to Roblox Staff
It’s not a bug, but just the nature of the GUI system in most game engines. It’s hard to get ahold of, but after some practicing you could basically do anything.
Practicing vector math also helps. I usually do it while visualizing what the UI could look like if I make certain changes.
