Search Unity

How to setup resolution scaling with UI toolkit?

Discussion in 'UI Toolkit' started by Codalyn, Apr 9, 2022.

  1. Codalyn

    Codalyn

    Joined:
    Dec 30, 2014
    Posts:
    41
    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)
     
  2. Codalyn

    Codalyn

    Joined:
    Dec 30, 2014
    Posts:
    41
    Nevermind. I need to setup my PanelSettings to do what I want…
     
    Selfmoon, wouldyourather and oleg_v like this.
  3. thejasper10

    thejasper10

    Joined:
    Mar 9, 2023
    Posts:
    7
    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
     
  4. Sluggy

    Sluggy

    Joined:
    Nov 27, 2012
    Posts:
    989
    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.
     
    Selfmoon likes this.
  5. thejasper10

    thejasper10

    Joined:
    Mar 9, 2023
    Posts:
    7

    Attached Files: