Help with resizing for mobile

Hi, I’m making a similar topic to what I did yesterday.

That issue was resolved, however, I’m trying to make sure my UIs resize and position for mobile compatability.

The UI on my PC looks like:


which is fine.

However, when you resize it (it looks like this on mobile too), it looks like this:

It appears to be the ScrollingFrame so I changed some properties of it:

AnchorPoint = 0.5, 1
Position = {0.49, 0},{1, 0}

What can I do to fix this? I’ve also tried doing this:

AnchorPoint = 0.5, 0
Position = {0.49, 0},{0, 0}

but to no success.

Any help is appreciated, thanks in advance! :slight_smile:

1 Like

image
These icons seems to have custom placement, in a way the scalling are made like nothing else exists? The solution would be that the position goes according to the menu :
image

I Have no idea why you’re using AnchorPoint “0.5/1” considering the UI are not even made to be centered, nor re-adjusting via the Right side but the left one.

Can’t really help further, i don’t know at all how you organized that, but fixable whenever the items are a exterior source or the Menu’s parents,.

I can’t say I’m exactly an expert on GUI positioning, I just used the solution from the previous thread I asked a similar question on.

The layout of the GUI is:
image
with the highlighted instance being the icons you referred to.

The Build Design Exit menu is the sibling of the ItemBackground (parent of the ScrollingFrame)
image

I understand it’s probably hard to understand. Thanks for helping anyways. :slight_smile:

The size of the ScrollingFrame is {0, 1127},{0, 131}

1 Like

You see, if you use offset you will scale elements in pixels. If you want your UI to be universal across all platforms, then consider using scale.

If you do not know what I mean, scale is set by the first and third values: {scaleX, 0 scaleY, 0}. If both scale values are 1, that means the element takes up the entire size of its parent. 0.5 is half the size, and etc. Try fiddling around with these values to achieve your desired result.

The beauty of scale vs offset is that using the former means that elements of will scale according to screen size making it auto-responsive across all platforms. Using the latter means that elements may go off the screen or they appear too small in some devices.

You can research more here.

1 Like

I’d recommend you a great plugin I’m using for many months already

Gui Rescaler by @EchoReaper

This plugin will rescale your GUIs for ALL screens, so they will fit in PC, mobile, tablet, console and so on.

Select all the GUIs and activate that plugin by clicking on it once, then try how it works by resizing properties or other windows in Studio, and you’ll see how it auto-scales.

Hope you’ll find this useful. It it works, please mark my reply as solution :slight_smile:

1 Like

I’m surprised people are still finding and using this. This is a really old plugin I made when I didn’t understand how UI scaling worked. I would not recommend using it, as it will just lead to distorted UI on different resolutions. You’ll need to manually set Scale/Offset to some reasonable value if you want your UI to display properly across varying devices. If getting UI to work with any resolution was as simple as converting any offset to scale, Roblox would do it automatically.

2 Likes

So basically, just trial and error will get me to the resolution?

edit:

It looks like everything is scaling properly. It just looks like the scrolling frame’s offset is a bit off. I would try setting the background transparency to 0.5 and launching the mobile game to get a better idea of what’s going wrong.

Well, at least for me, your plugin did not distort the UI for me, it auto-scaled it for me on all devices and works well.

Another topic I always see. So, it seems like you used offset on sizing elements.

You can convert offset to scale by doing this formula:

Element’s X or Y axis size divided by the screen’s X axis or Y axis size

eg:

300/1920 where 300 is the X axis of the element’s size and 1920 is the X axis of the screen’s size