Unity UI - layout fixed number of buttons

Questions & Answers
1

For context, I am building a portrait-orientation game that is meant to run on mobile devices.

For my current setup, I have a Canvas game object in my scene.

I want to add four buttons:
Left, right, jump, and fire.

These are the requirements that I’m thinking about when laying out these buttons:

  • The four buttons should be anchored to the bottom of the canvas (the bottom of the screen).
  • The left right buttons should be next to one another and the pair should be anchored to the left
  • The jump and fire buttons should be next to one another and the pair should be anchored to the right
  • Each pair of buttons should take up at most 50% of the width of the screen, but depending on the resolution, there can be space in between the pairs

121194-capture.jpg

This first image shows my ideal setup. However, these were largely manually placed. Using the anchoring system in Unity, all the buttons are anchored to the bottom of the canvas. The left button is anchored to the left and the right most fire button is anchored to the right. However, the move right button and the jump button (the 1st circle button) aren’t fixed.

121195-capture1.jpg

To demonstrate, here is a screenshot with a different resolution.

As can be seen, the move right button has shifted away from the left button. As has the left most circle button.

How can I create these “pairs” to neatly group some of these buttons? Are there resources on best practices and tips for creating ui layouts for Unity?

Thank you in advance!!

2

You are almost there.You just have to :-

  1. Change the canvas scaler component’s

UI Scale Mode should set to scale with screen size

Screen match mode should be Match Width orHeight

Match should be 0.5

  1. Set the pivot of your move right button the same as the move left button i.e. , bottom left of the canvas.

  2. Now shift its position to the right (the amount you want). This shift amount will be the same in both landscape and portrait mode.

You can do the same thing for the Jump/Shoot buttons. (Make the pivot is right bottom , then shift it)