koobas.hobune.stream
How can I get pixel perfect rendering on UI elements?
I'm working on a 2D pixel perfect game and I'm having some issues with the UI.
Everything works fine in game with game objects and cameras. Took awhile to figure it out, but that works smoothly now. The issue is I have a level where I would like to have some minigames using UI elements and I'm getting really strange behavior.
Top middle circle: These two Images should be touching with no visible gap.
Top right oval: It appears things aren't lining up because the edge of the image is not lined up with the edge of the rect-transform. The offset seems to vary based on height/width of the element (i.e. it doesn't scale smoothly) but I've set the height/width the match the height/width of the sprite so there really shouldn't be any scaling.
Bottom circle: These ...shapes... should all be square, uniform, pixel shapes. I don't understand how they can get so incredibly distorted. (You can see part of the same in the bottom left of the scene view where it does display correctly.) This is an extreme example, usually it isn't that bad, but it's nowhere close to displaying as pixel perfect and the distortion is really obvious, even in a build of the game.
Some additional images showing the image settings and import settings for reference.
Checking the box for "Use Sprite Mesh" seems to help in some cases, but still doesn't fix the issue.
My best guess is that there's something going on in the Canvas or the Canvas Scaler that causes this, but I can't see into the classes to know what's going on. If anyone has any ideas of how to get this UI to render properly I'd be quite grateful!
Hi, it's always difficult to understand this kind of problem, even with a good description and images. $$anonymous$$aybe you can find help with the Unity "2D pixel perfect" package here: https://forum.unity.com/threads/pixel-perfect-preview-package.533433/ or learn more about this in this Unity blog post: https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/
Have you made sure your Canvas scaling type is set to Pixel Perfect?
Yes, the Canvas is set to pixel perfect, but it doesn't seem to make a difference either way.
As far as I understand the 2D pixel perfect package, it does everything in game space, and doesn't make any adjustments for the UI elements to make them pixel perfect as well. I could be missing something in the package, and if you see something that's pixel perfect in UI space let me know.
$$anonymous$$y fallback is to just build the UI in gamespace and point a camera at it that doesn't move, but that's not a particularly appealing solution since things that look like UI elements won't natively behave like UI elements.
Ho, sorry, I thought the package included UI solutions too. In the new image, you have a canvas scaler set to scale with screen size: this will scale sprites with a non integer value so it is not pixel perfect. Try using "constant pixel size" and use integer scale factor only.
You really should use one of the many solutions out there:
https://assetstore.unity.com/search?q=pixel&q=perfect&k=pixel%20perfect
While I agree that it's good to have a solution and keep moving with development, I also think it's important to know how things work and why. So while it may be good for him to use a pre-built solution like that one, it may also help for him to know what's going on and why, so that he can use that solution effectively. Afterall, I've never purchased a code asset I didn't rewrite at least SO$$anonymous$$E OF.
Every pixel perfect solution I've seen deals with camera settings. I've coded my own camera and settings to be pixel perfect in game space and that works fine (this started before Unity released their Pixel Perfect package).
What I don't understand is how to get Unity to display pixel perfect UI elements. With a screen-space overlay no cameras are involved so a pixel perfect camera doesn't help me. The only relevant settings seem to be on the canvas and the box that says pixel perfect doesn't make things pixel perfect for me, so I'm a bit perplexed about how to resolve the issue.
