Multi resolution support changed layout in phones

cocos2d-x JavaScript
1

I was using a fixed size. 960 * 480 and it was working good with my htc explorer. Now, I tried to add multi resolution support in the main.js and now the size for my mobile comes in 480 * 320.

Now, all the sprites have become very big.
The menu is not readable.
Text is different.

How do i fix it?

2

Use content scale factor and 1x 2x 3x spritesheet

3

Sir,

I am still facing problem with Labels.
They are not positioned properly.

I used the youtube video of sonarlearning.

if (cc.sys.isNative)
{
    var searchPaths = jsb.fileUtils.getSearchPaths();
    
    // ipad retina
    if (cc.view.getFrameSize().width >= 1536 && cc.view.getFrameSize().height >= 1536)
    {
        if (true == isLandscape)
        {
            cc.view.setDesignResolutionSize(2048, 1536, cc.ResolutionPolicy.SHOW_ALL);
        }
        else
        {
            cc.view.setDesignResolutionSize(1536, 2048, cc.ResolutionPolicy.SHOW_ALL);
        }
        
        searchPaths.push("res/highRes");
        searchPaths.push("src");
    } etc ....

So, I can load the resource according to the device. But how to position them properly on the screen?

scoreText.setPosition(cc.p(80, -50));

This is not, for example, positioned properly. :frowning:

4

If you can setup positions with a tool like CocoStudio, that may be your best bet.

But if you prefer layout in code, or for certain nodes that you need to dynamically position you can use relative positioning. Or you may want to set up a more advanced auto-layout system, but that’s outside the scope of my reply.

// assume 80,-50 was correct at the resolution 960x640 
//  80 / 960 == .08333
// -50 / 640 == -.07813
scoreText.setNormalizedPosition(cc.p(.08333, -.07813));

We also use this macro before setNormalizedPosition was available, but it’s still been useful when we want to have a position scheme that we state it based off a specific set resolution (in our case we used 480x320 as our common denominator to support very old devices). In the future we’ll probably look at using 800x480 or maybe 960x640. Depends on how fine-grained a position you need.

#define ccpToRel(__X__,__Y__) Vec2( (__X__) / 480.f * Director::getInstance()->getWinSize().width, (__Y__)/320.f * Director::getInstance()->getWinSize().height)
// using this (50,160) would have normalized position (.1042, 0.5)
_dialogMessage->setPosition(ccpToRel(50.f,160.f)

Note: there always seem to be some special cases to this. For example, if we want to have a series of nodes spaced exactly 10 points apart then we can’t easily use relative positioning. We often multiply these by the resolution scale factor (essentially the rounded or ceiling value of winSize.height/320, for example). Ideally again you’ll look at using a ListView instead of doing this by hand.

Allowing portrait->landscape orientations may require more work.

1 Like
5

Sir,

For multi resolution, we use images with different sizes.
We can now position them properly in different devices.

For labels,

var lable = new cc.LabelTTF();
	lable.setFontName("res/arial.ttf");
	lable.setFontFillColor(cc.color(0,0,0, 200));
	lable.setFontSize(60);
	lable.setHorizontalAlignment(cc.TEXT_ALIGNMENT_CENTER);
	lable.setString("Hello");
	lable.setPosition(this.size.width/2, this.size.height / 2);

For example, If i type this code, will it work good in all display resolution?
Do i need to make any other changes?

6

If you can test it out, that would be the best way to confirm.

Sprites are handled automatically if you setup the search path based on visible size (resolution).

That label should display with the center of the label aligned with the center of the screen. The size of the label will (or might) vary depending on the resolution, however, so you may find that you need to track a scaling factor for your labels based on multiple of a minimum height. You’ll have to experiment and test this on devices.

I don't know the correct size or scalers you'll need or want
visible height < 600px => fontScale = 1.0
visible height < 1000px => fontScale = 2.0
visible height < 1600px => fontScale = 3.0
lable.setFontSize(60 * fontScale);

Let me know if this is wrong and you find a different solution.

7

Sir,

(this.width / 1920 ) * 60;

How does this line will affect the font visibility?
I saw this in sonar learning website. I don’t know why it is 1920

8

It’s effectively saying for all resolutions where the width is smaller than 1920 scale the font smaller. For all greater scale larger. You’ll have to decide which resolution width value is the resolution where you want your font size to be 60 and then this formula would scale up and down correctly.

Optional info:
It also depends really on whether you want floating point font sizes or not. If you’re using TTF font then this will probably be the best method. Otherwise the way I mentioned is better for BMFonts (since you’ll choose between a fixed set of font sizes). You could also scale labels as another method instead of changing font size, but scaling usually is visually worse than changing the fontsize, but for BMFont this can work fine.

9

Here is a newer multi device support approach http://www.sonarlearning.co.uk/coursepage.php?topic=game&course=cocos2d-x-multi-device-2