Screen Resolution / Aspect Ratio Best Practices for 2D Games

Unity Engine
1

Here is my understanding of the options available to us:

Aspect Ratio

  • Enforce a specific aspect ratio

  • Black bars around the screen when the actual screen aspect ratio isn’t available.

  • Enforce a set of aspect ratios from a list (allow player to choose from list)

  • Black bars around the screen when the actual screen aspect ratio isn’t available.

  • Allow all aspect ratios

  • Make sure to add a fade to black around all backgrounds

  • Make sure camera bounds are greater than any possible aspect ratio

Screen Resolution

  • Give the option to change resolution
  • Don’t give the option to change resolution

Different Devices

  • Have a build for each target device type (phone, computer, etc.). For phones, you might use lower quality assets based on the assumption that you have lower power devices, and less screen real estate.

Can experts chime in to let me know if I missed anything, and maybe tell me what the best practices are given these options?

1 Like
2

These questions are usually specific to each game.

Games like Issac, backgrounds are a specific size. Black bars would be needed to maintain the backgrounds aspect ratio, or restrict changing resolution which forces windowed mode so you don’t get stretching. Or make different background sizes for each resolution, which is not feasible to keep the game size down.

Games like Zelda go by world size so no need to enforce specific resolution or aspect. Camera is restricted to world bounds. Different aspects will see more or less of the screen but isn’t really a problem.

Thinking about mobile, you have to worry about portrait and landscape. Its easy enough to enforce either through the editor.

One game I’m working on for mobile is landscape only and doesn’t worry about a specific screen size. Orthographic size is half vertical so it will always maintain that. I didn’t worry about width, I use some math to get the edge of the screen to spawn what ever needed to be spawned.

Another one is portrait only that enforces the camera to be a specific width no matter what the screen size it. The camera gets restricted vertically.

1 Like
3

Thanks so much for your reply! I did some research on some recent indie 2D games and how they handle different aspect ratios. The resounding choice seems to be fixed aspect ratio with some form of letterboxing/pillarboxing. Take a look at Cuphead/Oxenfree/Celeste/Unavowed/etc. All of them force 16:9.

The question I have now is what is the most efficient method of doing that. I found two different options.

  • Using Camera.rect and a background camera to fill in the pillar/letterbox.
  • Rendering the camera to a RenderTexture, putting that texture in a canvas, and using aspect ratio fitter.

It seems to me the former should be more efficient, but I actually have no idea. In my examples, I’m guessing Cuphead may have done the latter.

Just for reference, here’s a nice tutorial for method 1:
http://www.aclockworkberry.com/managing-screen-resolution-and-aspect-ratio-in-unity-3d/

Here’s a vague idea of how to do method 2:
http://answers.unity.com/answers/1606820/view.html

With method 1, it seems like you can’t use overlay canvases. Not sure the implications there.

I’m just wondering now which method is more efficient. I should probably post another question.

4
5

  1. Is more efficient than 2. Render background camera that is only clearing to black, then render the game with another camera overlaying the background within a given rect set to the aspect ratio desired.

  2. Having to render to render texture, then assign that render texture to a raw image on a canvas then render that image. It still requires 2 cameras with another step of rendering of the raw image. It still needs a background image to have the black bars, so there is even more to render.

In the end though its probably not all that much of a difference, but for efficiency, the first method requires less. An extra camera and some math to set the rect of the game camera.

A simple script you can add to the camera, provide an aspect ratio and it does the rest of the work including adding and setting up the second camera at run time.

http://wiki.unity3d.com/index.php/AspectRatioEnforcer

3 Likes
6

what is the correct resolution for unity PC games in portrait mode?

7

We just use a reference resolution and when a scene is loaded compare the width of the current screen to that, if the width of the current screen is 20% higher that the reference resolution used during development then all game object are scaled by 20% when the scene is loaded. Any objecting being spawned for mobile should be pooled anyway. This is what we do for 2d portrait, not for 3d obviously.

8

16:9