Mobile Gui not working in Roblox studio

Hi, I am here about a potential bug in Roblox Studio regarding mobile GUIs. I thought that I should ask first before sending a bug report. This is my first post, so if I did anything wrong, or put it in the wrong category just let me know :slight_smile:

Shout-out to Greenman727 for originally finding this problem. (He just isn’t on the Dev Forum, and so asked me to post this.)

In Roblox, when you hit the small mobile icon, the screen shows what your game would look like on a mobile (or xbox) device. When you have a Gui on the screen, this will show one way,


Notice the gap between the Gui and the edge of the screen.

However, when actually playing the game, the Gui looks different:


Notice how there is now a large gap at the top, and no gap at the bottom. (The errors are from plugins)

This is a problem. The Gui, which was centered before, is now lower than it was in the preview.
(this also happens with other phones/ devices in this preview)

Specs: The Gui’s position: {0.5,0}, {0.5,0} Anchor point: 0.5, 0.5, Size: {0,400},{0,350}

When subtracting 0.05 from the y position (in scale) that seems to fix it (in the preview and in game while with that device), but it breaks the Gui in main view.

This isn’t a problem only in my game, this is also a problem with my Greenmans’s game as well. I am not sure what else to try, other than a script to manually fix Gui’s on mobile. (which we shouldn’t have to do)

Thank you for reading, and hopefully the error is something small on me and my friend’s part. If I left out any details or put this post in the wrong place just let me know. :slight_smile:

4 Likes

Hey there Emrillion! I think I’ve had this problem before, UI on roblox can be hard to work with.

Specs: The Gui’s position: {0.5,0}, {0.5,0} Anchor point: 0.5, 0.5, Size: {0,400},{0,350}

When working on UI for all devices, make sure you are always using the first number (scale) and not the second number (offset).

Hope this fixes your problem! If not let me know :slight_smile:

1 Like

The top bar, though invisible, creates an inset. It gets pushed down by roughly the height of the menu icon. This happens on computer as well and is not caused by mobile and the mobile emulator.

You can set the GUI to ignore the inset if you wish to using the property on the ScreenGui called IgnoreGuiInset.

4 Likes

Wow! Thanks so much! That completely fixes it!

Also thank you @kingmark44 this also helps :slight_smile:

2 Likes