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

UI Scaling?!

Discussion in 'UGUI & TextMesh Pro' started by Winklehner, Aug 20, 2014.

  1. Winklehner

    Winklehner

    Joined:
    Apr 12, 2013
    Posts:
    20
    Hi, maybe I'm missing a point in the new UI system, but how can I design a interface for IPad non-retina and retina, where the buttons/text/aso. will be the same size on the screen?
    Resizing the game view has absolutely no effect on UI elements. :?
     
  2. iivo_k

    iivo_k

    Joined:
    Jan 28, 2013
    Posts:
    314
    You can add a ReferenceResolution script to a Canvas, which will cause all the units to be in reference to that resolution and scaled accordingly.

    Edit: There's also PhysicalResolution if you want to use actual size on screen.
     
    LichiMan and StarManta like this.
  3. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    You can also do this manually by modifying the scale factor on the Canvas directly.

    This is what one of our developers wrote:

     
  4. Winklehner

    Winklehner

    Joined:
    Apr 12, 2013
    Posts:
    20
    Thanks! This works fine.
     
  5. djweinbaum

    djweinbaum

    Joined:
    Nov 3, 2013
    Posts:
    533
    I'm also looking to do this, but I don't quite understand what you guys mean. Could someone explain with a tiny bit more detail? should I be in screen space or world space? What numbers should my script be watching and which ones should it be setting accordingly?
     
  6. Winklehner

    Winklehner

    Joined:
    Apr 12, 2013
    Posts:
    20
    Just go to your CANVAS. Choose Add component. Enter Reference Resolution. Add the script and choose e.g. the IPAD retina's resolution. Everything is in Screen Space Overlay.
     
    -chris and LichiMan like this.
  7. djweinbaum

    djweinbaum

    Joined:
    Nov 3, 2013
    Posts:
    533
    Oh snap there's already a script for it! I thought I was going to have to write one. Thanks Thomas.
     
  8. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Update: The ReferenceResolution has been replaced by CanvasScaler in beta 21.

    Also, from beta 20 onwards it doesn't matter if you use a HD or SD resolution as reference. In either case you will automatically get text rendering in the appropriate resolution and you can control sprite density using the pixelsPerUnit setting in the texture importer for the sprites.

    There is no longer any need to set a pixelsPerUnit property on every Text and Image component (and indeed it's read-only from beta 20 since it's controlled automatically as described).
     
    _protagonist and -chris like this.
  9. davebuchhofer

    davebuchhofer

    Joined:
    Nov 9, 2007
    Posts:
    126
    Hey Rune, will the scale on the RectTransform of the Canvas cause incorrect returns on the Camera.main.WorldtoScreenpoint() still? (As it does in b20 when using either the ReferenceResolution or PhysicalResolution).

    (I ask as someone stuck on b20 as it's the last webplayer build..)
     
  10. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    I'm not aware of any such issue. Can you let me know what the case number for the bug report is?
     
  11. QI

    QI

    Joined:
    Oct 27, 2012
    Posts:
    229
    Well it become harder and harder to understand, I am developing with a non-retina Mac and if I make the UI looks good on my Mac, it become small on retina iPad, and so on.
    I just want make it like the NGUI, when I using NGUI, I just set it to fixed size and use anchor to layout then everything looks nice.......
    Is there any way to do this ?
    Fixed size in Unity UI look kind of really fixed size, it is very small in High DPI devices.
     
  12. QI

    QI

    Joined:
    Oct 27, 2012
    Posts:
    229
    Use reference resolution could solve this either in editor and iPad and non-retina iPad, but what about iPhone , the UI didn't looks in a correct size, does it because iPhone's width and height isn't in a same ratio? If that is true, how can I make a UI the look good in both screen?
    I just figure it out for a night and can not find any solution........................................
     
    Last edited: Apr 30, 2015
  13. _Radagan

    _Radagan

    Joined:
    May 16, 2014
    Posts:
    38
    I have a related problem. I followed this scaling down approach to support iMac retina displays and other 4K monitors. But when I run my app in Web Player the input fields have no input cursor.

    Here are my canvas settings:

    Screen Shot 2015-04-30 at 4.48.33 PM.png

    I then build to whatever lower resolution that is desired. For web player I set 968x726.

    The problem is when I run the app in web player the input cursor on input fields isn't visible. I believe it's scaled too thin, and just doesn't render. If I set the build resolution to 2048x1536, it shows up in web player as an almost single pixel input cursor.

    Is there a way to fix this? I really need an input cursor for the UI, but I don't want to loose 4K support and have to adjust everything down. The UI is very important and needs sharp text.

    I'm using Unity 5.0.1f1
     
  14. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    There is no single correct solution; it depends on how you want it to work. I suggest to have a look at this page for some pointers:
    http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
     
  15. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    That's unfortunate. I can see the caret is set to render at one pixel width at the reference resolution so it would indeed easily be smaller on smaller resolutions.

    I'll open an issue for this so we find a better way to handle it. In the mean time you can either use a smaller reference resolution, or you can fetch the source code for the InputField class in our UI BitBucket repository and create a modified version for your project that has a wider caret (it's in the GenerateCursor method).
     
    _Radagan likes this.
  16. DWilliams

    DWilliams

    Joined:
    Jan 12, 2015
    Posts:
    63
    The workaround I've been using for caret not being visible on some lower resolution devices when using a retina reference resolution is to adjust the horizontal position of the Inputfields Text child object position to be an odd numbered offset, but I assume this can work the other way where you would need an even numbered offset if it wasn't showing and was already odd.

    So for example, I had my child text 30 from left and it was not showing so I modified it to 15 and it was then visible on all devices.

    If there was a way to set the width a bit wider on the caret that would be pretty nice though.
     
    _Radagan likes this.
  17. _Radagan

    _Radagan

    Joined:
    May 16, 2014
    Posts:
    38
    Runevision: Thank you for the quick response and confirmation, as well as for how I could address this in the short term. Do I need to file a bug?

    DWilliams: Your suggestion did the trick! I tend to size everything to even widths for retina. Setting the input field to an odd width worked beautifully. Thank you very, very much for your suggestion.
     
  18. QI

    QI

    Joined:
    Oct 27, 2012
    Posts:
    229
    Thanks you but I know how to use anchors to adjust element automatically, but scaling doesn't work. Well I want the UI can fit the high DPI screen automatically instead of I have to manually set some thing like reference resolution (because that doesn't work on device that their width and height don't match the same ratio as I designed.), a fixed size for scaling is nice because anchor system can still make every element locate at where it should be. Unfortunate, the new UI doesn't work that way, it just goes smaller when it draw on a high DPI screen, it just like draw everything pixel by pixel.

    I just want to make it like some thing ,for example Xcode, the UI element displays exactly the same but it just looks better on retina screen.

    It there any way to make this work in Unity?

    EDIT: FIXED TYPING ERROR
     
  19. DWilliams

    DWilliams

    Joined:
    Jan 12, 2015
    Posts:
    63
    Glad it helped, just be aware it's not perfect. Depending on the size of the font characters the caret may vanish and reappear as it travels along and hits those even numbered locations.
     
  20. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Yes, that's what the Reference Resolution setting on the CanvasScaler component is for.

    The ReferenceResolution solution works fine for screens with different aspect ratios, you just need to combine it with anchors. I don't quite understand what the problem is with "manually set some thing like reference resolution" - if there's no point of reference, the system can't know how much to scale things. I have a hard time understanding what kind of behaviour it is you want.
     
  21. QI

    QI

    Joined:
    Oct 27, 2012
    Posts:
    229
    Hi there, thanks for your reply.

    I don't want the UI to scale, I just want it layout automatically, and each element should always keep the same size whatever the screen resolution is.

    But if I use fixed size, all elements just become very small on high resolution devices, I mean, high DPI like retina screen . And if I use reference resolution, and set it to iPad's resolution, the UI elements will have a very small size on device that didn't match the ratio of width and height of screen, like iPhone.

    Is there any solution?
     
    a436t4ataf likes this.
  22. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    If you want the same physical size, use Constant Physical Size. If you want the same size as a percentage of the screen, use Scale With Screen Size.

    Retina screens have twice the resolution of non-retina screens. In order for UI content to look the same on retina - just "more high res" - as on non-retina, the UI content will have to be scaled to twice the size as measured in pixels. The Constant Physical Size and Scale With Screen Size options will do this, in different ways.

    Yes exactly, this is because it's not scaled. You need scaling to avoid this, so Constant Physical Size or Scale With Screen Size is the way to go.

    Either use Constant Physical Size, or use Scale With Screen Size and tweak the "Match Width Or Height" setting to a value that looks right.
     
  23. QI

    QI

    Joined:
    Oct 27, 2012
    Posts:
    229
    Hi there again, I also saw that there is another option "Constant Physical Size", what does this one exactly do ?
     
  24. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
  25. _Radagan

    _Radagan

    Joined:
    May 16, 2014
    Posts:
    38
    Hi Rune,

    Can I get an update or link to the issue you opened? Any chance of a fix in the next build of 5.1? I still have this happening and have to manually adjust things to get the cursor to show up. Right now, it works good for Web Player, but the cursor vanishes on WebGL... I support iOS as a target, so I need the retina reference resolution.
     
  26. jamorat1

    jamorat1

    Joined:
    Oct 16, 2015
    Posts:
    1
    Although this is an old post, I just found it today while looking for a similar issue. In the latest Unity 5.5, you can click on the canvas. In the sidebar there is a "Canvas Scaler Script." That script has a slider which is labelled "Match." If you bring that up to 1, then whether you look at the screen in something like an iPhone 5s which is low resolution, or an iPhone 6s Plus with very high res, the size of things on the canvas remains the same.

    I haven't yet tried it on a device, but I think it looks pretty good in the unity remote and game view. Try it yourself and see if it works like you need it to. Good luck!
     
    Ultroman likes this.