Hello. My UI is scaling weirdly when im in the actual game vs in studio. I have anchor points set to 0.5,0.5 on all UI elements shown in the picture. I have a UIAspectRatioConstraint in all of them and theyre all on scale size not offset. Yet this happens.
Roblox Studio View
In-Game View
How do i fix it so they look the exact same in studio and in game?
You’re using just a single UIScale in an ancestor that contains the bar and all buttons, right? If not, send a picture of the ScreenGui hierarchy and I might be able to help more.
I had a similar situation, and this is how I fixed it:
Put all the UI elements that you want to stay together and scale as a single family into a single parent frame. Make the parent frame’s BackgroundTransparency = 1.
Use strictly offsets for the children of the parent frame (for both size and position). Figure out how much space in total is being taken up inside of the parent frame, based on the positions and sizes in pixels (offsets) of the various children. You need a total height and a total width (including the empty space in-between).
Divide the width by the height. That is your aspect ratio.
Make your parent frame use offsets for size, using the width and height numbers you had before.
Add a UIAspectRatioConstraint to the parent frame only. Add the aspect ratio number to the UIAspectRatioConstraint.
Use scale numbers for the parent frame’s position.
(I also added a UIScale to the parent frame, left it at a scale of 1 for default, but then added a script to make the parent frame scale up or down as necessary when on console only.)
Thank you so much. This worked very well. I appreciate it!
A new problem has occurred. The uniforms panel works perfectly fine ingame but the animationspanel doesnt for some reason..
In studio
In game
The uniform panel works perfectly however. Their properties are basically the same. Same anchor point, both have a UIAspectRatioConstraint.
Think you can help with this too?
I’m not sure I have experience with this, but I can try to help.
Can you tell me more about what is happening?
Certainly. Well as you see in the 2 pictures the animations panel is further away from the right side of the screen in the actual game vs in studio.
The properties and children are virtually identical to the Uniform panel which DOES work correctly. Gets displayed correctly in game as it is in studio.
Here is a video of exactly whats happening in the game vs in studio.
The only noticable difference between the two frames’ properties is the AnchorPoint which is different than the uniforms panel but i’ve tried making them the same and its the same issue thats occuring.
If you need any other info, please let me know 
You could try changing the AnchorPoint to (1, 0.5), so you are measuring from the right side of the object.
Then use a combination of scale and offsets for position. Keep the y values as they are, though, since you seem fine with that. But for the x values, start from the farthest right of the screen, so, set scale to 100%, and then minus 10 pixels. So try this for the position: {1, -10},{0.5, 0}. Adjust the -10 to some other negative number until you like it. Your ui won’t scale anymore for different devices, instead it will always be 10 pixels away from the right side of the screen. How does that sound?
This alternative possible solution also just occurred to me:
The idea is that the smaller the gap, the less noticeable the change will be when the gap changes in scale. So, you could try changing the AnchorPoint to (1, 0.5), and set the x scale position to a 2% gap or something like that for the right side. The position would be {0.98, 0}, {0.5, 0}.
This solution would still allow scale for all devices.
Hello. Neither solution worked unfortunately. If you want i can upload a roblox file for you with the UI so you can try it yourself? Hands on usually works better. Let me know
Sure I’ll be happy to look at it. Post it whenever you get the chance.
Interface.rbxl (86.2 KB)
Here you go. You’ll need to publish the game though in order to play test in the actual game vs in studio since the UI works fine in studio but not in an actual game.
I deleted the UIAspectRatio Constraint in your InterfaceFrame, and that seemed to solve it. I seem to have the freedom now to position the AnimationsPanel wherever I want, by adjusting the “local endPos = UDim2.new(0.98,0, 0.74,0)” line of code in the OpenMenu script. I haven’t tested it out on console, though, just studio. Maybe you can let me know how that goes?
Thanks for replying so fast . It does seem to fix the AnimationsPanel but it brings back the earlier issue with the other UIs now being weirdly positioned.
Hello. I’ve found a solution to it. Your deleting the AIAspectRatioConstraint is the reason i found this solution.
Ive simply put any UI thats on the players screen at all times in a frame under the interfaceframe and added the AspectRatio there.
Thank you for your help
Ok, so you found a way to keep the UIAspectRatioConstriant for some things that still needed it (sorry, I didn’t see anything that needed it at the time). Glad it’s all working!
This usually happens when some elements use Offset instead of Scale, or when constraints interact in unexpected ways. I made a short guide that covers the most common causes and fixes step by step:
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
