How can I ensure pixel-perfect scaling between UI buttons and game objects in Unity?

[mhakancvsgl]

I’m working on a pixel art game in Unity, and I want to make sure that my UI buttons and game objects are scaled proportionally to each other according to pixel perfection principles. But when I set the same scale for both button and object they are not aligned correctly based on pixel ratio. How can I make sure that both my UI elements and game objects maintain a consistent pixel ratio across different screen resolutions?

[Kurt-Dekker]

I would start with some pixel perfect tutorials, and also pay attention to anchoring and scaling in the UI.

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Unity - Manual: Designing UI for Multiple Resolutions

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Inconsistent game object placement/size between two people

It can be very fiddly but it is super-powerful once you reach comfort with the UI. Building upon Praetor’s great post above, let me suggest this approach: make a quick first draft of your UI. in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions) see what happens to your UI in this new shape window iterate and fix your anchors and scalings and whatnot Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) …

SOLVED: Game UI Button Size problem

That seems excessive… What is the text of the actual complaint from them? Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box: [7337383--891847--fixed_aspect_ratio_box.png] then anchor that fixed against the bottom center (red dot below). On the ipad it looks like: [7337383--891850--ipad.png] on the iPhone it looks like: [7337383--891853--iphonex.pn…

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

Here’s some more fit-inside-UI-content notes:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

Pixel Perfect requirements are extremely stringent, like a banknote:

Pixel perfect Camera component does not work correctly

Pixel perfect can only happen as a result of meticulous care from the moment you generate the asset through import and setup, prefabs (no scaling, no rotating), to setting up the scene, the resolutions, the camera, literally every single step has to happen as if you were preserving fingerprints at the scene of a crime. Every single number you choose, select, modify, or compute must be PERFECT. If you slip even one part of that, miss even the tiniest detail, odds are you won’t have a pixel perf…