Sprite width to fit all resolutions cocos2dx

Question

Cocos2dx beginner here. Using Cocos2dx V3.10.

I've read lots of tutorials and documentation on Multi platform support across iOS/Android etc and in the main i get it. I'm using setDesignResolutionSize in combination with setContentScaleFactor and it's working out pretty well so far.

I do have one issue which i'm not sure of the best way to approach it.

My game is portrait and i'd like a particular sprite to be the same width on iphone4s and iphone5.

They both use the same design resolution size and content scale factor but on iphone4 the sprite is smaller than that on iphone4 (and iphone5).

I've attached two images to demonstrate what i mean.

As you can see on the iphone4 the sprite isn't quite the same distance away from the edges as the iphone5 is, which i assume is down to the difference in resolution.

Do i need to create another set of assets for this resolution and how would i go about setting those? As currently iphone4 and iphone5 both use the same scale and design size, ie:

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

// if the frame's height is larger than the height of medium size.
if (frameSize.height > mediumResolutionSize.height)
{
    director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
    searchPaths.push_back("hd");
    FileUtils::getInstance()->setSearchPaths(searchPaths);

}

Any help much appreciated.

Answer 1

This can be done in a way so that the game will look same no matter what device you use. First of all, comment out all the following code in your AppDelegate.cpp

/*   if (frameSize.height > mediumResolutionSize.height)
    {        
        director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
    }
    // if the frame's height is larger than the height of small size.
    else if (frameSize.height > smallResolutionSize.height)
    {        
        director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
    }
    // if the frame's height is smaller than the height of medium sxize.
    else
    {        
        director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
    }
*/

Now, make sure all of your assets have been developed in reference to a canvas size which is ideally the size of your background.

Let's say that size is customWidth x customHeight.

Now edit the following lines in AppDelegate.cpp as below:

glview->setDesignResolutionSize(customWidth, customHeight, ResolutionPolicy::EXACT_FIT);
Size frameSize = glview->getFrameSize();

Your game will now look same irrespective of the device, as long as aspect ratio is maintained(which is same for all the phones, but different for tablets).