How should I go about Cross-Platform UIs?

Rudimentally, my game has an abundance of UI elements and it’s very arduous too make them adjustable for Mobile, which has the most quantity of players out of the other platforms. Yes, I ken about offset and scale but it still doesn’t seem to fine-tune my issue sometimes I just use scale and not offset on a frame and then I switch to the mobile view and its all stretched out, it’s very exasperating and I’m currently endeavoring to make an inventory system and I can’t seem to get the frames to be a good size on both mobile and additionally computer.

Computer View :

Mobile View :

I don’t think it does that “squished” thing on mobile, it might just be Studio with the preview. The only way to tell is if you use a mobile device to test your game.

From my experience there is seldom a universal rule to this. However, there are a number of ways to create scalable ui. Atleast, these are the methods I am using.

First of all you will probably want to take a look at [Plugin] Auto Scale for GUIs. There is a nifty ui element in roblox called UIAspectRatio that keeps your gui objects proportioned the way you made them.

Really you most likely either want to make your ui elements in scale form (otherwise they will look massive on mobile devices) or make entirely seperate interfaces that work for mobile. Often times ui you make for desktop isn’t really suited for touch input.

But I can see from your example that the plugin will fix it quite simply. Just apply a ratio at the correct size and it will scale appropriately dependent on the screen. Scale really doesn’t work for uniform objects without this.

For scale, a tip is to add a limit to its max size. After all at a certain point (for those with large screens) gui objects will become needlessly large using scale. This is why offset is used often. There is another ui element for that called UISizeConstrain. This used in combination with UIRatio can be quite powerful.

Though I am not a professional when it comes to UI, so take my word with a grain of salt. But I hope I gave you some ideas on how to tackle this arduous issue.

2 Likes

Infelicitously , I’m too impecunious for a mobile contrivance so that solution isn’t applicable here.

Oh my gosh, man thank you I just needed to integrate a UIAspectRatio, thanks for your avail, I’ll mark your post as a solution!

1 Like