Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[uGUI] Dynamic font scaling and layout based on pixel density, resolution, and device type?

Discussion in 'UGUI & TextMesh Pro' started by JimArtificer, Sep 2, 2014.

  1. JimArtificer

    JimArtificer

    Joined:
    Feb 2, 2014
    Posts:
    8
    I am looking for some information about what is possible with the new uGUI system. First, let me say that the demo videos are impressive. This looks like a slick version of what NGUI and DaikonForge were offering.

    While the 3D projections into world space are flashy, I am disappointed I haven't seen anything about the topics mentioned in the title. Unity's primary strength is that it runs on many platforms. As a developer, I want to be able to create a UI that will work on multiple platforms. One that will change to accommodate screens with different pixel densities, resolutions, and physical sizes.

    It is not sufficient for everything on the screen to scale up or down when building a game intended for PC and tablet/phone. Such an approach commonly leads to blurry textures or impossible to read fonts on at least one device.

    When I wrote a UI API in XNA, I made font height the primary unit of measurement, not pixels or percentage. This approach is also being used in the most recent version of CSS for web pages.

    I would be extremely happy to be wrong about this, but it doesn't appear that uGUI will allow for a "build once, deploy everywhere" UI. Are these features on the way? Have I missed something in the documentation?
     
  2. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    Have you watched the tutorial videos and looked at the FAQ thread, we cover topics to do with Canvas scaling and multi resolution there.
     
  3. JimArtificer

    JimArtificer

    Joined:
    Feb 2, 2014
    Posts:
    8
    Hi Tim, are you referring to these links?

    http://unity3d.com/learn/tutorials/modules/beginner/ui
    http://forum.unity3d.com/threads/frequently-asked-ui-questions.264479/
    If so, I reviewed them before creating this thread. It is nice to see the anchor system for handling slightly different aspect ratios. I also think the tools for interacting with it were well-designed.

    Most of the techniques and features related to device independence in uGUI seem to be focused on the scaling of images. Maybe the undocumented Physical Resolution component will help a bit, but what I'd really like to see is a "Font Resolution" component which controls a multiplier that applies to all font heights in the project. Not only would this allow for a UI that is readable on both desktop and phone, but it also provides accessibility options in the form of allowing users to pick their font size.

    The majority of the time, the acceptable size for a touch target is directly related to the acceptable size of a line of text. To that end, I find that when designing a game UI, it is more helpful and intuitive to be able to specify "this label will be 200% of the height of a standard label" than "font height 18".

    Looking forward to your thoughts.
     
  4. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Doesn't the text auto-sizing feature sort of address this?

    Meaning if a RectTransform size is adjusted based on the device resolution / aspect ratio / etc and the text automatically scaled to fit that container (RectTransform), would that not be a workable solution?

    I am just curious by the way.
     
  5. JimArtificer

    JimArtificer

    Joined:
    Feb 2, 2014
    Posts:
    8
    Sadly, no. This is an example of the "image first" approach that I mentioned. The text would be sized to fit the rect. That rect size may have made sense on one device, but now that the physical size of the display has changed the label's rect may need to take up twice as much proportional space to be legible.
     
  6. superpig

    superpig

    Drink more water! Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,649
    I'm not sure there's a clean and generic way to handle this; the rules for how you want to reflow your UI on small screens are going to be fairly game-specific, are they not? If you want the text to take up proportionally more space on screen below a certain size then aren't you usually going to need to move other elements out of the way and so on?
     
  7. JimArtificer

    JimArtificer

    Joined:
    Feb 2, 2014
    Posts:
    8
    It is certainly easier to build a UI for one resolution than for many, but web sites and web browsers handle this problem all the time. I believe the current industry buzzword for it is "responsive design".
     
  8. shawnblais

    shawnblais

    Joined:
    Oct 11, 2012
    Posts:
    324
    At the end of the day, all we're talking about is a simple global scale factor.

    Whatever happens under the hood, when you define a 'ReferenceResolution', just needs to be exposed as a variable we can set at runtime. Then we can detect the resolution, and assign the appropriate scale ourselves.

    It really would be nice though, if the units were based on physical dimensions rather than pixels.
    ie, all buttons should just be 0.3" tall, with properly sized fonts, regardless of the screen size.

    Then we could programatically adjust scale on top of that easily, ie:
    if(isTablet){
    canvas.scaleFactor = 1.25;
    }
    else if(isReallySmallPhone){
    canvas.scaleFactor = .85;
    }
     
  9. superpig

    superpig

    Drink more water! Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,649
    I believe that's just transform.localScale on the canvas.
     
  10. superpig

    superpig

    Drink more water! Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,649
    Yeah, but that's all built on top of a model of the content as a document, with a flow, etc. There's no concept of things like 'inline' vs 'block' in the Unity UI system (and nor should there be tbh, as it'd be inappropriate for the majority of game UI).

    For the time being, perhaps you just need to attach a component to all your UI.Text objects which changes UI.Text.font depending on the frame size?
     
  11. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Or take a look at TextMesh Pro which handles dynamic font scaling and rendering much better than Unity's bitmap font system and supports unity 4.6.
     
  12. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Well that is exactly what Canvas.scaleFactor is for. You can set this at runtime just as you're suggesting. You're even listing code examples yourself. So I'm unsure what it is you're requesting?

    That is what the PhysicalResolution component is for, which can also be added to the Canvas.

    The way it currently works is that everything is just scaled up or down, and this can make texels larger than the screen pixels, which can make things appear blurry. This can be worked around by using a script that sets the pixelsPerUnit property on individual Image and Text components. We'll find better solutions for this down the road at some point after 4.6.