UI Scaling?!

[Winklehner]

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. :?

[iivo_k]

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.

[Tim-C]

You can also do this manually by modifying the scale factor on the Canvas directly.

This is what one of our developers wrote:

Setting the retina resolution as the reference will make non-retina have downscaled graphics and text by default. Setting the reference to the non retina resolution will make the retina resolutioon have upscaled graphics and text by default. Downscaled usually looks better, so using the retina resolution as reference is recommended.

If you want more control that simply upscaling or downscaling graphics and text, you’ll need to write scripts for it for now. Possible things to do with scripts: Switching sprites used by Images between low-res and hi-res versions, and setting the pixelsPerUnit property on Image and Text components. We want to make things easier down the road, but for 4.6 / 5.0 the above is what you have to work with.

[Winklehner]

Thanks! This works fine.

[djweinbaum]

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?

[Winklehner]

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.

[djweinbaum]

@Thomas Hübner

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.

Oh snap there’s already a script for it! I thought I was going to have to write one. Thanks Thomas.

[runevision]

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).

[davebuchhofer]

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…)

[runevision]

@davebuchhofer

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’m not aware of any such issue. Can you let me know what the case number for the bug report is?

[QI1]

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.

[QI1]

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…

[_Radagan]

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:

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

[runevision]

@QI1

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…

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

[runevision]

@_Radagan

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.

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).

[DWilliams]

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]

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.

[QI1]

@runevision

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

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

[DWilliams]

@_Radagan

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.

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.

[runevision]

@QI1

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?

Yes, that’s what the Reference Resolution setting on the CanvasScaler component is for.

@QI1

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.),

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.