Background images and constant physical size

Unity Engine
1

Is there a proper way of creating UI’s for high DPI screens with 9 slicing backgrounds?

For a desktop application, we’re trying to make a UI where background images/icons remain pixel perfect at 200% Windows scaling.
In panel settings we have scale mode “constant physical size” and reference DPI “96”. We are only using PNG images for backgrounds. We understand that if we make a VisualElement’s width and height in px the same as the png’s pixels, at 96 dpi and 100% Windows scaling it will remain pixel perfect, at 200% image pixels will be larger than monitor pixels. If we make the reference DPI 192 then it will be pixel perfect at 200%. This would be one way to solve it, but it seems unnatural, as the units we have to use when defining the UI are at least twice as normal, ideally the UI units (in points) should be lower than the physical pixels.
The DPI metadata in the png seems to be ignored and uses always 96 dpi as 100%. Also, if converted to a sprite, the Pixels per Unit field of the sprite is also ignored.

In the documentation, it mentions that if, rather than using ‘url’ we use ‘resource’ in the uss, we can have a second image with a @2x suffix and will use that one rather than the one without suffix when scaling is over 100%. This way you could use the pixel units equivalent of 96 dpi (100% scaling). The problem with this method is that backgrounds using 9 slicing stop working, the images are just stretched as regular images.

2

I found another thread that runs into the exact same issue:

3

Hi,

It really seems that you have found something broken with the resources files combined with the 9 slices.
It is a different issue from the thread you liked as the other one was an interaction between 9 slices and sprites.

Can you file a bug with a test project where we could reproduce the issue?
This would help us to fix it quickly. :slight_smile:

Thanks

4

I think it’s two different issues:

  1. Unable to do 9 sliced backgrounds with images for high dpi (images denser than default 96 dpi). This is the same issue as the other post.
  2. Unable to do 9 sliced backgrounds using uss slice properties when using ‘resource’ rather than ‘url’.

I prefer using ‘url’, I tested ‘resource’ only because of the comment in the docs that it would use @2x images if the exist for this, but this also doesn’t seem like the best approach.

5

9 slices with @2x should work with regular textures (they are used extensively in the Unity Editor). Here’s a few things to consider:

  • You can use background-image: url("/Assets/File.png"), if File@2x.png exists, it will be used on high-res displays.
  • Define the slices in terms of the low-res texture, they will be scaled-up automatically when an @2x texture exists

Let us know if you have issues.

6

Thanks for the reply, the documentation here seems imply that the @2x images only get used when using resource() and not url(). Is it working with url in 2020.1? Will it use the 2x texture as soon as the Windows scaling is set at any value over 100% (like 125% scaling)?

I believe I tested this with url, and didn’t see any difference, but didn’t test much since the documentation implied it wouldn’t work, I can test again.
Also, can the textures be set as sprite in Unity, or have to be left at default? (or this doesn’t make a difference).

7

From what I can see here, the @2x should work with url() in 2020.1, it seems the documentation is out of date.

Yes.

I would import them as “Editor GUI” textures for now if you want to avoid surprises in the future. We introduced sprites support in 2020.2, which may change the behavior of sprite backgrounds if/when you’ll upgrade.

8

Great, thank you.