Canvas with Pixel Perfect Camera

Hi!

I'm making a game using the Pixel Perfect Camera component, but having issues making text in the UI scale properly for different resolutions. It just ends up blurry or distorted.

Here are the PPC component settings I'm using:


I'm using a canvas for the UI, with an image containing a couple of text elements and a button. Here are my canvas settings:


Here's how the text looks in my scene view:


I'm using this font (TTF version), with size 16 for "Name" and 8 for the other texts: https://assetstore.unity.com/packages/2d/fonts/free-pixel-font-thaleah-140059.

As you can see in the image above, the text is very blurry, and this is how it looks in my game view, with a resolution set to 320x180 (same as PPC component):


I would like the text to be pixel perfect without any blurring or distortion no matter the resolution (if that's even possible). As of now I can't get the font to render nicely at all in any view. Not even when trying to run a build of the game. Any help is greatly appreciated. If you want me to provide some more information I'd be happy to. Thanks!

 

Hi Sam_Ooi. Thank you for taking the time to help me out. I changed the Render Mode of the canvas to Screen Space - Camera, and attached my camera containing the pixel perfect component. I also changed the Canvas Scaler to use Scale with Screen Size, which seems to have the desired effect. These are my current settings:


The UI text scales nicely now and doesn't get distortet or blurry. However, now I can't get the UI to adapt to the screen size. I thought setting the Screen Match Mode to Shrink would make the canvas adapt to the screen size, but the UI elements get pushed out of the view when the window changes size.

Here's an image of a build using the above settings:


And this is how I've set up my Game view now:

 

Aha! Thank you so much! Using the custom Canvas Scaler script seems to do the trick. The UI scales nicely with the screen size, and the text looks good. Just out of curiosity, I looked into the script and tried to understand exactly what it does, and I think I get most of it. There are some nice comments in there. But if you have time I'd love a short explanation of how it's implemented and what it does differently from the default scaler. And will this custom scaler be part of some future "pixel perfect package"?

I have one last question regarding scaling and resolution. When building, I'm using the following settings:


If I change the Fullscreen Mode or the Width/Height, the changes don't seem to apply unless I do some other change in the player settings. Such as change the company name, version or something else. Is this a known issue?

 

Ah alright, I see. That makes sense. I'll dig into the code a bit more as well. I'll submit a bug report about my player settings issue. Thank you so much for your help, it's been invaluable!

 

Was using Pixel Perfect on Cinemachine and the Custom Canvas Scaler still didn't work for me and was using the viewport set by Pixel Perfect. Had to make a separate UI Camera with Pixel Perfect for all Canvases using Screen Space - Camera for them not to get squished.

 

I've followed the setup above, but still the UI images aren't pixel perfect, even with the Custom Canvas Scaler. Is there any solution? I've searched for months and the nearest solution I've found is this package.
The Pixel Perfect Camera is almost perfect, the only thing that remains is to make even the UI pixel perfected.

 

just running into this problem @Sam_Ooi

If I set the pixel perfect camera to reference resolution 398 x 224, and the canvas scaler to the same value, the canvas is drawn at different pixel ratios depending on the display screen size, meaning the pixels in the canvas and the camera don't match up. (iphone x screen size and 1080p screen size result in a scale mis match between the canvas pixels and the pixel perfect camera)

Usually I use a custom render canvas for both game and ui, I wanted to try pixel perfect camera for a new project but it seems that theres a bug with the screen space canvas part of the setup.

Using Unity 2019.4, 2D Pixel Perfect 2.1.0

The custom canvas scaler attached above doesn't fix the issue for me, unless using both axes of "Crop Frame".

Is there a way to make the canvas scaler and pixel perfect camera use the same scale (in essence, match up) without using Crop Frame?

 

Ended up using the solution posted above (ocias pixelart camera) as the Unity made plugin doesn't support canvas properly. Would advise anyone finding this to do the same for now, until Unity fix their pixel art camera.

 

This package completely broke my project and I'm still getting errors from it after I removed the package any ideas of how I can get rid of the errors. Literally did nothing other than add the package. https://i.imgur.com/cVmcJgn.png

 

at the bottom of that page theres a comments section, Alexander seems quite responsive so give him a shout!

 

I fixed this error, but the real problem I'm having is that when using that pixel perfect script if I change the size of a font it is either super blurry or unreadable, did you run into this issue at all? It's even happening in the example project provided with the package, and he's not responding on the website

 

for fonts in fixed resolution pixelart projects, you almost certainly need to use a pixel art font in most cases. These can't be changed in point size as the data is only designed to support one point size clearly. For extra point sizes the font designer needs to make various fonts at different pixel sizes.

I support font scaling in my asset store pack, it requires multiple canvases. I tried it out with ocias pixel perfect camera and works fine.

 

Yeah if I use a different canvas than is selected by the Ocias Pixel Perfect Camera the font looks perfect I guess that works. Would just be nice to be able to use the same canvas as the rest of the UI assets