CODEWITHSUNDEEP
androidscreen-resolutioncocos2d-js
kaushik reddy
kaushik reddy

Reputation: 167

How to set Resolution for cocos2d js android application

I want my cocos2d js android application to fit completely onto entire screen on all devices...

This is the main.js

cc.game.onStart = function(){
cc.view.adjustViewPort(true);
cc.view.setDesignResolutionSize(800, 850, cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
//load resources
cc.LoaderScene.preload(g_resources, function () {
    cc.director.runScene(new StartScene());
}, this);
};
cc.game.run();

So insted of specifying 800,850 is there a way to set it to specific device resolutions??

Thanks.

Upvotes: 0

Views: 1791

Answers (2)

Brandon M
Brandon M

Reputation: 933

I struggled a little with the design resolution concept when trying to make my game background fit all iOS devices and all android devices. This is what I came up with:

//check if running on mobile device with native code or web browser 
if (cc.sys.isNative)
{
    //get the current search paths
    var searchPaths = jsb.fileUtils.getSearchPaths();
    //get the window size of the device
    var winSize = cc.director.getWinSize();
    //if the width matches the iPad retina
    if(winSize.width == 2048){
        //set the designResolutionSize to the dimmensions of the iPad Retina
        cc.view.setDesignResolutionSize(2048, 1536, cc.ResolutionPolicy.EXACT_FIT);
        //look in the extraLarge folder for assets
        searchPaths.push("res/extraLarge/");
        searchPaths.push("src");
        isIpad = true;
        isRetna = true;
    }
    //if the width matches the iPad
    else if(winSize.width == 1024){
        cc.view.setDesignResolutionSize(1024, 768, cc.ResolutionPolicy.EXACT_FIT);
        searchPaths.push("res/large/");
        searchPaths.push("src");
        isIpad = true;
    }
    //if the width matches the iPhone 5 and higher
    else if(winSize.width == 1136){
        cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.EXACT_FIT);
        searchPaths.push("res/medium/");
        searchPaths.push("src");
    }
    //if the width matches the iPhone 4
    else if(winSize.width == 960){
        cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.EXACT_FIT);
        searchPaths.push("res/small/");
        searchPaths.push("src");
    }
    //anything else
    else{
        cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.EXACT_FIT);
        searchPaths.push("res/medium/");
        searchPaths.push("src");
    }
    jsb.fileUtils.setSearchPaths(searchPaths);
}
//if not native code
else
{

    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
}

The code is commented, but to sum up: check to see which iOS device you are running on and set the designResolutionSize and the search path accordingly. For all other devices go with 800 x 450 and the medium search path. For each of the search paths I have a background resource with the same dimensions as the designResolutionSize and my other assets are scaled accordingly.

I chose to check against the iOS devices because there are is only a small number of those to check instead of the several different android devices. There might be a better way to do this, but this is what is working for my game on iOS and the android devices me and my friends have tested.

Upvotes: 1

New Guy
New Guy

Reputation: 66

As per the documentation, cc.view.setDesignResolutionSize requires the width followed by the height. So, in this case, the following could be used:

var width = cc.winSize.width;
var height = cc.winSize.height;
cc.view.setDesignResolutionSize(width, height, cc.ResolutionPolicy.SHOW_ALL);
Hope this helps.

Upvotes: 1

Related Questions