UI help. Need to make it look better

Help and Feedback Game Design Support
#1

Hello! I made buttons and seperated them by screenguis It looks fine on mobile but on PC it looks all spread apart and small. Is there anyway to fix this?
PC:

image
image1522Ɨ808 59.2 KB

Mobile:
image

1 Like
#2

Yes and no. You should have a mix of Scale and Offset for the scaling of the GUI, but itā€™s better to go with Scale for everything than Offset for everything.

You might be using a UIAspectRatio or some UIConstraint that is giving an undesired effect.

Edit: Also, some UI elements like icons in the UI are not aligned properly. ā€˜Menuā€™ and the ā€˜plusā€™ icon/text. It might be the font you are using and/or how youā€™ve positioned the UI.

1 Like
#3

Use AnchorPoint to make the position same on all devices. I donā€™t know about the size, sorry.

1 Like
#4

Oh im not too good at anchor point can you show me how to use it?

#5

The AnchorPoint property determines the origin point of a GuiObject, relative to its absolute size . The origin point determines from where the element is positioned (through GuiObject. Position) and from which the rendered GuiObject. Size expands. An Anchor Point I see many people use is {0.5, 0.5} , it puts the origin of the frame smack dab in the middle of the frame, allowing you to center the frame with the position {0.5, 0}, {0.5, 0} . If you need more help, just ask me.

#6

So what should I set the anchor point for them to stick near each other?

#7

Position them how you would like and set the Anchor Point to 0.5, 0.5. It will make the UI objects positioned correctly on ALL devices.

#8

here is how it looks with anchor point. Do you know why?

image
image1470Ɨ740 55.2 KB

#9

The AnchorPoint should put the origin on the left corner, which will make it move a bit, you can just drag it back, itā€™s just supossed to do that

Edit: You also need to put AnchorPoint on the objects inside the UI object.

#10

yeah but there is another problem. here is how it looks on mobile
image

#11

Sorry for late reply!

You can either use a plugin or UIAspectRatioConstraint to scale the UI objects properly. UIAspectRatioConstraint is a bit complicated, so I prefer using the AutoScale Lite plugin.

Now, Iā€™m not really knowledge with this one. But, Iā€™m sure there are tutorials on both DevForum and YouTube. Hope this helps!

#12

Hello! For some reason I do indeed have UiRatios in and I used the autoscale Lite plugin. Here is the picture did I do anything wrong?
image

#13

You canā€™t use both UIAspectRatio and the AutoScale Lite plugin.
Delete the UIAspectRatio and then add a constraint using the AutoScale Lite plugin.

#14

Hi I did all of your steps again here is how it looks still
image
sorry for the late reply!

#15

are you there? I think you left.

#16

Hey, Iā€™m very sorry for your waiting. Iā€™m busy with my exams. Try using the Unit Conversation tab in the AutoScale Lite plugin. Just click ā€œScaleā€ at the ā€œSizeā€ tab. If that doesnā€™t work, Iā€™m not sure whatā€™s the source of this problem.

#17

hello again! And no problem. But when I convert everything to scale it just looks like this
image

#18

oh god. I have no idea whatā€™s causing this, this should have not happened. I donā€™t know, try looking for other topics.

#19

I found it out! I just had to set the other images to scale as well! Thank you for helping!

1 Like
#20

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.