How do i fix the layout problem in unity?

Question

Im trying to build a replica of the game 'Breakout'.

when i build and run the game in unity it looks good and everything id the correct scale but when i build and run the project on my laptop all the elements change size and some of the elements dont change size and i am not sure if i have done anything wrong or if i have forgotten to do something to stop it from changing.

This is what the game looks like in the unity editor when playing the game:

And this is what it looks like once i build and run the project on my computer:

My resolution is set to stand alone.

is there a way to get it to look like it does in the unity editor when i build and run it on my computer because that is what its supposed to look like.

Answer 1

These days, there are many different screen sizes, and resolutions.

My favorite solution is to use a reference resolution that can expand but never shrink. This allows you to have a safe zone that stays consistent across different screen sizes. For a generic case, you would use 16:9 aspect ratio, with the resolution of either 1280x720 or 1920x1080.

In Unity, on your canvas, modify the Canvas Scaler such that UI Scale Mode is set to Scale with Screen Size. Add your reference resolution, and set the Screen Match Mode to Expand.

In the Game tab you can preview what 16:9 looks like. You can try out other aspect ratios or resolutions.

For example, the iPhone 11 has a much wider resolution, so it expands horizontally. It's up to you to design your UI in a way that makes sense. You can either keep everything in the safe zone or align elements to the corners of the screen.