How to scale font size for different screen sizes

cocos2d-x C++
1

Hi,

How to scale font size of label depending on device and screen size?

I tried this 2 way, but it don’t work…

Size winSize = Director::sharedDirector()->getWinSize();
float scaleFactor = winSize.height / winSize.width;
 lbl1= Label::createWithTTF("first", "fonts/A little sunshine.ttf", 48 * scaleFactor);

//// and this

 float scaleFactor = Director::getInstance()->getContentScaleFactor();

lbl1= Label::createWithTTF("first", "fonts/A little sunshine.ttf", 48 * scaleFactor);

so how to scale font size for different devices and screen sizes…

2

I do this myself using code similar to what is in AppDelegate. and I do exactly the way you are doing it, by, multiplying a specified size by a scaleFactor.

3

Hey, Sorry for late reply, was out of town…

I am not getting why is it not working for me, Am i missing something…

Can you share the exact code to set scalefactor and use it…The code which works for you…

4

Here my appdelegate code, i have created images for different resolution and using searchpath to load them…

But i cant get font size to scale properly depending on screen size and resolution…

auto screenSize = glview->getFrameSize();
auto fileUtils = FileUtils::getInstance();
std::vector<std::string> searchPaths;

 #if CC_TARGET_PLATFORM == CC_PLATFORM_IOS


if ( screenSize.width == 2208 || screenSize.height == 2208 )
{
  
    glview->setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER );
    searchPaths.push_back("iphone6plus");
    searchPaths.push_back("ipadhd");
    searchPaths.push_back("iphone6");
    searchPaths.push_back("ipadsd");
    searchPaths.push_back("iphone5");
    searchPaths.push_back("iphonehd");
    searchPaths.push_back("iphonesd");
    
    
}
//Ipad HD
else if ( screenSize.width == 2048 || screenSize.height == 2048 )
{
     //director->setContentScaleFactor( 2048.0f / screenSize.height );
    //ConfigManager::GetInstance() -> SetDeviceType( iPadRetina );
    glview->setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER);
    searchPaths.push_back("ipadhd");
    searchPaths.push_back("iphone6");
    searchPaths.push_back("ipadsd");
    searchPaths.push_back("iphone5");
    searchPaths.push_back("iphonehd");
    searchPaths.push_back("iphonesd");
    
}
//Iphone 6
else if ( screenSize.width == 1334 || screenSize.height == 1334 )
{
    
    glview->setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER);
    searchPaths.push_back("iphone6");
    searchPaths.push_back("ipadsd");
    searchPaths.push_back("iphone5");
    searchPaths.push_back("iphonehd");
    searchPaths.push_back("iphonesd");
    
    
}
else if (screenSize.width == 1024 || screenSize.height == 1024)
{
    
    glview->setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER );
    searchPaths.push_back("ipadsd");
    searchPaths.push_back("iphone5");
    searchPaths.push_back("iphonehd");
    searchPaths.push_back("iphonesd");
    
}
else if (screenSize.width == 1136 || screenSize.height == 1136)
{
     
    glview->setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER );
    searchPaths.push_back("iphone5");
    searchPaths.push_back("iphonehd");
    searchPaths.push_back("iphonesd");
   
    
}
else if (screenSize.width == 960 || screenSize.height == 960)
{
    
    glview->setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER );
    searchPaths.push_back("iphonehd");
    searchPaths.push_back("iphonesd");
    
    
}
else
{
     searchPaths.push_back("iphonesd");
    
    glview -> setDesignResolutionSize( screenSize.width, screenSize.height, ResolutionPolicy::NO_BORDER );
}


#endif

And in my homescreen.cpp i wrote -

auto screenSize = Director::getInstance()->getOpenGLView()->getFrameSize();

float scaleFactor = screenSize.width / visibleSize.width;

lbl= Label::createWithTTF("Hello", "fonts/A little sunshine.ttf", 48 * scaleFactor);
lbl->setScale( 1.0 / scaleFactor );

but its not scaling the font accurately on different device.

5

Why are you doing this for each condition?

Also, why lbl->setScale( 1.0 / scaleFactor ); when you are stating in the constructor what size you want the font?

6

since it was not working i was trying this stuff mentioned in forums…

Can you please tell me what i should modify or add to get it to work…