Implementing multi-resolution support

You may notice a difference in screen appearance on different devices. In some previous recipes, there is an iOS's screenshot and a Nexus 5's screenshot. It shows different image sizes. This image is HelloWorld.png located at MyGame/Resources. It is 480 x 320 pixels. In this recipe, we explain how to maintain the same size regardless of screen size.

How to do it…

Open AppDelegate.cpp through Xcode, and modify the AppDelegate::applicationDidFinishLaunching() method by adding the code after the director->setAnimationInterval(1.0/60.0); line, as shown in the following code:

director->setAnimationInterval(1.0 / 60);
glview->setDesignResolutionSize(640, 960, ResolutionPolicy::NO_BORDER);

In this book, we design the game with a screen size of iPhone's 3.5 inch screen. So, we set this screen size to the design resolution size by using the setDesignResolutionSize method. The last parameter is resolution policy. The following screenshot is the Nexus 5's screenshot after implementing multi-resolution:

The following screenshot is the iPhone 5 simulator's screenshot. You now know that both screenshots have the same appearance:

How it works…

The resolution policy has EXACT_FIT, NO_BORDER, SHOW_ALL, FIXED_HEIGHT, and FIXED_WIDTH. These are explained as follows:

• EXACT_FIT: The entire application is visible in the specified area without trying to preserve the original aspect ratio.
• NO_BORDER: The entire application fills the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the application.
• SHOW_ALL: The entire application is visible in the specified area without distortion, while maintaining the internal the aspect ratio of the application. Borders can appear on two sides of the application.
• FIXED_HEIGHT: The application takes the height of the design resolution size and modifies the width of the internal canvas so that it fits the aspect ratio of the device. No distortion will occur, however, you must make sure your application works on different aspect ratios.
• FIXED_WIDTH: The application takes the width of the design resolution size and modifies the height of the internal canvas so that it fits the aspect ratio of the device. No distortion will occur, however, you must make sure your application works on different aspect ratios.

By implementing multi-resolution, regardless of screen size, you will maintain the image on the screen.