My game is having problems with GUIs on different devices.
I need to edit the GUIs for mobile devices.
Is there any way I can JUST update the MOBILE version of my game instead of editing the GUIs for all versions just for one of them?
The problem is that you aren’t able to determine 100% whether a device is mobile or not. You can have high confidence by checking if UserInputService.TouchEnabled is true but otherwise, there’s no way to get a device type with 100% accuracy.
If you’ve done that already, you can test with Roblox’s testing features. They should emulate touchscreens and other inputs available to that specific device.
If you refer to the fact that the gui on mobile devices appear disproportionate you can use a plugin to make sure that on pc (example) they have one size and on mobile devices another and then you can test it using the method of @7z99.
Basically you can check if UserInputService.TouchEnabled is true, and if UserInputService.MouseEnabled and UserInputService.KeyboardEnabled is false. A mobile device won’t have a keyboard and mouse, and will have touch enabled. Only checking for touch isn’t good, since some laptops have touch.
This one: https://www.roblox.com/library/1496745047/AutoScale-Lite
If you don’t know how to use it it’s simple:
-
Select the Gui element to scale;
-
Click on the plug-in “Unit conversion”;
-
Press the button “scale” under the category “Position”;
-
Press the button “scale” under the category “Size”.
After you do this you can check how it look like on mobile by clicking the button in the immage:
Yeah, that’s what you were trying to do, right?
But it’s too thin now,if I resize it back to origin will it not work again?
Ok if you want to set a different size for any device you can insert a LocalScript into the button and write this code:
local UserInputService = game:GetService("UserInputService")`
local isOnMobile = UserInputService.TouchEnabled
local isOnComputer = UserInputService.KeyboardEnabled
if isOnMobile == true then
script.Parent.Size = Udim2.new() --The size you want in the brackets must be the scale size you've set with the plug-in
elseif isOnComputer == true then
script.Parent.Size = Udim2.new() --The size you want in the brackets must be the scale size you've set with the plug-in
end
I have a strong feeling that you moved your guis by dragging them around and resizing them also with studio. While this is quicker, the UI will look terrible on any device that isnt a PC. This is because you use offset and not scale when you do this. At the moment, your gui size might be something like this:
{0,200,0,50}
The 200 is an offset and so is 50.
Your guis should be scaled like this:
{0.25, 0, 0.1, 0}
This is scale. Use these instead. I strongly recommend this. Otherwise, UI design is going to be one of the most annoying and hard things to work with.
That is so inefficient. They would have to do that for EVERY SINGLE GUI in the game with a local script.
He can just copy and paste the script in every GUI or moving this script in StarterGui and set the size of all the Gui elements in that script.
Again, there is no point. That has to be the most inefficient way to do this. Setting them all individually is the worst and most performance heavy way to do this.
Just edit the guis with scale, I had to fix all the guis in a project of mine one time by replacing them with scale and it took < 10 minutes.
Ok but he wanted to give different button sizes for each device and I think this is the only way.
You dont understand what Im saying.
Using scale will keep the buttons the rights size on all devices. They will stay the same relative size because it is taken in percent of screen size instead of offset.
If they want to make buttons different sizes so they are easier to click, then my bad. Not really sure what OP wants. Then yeah, they could just have a script in startergui that loops through the whole playerGui and resizes them. I still recommend using scale as it is more consistent.
Example:
for i,v in pairs(game.Players.LocalPlayer.PlayerGui:GetDescendants()) do
-- resize any buttons here.
end
Good idea, but if he insert a UI modifier like UICorner he will got an error.
Filter it out:
if v:IsA("TextButton") and not v:IsA("UICorner") then
-- its not a ui corner and it IS a text button.
end
Would you mind showing me a video?
I have no way to record things on my computer.
Also, I can try to explain it more. I assume you want a video of the gui-resizing?