Best method to add different UIs for different platforms?

Help and Feedback Scripting Support
#1

I’m going to detect the player’s screensize using ViewportSize and give them a different UI based on that, but I was wondering which method is better to use.

My UI consists of three parts, for all three platforms (Computer, Tablet, Phone): the TopBar, BottomBar and Menus.

The Tablet and Phone have the same TopBar, but different BottomBar. While the Computer and Tablet have the same BottomBar but different TopBar.

Now my problem is I have 3 methods I was thinking of to give the player the UI and I’m pretty new to this stuff so I’m not too sure which would be most responsive:

Method 1: Create TopBarMobile, TopBarPC, BottomBarMobile, and BottomBarPC. Then I’ll delete the old bar and add the new one based on their resolution.

Method 2: Create separate ScreenGuis and leave them in ReplicatedStorage and remove the old one and add the new one

Method 3: Keep all the values in a ModuleScript and then change the values of one universal ScreenGui based on resolution

I was leaning towards method 3, but I didn’t know if there was a different between that and the other methods.

If you play the new Loomian Legacy game, try minimizing ur game and you’ll see the gui at the top change. For bloxburg, on the mobile you’ll see the gui at the bottom right change too and how the interaction works

1 Like
#2

Is there a specific reason why you want to do this? Is it problems with scaling on different device sizes, or do you simply just want each devices UI to look different?

#3

I just want each device’s UI to look different.

#4

Oh and for the scaling issue I had a problem with the leaderboard being too long on mobile and covering a gui at the top so for mobile devices I disable playerlist in the coregui so it doesn’t show stats.

When I disable playerlist the entire topbar has to look different so I have a separate one for mobile devices. Even if the scaling works from Computer to Tablet, on the phone it’s still too big regardless so I want the interface to be better for that device

#5

I say number three because it’s similar to how responsive web development is done with media queries