Okay so, whenever im on PC, this is where I scaled the UI. The UI looks like this
PC:
But on mobile its more spaced out for some reason and thats where I am having the issue, and I want to make it not spaced out.
Mobile:
2 Likes
I just searched “gui different locations devices” and found a few posts about it. How can I make GUIs to other devices?
1 Like
I actuall use this plugin:
AutoScale Lite - Creator Marketplace (roblox.com)
If you need a tutorial, I got a video to watch:
RobloxStudio Tutorial - AUTOSCALE Plugin by ZacBytes - YouTube
It’s just learning by doing so I wish you good luck!
1 Like
I actually have the pro version of that, I know how to scale UI’s to mobile its just when they are scaled, they are spaced apart.
1 Like
The phone has a different aspect ratio that your pc, If you’re using scale for the size and position of the icons, then the spacing will be different depending on the device. If you want the icons to scale, but keep the same spacing, set the padding value in the uilistlayout to offset not scale.
1 Like
As mentioned by Brylan, the phone has a different aspect ratio to a desktop monitor. However, do NOT use Offset. That means that on higher resolution devices, the gap between the buttons will be smaller, as Offset is a fixed number of pixels, and not a percentage of the container’s width.
Instead, you should look into UIAspectRatioConstraint. This ensures that the parent element always has the same ratio of width to height. Assuming these cursor buttons are in their own Frame, you can use the UIAspectRatioConstraint to ensure the Frame maintains a consistent shape, meaning that the buttons within will always have consistent padding.
2 Likes
I’ve tried the aspect ratio constraint, it works on some things but on others when the screen size changes it completely moves the stuff out of place.
Ensure the AnchorPoint is set correctly. If it’s at the bottom center of your screen, the Frame that contains the buttons should have its AnchorPoint set to {0.5,1}; this means that it will always try to scale to the bottom-center of the frame.
Oh also when I try to use that, when I scale my screen in the UI is fine but it spreads out in height instead of length, like on a squished screen for an example an ipad.
I created an extremely rudimentary GUI layout for you to have a look at. Feel free to cross-reference this with your own GUI layout.
ButtonLayoutThing.rbxm (6.5 KB)
Try using the Device Emulator (located under the Test tab) to see how this GUI reacts to various different devices/displays.
This GUI relies heavily on UIAspectRatioConstraint to keep everything in line and scaled correctly.
Yes I know but with my UI, the more I squish it, on like an Ipad or something the spaces in between UI going up and down will increase, but side to side will stay the same.
Could you please provide a few images or a short video of what you’re dealing with? I’m unsure of how to help you any further, as I can’t figure out the exact issue you’re having based on your description.
Alright. For the left side of your screen, here’s what you need to do:
- Make one Frame that uses a UIAspectRatioConstraint to maintain the correct shape.
- Add a UIListLayout to it. Set FillDirection to Vertical, HorizontalAlignment to Left, and VerticalAlignment of Center.
- Put your currency, buttons, and auto-merge toggles into it.
- Adjust LayoutOrder of the elements so everything flows correctly.
Your Explorer hierarchy should look something like this when you’re done:
You’ll need to adjust your elements to correctly fit within the frame in question, as well as adjusting the LayoutOrder. I strongly urge you to make your wrapping frame semi-transparent so you can see what you’re doing.
1 Like
Ohhh thanks I figured it out, ty.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.