I have added a few text boxes in my Unity game and they are at the bottom. When I fullscreen the game after building it, the text boxes show up in the right place but if I shrink the tab, the text boxes move and I don't want that. What can I do to fix that? I already have to move the text boxes way down to make sure they show up in fullscreen mode.

I am using Unity 2D.

In builder view: enter image description here

In game view: enter image description here

In full screen built view: enter image description here

Steps I took to add text boxes:

I added the textboxes to the Canvas, added the scripts, and change the font color and style. I then just moved them to where I can see them but I realized that in different screen sizes, the text boxes move. I also changed the Display 1 ratio from "Free Aspect" to 16:9 but that didn't help either.

enter image description here

enter image description here


You've configured your text boxes to position themselves relative to the center of their parent element, not relative to the bottom edge/corner:

RectTransform inspector showing "Middle Center" alignment

You've also configured your canvas to position elements according to exact pixel sizes (so the size of the UI elements and their distances apart do not change with screen size):

CanvasScaler inspector showing "Constant Pixel Size" scaling mode

Taken together, these two settings say:

Position my pivot exactly 56 pixels left and 259 pixels below the center of my parent.

So if your parent element is about 600 pixels tall, that nicely positions this item close to the bottom edge. But as the parent grows, the bottom edge gets further away from the center, leaving this object behind.

The solution: if you want something to align to the bottom of the window, you have to tell Unity that's what you want. It's not a mind-reader. 😉

Click the box that says "middle center" in your example to pop out the anchor presets picker, and choose one of the presets that aligns the object to the bottom of its parent:

Anchor Presets picker with "Bottom Left" selected

Then adjust your positioning accordingly.

If these text elements are children of another UI element, not directly parented to the Canvas, then be sure that your parent is configured to stretch to fill the window - otherwise you could end up correctly aligning to the bottom edge of a parent, which is in turn centered on the screen, keeping your original problem at one level of remove.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.