In one of the first articles, I’ve recommended to remove from the default AppDelegate.cpp file everything related to work with multiple screen resolutions.

The Cocos2d development started a long long time ago and there were not many different screen sizes available at that time. Later the diversity increased and there a lot of different formats. And now it seems that everybody used more or less same screen sizes again. At some period of time, the resolution was a serious problem: you had to keep a few sets of images for various generations of devices. Again, now it seems that even cheaper devices have decent screens so the problem is not so important (of course you could disagree with this point).

In theory, the development process should look like this:

• Developers select the basic screen format; the game will be developed exactly for this format. It’s called the “design resolution”
• Then your game gets launched on some device. If the device has a screen different from the design resolution the scene generated by the program will be changed somehow to fit the real screen size
• You can’t use absolute numbers for positioning elements inside the game. Instead, you should calculate all the positions depending on the screen parameters. I’ve still used exact numbers here in all the examples only because it made the code simple; but really it’s a kind of bad practice.

There was a code like this in default program:

auto visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin      = Director::getInstance()->getVisibleOrigin();

Here visibleSize is the size of the user’s screen and origin is the position of the scene’s bottom left corner on that screen

Consider the following situation (numbers look unrealistic for our days, but nevermind):

Here:

• The development started for 800x480, and that’s the design resolution
• The program gets launched on the device with 1024x768 screen. After the adaptation, the whole scene gets increased, but proportions remain the same, so the scene will get cut from the sides.
• After fitting the visibleSize will be 1024x768, and origin will be (128:0). The origin is the position of bottom left corner of large red rectangle on the picture.

Cocos2d offers few variants of fitting called (ResolutionPolicy):

• EXACT_FIT means the image will fill the screen anyway, but it may get stretched horizontally or vertically.
• FIXED_HEIGHT and FIXED_WIDTH means the proportions remain the same, but the scene may get cut from the sides to keep correct width or height
• NO_BORDER looks kike automatic selection either FIXED_HEIGHT or FIXED_WIDTH
• SHOW_ALL means proportions remain the same, the whole scene appears on the screen, but black stripes may be added to the sides.

Also, you can implement your own policy like is this article.

And another variant, you can skip specifying design resolution and launch with a real screen size. Following code in AppDelegate.cpp does the trick:

Size realScreenSize = glview->getFrameSize();
glview->setDesignResolutionSize(realScreenSize.width, realScreenSize.height,
                                ResolutionPolicy::NO_BORDER);

It doesn’t matter ResolutionPolicy is used here, you get the real screen size anyway.

If you want to use different sets of images for different sizes you’ll have to change the default paths for files downloading. More information about it here, here or in this article.