Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice

Question UI images resolution scaling issue

Discussion in 'UGUI & TextMesh Pro' started by W1R3S, Aug 4, 2023.

  1. W1R3S

    W1R3S

    Joined:
    May 25, 2021
    Posts:
    8
    I have a small issue I cannot figure out. My entire game is made up of UI elements. So in the attached image you see a couple of buttons and if you look closely the pixels are distorted (the boxes, you can ignore the text). Here are the (I believe relevant) setting I use:

    Imported sprites are set to 16ppu, point (no filter), no compression.

    Camera: default settings, I've tried using Pixel Perfect Camera with various settings, but doesn't seem to change anything.

    Canvas: Screen Space - Overlay, pixel perfect is checked (but also doesn't seem to change anything) UI scale mode is set to Scale With Screen Size, reference resolution is set to 512 x 288, reference ppu is set to 16.

    Then I have a UI panel anchored to stretch, on which I have my images and buttons etc. The distortion happens on all images when I have the Game View Resolution set to Full HD or 4K UHD, but if I set it to QHD (1440) everything looks good! So I'm pretty sure it's something to do with resolution scaling, I just don't know how to get it looking good on every resolution.

    EDIT: I also just made a new 2D project, setup the canvas the same way, added an Image, set the sprite to native size (48x48px) and the same distortion happens, so it should be very easy to reproduce this issue.

    If anyone has any idea how to fix this, or if you need more information, please let me know!
     

    Attached Files:

    Last edited: Aug 4, 2023
  2. karderos

    karderos

    Joined:
    Mar 28, 2023
    Posts:
    376
    did u test that on the build? and do you have a 4k screen?
     
  3. W1R3S

    W1R3S

    Joined:
    May 25, 2021
    Posts:
    8
    Yes, it looks the same on the build, and yes I have a 4k screen.
     
  4. MelvMay

    MelvMay

    Unity Technologies

    Joined:
    May 24, 2013
    Posts:
    11,409
    Please ask UGUI questions on the UGUI forum. I'll move this thread.
     
  5. karliss_coldwild

    karliss_coldwild

    Joined:
    Oct 1, 2020
    Posts:
    599

    Overlay canvas isn't affected by cameras. You can have 0 cameras, or maybe 2 cameras for split screen and the overlay canvas should still work the same.


    The pixel perfect option for Canvas has completely different meaning than pixel perfect in the context of pixelart. The canvas pixel perfect setting nudges the drawn GUI components by up to 1 screen pixel. This can help even for high resolution non pixelart UI to ensure everything is aligned to screen and reduce some blurriness, but since it moves only by 1 pixel difference is very subtle. It will not help with getting correct scaling factor for pixelart.

    Now simple math:
    1920/512 = 3.75, 1080/288=3.75

    2560/512=5 1440/288=5

    3.75 is not an integer 5 is, that's why you are getting bad result on FullHD, but good results on 2560x1440 .

    Some thing you can do:
    • Choose a different reference resolution (and possibly redo all your assets, since the size of existing ones will potentially be changed)
    • calculate the scaling factor yourself and assign it to canvas scaler which is configured in fixed pixel ratio mode, or replace the canvas scaler.
    • if you are also using pixel perfect camera for non canvas objects, then you can copy the scaling factor calculated by pixelperfect camera and apply it to canvas.

    If you choose not to change the reference resolution you still need choose what will happen when resolution isn't perfect multiple of reference resolution.

    • Scale the whole -> that's what you are currently getting, not pixel perfect
    • draw black borders
    • choose biggest scaling factor which allows fitting a multiple of reference resolution. Your game mechanics and UI needs to be designed so that it can deal with slightly wider are. Worst case 99% bigger than reference, but typically no more than 30-25%.
     
    W1R3S likes this.
  6. W1R3S

    W1R3S

    Joined:
    May 25, 2021
    Posts:
    8
    Thanks Karliss, for the thorough reply. Since my game is 100% UI it wouldnt be a big deal to redo my assets. But I am unsure what a good reference resolution would be. I can go for 1080 for example, but if the resolution of the game would then be set to 1440 for example, the math would again not be an integer so my problem would persist right?
     
  7. karderos

    karderos

    Joined:
    Mar 28, 2023
    Posts:
    376
    you should do 640x360
     
    W1R3S likes this.
  8. W1R3S

    W1R3S

    Joined:
    May 25, 2021
    Posts:
    8
    Well damn, that's the golden number isn't it! Thanks!
     
    karderos likes this.