How would one go about making a UI very similar to what the game 'Midnight Racing Tokyo' has in its menu?

Help and Feedback Art Design Support
,
#1

How would one go about making a UI very similar to what the game ‘Midnight Racing Tokyo’ has in its menu?

I’m referring to what’s at the top, the tabs where you select the map, options, etc.

Here’s a video to know what I’m taking about:

I’d like to recreate a very similar one (the difference being that there will be no logo on the left and it’ll be centered)

Here’s my current progress, but I’d like to restart. I feel like it’d be easier just to start over.

I feel like someone with actual Roblox GUI building experience can just tell me the solution by just looking at it, because they might have done something similar before. Thanks!

9 Likes
#2

If you’re referring to the design I’d suggest you import graphics from sources such as photoshop.

As for what you currently have, please enable ‘IgnoreGuiNullset’ in the ScreenGui property of your Menu to fill out the top.

Also to scale your UI’s for all devices set the offsets to all the contents in your GUI (Frames, TextLabels, TextButtons etc) to 0

3 Likes
#3

Brother, thank you so much! That 'IgnoreGuiNullset’ tip is a lifesaver!
I’m not really referring to the design, but rather the functionality. If you notice how MRT’s spacing between the options remains in proportion to the text size, but mine does not. I’d like to know how I can fix that. Again, thank you so much for that quick reply!

2 Likes
#4

Are you sure your Texts are scaled correctly?

2 Likes
#5

I believe so, what do you mean?
I’m talking about the spacing in between the buttons, mine changes, theirs doesn’t.
Here are the settings for my buttons

image
image279×573 19.7 KB

image
image

1 Like
#6

Oh I see. One way you can go about this is you can make a separate frame for the buttons and use a UIGridLayout and set it’s Paddingproperty to 0,0,0,0. I can make a Demo for you if you’d like.

1 Like
#7

yes please. I’ve never heard of a UIGridLayout before :0
I’ve never done anything with GUIs before in roblox, so your help will be much appreciated! :smiley:

1 Like
#8

Apologies forgot to reply. Just toggle TextScaled to false

1 Like
#9

then my text stays the same size, and I want it to scale like what’s happening here: https://devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/5X/8/9/0/4/89043d236a6ee57823d0eb53037ee9b610180312.mp4

1 Like
#10

Ok. Instead use a TextSizeConstraint object and put it inside of the TextButton.

Set its minimum and maximum value in the property
Experiment with it and find out what works best

#11

the issue isn’t the size of the text, it’s the fact that it scales differently. Btw, I want to thank you again for the ‘IgnoreGuiNullset’ tip!

#12

I see that you are talking about how the top text scales. Well that’s not toOoOo hard. (Hopefully) Just use UIAspectRatioConstraint instances paired with UIListLayouts to make such an effect.

#13

That’s what I’m using for my text buttons, but it doesn’t work for the pink background, as the aspect ratio can only go up to 10. I’ll look into UI List Layouts :smiley:

Edit: Here’s the result with my UIListLayouts:


it does exactly what I want when I shrink it vertically, but not horizontally… Any way to fix this? Thanks!

1 Like
#14

Remove the aspect ratio constraint then.

#15

for the buttons?

This is what the hierarchy looks like btw
image

#16

Yes. Remove the aspect ratio for the buttons.

#17

now it doesn’t scale how I want at all :joy:

Here, let me resend the video I’m referring to.

thisPartUI
thisPartUI1352×724 73.5 KB


Notice how all the spacings remain proportional, as if I’m keeping the aspect ratio constant? However, the aspect ratio constraint on the top bar doesn’t work as I’d need an aspect ratio of 20+, which isn’t allowed as it only goes up to 10. Any solutions? Thanks!

1 Like
#18

Use an aspect ratio constraint in the top bar it self. If that does not work, use a UISizeConstraint in the topbar as well.

1 Like
#19

what should I set the UISizeConstraint to?
image

1 Like
#20

Any value you like which works.