Resolution and aspect ratio

A game’s resolution is the pixel dimension of the screen on which it plays. For example, a game could run at 1,024x768. This means that the game is 1,024 pixels wide and 768 pixels tall. The aspect ratio of a game is the ratio of the width and height (expressed as width:height). This aspect ratio is determined by dividing the resolution width by the resolution height and then simplifying the fraction. So, for example, if your game has a resolution of 1024x768, the aspect ratio would be as follows:

1024px/768px=4/3

Here, the fraction 4/3 is the aspect ratio 4:3.

The following table provides a list of common aspect ratios and related resolutions:

Figure 1.3: Common aspect ratios and resolutions

When designing your UI, the resolution and aspect ratio will play an important role in how your UI will look. Knowing the resolution and aspect ratio of your target device will be an important first step in designing your UI for two reasons:

• It will determine the layout of your UI
• The way you build the UI within Unity will be determined by how many resolutions and aspect ratios you plan to support

If you build to a single resolution/aspect ratio, the UI will be much easier to build as you won’t have to make sure all the elements maintain their relative position at multiple aspect ratios. However, if you build a game that will run at multiple resolutions/aspect ratios (for example, a mobile project or a web game that scales within a window), you want your UI to scale and move appropriately. You’ll also want to be able to easily change the resolution during testing so that you can make sure the UI is positioned appropriately as its display window morphs.

Even if you will allow your resolution and aspect ratio to vary, you should still decide on a default resolution. This default resolution represents the resolution of your ideal design. This will be the resolution that your initial design and UI layout are based on, so if the resolution or aspect ratio varies, the UI will try to maintain the same design as best it can.

Note

Since all televisions sold today have a 16:9 aspect ratio, any UI you make for a console game should be developed with a 16:9 aspect ratio in mind.

Changing the aspect ratio and resolution of the game view

You can easily switch between different resolutions and aspect ratios in the Game tab. This will allow you to see how your UI scales at the different resolutions and aspect ratios:

1. If you navigate to your Game tab, you will see the words Free Aspect. Clicking on Free Aspect will reveal a menu that shows various aspect ratios and resolutions:
   

   Figure 1.4: Selecting Free Aspect mode from the Game view

   The items displayed in this list are the most common aspect ratios and resolutions for the build target you currently have selected. In the preceding screenshot, my build target was PC, Mac & Linux Standalone, so the most common monitor settings are displayed. If I were to change my build target to iOS, I would see a list of popular iPhone and iPad screen dimensions.

   Free Aspect means that the game’s aspect ratio will scale relative to the window of the Game view. So, by moving the frame around on the Game window, you will change the aspect ratio.

2. You can easily see the effects of Free Aspect on your game’s aspect ratio, by setting your Editor’s layout to one that shows both the Screen and Game tabs open simultaneously. For example, setting Layout to 2 by 3 will do this. Select the Layout dropdown in the top-right corner of the Unity Editor to change the layout.
   

   Figure 1.5: Changing the Editor Layout

   Now the Game and Scene tabs will both be visible on the left-hand side of your screen.

   

   Figure 1.6: Results of the 2 by 3 layout

3. Now, reduce the size of the Game tab so that it is a very small thin rectangle. You will see that the main camera in the Scene view is now also displaying as a very small thin rectangle:

Figure 1.7: Results of resizing the Game view in Free Aspect mode

4. You can select one of the aspect ratios in the dropdown and see that, as you rescale the game window, the blue area representing the actual game will maintain the ratio you selected and black bars will fill in any extra spacing. The camera will also maintain that ratio.
5. Full HD (1920x1080) will attempt to emulate the 1,920x1,080 resolution. It’s pretty likely that the window you have set for the Game tab is not big enough to support 1,920x1,080 pixels; if so, it will be scaled as indicated in the following screenshot:

Figure 1.8: Game view scale

6. If the resolution or aspect ratio you want to use is not available in the resolution dropdown menu, you can add your own item to this menu by selecting the plus sign at the bottom of the dropdown. If you want to create a set resolution item, set Type to Fixed Resolution. If you want to create a set aspect ratio item, set Type to Aspect Ratio.
   

   Figure 1.9: Adding a new resolution or aspect ratio preset

   For example, if you wanted to make a game that was reminiscent of an old Game Boy game, you could add a 160x144 pixels preset:

   

   Figure 1.10: Creating a fixed resolution preset

7. Once you hit OK, the new preset will item will be displayed at the bottom of the list. When you select it, the camera and visible area of the Game tab will maintain the aspect ratio created by a 160x144 resolution:

Figure 1.11: Selecting a custom preset

Building for a single resolution

If you are creating a game that you plan to build on the PC, Mac, & Linux Standalone target platform, you can force the resolution to always be the same. To do so, go to Edit | Project Settings | Player. Your Inspector should now display the following:

Figure 1.12: PC, Mac & Linux Standalone Player resolution settings

You may have more or fewer platforms displayed here; it depends on the modules you have installed with Unity.

To force a specific resolution on a PC, Mac, & Linux Standalone game, deselect Default is Native Resolution. The option to input Default Screen Width and Default Screen Height will be made available to you and you can enter the desired resolution values. Then, when you build your game, it will play at the size you specified.

The following screenshot shows the settings for forcing a PC game to play in a window with Game Boy Color dimensions:

Figure 1.13: Setting a specific PC, Mac, & Linux Standalone Player resolution

You can also force a specific resolution with a WebGL build. There are fewer options to worry about, but the general concept is the same. The following screenshot shows the settings for forcing your game to display at 160x140 in the Player Settings for WebGL:

Figure 1.14: Setting a specific WebGL resolution

In Chapter 2, we will discuss how to set the resolution properties for mobile games that have varying resolutions that you cannot pre-define.