LibGDX Tutorial - Aspect ratio independence (Common Problems 2)

In this Common Problems tutorial we are going to continue from the end of the previous one, that was about Resolution independence. I strongly suggest that you go and read it, because those two problems go hand - to - hand and if you understand them both then your life as a game developer will be much easier - trust me on that. You also need to understand the concept of virtual resolution, so just give the tutorial a look.

" What exactly is the aspect ratio independence problem? "

As i explained in the previous tutorial, imagine that you have created your game world for devices with an aspect ratio of 16:9. This is problematic because every time a device with a different aspect ratio tried to run the game, all the graphic assets would look asymmetrical, badly stretched in some directions and everything could be out of order.

Suppose that we have 3 devices, with 3 different aspect ratios;

1. Aspect ratio 4:3 ≃ 1.33
2. Aspect ratio 16:9 ≃ 1.78
3. Aspect ratio 18:9 = 2

The closest the division is to 1, the more "squared the device is. Take a look at the following image to get a better understanding;

Aspect ratios example

In this example, i have taken 3 devices with the same height but with different widths, in order to define 3 different aspect ratios. As i previously mentioned, the device with an aspect ratio of 4:3 is closer to a square than the others.

Aspect ratio independence techniques

Before i try to explain how to achieve the needed independence, it would be better to just think of a simple way to do it ourselves, with what we know until know. Even if it's silly, it will help us draw conclusions and find the best solution that suits us.

First thought

Lets think of an easy way to solve our problem. What if we don't define a constant virtual resolution, of 16 x 9 for example, but we set it dynamically each time according to the device's aspect ratio? If the device has a 4:3 aspect ratio then we will set the virtual resolution to be 4 x 3 and if i has 18:9 then why not set the virtual resolution to be 18 x 9? This way we will actually be using different virtual resolution and thus different aspect ratio each time.

Then we would work with percentages and proportions of the virtual resolution. For example the position (virtual_width ÷ 2, virtual_height ÷ 2) is the same for every device, the middle of the screen!

Well... this approach doesn't work at all. There are certain limits based on the concept of each game. 

Remember;; We want to a create a game world, same for everyone . We want a fair game experience.

If we followed this approach then our game would have different height and width for every device with a different aspect ratio. Our character could jump and hit the roof in one version and in the other version he wouldn't be able to jump more than the middle of the screen.

From the above syllogism we conclude that in game development, most of the times we need to keep the aspect ratio static. And by static, i don't mean to declare it as a static variable in java but to keep it the same for every device.

Solution

Suppose that we choose to create our game for 16:9 aspect ratio. Each time a device with a different aspect ratio tries to run our game, we take a 16:9 window in the device's screen and the rest of the space will be blank, thus we keep an aspect ratio of 16:9. Lets see what happens when we try to run Black Dodger on a device with an aspect ratio of 4:3.

Black Dodger 4:3

Have you ever tried to watch a full hd move on an old TV? This is what you most probably saw. That's what happens when a game created for 16:9 aspect ratio is run by a device that has an aspect ratio of 4:3.

Now, what would happen if a device with 18:9 aspect ratio run our game? This is the result;

Black Dodger 18:9

Have you ever tried to watch an old movie on a good TV? Your probably get my point.

A general rule to remember it, is that when a device is more rectangular, then the black bars will be added to the left and right side and on the other hand when the device is more of a square then the black bars will be added on top and bottom of the screen.

It's time to go one step further. No one wants those ugly black bars when playing a game -there are some rare exceptions of course- and it would be much better if we somehow removed them. There are two solutions (there are some more but i don't consider them to be that good);

1. Draw something on the black bars.
2. Show more "game world" to the player.

-- The first method is easy enough to understand. We just have to draw something cool on the black bars, something like two walls for example, if the black bars are at the sides or clouds and more ground if the black bars are on top and bottom. That is not possible in a platform game like Mario though.

-- The second method is my personal favourite and the actual method i followed while creating Black Dodger. Imagine your everyday life, there exists the world you can see around you, your house, your college or school and everything that is close to you and you can see. But that doesn't mean that this is the whole world, does it? There is always extra world that you are not able to see. Well, the same goes for a game world, there is always a part of it that you can't see. So, why not instead of adding black bars, show to your player some more world while making sure that he doesn't get an unfair advantage? 

It is not necessary for this extra world to be at the sides or on top and bottom. You can always take a 16:9 window and force the rest of the space to be only on the left or the right side (one of these two) in the case where the device's screen is more squared, or to only be on top or bottom (one of these two) in the case where the device's screen is more rectangular. That's all you had to do, problem solved!

Sum up of aspect ratio independence problem

First things first, we have to choose the desired aspect ratio that we want to build our game with. I always find better to choose the more rectangular aspect ratio, which used to be 16:9, but nowadays devices with an aspect ratio of 18:9 have been created. All we have to do is wait a little bit longer and if they become a trend, then i would definitely chose it.

I am doing that because all the other devices will have equal or less aspect ratio, meaning that the blank space will always be on top or bottom. It is always better to only worry for 1 direction (top or bottom) than to worry for 2 (top or bottom and left or right). That way you can manage the fairness element of a game much better. 

That's not a rule or something. I am just stating what was and still is easier for me. The game you want to create is the defining factor for the method you will to choose to solve the aspect ratio independence problem. 

To solve the aspect ratio independence problem, what we did was to;

1. Keep the aspect ratio constant (in our case 16:9).
2. Take a window from the screen with this aspect ratio.
3. Show an extra part of the world, while making sure that the game is fair for everyone.

" Okay, you kept mumbling for too long, but how can we do that? "

Don't worry, libGDX has a viewport class that does everything i explained for us. We are going to use the viewport and camera classes of libGDX in the upcoming tutorials in order to solve the aspect ratio and resolution independence problems once and for all.

Feel free to ask any questions in the comments below!