Just finished going through and fixing UI screen scaling problems for one of the first games I made in Unity - Cat Box Defender. I imagine UI is a very common challenge for jam-games.
At risk of offering an overabundance of unsolicited advice, I'll briefly summarize the process:
- on the Canvas (container object for UI), it has a component named 'Canvas Scalar'. In the inspector, drag the slider all the way to the left (which is labeled 'width'). Set the reference resolution equal to whatever resolution is in the Game view.
- make sure each UI component is able to be moved along with the corners of the screen. To accomplish this, click a UI element and click on the graphic in the top-left of the Rect Transform component (in the inspector). This opens a little menu where you can choose where to anchor the UI element.
That's pretty much it.
As a last tip, if you have your UI elements parented (grouped in the hierarchy), you can just make the anchors work for the parent element. So you might have a few buttons in a certain corner, and you parent them to a empty object which allows you (as a dev) to drag them around or enable/disable them as a group (for convenience). In that circumstance, you only have to anchor the parent object to its corner. Just make sure the empty object isn't located somewhere really odd - it needs to be around the same position as the UI contained within it.
← Return to game
Comments
Log in with itch.io to leave a comment.
Cool game. Very tough. I only beat 2 levels so far. At some point I'll try again.
My only complaint is that the UI was cut off at the corners of the screen for me.
Oh it was? I have no idea as a developer about anything to do with UI scaling ^^'
glad you enjoyed it though! :D
Just finished going through and fixing UI screen scaling problems for one of the first games I made in Unity - Cat Box Defender.
I imagine UI is a very common challenge for jam-games.
At risk of offering an overabundance of unsolicited advice, I'll briefly summarize the process:
- on the Canvas (container object for UI), it has a component named 'Canvas Scalar'. In the inspector, drag the slider all the way to the left (which is labeled 'width'). Set the reference resolution equal to whatever resolution is in the Game view.
- make sure each UI component is able to be moved along with the corners of the screen. To accomplish this, click a UI element and click on the graphic in the top-left of the Rect Transform component (in the inspector). This opens a little menu where you can choose where to anchor the UI element.
That's pretty much it.
As a last tip, if you have your UI elements parented (grouped in the hierarchy), you can just make the anchors work for the parent element. So you might have a few buttons in a certain corner, and you parent them to a empty object which allows you (as a dev) to drag them around or enable/disable them as a group (for convenience). In that circumstance, you only have to anchor the parent object to its corner. Just make sure the empty object isn't located somewhere really odd - it needs to be around the same position as the UI contained within it.
Just moved house so I missed the notification for this, but thank you :D
this is very helpful ♥
I hope you all enjoy! ♥