My Goal
I read that developers can use workspace.CurrentCamera.ViewportSize to make sure that every screen size (phone, tablet, computer, and console) all see the same GUI but perfectly scaled to their screen.
I was wondering if this was true because I’m having this issue as I’ve optimized my GUI for phones and tablets to look great since the majority of my players will play on those platforms, but it looks off-center on computer and console in order to look good on mobile which I like things perfect and not almost perfect.
How can I make it so the GUI fits the screen size using workspace.CurrentCamera.ViewportSize somehow to make the GUI look perfect on all platforms (phone, tablet, computer, console, VR) without affecting others platforms?
The Problem
On my game when I try changing my UI to look perfect on mobile and tablet, it ruins the UI for computer and console and this is frustrating me though I don’t really have many players yet who are affected by this problem since my game is still very new and I’m still developing it daily to update the game with new features and content.
Here’s what it looks like on all platforms (these are the examples where the UI looks worst typically on smaller devices or very large devices) excluding the ones where the UI looks perfect:
iPhone 4S:
(the smallest device available to test my game in Roblox Studio)
iPad 2:
(the smallest iPad available)
As you can see the UI is shifted to the left in order to fit into smaller phone screens so it’s not centered on tablets or computer screens.
Average laptop:
On computer it shifted even more so it just looks weird that it’s on the left side and not taking up the space in the middle to look more aesthetically pleasing or professional.
Lastly, on console:
My UI doesn’t even fit on the console screen which makes it ridiculous for a console player to even try to play my game (though I’m only trying to get mobile players on phone and tablet as well as computer players, I don’t see too many console or VR players playing my game)
Research I’ve done so far into making UI accessible and consistent with all platforms
I looked for solutions on the Developer Hub but I found absolutely no topics on this despite practically every single popular game on Roblox being able to perfectly scale their GUIs to look great and be accessible on all platforms from a tiny phone to a large laptop or console screen.
I thought maybe at least one big game owner posted how to do this or maybe asked how to do this and that would be the post that everyone has been using to figure this out, but then again, I’m still a relatively new Roblox developer so maybe everyone just learned how to scale UI so well that they know exactly how to make their UIs perfect on all platforms.
The closest I’ve gotten to an answer is this Reddit post which I will keep here (to help others and myself) in case it is the actual solution to my problem and I just need to learn how to use the different scaling properties in Roblox Studio for UI.
If you could hand down your expertise in dealing with UI across multiple platforms I would be extremely thankful because I know how to make UIs but I don’t know how to optimize them to look perfect on all platforms and currently can only optimize them for mobile at the expense of players using other platforms like computer or console.
Thank you for reading, and please help me and everyone else on the devforum who is going through this issue as we would all be extremely grateful to learn how to make our UI consistent on all platforms that our game is available on.