Is there a way by which I can scale the font size of labels based on the screen size/device resolution?I am using labels with ttf fonts with a single font size and I’d like to scale the font size based on screen size as it appears proper on narrower devices whereas it appears too big on wider devices.
Folks tend to calculate the screen size and create a scale factor in which you can multiply your font size by. There are plenty of topics here that talk about it.
Remember that if the design resolution size doesn’t change, the appearance of your game remain the same!
Example:
Design resolution Size : 1920 x 1080
Device 1 screen size: 1280 x 720
Device 2 screen size: 2560 x 1440
In this case a ttf Label of size, let’s say 50, appears the same on device 1 and device 2, even if device 2 has 4x pixels than device 1!
When also changes the resolution ratio between devices, the result depend on the choose of design resolution polices!
I strongly suggest to read this document: http://www.cocos2d-x.org/wiki/Multi_resolution_support
@drakon99 Thanks.I’ve gone through the link on Multi Resolution support before but I did not get an idea on how to go about it.Anyways your explanation has brought about more clarity on design resolution size.Further to this,the link on multi resolution support calculates content scale factor based on height since the resources are loaded according to height of screen.Considering that I load my resources based on screen width,how can we calculate content scale factor for that?
But if you modify CSF likely you have to prepare different asset folders for each resolution you are interested in!
Then you should use search paths to choose the right folder (as in the document you read).
I think you can achieve the same result without scaling in this simpler way:
Fix a design resolution size (es. 1920x1080)
Use the policy EXACT_FIT
The game will appear the same in all the 16:9 screens, appears “stretched” (but still filling the screen) in the devices with resolution ratio different from 16:9.
Got it.I have one last clarification.In the document they have used a design resolution size of (480,320) for iphone.How to choose the design resolution size to be set on the glView?Considering that I’m building my game to support iPhone 4s until iPhone 6+,which is the design resolution size I could opt for?
Personally I suggest to use a 16:9 design resolution (the majority of smartphone are 16:9) like 1280x720 or 1920x1080.
Then for the non 16:9 devices (like iPhone 4s) you need a policy.
You could use the policy “SHOW_ALL” to make the game to have the same proportion on all screens but with black bars to fill space in non 16:9 resolution ratios.
A better choice (I suggest) could be to use “FIXED_HEIGHT”.
In this case the design resolution height remains the same on all the devices, but the width will be adjusted in non 16:9 devices (e.g. in iPhone 4S becomes larger ).
This implies that you cannot use “magic number” for Node positioning but should always rely on current visible size.
A little example for centering a sprite supposing FIXED_HEIGHT policy:
auto visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("someSprite.png");
sprite->setPosition({visibleSize.width * 0.5f, visibleSize.height * 0.5f});
addChild(sprite);