Multi Resolution graphic for ios 4 and ios 5

| | August 4, 2015

I have used cocos2d-x to develop a game for iPhone 4, iPhone 4s, iPhone 5 with different screen sizes (3.5 inch and 4 inch)

First, my resource are designed for iPhone 4 and iPhone 4s with 3.5 inch screen size.

So if I want to use for iPhone 5 with 4 inch screen size. what should I do?

2 Responses to “Multi Resolution graphic for ios 4 and ios 5”

  1. cocos2D-x 2.x and 3.x have very easy solution for multi-resolution problem ( either iDevices or Android devices) As you can see in Multi-resolution support document.

    In fact you just need to set your DesignResolution and then just imagine your target device will has this resolution.

    If target device really has this resolution ( or any other with same ratio) cocos2d will handle to fix screen and your game looks same in all devices.

    And when ratio of target device is different, you have many option ( policy) to manage that.

    For example if you use Exact fit policy, cocos2d will force your game ( and design) to fit target device screen (without that black boarder).

    Exact fit

    The entire application is visible in the specified area without trying
    to preserve the original aspect ratio. Distortion can occur, and the
    application may appear stretched or compressed.

    For more detail just take a look at the official wiki.

    Beside all above word, I found This Link (from V-Play engine) and Its Safe Zone definition really interesting and I highly recommend you to use recommended-resolution-value of this page for your work as I did.

    Although this link is from another engine but the description helps you understand everything better. Here is a map between this page terms to cocos2d-x terms:

    V-Play::letterbox => Cocos2dx::Show All

    V-Play::ZoomToBiggerSide => Cocos2dx::NoBorder

    How about required image size ?

    As you know the different size of image is not about game-look in different resolutions and you can publish your game with one size for each asset and your game/app looks good in all resolution with above description for resolution Policies.

    But we need multiple image-size for each asset, to optimize memory usage. in this case ( as cocso2dx solution) we check device size and mark appropriate set of image ( each image set is in one folder with same-structure/different-size like HDR/HD/SD) as default folder of resource:

        CCSize frameSize = pEGLView->getFrameSize();
        if (frameSize.height > mediumResource.size.height)
            searchPath.push_back(; //mark HDR default
            pDirector->setContentScaleFactor(largeResource.size.height/designResolutionSize.height); //handle scaling because of different between our programming-design-resolution and artist-design-canvase-resolution
        else ...
  2. A simple solution is that using [[CCDirector sharedDirector] convertToUI] and not using it.
    If you want to place align top, using convertToUI or else using normal ccp(x, y).
    Also you need to write a method to resize the area that need to fill up the screen;

    Another good option is to use the CocosBuilder to create the user interface;
    Can know more at the following URL:

Leave a Reply