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. Dismiss Notice

Background images and constant physical size

Discussion in 'UI Toolkit' started by visose, Oct 16, 2020.

  1. visose

    visose

    Joined:
    Nov 2, 2014
    Posts:
    28
    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. visose

    visose

    Joined:
    Nov 2, 2014
    Posts:
    28
  3. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    515
    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. :)

    Thanks
     
  4. visose

    visose

    Joined:
    Nov 2, 2014
    Posts:
    28
    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. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    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. visose

    visose

    Joined:
    Nov 2, 2014
    Posts:
    28
    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. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    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. visose

    visose

    Joined:
    Nov 2, 2014
    Posts:
    28
    Great, thank you.