Multi-resolution code in the default template


#21

Can you please explain, what SBX will show in the orange area of the iPhone X for your game? And please create a landscape version of it, because most of the AAA game will be in this mode.


#22

It’s iPhone X adaptation as per this requirement Designing for iPhone X in that areas you should have not UI, but game scene.

It’s not matter what portrait or landscape. Resolution system in SBX and it’s loader works the same for any resolution. You can design and see what you will get. If you interested you need to try it. I will not create landscape version. I’m working on SBX and my game every days, so time is money :slight_smile:


#23

Cocos Creator has a similar functional.


#24

So use it.


#25

I just don’t understand why you want to @slackmoehrle look at it when the team has their own product with similar functional.


#26

I remind you.


#27

Sorry. I for some reason thought there was a GitHub conversation going on about this and I didn’t need to be in the loop any longer. There have been so many resolution questions and iPhone X safe area questions that I thought it was already in the right hands.


#28

I created an issue on github after I despaired of receiving a response from you. :slight_smile:


#29

Thank you. I appreciate you creating it.


#30

I think that it will be ignored the same way. So I’ll just close the issue after a while, the github already has more than enough open requests.
Why did I decide that this is interesting to someone… Nevermind. Just forget it.


#31

Don’t close it. That doesn’t help us at all, nor can I get others to help. My thank you wasn’t hollow.


#32

I mean, I do not want it to be another unnecessary issue. If no one is interested, then I was wrong when I created the issue.
Especially since I was going to help minggo to close incorrect or outdated issues.
It will be somehow wrong if I ask to close other issues, but will keep my own.


#33

It isn’t unnecessary but both the Cocos2d-x and Creator engineering teams are trying to put out the next releases. I will draw attention to this issue again.


#34

OK. Thank you!


#35

What is SBX?


#36

Try to search sbx using forum search.


#37

Any progress?


#38

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


#39

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


#40

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.