Multi resolution help needed

Multi resolution help needed
0.0 0



My app menu design is like this - sample

It uses total width of the device. There are so many devices with different width, so how to get this type of menu display right on most of devices.

Thank you…


I used a scale factor and multiple or divide it by the screen width or height.


I saw @SonarSystems tutorial -

New tutorial - it uses single set of assets, but it won’t work for this type of menu
Older tutorial - made different assets for different device and load the assets from folder as per the device.

But here in this case, even if the width is little more less, the menu would look bad.

The documentation on multi resolution is very confusing, can you link me to something that properly guide to make multi res for ios and android both.

So can you please tell me what would be the best solution?


I use vector art that I can scale for whatever purpose. Up or down. So I just use one set of assets. Before in previous projects I used multiple sets of art for specific devices.


Can you tell in little more detail how to use vector art in cocos and use it with scale factor…

It will be very helpful, or link somewhere which uses your way of multi res.

edit - coz i also don’t want to make graphics for multiple devices and load thm from folders.


I make one set of art and I use that size as my base resolution.

I used code like:

_ready = cocos2d::Label::createWithTTF("Ready", "fonts/Forest Thing.ttf", 128 * 



I would be more than happy to go through this topic with you over Skype.

Frahaan Hussain - Sonar Systems


How do you pack images into ttf file?



Hi @SonarSystems I got the multi Resolution working with the help of your multi res 2.0 tutorial…Thanks a lot for that amazing tutorial.

There is 1 problem, the spacing between two labels is reduced and text is overlaped in ipad and ipad retina devices, whereas its looking proper in all other device, from iphone4s to iphone6splus…

How should i resolve this issue?


Can you show me some images to compare the different results.

You can post them on our website


Sorry, that was just a code example off multiplying by a scale factor. I do the same with Sprites.


57 AM57 AM

first - ipad
second - iphone 5s

Code -

   water = Label::createWithTTF("line number one", "fonts/Bariol_Regular.otf",  38 );

water->setPosition( Vec2(visibleSize.width /2 + origin.x, st->getPositionY()-st->getContentSize().height /2 - water->getContentSize().height /2 + origin.y) );


food = Label::createWithTTF("line number two", "fonts/Bariol_Regular.otf",  38 );

food->setPosition( Vec2(visibleSize.width /2 + origin.x, water->getPositionY()-water->getContentSize().height/2 - food->getContentSize().height /2 + origin.y) );



Change food->setPosition( Vec2(visibleSize.width /2 + origin.x, water->getPositionY()-water->getContentSize().height/2 - food->getContentSize().height /2 + origin.y) );


food->setPosition( Vec2(visibleSize.width /2 + origin.x, water->getPositionY()+water->getContentSize().height/2 + food->getContentSize().height /2 + origin.y) );


Hi got the line overlaping issues solved with - origin.y
Since the first label was on top of screen i did like this -

food->setPosition( Vec2(visibleSize.width /2 + origin.x, water->getPositionY()-water->getContentSize().height/2 - food->getContentSize().height /2 - origin.y) );

Now this screen shot is of iphone 5s

24 PM

This is of ipad -

Why is there so much difference in space between lines in this devices?


Origin should always be added.


It is positioning corrent in all iphones and wrong in all ipad’s. I tried the same code in new project and it shows correct in iphones as well as ipad. so i think there is some error in appdelegate…my appdelegate code is the multi res 2.0 code…can u please check…

here is the code -

 auto one = Label::createWithTTF("Line one", "fonts/Bariol_Regular.otf",  38 );
one->setPosition( Vec2(visibleSize.width/2 + origin.x,  visibleSize.height - one->getContentSize().height + origin.y) );

auto two = Label::createWithTTF("Line two", "fonts/Bariol_Regular.otf",  38 );
two->setPosition( Vec2(visibleSize.width /2 + origin.x, one->getPositionY() - one->getContentSize().height /2 - two->getContentSize().height/2  + origin.y) );
this->addChild( two);

   auto three = Label::createWithTTF("Line three", "fonts/Bariol_Regular.otf",  38 );
    three->setPosition( Vec2(visibleSize.width /2 + origin.x, two->getPositionY()-two->getContentSize().height /2 - three->getContentSize().height /2 + origin.y) );
   auto four = Label::createWithTTF("Line four", "fonts/Bariol_Regular.otf",  38 );
    four->setPosition( Vec2(visibleSize.width/2 + origin.x, three->getPositionY() - three->getContentSize().height/2 - four->getContentSize().height /2 + origin.y) );
   auto five = Label::createWithTTF("Line five", "fonts/Bariol_Regular.otf",  38 );
    five->setPosition( Vec2(visibleSize.width/2 + origin.x, four->getPositionY() - four->getContentSize().height/2 - five->getContentSize().height /2 + origin.y) );

it looks like this in iphone’s and ipad’s…

06 PM33 PM

I tried the same code in new project and it looks same in both iphone and ipads

Here is my appdelegate as in multi res 2.0 tutorial…

#include "AppDelegate.h"
#include "HelloWorldScene.h"


// comment out for a portrait game
//#define IS_LANDSCAPE

static cocos2d::Size designResolutionSize = cocos2d::Size(1136, 768);
static cocos2d::Size designResolutionSize = cocos2d::Size(768, 1136);

AppDelegate::AppDelegate() {


//if you want a different context,just modify the value of glContextAttrs
//it will takes effect on all platforms
void AppDelegate::initGLContextAttrs()
    //set OpenGL context attributions,now can only set six attributions:
    GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};

// If you want to use packages manager to install more packages,
// don't modify or remove this function
static int register_all_packages()
    return 0; //flag for packages manager

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLViewImpl::create("Fun Trees");
    // turn on display FPS
    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);
    // Set the design resolution
    glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
    auto scene = HelloWorld::createScene();

    return true;

// This function will be called when the app is inactive. When comes a phone call,it's be invoked too
void AppDelegate::applicationDidEnterBackground() {
    // if you use SimpleAudioEngine, it must be pause
    // SimpleAudioEngine::getInstance()->pauseBackgroundMusic();

// this function will be called when the app is active again
void AppDelegate::applicationWillEnterForeground() {
    // if you use SimpleAudioEngine, it must resume here
    // SimpleAudioEngine::getInstance()->resumeBackgroundMusic();


@SonarSystems Thanks for helping me out with the issue over skype call…

Solution – Do not add origin.y, if you are positioning the object in reference to previous object.