Cocos2D Multi Resolution Support

Cocos2D Multi Resolution Support
0.0 0


I was looking into the examples and I would like to know if there is a Standard way to load different assets giving the resolution of the device that the game will be running into.

For instance I would like to create a light version of my game for low-end devices.

Thank you!


Yes, please refer to the template folder.

The setting is in main.js for html5 and cocos2d-jsb.js for JSB.

   var screenSize = cc.EGLView.getInstance().getFrameSize();
        var resourceSize = cc.size(480, 800);
        var designSize = cc.size(480, 800);

        var searchPaths = [];
        var resDirOrders = [];


        var platform = cc.Application.getInstance().getTargetPlatform();
        if (platform == cc.TARGET_PLATFORM.MOBILE_BROWSER) {
        else if (platform == cc.TARGET_PLATFORM.PC_BROWSER) {
            if (screenSize.height >= 800) {
            else {
                resourceSize = cc.size(320, 480);
                designSize = cc.size(320, 480);


        director.setContentScaleFactor(resourceSize.width / designSize.width);

        cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);


Thank you so much again Shun! It works as in the CPP version, very good.

Just my 2 cents, I think the MouseUP is not adjusting to the new resourceSize, so the click point in the onMouseUp are wrong by the scaleFactor (not that is hard to fix) :wink:


Also I forgot to mention that the LabelTTF has some strange behaviour (the text is cuted).


Hi Pedro, We have used these code on 123kingdom card game with touch and mouse. The click works properly.

Could you please show me some code for issue reproducing? If I can reproduce it, I think we can fix it.

As to LabelTTF, could you please show me any screenshot? Is the font size too large?


Hi Shun, thank you for your answer again!

The code that I am using to get the MousePosition is this:
getOnPanelPos: function(loc){

var contentScale = cc.Director.getInstance().getContentScaleFactor();
var canvas = document.getElementById(“gameCanvas”);
var canvasW = canvas.getAttribute(“width”);
var canvasH = canvas.getAttribute(“height”);
var scale = canvasH/LS.WIN_SIZE.height;
var scaleReverse = 1/scale;
var paddingX = (canvasW - LS.WIN_SIZE.width*scale)/2;
var modifiedLoc = loc;
modifiedLoc.x = modifiedLoc.x*contentScale - paddingX;

modifiedLoc.x = scaleReverse;
= scaleReverse*contentScale;

return modifiedLoc;

As you can see after setting the contentScale as a multiplier I manage to make it work properly (this code also manage properly touchs in the black areas created in the frame of a game running).

For the LabelTTF error I have added the image of it. I am using the follow command to create it:
var lblPersonTitle = cc.LabelTTF.create(“Jabalaya Games”, “Helvética”, 28);


Hey Shun, only on more thing…

getFrameSize() is not bind?
I tried to use it on Android and it is not working :frowning:


Just for anyone who might be seeking the same information.

Use cc.Director.getInstance().getWinSizeInPixels(); and be happy!