I worked on it for a while to suggest the most universal and intuitive solution. But I accidentally deleted my codes and notes, and I can not restore it. I’m so upset now.
The good thing is that this post will be shorter than it might be, because I write only what I remember.
- Option 1
Firstly, I do not think this is the best solution ever, but I think that this is a good option to illustrate how this works.
The aspect ratio of the Design Resolution is 16/9 to illustrate NO_BORDER.
Convenient scale factors (x1, x2, x3).
...
static cocos2d::Size designResolutionSize = cocos2d::Size(960, 540);
static cocos2d::Size smallResolutionSize = cocos2d::Size(960, 540);
static cocos2d::Size mediumResolutionSize = cocos2d::Size(1920, 1080);
static cocos2d::Size largeResolutionSize = cocos2d::Size(2880, 1620);
...
// Set the design resolution
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
auto frameSize = glview->getFrameSize();
std::vector<std::string> searchPaths;
if (frameSize.width > mediumResolutionSize.width)
{
director->setContentScaleFactor(largeResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("largeResources");
}
else if (frameSize.width > smallResolutionSize.width)
{
director->setContentScaleFactor(mediumResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("mediumResources");
}
else
{
director->setContentScaleFactor(smallResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("smallResources");
}
FileUtils::getInstance()->setSearchPaths(searchPaths);
...
In this case, I just do not like how it works if the screen aspect ratio < 16/9. Maybe I’m just a perfectionist. But this is a good option to illustrate NO_BORDER. I doubt what to choose.
- Option 2
The aspect ratio of the Design Resolution is 4/3, not so good to illustrate NO_BORDER, my inner perfectionist absolutely likes how it works.
Convenient scale factors (x1, x2, x3).
...
static cocos2d::Size designResolutionSize = cocos2d::Size(960, 720);
static cocos2d::Size smallResolutionSize = cocos2d::Size(960, 720);
static cocos2d::Size mediumResolutionSize = cocos2d::Size(1920, 1440);
static cocos2d::Size largeResolutionSize = cocos2d::Size(2880, 2160);
...
// Set the design resolution
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
auto frameSize = glview->getFrameSize();
std::vector<std::string> searchPaths;
if (frameSize.width > mediumResolutionSize.width)
{
director->setContentScaleFactor(largeResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("largeResources");
}
else if (frameSize.width > smallResolutionSize.width)
{
director->setContentScaleFactor(mediumResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("mediumResources");
}
else
{
director->setContentScaleFactor(smallResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("smallResources");
}
FileUtils::getInstance()->setSearchPaths(searchPaths);
...
- Option 3
The aspect ratio of the Design Resolution is 4/3, not so good to illustrate NO_BORDER, more iOS friendly.
Personally, I do not like scale factors.
...
static cocos2d::Size designResolutionSize = cocos2d::Size(1024, 768);
static cocos2d::Size smallResolutionSize = cocos2d::Size(1024, 768);
static cocos2d::Size mediumResolutionSize = cocos2d::Size(2048, 1536);
static cocos2d::Size largeResolutionSize = cocos2d::Size(2880, 2160);
...
// Set the design resolution
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
auto frameSize = glview->getFrameSize();
std::vector<std::string> searchPaths;
if (frameSize.width > mediumResolutionSize.width)
{
director->setContentScaleFactor(largeResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("largeResources");
}
else if (frameSize.width > smallResolutionSize.width)
{
director->setContentScaleFactor(mediumResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("mediumResources");
}
else
{
director->setContentScaleFactor(smallResolutionSize.width/designResolutionSize.width);
searchPaths.push_back("smallResources");
}
FileUtils::getInstance()->setSearchPaths(searchPaths);
...
- Note
Since there are many similar resolutions like 1920x1080, 1920x1200, 1920x1280, 1920x1440, I prefer to choose the resources based on the longer side of the screen, in the case of the default template it is width.
@slackmoehrle I want to know your opinion. 