Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Responsive text size / layouts

Discussion in 'UI Toolkit' started by peabnuts123, May 26, 2020.

  1. peabnuts123

    peabnuts123

    Joined:
    Aug 8, 2013
    Posts:
    9
    Howdy all! I've just been trying out the latest UI Toolkit preview over the last few days. I'm very excited about this! I am a web developer professionally so IMO this is the best move Unity could have possibly taken.

    Anyways.

    I am wondering what the current state is on dynamic / responsive font sizes? e.g. I am re-implementing the pause menu from my game in UI Toolkit as a learning exercise, but I can't reproduce the effect I have right now of the menu getting smaller / larger based on the screen size. I can make the menu itself wider by specifying its size in %, but specifying the font size in % seems to have no effect / behaves weirdly. I can appreciate this is just a feature that hasn't been reached yet, but I am wondering if there's any possible way I can have dynamically sizing text right now.

    I have also been wondering about the future of some kind of "media queries" feature. I have been considering writing some kind of C# to swap out style sheets at certain breakpoints, but would be keen to hear others thoughts on this.

    Cheers!
     
    peabnuts123, May 26, 2020
    #1

  2. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    384
    Media queries would be useful indeed and is something we look into. In the meantime, on the editor side, you can do as you hinted: In c#, you register a callback to GeometryChangeEvent on the rootVisualElement to be notified when the window size changes. There you can apply a "wide-mode" css class on the root element, or swap to a different style sheets when the window goes below or above a threshold...

    On the runtime side, in the 0.0.4-preview version of the package, you can use the PanelScaler to specify a reference resolution and the panel will scale the content accordingly, changing font sizes and relayouting when necessary.
     
    uMathieu, May 27, 2020
    #2

  3. peabnuts123

    peabnuts123

    Joined:
    Aug 8, 2013
    Posts:
    9
    Ah PanelScaler, I will have to look into that, it sounds like that is probably what I need. I am still coming at this with very much of a web mindset where pixels are pixels…
     
    peabnuts123, May 31, 2020
    #3

  4. tomires

    tomires

    Joined:
    Oct 6, 2019
    Posts:
    3
    I would appreciate an update on the state of media queries (or support of responsive UI in general) in UI Toolkit.
     
    tomires, Apr 12, 2021
    #4

  5. sebastiend-unity

    sebastiend-unity

    Unity Technologies

    Joined:
    Nov 9, 2015
    Posts:
    183
    Hello,

    We have not yet made our way to media queries. It is still on the list of things we want to tackle.
     
    sebastiend-unity, Apr 13, 2021
    #5
    tomires likes this.

  6. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    384
    Responsive UI needs to be driven from c# code at the moment. You basically react to GeometryChangeEvent on the root element, then change styles/classlists to trigger changes.

    You can have a look at the GeometryChangeEvents sample that can be installed alongside the com.unity.ui package.
    Once installed, select 
    Window > UI Toolkit > Examples > Events > Geometry Changed


    ResponsiveUI.gif
     
    uMathieu, Apr 13, 2021
    #6
    siratsaponth likes this.