Best way to size UI's?

Help and Feedback Art Design Support
#1

Hey, so I just purchased some new UI’s for my game, and I have to build them. Not exactly sure what the most efficient way to size or position UI’s would be, but since a lot of these UI’s have a lot of graphics and stuff like that, it’d need a mix of scale and offset. Just not sure how I should go about creating the base screen.

Thanks!

2 Likes
#2

I’ve never even attempted to create a UI, but I’ll be as helpful as possible.

  • Make sure it’s not too big, those get annoying.
  • Have a minimize option
  • Don’t put it on the right side of the screen unless you plan on hiding the players list.

Sizing doesn’t matter AS much, as long as you can minimize it and close it as needed. Just mess with it until you run the game and it looks nice. (I would even advise you use popular games for reference on sizing)

Best of luck to you my friend, sorry I couldn’t be more helpful, just don’t have much experience with Uis.

1 Like
#3

Thanks Zaytones! I appreciate your reply. Although perhaps I was vague in my original message, but I was referring more about actually sizing the UI’s so they look appreciable on any screen size. Just was wondering about the best combos with scale + offset, as right now the UI is fully sized in offset, using Scale to assure that it’s always centered in the center of the screen.

1 Like
#4

Ah, then yeah get other advice, from other people, haha.

1 Like
#5

UI Constraints work really well.

I normally use only scaling, meaning my UI’s are sized relative to the resolution of the player.

The best way to scale your UI quickly (in my experience) is by simply messing around with the Size property. Also make sure to use the emulator to check what your UI will look like on different screens.
image

UDim2 (UI positioning and sizing)

EDIT: Tip to easily center your GUI, set AnchorPoint to .5,.5 and Position to {0.5,0}{0.5,0}

1 Like
#6

Some tips I can give to make sure everything is universally sized, so it’s the same size on almost every screen, is keep all image buttons and stuff inside a frame, and make sure the frame is anchored.

It also helps if you put in size constraints

1 Like
#7

If you are going to use Scale set the Size Constraint in RelativeXX or Relative YY, so will have the same aspect in all resolutions, although I recommend using Offset for the size, because using Scale can make GUIs look giant in high resolutions screens, and it looks bad. And I sometimes have to make scripts so that GUIs look good in different resolutions.

1 Like
#8

Thanks for the advice, guys! I’ll definitely take a look into seeing what UI Constraints can do. Thanks again! :slight_smile:

#9

As @wind_o linked to, I often use UIAspectRatioConstraints for image elements that cannot be resized based on the screen but rather the aspect they need to maintain. This prevents (at least in my experience) any sort of distortion of the photo even when size is set to a percentage resolution.

1 Like
#10

Interesting. I’ll definitely check that out. Thanks! :stuck_out_tongue:

#11

Maybe you can change the Scale Type to Fit instead, it does the same thing.
9cb779a3ed8f215db63fb57287c303d5

3 Likes
#12

UIAspectRatioConstraint + Scale + AnchorPoint = UI Paradise

2 Likes
#13

  1. I suggest looking into aspect ratios that are pleasing to the human eye if you’re looking for size advice with respect to UX design.

  2. I suggest looking into 9-slice because if you purchased image assets for UI design then you may need this for border details and preventing ugly stretching.

1 Like