How to make UI pixels the same size as other asset pixels?

[CapnFishboy]

Hello, I am new to Unity but understand a lot of the basics behind game design and different fundamentals, but right now am trying to create a project I have been making assets for. I have made a top down shooter, I have my player made and have a movement script with a camera follow, all is good. Now I am trying to work with UI and am starting to run into some issues. All my art I have made is pixel art, and I am now trying to make sure all my assets have the same pixel sizes and Pixels Per Unit (PPU) . As I am creating UI, I am running into the issue of preserving the same pixel sizes, and am not sure how to keep UI elements having the same pixel sizes of game assets. For reference, all my assets have a PPU of 16, and the screen size for the UI and whole game resolution is 480x270 pixels. when I press play and move around, my UI background right now has pixel sizes smaller than my game assets. Any ideas as to how I should fix these issues?

Here is an image for context. Notice the UI around the edge of the screen, and the 2 player models in the middle circle, and note the pixel sizes or different.

[Kurt-Dekker]

If you mix SpriteRenderers with CanvasRenderers you need to keep them in sync size-wise.

If you keep the SpriteRenderers fixed (sounds like you have decided already?) then the tweaking will likely be done via the CanvasScaler.

Here’s more reading:

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.

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

[CapnFishboy]

@Kurt-Dekker

If you mix SpriteRenderers with CanvasRenderers you need to keep them in sync size-wise.

If you keep the SpriteRenderers fixed (sounds like you have decided already?) then the tweaking will likely be done via the CanvasScaler.

Here’s more reading:

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

https://docs.unity3d.com/2023.1/Documentation/Manual/HOWTO-UIMultiResolution.html

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

https://discussions.unity.com/t/845782/4

https://discussions.unity.com/t/848795/5

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.

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

I will look into these, thank you for the information and resources. I was looking into the problems I was having further and was noticing that my camera was zoomed in a little too much, but wasn’t sure if it were possible to set the camera “zoom” or camera focus area to only render an area of 480 x 270 pixels based on my UI and asset designs? not sure if these camera settings are available within the provided documentation.

[Kurt-Dekker]

@CapnFishboy

but wasn’t sure if it were possible to set the camera “zoom” or camera focus area to only render an area of 480 x 270 pixels based on my UI and asset designs?

Look up letterboxing techniques.

There are many approaches depending on how you’re doing things.