How to make TMXTiledMap responsive?

| | August 4, 2015

I’ve been struggling with Cocos2d-x (C++) and finally I got to the point I feel more or less comfortable with that.

My game is a 2D car-based one, with a straight infinite map where I’ve finally been able to add some random obstacles. There are only 3 positions the car can be at, and everything is working fine.

The point is that I’ve recently noticed that it is not responsive, and tried to make it responsive by adding a line like these one to the AppDelegate.cpp:

glview->setDesignResolutionSize(1024.0, 600.0, kResolutionFixedWidth);

I’ve tried to use kResolutionFixedWidth, kResolutionFixedHeight and all others 5 variables you can put there, but I only got black lines along the screen and every single screen breakdown you can imagine -.-‘

I can figure out I need to resize my TMXTiledMap manually because of the nature of tiles (I did it with Tiled), but I don’t know how to face this problem.

Note that I’m currently developing for a 1024×600 Android device but I would want to support at least the most common resolutions for both tablets and smartphones.

Thanks in advance to anyone who can help me in some way.

One Response to “How to make TMXTiledMap responsive?”

  1. Arjunsingh Rawat on November 30, -0001 @ 12:00 AM
    i have done like this to supprot multiple resolution.............
    my AppMacro.h 
    #ifndef __APPMACROS_H__
    #define __APPMACROS_H__
    #include "cocos2d.h"
    #define DESIGN_RESOLUTION_480X320    0
    #define DESIGN_RESOLUTION_480X320    1
    #define DESIGN_RESOLUTION_1024X768   2
    #define DESIGN_RESOLUTION_1280X800   3
    #define DESIGN_RESOLUTION_2048X1536  4
    /* If you want to switch design resolution, change next line */
    typedef struct tagResource
        cocos2d::CCSize size;
        char directory[100];
    static Resource smallResource  =  { cocos2d::CCSizeMake(480, 320),   "iphone" };
    static Resource mysmallResource  =  { cocos2d::CCSizeMake(800, 480),   "iphone" };
    static Resource mediumResource =  { cocos2d::CCSizeMake(1024, 768),  "ipad"   };
    static Resource myResource =  { cocos2d::CCSizeMake(1280, 800),  "ipad" };
    static Resource largeResource  =  { cocos2d::CCSizeMake(2048, 1536), "ipadhd" };
    static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(480, 320);
    static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(800, 480);
    static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(1024, 768);
    static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(2048, 1536);
    static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(1280, 800);
    #error unknown target design resolution!
    // The font size 24 is designed for small resolution, so we should change it to fit for current design resolution
    #define TITLE_FONT_SIZE  (cocos2d::CCEGLView::sharedOpenGLView()->getDesignResolutionSize().width / myResource.size.width * 24)
    #endif /* __APPMACROS_H__ */
    here is my AppDelegate .cpp
    #include "AppDelegate.h"
    #include "AppMacros.h"
    #include "SimpleAudioEngine.h"
    #include "cocos2d.h"
    #include "GameLayer.h"
    AppDelegate::AppDelegate() {
    AppDelegate::~AppDelegate() {
    bool AppDelegate::applicationDidFinishLaunching() {
        CCLOG("%s","applicationDidFinishLaunching ");
        // initialize director
        CCDirector* pDirector = CCDirector::sharedDirector();
        CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
        // Set the design resolution
                designResolutionSize.height, kResolutionFixedWidth);
        //CCSize frameSize = pEGLView->getFrameSize();
        CCSize frameSize = pDirector->getVisibleSize();
        // if the frame's height is larger than the height of medium resource size, select large resource.
        if (frameSize.width > myResource.size.width) {
                    largeResource.size.width / designResolutionSize.width);
        // if the frame's height is larger than the height of small resource size, select medium resource.
        else if (frameSize.width > mediumResource.size.width) {
                    myResource.size.width / designResolutionSize.width);
        } else if (frameSize.width > mysmallResource.size.width) {
                    designResolutionSize.width / mediumResource.size.width);
        } else if (frameSize.width > smallResource.size.width) {
                    designResolutionSize.width / mediumResource.size.width);
        // if the frame's height is smaller than the height of medium resource size, select small resource.
        else {
                    designResolutionSize.width / smallResource.size.width);
        // turn on display FPS
        // set FPS. the default value is 1.0/60 if you don't call this
        pDirector->setAnimationInterval(1.0 / 60);
        // create a scene. it's an autorelease object
        CCScene *pScene = GameLayer::scene();
        // run
        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
    // this function will be called when the app is active again
    void AppDelegate::applicationWillEnterForeground() {
        // if you use SimpleAudioEngine, it must resume here

Leave a Reply