How to setup resolution scaling with UI toolkit?

In my previous game, which used uGui, I had the canvas setup to be a virtual 1920x1080 that would the get scaled to the actual resolution the game ran in at runtime.

That was awesome, since I could create a pixel perfect layout for full HD that nonetheless scaled to other resolutions (and aspects).

I’d like to setup something similar in UI Toolkit… but how?

Right now, my USS properties are defined in ‘px’, but they don’t scale with the resolution. Do I need to define everything in % to do that? Or can I setup some virtual unit? (i.e. like em or rem in CSS)

Nevermind. I need to setup my PanelSettings to do what I want…

4 Likes

Hi, im having the same problem. Im new to unity and im trying to create a stupid UI just for learn the concept of UI Toolkit (never worked with the previous one).
I have a simple text in the upper right corner, a background and a sprite for the player. Nothing is scaling at all, i feel like im missing something foundamental. Can anyone help? Thank you very much

As Codalyn said in their post above, you need to adjust the Panel Settings asset used by your UIDocument behaviour. Specifically you’d want to set ScaleMode to ScaleWithScreenSize and then set your reference resolution (virtual resolution) and weather you want to scale based on screen width or screen height in cases where the target screen doesn’t match the aspect ratio of your reference resolution. With this setup you’ll also want to be sure that in the UIBuilder you do not have your document set to match the current game view size but instead give it the same reference resolution that you set in your Panel Settings so that you get a matching view.

1 Like

Hi @Sluggy1 thank you for the answer.
Now I’m just trying with the text (I attach the screen of the panel settings and the result)
I set the reference resolution to 1080x1920 also in the UI Builder (it was Match Game View)

I have opened a separate thread for the problem

Game view:
8905599--1218942--upload_2023-3-27_10-6-42.png

Simulator:
8905599--1218936--upload_2023-3-27_10-3-34.png

8905599--1218942--upload_2023-3-27_10-6-42.png
8905599--1218936--upload_2023-3-27_10-3-34.png