Mobile UI Scaling Support

[GnomeDevs]

1. What do you want to achieve?
   Seriously I just want the UI works properly on mobile devices.

2. What is the issue?
   Ok so, This is the UI on PC:

   
   
   Then this is on Mobile:
   
   
   dunno about you but i think it is not working properly isnt it?

3. What solutions have you tried so far? UIAspectRatioConstraint and the plugin called “AutoScale Lite” the plugin didn’t work and I don’t know how do you actually use the “UIAspectRatioConstraint” but I tried it.

[3rdhoan123 (Future Noob)]

You just have to make everything use scale instead of offset.

Scale: {0.5, 0, 0.5, 0} – center/half
Offset: {0, 500, 0, 500} – A square or something similar.

[GnomeDevs]

Ok i will try it out now. Thanks for replying Literally this fast, tho.

[GnomeDevs]

i am kinda uh new? to this UI design or somethin’…
What kind of Scale are you talking about?
Sorry but i really dont know about that

[3rdhoan123 (Future Noob)]

When you look at the position or actual literal scale of a ui element, the values show like this:
{Scale, Offset, Scale, Offset}

You’re using offset for the values, use scale instead.

[GnomeDevs]

ohhhhh I see I didn’t know about that

[GnomeDevs]

hmm this… both are the same value but it isnt showed properly as well, How am i going to handle this? Do i need to set something up?

Um or is that i didint understand what you said at all?

[3rdhoan123 (Future Noob)]

You’ll have to use scale instead of offset to position the ui elements as well as for the size of the ui. Just set the values randomly and see how they react.

Basically, mess around with it.

[INT_L]

The robloxdev website has a great guide explaining how to scale GUIs, use offset, etc, this should help you achieve proper screen to screen scaling:
https://developer.roblox.com/en-us/articles/Intro-to-GUIs

[GnomeDevs]

I will read it now then. Thanks!

[GnomeDevs]

okay i will try it out! Thanks!

[INT_L]

No problem, also if you want to scale text, there is a “TextScaled” boolean you can enable in a TextLabel’s properties, as well as “TextWrapped” if you want the text to span multiple lines.

[GnomeDevs]

I know that from earlier. But uh thanks for telling me it. Then

[INT_L]

My bad, it just looked like your text was overly sized, which is probably from the size of the TextLabel itself, just wanted to add some extra advice if you didn’t know.

[GnomeDevs]

Thanks for helping me anyways!

[GnomeDevs]

uh there is an issue, the post said:

but when i tested it out it went like this:

it didnt on mobile as well, is it a problem on my end?

[3rdhoan123 (Future Noob)]

You’re still using offset for the size property, also change the anchor point to be 0.5, 0 (that should fix it I think?) Or 0, 0.5

[GnomeDevs]

i will try that out right now, thanks for helping

[GnomeDevs]

When i set the anchorpoint to 0.5,0 it worked perfectly fine in PC view, but it does not work on the Mobile view, any solution for that?

[DavidNet22 (Dvd)]

Hello! Maybe you’re using the plugin in the wrong way (happened to me). Here’s a post created by @ZacBytes (the creator of the plugin) about how to use it!

[Plugin] AutoScale Lite for GUIs - Scale your UI

[AutoScale Lite Banenr] Overview The plugin has two main functions. Converting a UI element’s size/position to Scale or Offset, and the auto scaling feature. The Add Constraint feature makes use of the UIAspectRatioConstraint which ensures that your UI retains it’s size on all screen sizes. You can add this constraint to your UI manually but my plugin does the calculating of the AspectRatio property by dividing the AbsoluteSizes so you don’t have to! [image] How do I use it hmmmmm? Firs…

I hope it helps!

• Dvd