Understanding resolution policies
In the previous section, we configured the engine with FillResolutionPolicy
. Dealing with different screen resolutions can be a big issue, and it is one of the most difficult topics to grasp for beginners. Especially for the first game, you should choose a single resolution and prepare all your graphics assets as if you were showing them in this resolution only. Let the engine deal with scaling and shrinking.
As you have learned before, AndEngine deals with different screen resolutions and rations by using resolution policies. There are several of them, and they are suitable for different scenarios.
Let's say you want to work with a resolution of 800 x 480 px. Your square is 80 x 80 px large. Let's add three of them to the scene. So, this is how you want your scene to look. The bottom-left square is placed at [50, 50]. AndEngine calculates where to display it in different resolutions.
It should look like the following screenshot:
Let's see what this would look like on a Google Nexus 4 using different resolution policies. The Google Nexus 4 has a resolution of 1280 x 768 px.
This policy simply creates a renderable area of specified size. If your screen is 1280 x 768 px like on the Nexus shown in the following screenshot, the 800 x 480 px scene will be centered with a big border. If your screen size is exactly 800 x 480 px, your scene will perfectly fit on your display. If your device has a smaller resolution, the whole scene will be cropped. This policy keeps the aspect ratio of pixels (squares will be squares).
You can of course pass anything to your FixedResolutionPolicy
. It doesn't have to be the same as the camera dimensions. You can measure the display size of the device and then manually position all elements based on this measurement. That's what this policy is for.
As mentioned earlier, the FillResolutionPolicy
fills the screen but can distort the image because it doesn't keep the scene ratio.
You can see in the previous screenshot that on the Nexus 4, the difference is almost unnoticeable, because 800 x 480 px ratio is about 1.66, and the Nexus 4 screen ratio of 1280 x 768 is 1.66 too. But thanks to the soft buttons in the system bar, the usable portion has roughly 1.56 screen ratio, and that's why the squares are slightly taller.
You have to pass two floats to this policy, which are the percentages of width and height of the screen you want to use. So, if you pass (1, 1), it means give me the whole screen (the same as FillResolutionPolicy
).
A ratio policy is probably the most commonly used in the examples. It keeps the aspect ratio and scales your scene to fit one dimension. The other dimension will be padded with the background color of your theme. It will create two bars.
They are highlighted with yellow in the following screenshot:
If you set your background theme to be black, the bars will be black. If you use this policy, try to match the theme background color to your game's background.
This policy was originally created by user jgibbs
on the AndEngine forums. He called it CroppedResolutionPolicy
. You will find a slightly modified version of it in my GitHub repository.
The crop policy is similar to the ratio policy, but instead of padding, it scales the scene while keeping the aspect ratio to cover the whole screen and crops the overflow. See the arrows in the following screenshot pointing to the areas that will be cropped:
This policy is not the easiest to use. You must place the objects relative to the edges. The center of the screen will still be the center, but you can't simply say: place sprite at [0, 0]. It might be in the overflow on some devices.