Cocos2d-x: how to make full screen background?

Question

In my cocos2d-x game, my design resolution is 768x1024 (portrait), and I using "kResolutionShowAll" strategy (since I want to obey assets ratio). On some screen resolutions (e.g. Windows 8 PC 1920 x 1080), I have black borders on the sides.

I want to avoid these borders. My idea is to place some image as a background and to stretch it in order to fill the whole screen, and this way to avoid black borders (so, the scene should be rendered on top of that background).

My question is: how to do that? No matter how I trying to scale my background image, it always rendered within display resolution...

Thanks!

Syed Mauze Rehan Syed Mauze Rehan · Accepted Answer · 2014-04-28T17:07:16

First thing first, find out the max resolution of the device family you are targeting. For example, if you are targeting Android family then the max resolution is >>> 2560x1600 (nexus series) You can create your assets in this resolution then scale them according to different aspect ratios of devices (the scaling strategy, which in your case would be "kResolutionExactFit")

Btw, there is no harm in showing borders, several games do that. When we faced this issue, we applied the same strategy as I mentioned above(2560x1600 resolution images, with kResolutionShowAll strategy) Also, we set "setDesignResolutionSize" to "(1600, 2560)"

So, on 2560x1600 res. devices it fit well, but on 1920x1080/1280x720 devices there were borders. Please note that images that large can also result in a black screen when rendered, i.e, if a device is incapable of rendering an image(image greater than maxtexturesize of the device), cocos2dx won't render it. In this case you can use,

CCConfiguration* conf = CCConfiguration::sharedConfiguration();
conf->getMaxTextureSize() // to check if a device is capable of rendering such image, if not you can use a lower resolution version

Or, you can also have 2 diff design resolutions.

Having said that, if you stick with "kResolutionShowAll", your game might look stretched. Just for reference, I have shared the definitions of different strategies;

kResolutionShowAll

According to the width and height of screen and design resolution to determine the scale factor, choose the smaller value of factor as the scale factor. This can make sure that all the design area can display on screen, but may leave some area black on screen.

kResolutionExactFit

Set the width ratio of the screen and design resolution as scale factor in X axis, set the height ratio of the screen and design resolution as scale factor in Y axis. This can make sure the design area cover the whole screen, but the picture maybe stretched.

kResolutionNoBorder

According to the width and height of screen and design resolution to determine the scale factor, choose the larger one as the scale factor. This can make sure that one axis can always fully display on screen, but another may scale out of the screen.

taken from, http://www.cocos2d-x.org/wiki/Detailed_explanation_of_Cocos2d-x_Multi-resolution_adaptation

Cocos2d-x: how to make full screen background?

1 Answers