Multi-resolution code in the default template

[hgokturk]

What is SBX?

[anon98020523]

Try to search sbx using forum search.

[Priority10]

Any progress?

[slackmoehrle]

I’ll ask. I think the teams right now are working almost exclusively on the new renderer and related work.

[Priority10]

If I remember correctly, the conversation on the github was over with what you promised to test, and minggo agreed.
It does not require much effort from the side of the team, you just need to choose which option you like more and provide graphic resources (1x, 2x, 3x) the logo and the close button.

github link

Issue: Multi-resolution code in the default template is confusing and needs to be changed

[hgokturk]

Here is my way of multi-resolution solution for Android devices:

Based on the device statistics of Unity (March 2017)

Resolution           | Ratio     | Multiplier
************************************************************************************
2560 x 1440: 2.1%    | 16:9      *        1x
1920 x 1080: 22.1%   | 16:9      *     0.75x
1600 x 900 : 0.1%    | 16:9      *    0.625x
1440 x 810 : 0.8%    | 16:9      *   0.5625x
1280 x 720 : 30.1%   | 16:9      *      0.5x
1024 x 576 : 0.2%    | 16:9      *      0.4x
960  x 540 : 9.0%    | 16:9      *    0.375x

Aspect Ratio(Width/Height)       *    0.5625
------------------------------   * Total Percentage of All Android Devices: 64.4%

2560 x 1600: 0.2%    | 8:5       *        1x
1920 x 1200: 0.8%    | 8:5       *     0.75x
1440 x 900 : 0.1%    | 8:5       *   0.5625x
1280 x 800 : 5.1%    | 8:5       *      0.5x
1152 x 720 : 0.1%    | 8:5       *     0.45x

Aspect Ratio(Width/Height)       *     0.625
------------------------------   * Total Percentage of All Android Devices: 6.3%

1280 x 768 : 0.1%    | 5:3       *        1x
800  x 480 : 9.3%    | 5:3       *    0.625x

Aspect Ratio(Width/Height)       *       0.6
------------------------------   * Total Percentage of All Android Devices: 9.4%

2048 x 1536: 0.2%    | 4:3       *        1x
1536 x 1152: 0.1%    | 4:3       *     0.75x
1024 x 768 : 0.8%    | 4:3       *      0.5x
800  x 600 : 0.2%    | 4:3       * 0.390625x
320  x 240 : 0.3%    | 4:3       *  0.15625x

Aspect Ratio(Width/Height)       *      0.75
------------------------------   * Total Percentage of All Android Devices: 1.6%

1024 x 600 : 7.2%    | 128:75    *        1x
------------------------------   * Total Percentage of All Android Devices: 7.2%

854  x 480 : 9.5%    | 427:240   *        1x
------------------------------   * Total Percentage of All Android Devices: 9.5%


------------------------------   * Total Percentage of Covered Android Devices: 98.4%


[!!! Must be taken into consideration !!!]
480  x 320 : 1.0%    | 3:2       * Not taken into consideration.
900  x 700 : 0.2%    | 9:7       * Not taken into consideration.

The devices grouped according to aspect ratio. Any resolution of an aspect ratio can be used as base resolution for game assets. I took 2560 x 1440 for 16:9 which means my assets are designed based on 2560x1440. For each aspect ratio, assets must be re-located in code.

In AppDelegate:

bool AppDelegate::applicationDidFinishLaunching() {
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
auto frameSize = glview->getFrameSize();
GameManager::getInstance()->setFrameSize(frameSize);
std::vector<std::string> searchPath;
if(frameSize.width / frameSize.height == 0.5625f)
{
    designResolutionSize = cocos2d::Size(1440, 2560);
    GameManager::getInstance()->setFontScaleFactor(2560);
    searchPath.push_back("16-9"); // 9:16
}else if(frameSize.width / frameSize.height == 0.625f)
{
    designResolutionSize = cocos2d::Size(1600, 2560);
    GameManager::getInstance()->setFontScaleFactor(2560);
    searchPath.push_back("8-5"); // 5:8 (10:16)
}else if(frameSize.width / frameSize.height == 0.6f)
{
    designResolutionSize = cocos2d::Size(768, 1280);
    GameManager::getInstance()->setFontScaleFactor(1280);
    searchPath.push_back("5-3"); // 3:5
}else if(frameSize.width / frameSize.height == 0.75f)
{
    designResolutionSize = cocos2d::Size(1536, 2048);
    GameManager::getInstance()->setFontScaleFactor(2048);
    searchPath.push_back("4-3"); // 3:4
}else if((int)frameSize.width == 600 && (int)frameSize.height == 1024)
{
    designResolutionSize = cocos2d::Size(600, 1024);
    GameManager::getInstance()->setFontScaleFactor(1024);
    searchPath.push_back("600-1024"); // 600x1024
}else if((int)frameSize.width == 480 && (int)frameSize.height == 854)
{
    designResolutionSize = cocos2d::Size(480, 854);
    GameManager::getInstance()->setFontScaleFactor(854);
    searchPath.push_back("480-854"); // 480x854
} else
{
    // TODO: 480  x 320 : 1.0%    | 3:2
    // TODO: 900  x 700 : 0.2%    | 9:7
    // TODO: bunlar için de yap
    designResolutionSize = cocos2d::Size(1440, 2560);
    GameManager::getInstance()->setFontScaleFactor(2560);
    searchPath.push_back("16-9");
}
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::EXACT_FIT);
    if(!glview) {
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
        glview = GLViewImpl::createWithRect("asd", cocos2d::Rect(0, 0, designResolutionSize.width, designResolutionSize.height));
#else
        glview = GLViewImpl::create("asd");
#endif
        director->setOpenGLView(glview);
    }
    director->setDisplayStats(true);
    director->setAnimationInterval(1.0f / 60);
    FileUtils::getInstance()->setSearchPaths(searchPath);
    register_all_packages();
    auto scene = SplashScene::createScene();
    director->runWithScene(scene);
    return true;
}

And finally in scenes, when the relocation of the assets are done according to aspect ratio, everything is good to go. No trimming, no squeezing or so.

[parth3535]

Hi, @slackmoehrle and @Priority10 any solution than create different assets for different aspect ration screen size and set postion for for every aspect ration? thanks

[slackmoehrle]

I think the solution is to set your design resolution and design your art around that particular resolution.

[parth3535]

thanks for reply, what if we want support multiple resolution screen phone? if we follow as you said we need art for every aspect ratio? and isn’t it too costly? or can we do it with one set of art?

[slackmoehrle]

I think this is where it is tricky because I have never had such issues in any of my games.

We clearly need better documentation on this. So many people ask and struggle.

https://discuss.cocos2d-x.org/search?q=Design%20Resolution

What is design resolution?

From http://www.cocos2d-x.org/wiki/Multi_resolution_support I don’t understand what is design resolution size. But this is very important as content scale factor is being calculated based on resource size and on design resolution size. Resource size I understand like the canvas size one with the full screen background image is drawn by the artist. Usually they draw for iPad retina 2048 x 1536. So what is design resolution size, and how I should get/calculate that? P.S. need help understand what…

Trouble understanding the translation from design resolution to screen resolution, and trouble showing whole sprite

I am grouping these questions under the same topic because they might all be related. I am programming a game in Cocos2d-x, and even though I read the hard-to-understand multi-resolution section(s), I don’t get what the scale factor is. I also get what design resolution is, but I don’t get how we go from design resolution to screen resolution. Does Cocos2d-x automatically calculate how much to scale the sprite up by after it is scaled down to the design resolution? Finally, I made an art asse…

Do I have to set design resolution?

Hi, I have a project with 3 separate folders (for iphone, ipad and ipadhd) in my Resource folder filled with assets. In AppDelegate I set the search path according to device resolution. Is it enough or I have to set design resolution as well? Regards, Mike.

Design resolution size

Hi ! i have one question… It seems like, ‘design resolution’ is usually same or smaller than ‘screen resolution’ But it will be ok when design resolution is bigger than screen resolution ? (aspect of performance as well) I plan to make iPhone 6 screen size for ‘design resolution’, but it is bigger than iPhone 4,5 screen resolution… (because my game is targeted to iPhone 6 device firstly. and as you know, iPhone 6 has different HW scale from other iPhones except iPhone 6 plus) In this cas…

[parth3535]

you mean, in all your games, you use only one art set ? and if yes then what is your art resolution and how does it work can you past your app delegate here, i wanna see how you manage all your game with one art set for all different ratio screen device. thanks in advance

[slackmoehrle]

Well, I don’t set a design resolution at all in my games.

I design my art as vector and in large size. Not every piece though. if it is a simple button I just make it do it looks good on my iPhone X.

What I do instead is I test the screen size and I make a series of bools and float multipliers. I then use these values and pass them as parameters where I need them. I then scale my art on the fly. I do the same with labels, etc.

[parth3535]

if you don’t set design resolution then it should take by default 480*320 (if i am not wrong), can you post small demo game so we all can have little bit idea that how you do it, since many of us are having the problem

[slackmoehrle]

There is a default, yes: 480 x 320
I’ll see if I can find a small sample. The better thing for us to do it create better documentation.

[parth3535]

thanks, I am looking forward for sample project, hope you will find it soon. yeah we really need better document

[parth3535]

hi, I have questions. Have you develop game for android ever? if yes, then does it support all screen ration phone with only one art as you said earlier? or you just developed game for IOS and in IOS only iphones or developed for Ipad too with only one art set? and you said you use vector in your game, can you tell us how to use vector in cocos2dx cz we are using .jpg, did you find the small sample game the way you develop? thanks in advance

[slackmoehrle]

I use vector art and then export as .png. But the .png doesn’t matter you could export to whatever format.

[parth3535]

thanks, did you find out the sample game. i really wanna know how you manage all. and can you please answer my question that i asked you in above reply ?

[parth3535]

@slackmoehrle hi again, we were looking for the solution and found out default method for setContentScaleFactor() is not working perfectly and then we found one PPT

https://www.slideshare.net/ogdc/program-farmery-by-cocos2d-x-kien-vnfinal

in this, they have mentioned, how they solve setContentScaleFactor() and it works

// Set the design resolution
    glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
    auto frameSize = glview->getFrameSize();

    auto fscaleX = frameSize.width / designResolutionSize.width;
    auto fscaley = frameSize.height / designResolutionSize.height;

    director->setContentScaleFactor(((1920/designResolutionSize.height) / (MIN(fscaleX,fscaley) / MAX(fscaleX,fscaley)) ));

 //1920 is art height, design resolution is  (320  x 480  - portrait)

so I think you should look into it (PAGE - 23) now in none of our art gets cut in any resolution or in different scale screen but the problem we are fetching is in some device we are getting more space between two buttons (in portrait mode - didn’t check on landscape mode) we are fetching this problem in only different scale factor screen device so can you help us with this.

[parth3535]

hi… have you found any demo so we can make like you without having multi resolution problem?