Search Unity

Feedback Pixel perfect UI support for the Pixel Perfect Camera

Discussion in '2D' started by RevengerWizard, Jan 13, 2021.

  1. RevengerWizard

    RevengerWizard

    Joined:
    Feb 15, 2020
    Posts:
    15
    I searched for months and months, trying to find a way to make even the UI pixel perfect. I tried to use the Pixel Perfect Camera component, but though it makes UI pixel perfect, it will vibrate if any of the images are rotated.
    I've also checked various threads with the hope to find someone with my same problem, but still didn't find any true solution using the package provided by Unity.

    After giving up with the Pixel Perfect package for a while I found this package, which also supports very well pixel perfect UI and it scales with different resolutions. But, now, with the new 2d light system, including all the Post Processing effects, in the Universal RP, it doesn't work, so I have to use again the Pixel Perfect Camera component (Experimental).

    I know, I could just leave all the UI like that, maintaing only the general gameplay pixel perfect, but why should I?
    It's kinda frustrating that a package like this doesn't include any solution for this problem.
     
    Amon likes this.
  2. digiwombat

    digiwombat

    Joined:
    Sep 26, 2013
    Posts:
    48
    Having a pixel perfect UI is more a function of making sure that your UI only scales in integer values. That is to say, you can make your UI, have the canvas be a pixel perfect and set the reference resolution to whatever you game's reference resolution is. The main, unchangeable thing to drill into your brain about pixel-perfect ANYTHING is that you can only integer scale pixels and keep them perfect. One pixel needs to turn into 2x2 and 3x3 pixels and so on, there's no beating math here.

    In my case, the reference resolution is 640x360 for my UI with a PPU setting on the assets of 1 (might be different for you). You can then set a CanvasScaler on the top level Canvas to Constant Pixel Size mode and use a simple script like this one:


    Code (CSharp):
    1.  
    2. using UnityEngine;
    3. using UnityEngine.UI;
    4.  
    5. [RequireComponent(typeof(CanvasScaler)), ExecuteInEditMode]
    6. public class UIScaler : MonoBehaviour
    7. {
    8.     public int baseHeight = 360;
    9.     public int baseWidth = 640;
    10.     public int widestElement = 510;
    11.     private RectTransform rectTransform;
    12.     private CanvasScaler scaler;
    13.     private int[] res = new int[2];
    14.     private int newheight = 0;
    15.     private int newwidth = 0;
    16.  
    17.     private void Start()
    18.     {
    19.         scaler = GetComponent<CanvasScaler>();
    20.         rectTransform = GetComponent<RectTransform>();
    21.         ScaleUI();
    22.     }
    23.  
    24.     private void LateUpdate()
    25.     {
    26.      
    27.         if (res[0] != Screen.height || res[1] != Screen.width)
    28.         {
    29.             //Debug.Log("Scale Changed");
    30.             ScaleUI();
    31.         }
    32.  
    33.     }
    34.  
    35.     private void ScaleUI()
    36.     {
    37.         scaler.scaleFactor = Mathf.RoundToInt((float)Screen.height / baseHeight);
    38.  
    39.         if (widestElement * scaler.scaleFactor > Screen.width)
    40.         {
    41.             scaler.scaleFactor = Mathf.RoundToInt((float)Screen.width / baseWidth);
    42.         }
    43.      
    44.         res[0] = Screen.height;
    45.         res[1] = Screen.width;
    46.     }
    47. }
    48.  
    to make sure that your UI is always kept at a pixel perfect scale inside of the available screen space.

    This still requires you to make sure your UI fits where you need it inside the reference resolution, but it will auto integer scale the UI as best as it can to any resolution.

    EDIT: Also, if this isn't what you're after in concept, sorry. Hopefully it will help though. I try to keep my UI as far away from the black box that is the PixelPerfectCamera as I can since my reference resolution for my UI is 2x my game's reference resolution.
     
    FlyingFeesh likes this.
  3. RevengerWizard

    RevengerWizard

    Joined:
    Feb 15, 2020
    Posts:
    15
    Maybe I didn't explain well myself. For pixel perfect UI I mean also the pixel rotation that gives you the upscale render texture. Of course i can do this effect by setting UI canvas to Camera, but it vibrates when I move and doesn't scale well.

    The package mentioned above, does an incredible job by scaling well the UI and keeping it at a pixel perfect ratio and works well with every resolution.
    I also tried the Custom Canvas Scaler provided in the Pixel Perfect Camera, but it doesn't fix anything.
     
  4. digiwombat

    digiwombat

    Joined:
    Sep 26, 2013
    Posts:
    48
    I got ya, I missed a word or two in there somewhere so that's my bad.

    Have you tried manually handling the render texture for the UI by making a 1:1 scale render texture (320x180 or whatever you ref resolution is) and then having a dedicated UI camera render to the Render Texture and then just having that render texture overlay onto the main cam?

    Maybe a Unity 2D person'll show up and say there's a better way to handle it, but that's how I'd look to do it.
     
  5. RevengerWizard

    RevengerWizard

    Joined:
    Feb 15, 2020
    Posts:
    15
    So, yea I already tried the method you described and it works. When working with URP 2D Lights and all the Post Process effects, however, it's useless. Don't know why, but any type of approch don't work, probably because of the Render Pipeline or something like that.

    The real problem is the Pixel Perfect Camera doesn't have any support for this type of problem, except for the Custom Canvas Scalar, which from what I've tried doesn't solve anything.

    Also, yea, I hope some guy from Unity will read this thread and maybe suggest this as next feature to add to the package.
     
  6. japhib

    japhib

    Joined:
    May 26, 2017
    Posts:
    65
    I feel like you have 2 options:

    1. try to get that package working
    2. try to get your custom approach working (with a render texture & such)

    What about the custom approach "doesn't work"?
     
  7. RevengerWizard

    RevengerWizard

    Joined:
    Feb 15, 2020
    Posts:
    15
    The custom approch doesn't work with 2D lights and the Post Process effects.

    I tried all the various approches for that, but as I said in the other post, the real problem is the Pixel Perfect Camera doesn't have any support for UI, to make it pixel perfect, coherent at different resolutions. That is the problem and that's why I created this thread, in the hope that somebody from the Unity team will read this and start to work on it.
    For now I'll give up and stick with this package all its problems, since I just spent many months searching a solution for that and still didn't fix anything (most of).
     
  8. RevengerWizard

    RevengerWizard

    Joined:
    Feb 15, 2020
    Posts:
    15
    Or if someone who knows something about that can point me out to how make this pixel camera work with 2D Lights and Post Process, since I don't know where to start.