How to get a universal camera size for my game

Questions & Answers
1

I am creating a 2d game for android. There are loads of different screen sizes with all the different devices out there, and I’m having trouble adjusting my camera (and/or game?) to those sizes.

The background of my game is currently 320*480 pixels. I’ve tried adjusting the orthographic camera size as well as the aspect depending on the screen.height and screen.width but that didn’t work out.

If I play my game I either get borders filled with grey around either the sides or the top (never both because I can’t individually scale my camera x or y size, so one is always okay and the other always has grey borders)
Or it just cuts off the image, so 1/8th or so is missing on the left and 1/8th is missing on the right on the x axis.

I want my game to fit all screen sizes of devices, but haven’t been able to figure it out.

I’ve spent over 4 hours reading things on the web about it but have found no solution as of yet, hence I ask you to please help me; how do I make my game so that it fits all screen sizes?

Thanks in advance!

2

It’s a complicated problem - not necessarily for technical reasons - but often because people don’t know exactly how they want their game to behave in different situations or what their options are.

To me it sounds like that’s the problem you are having too to some extent.

It’s complicated enough with just the background image, but there’s a bunch more choices to be made when you actually try to fit your UI and your game’s moving objects into the screen nicely.

Whatever your background image resolution is, you can easily fit your orthographic camera to show all of it height-wise. The orthographic size you set is the distance in units from the center of the viewport to the top of the viewport (screen). So if your image 480 pixels high and has the defaul “pixels to units” of 100, the image will horizontally match an orthographic view with a camera size of 2.4 (= 480 / 2 / 100).

Width wise it will of course match the screen only if the screen aspect ratio is the same as the image’s aspect ratio. If the aspect ratios are different, you have basically 3 options you can choose from. Let’s say the device screen is wider and the image now has empty bars on the left and right of it.

  1. You can scale up the whole image to fit the screen width, cutting off a part of the image’s top and bottom.
  2. You can scale up just the width of the image, messing up the proportions of the image.
  3. You can make the actual image wider so it will fit even the widest possible (landscape) aspect ratio (a square) so it will never have bars to the sides, but then of course on narrower screens it will get cut from the sides. (well this is sort of a version of #1)

The formula for getting the needed image scale to fit the screen is

`float screenAspect = (float)Screen.width / (float)Screen.height;
 float imageAspect = sprite.textureRect.width / sprite.textureRect.height;
 float neededImageScale = screenAspect / imageAspect;`

Scale both width and height of the image with neededImageScale to get solution 1.
Scale only the width to get option 2.

Now let’s imagine you were doing a top down football game with the field as the background image. That would rule out options 1 and 2 because you can’t allow cutting away part of the field and you can’t allow screwing up the proportions of the game. You are left with option 3. Scale the field so it’s always completely on the screen with correct proportions and make sure the graphics are such that fill the empty bars you’d get at the top and bottom or sides depending on screen aspect ratio. (or have some padding in your field image so you can afford to have some of it cut away => solution 1)

What if you have a vertically scrolling game where you have minimal sideways movement and the important part is showing the player’s (narrow) avatar on the screen as big as possible ? Then you’d probably want to just fit the avatar to the orthographic size (screen height) and let stuff on the sides get cut away or more be shown depending on screen width.

To sum it up: you need to know exactly what you want and then compromise.