Problems Scaling Game Interface Across Multiple Platforms

Help and Feedback Art Design Support
, ,
#1

I’ve been working on UI and I have been trying to design it in a way that is suitable for all game platforms (i.e. mobile, pc, console).

The current problem I am running into is that it’s difficult to make this UI fit for all platforms. I’ve looked at numerous ways of doing this and I am almost positive I am doing something wrong. I’ve tried using the AutoScale Lite plugin, but when using this to one of the main pieces, it scales it far too small. I haven’t bothered going through and using it for its descendants given this.

I have considered using scale for both size and position, however, I would need to use a lot of UISizeConstraints, and it looks like the UI would also turn out to be pretty small.

Here’s what the UI looks like on a larger display:

695×448 43.9 KB

Here is what the same interface looks like on an iPhone 4S after using AutoScale Lite (480x320 Display):

797×429 44.1 KB

Again, I haven’t bothered to go through and individually apply anything to the descendants of the main UI, but it’s fairly clear it will not be an ideal solution given everything would need to be extremely small. The size of one category button is already larger in width.

I am not great at working with UI, I am mediocre at best. My strong suit is programming. If anyone has any solutions or can point me in the right direction, I would appreciate it.

2 Likes
#2

The smart-scale feature by ZacBytes might work as it does wonders for me.

#3

Hey, thanks for reaching out.

I looked into AutoScale Nightly via their GitHub Docs and I didn’t really see anything that would solve the issue I am currently running into. It looks like your paid version allows you to do things by default and doesn’t add any sort of significant additional functionality. I could be wrong but I didn’t want to go out of my way to spend a few hundred robux on it if it’s not going to help.

#4

AutoScale Plus actually has the smartscale feature as well for 50 Robux (smartscale recently exited experimental mode), it includes other features that might help you such as text scaling (can see from the image that your text doesn’t scale) :blush:

#5

So one thing you can do is set the TextScaled to be true for the backpack text and add a UITextSizeConstraint to add a limit to it if you don’t want it to be scaled completely. That way on mobile the text won’t be scaled out of the area. For the buttons and other frames, you can parent them to the background so they stay in it, and use the scale property of position and size to set them up according to the background’s size.

#6

My problem isn’t really with text scaling, it’s more with the general scaling of all of the UI. The buttons and all are parented to the other frame, it’s just that their size and position is based on offset.

From what I am seeing, I am going to need to convert all of my current UI to scale for mobile, and insert dozens upon dozens of UISizeConstraints to limit the max size anything can be so PC/Console can also get a good experience.

#7

As the author of the thread I am going to mark this as solved. For those who are curious, I am providing an explanation of the best way to be going about doing all of this below (from what I am seeing):

All of the game’s interface is made to fit mobile screens (initially) using scale exclusively for size and position. This will cause the UI to be far too large for larger resolutions (pc, console), and thus, numerous UISizeContraints need to be used for their MaxSize property. This will allow for an interface scaled at 75% of the screen’s width and height to be 600x600 studs. All together, this allows for the UI to be large enough for mobile, yet not extremely large for PC and Console without the use of offset.

For text, however, you may find that using the UITextSizeContraint may not be very beneficial, because the text on your UI elements will be scaled right to the very edge of the UI. While not incredibly ideal, it is beneficial to create a text label (scaled to about 85% width and height, and cenetered), parented to where you initially would’ve had the text. This, along with TextScaled enabled, will scale the UI to a proper size without being right up against the edges of your UI.

The only other significant element used is the UIAspectRatioConstraint, which helps the shape of things, especially that of the main parent.

Changes are, if you were running into the same problem as me this plugin will likely not be very beneficial to you. Simple utility plugins can be written to perform quick actions that can be somewhat tedious to do by hand (such as centering the anchor point on UI, and using scale to center the UI). I plan on releasing a simple utility plugin at low cost that can address things like this.

AutoScale Plus actually has the smartscale feature as well for 50 Robux (smartscale recently exited experimental mode), it includes other features that might help you such as text scaling (can see from the image that your text doesn’t scale)

TD;LR:
Don’t make the same mistake as me and go down a rabbit hole. While it may seem like the longer and more tedious option at first, stick to using scale almost exclusively over offset. Be sure to use plenty of UIAspectRatioConstraints to keep the shape of UI and use the UISizeContraint for a good experience on larger screens.

1 Like