Using Canvas to Better Position and Organize UI

Objective: Position my new text to best fit the game screen regardless of the end user screen size.

In my last article I generated a Canvas with a single Text UI element. Canvas and an EventSystem are automatically spawned for you when you generate a UI element into your game.

I’ll talk about all the powerful things TextMeshPro can do in another article. For now let’s talk about positioning your text using Canvas.

At the moment, if I scale my game in any way, it ruins the positioning of the UI.

To prevent that I’ll use the “Anchors” to anchor it to the top right of my screen. And I’ll edit the values to give it a certain number of pixels of padding from each edge of the screen.

The new problem; however, is that the text stays the same size no matter how big or small the screen is. And we want it to scale with the screen.

This is easily fixed by adjusting a setting in our Canvas from “Constant Pixel Size” to “Scale with Screen Size”.

And just like that we’ve got an established position for our text!

You can now play this game on itch.io! I’ll try to keep it updated as I work on it and add new features or tweak existing ones.

……………………………………………………………………………………….

Shameless Plug: If you like my stuff, be sure to check me out on other social media platforms and join the BornAngry Games Discord!

YouTube — Twitch — LinkedIn — Facebook — Twitter — Portfolio — Discord