Text distorted by pixel perfect option on canvas

I'm having a really hard time getting the position of my button text to remain consistent across multiple resolutions, and I've discovered that the source of the issue is Canvas.pixelPerfect.

When pixel perfect is enabled, the position of my text shifts to align itself with the pixel grid. More often than not, it makes the text look uncentered when positioned over buttons or backgrounds. Disabling pixel perfect makes the positioning consistent, but creates unacceptable graphical glitches when the resolution changes.

(I should mention that I'm using a pixel font (rendering mode is set to Hinted Raster and filtering mode is set to Point)).

This is how the text ought to look. This is with pixel perfect enabled on the canvas at my target resolution:



This is with pixel perfect enabled on the canvas at 2X my target resolution. Notice how the text has shifted up and no longer appears centred:



Disabling pixel perfect at 2X my target resolution has no noticeable effect (to my eyes):



Disabling pixel perfect at my target resolution causes the text to appear cropped along the top, but the positioning is now consistent across resolutions:



Is there any solution to this? Making Unity work nicely with pixel art and fonts is such a chore

Thank you for the help!

 

Is it possible to move the text slightly downwards? Little enough that it doesn't affect the text at 1x, but enough that it does affect the text at 2x.

If it doesn't work then well, I don't know. These things are hard to say much about without all the context being available.

 

Hi @runevision,

Thank you for the quick reply! I tried repositioning the text by a fraction of a pixel, but that didn't solve the issue. When viewing the text at 2x, I have to scale my text offset by 2x, as well, to get it looking correct (text looks centred at 1x when it has a -4 Pos Y offset, text looks centred at 2x when it has a -2 Pos Y offset).

I'm out of ideas on how to get around this... The orthographic size of my main camera is fixed, I don't have any other scripts in the scene (aside from one that sets the filtering mode of the font to Point on Awake)...just the canvas, panel, button, text, and some layout components.

I've filed a bug report with a bare bone repro project. The case number is 721489. I'd *really* appreciate it if you could take a look!

Thanks so much!!

 

Well, I'm not part of the UI Team anymore, and I've never been involved with text rendering specifically.

But I did have a quick look. As I suspected, it's mostly various rounding that adds up.

For example, your layout group is 35 pixels tall and the centered buttons inside are 20 pixels tall. With pixel perfect turned on, this means the remaining 15 pixels have to be split with a 7-8 split or 8-7 split, so the buttons will be shifted half a pixel up or down. At 2x resolution this is not necessary. There are now 30 remaining pixels that can be split evenly in 15-15, so no shifting occurs.

Setting the layout group height to 36 instead made the appearance more similar for the 1x and 2x scalings. Shifting the text by a fraction further made them more alike. Some remaining difference I couldn't fix since the font size become one pixel taller at 2x due to no longer being subject to the same rounding, and I can't tweak the font size up or down by less than 1.

Generally I think you would have better control if you designed the layout at 2x and used the 2x resolution as the reference, making sure to have elements aligned at multiples of 2 pixels where it matters most. Then for font sizes for example, you'd have twice the precision in choosing a font size that is good at both 1x and 2x.

 

Hi Rune,

Thank you *so* much for taking a look! The way you've explained it makes a lot of sense. I did try redesigning/repositioning things with 2X at the target, and I'm getting better results

Thank you again for your time and suggestions!! <3