We are having problem with multi resolution screen

cocos2d-x C++
#1

@slackmoehrle @Maxxx @drelaptop we are creating a game with cocos2dx, the game is in portrait mode, our resource resolution is 9:16 (7201280), our design resolution is 480320, now when we are setting using

static cocos2d::Size designResolutionSize = cocos2d::Size(480,320);
static cocos2d::Size smallResolutionSize = cocos2d::Size(480,320);
static cocos2d::Size mediumResolutionSize = cocos2d::Size(1920,1920);
static cocos2d::Size largeResolutionSize = cocos2d::Size(1920,1920);

glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
auto frameSize = glview->getFrameSize();

  if (frameSize.height > mediumResolutionSize.height)
    {

        director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));

    }
    // if the frame's height is larger than the height of small size.
    else if (frameSize.height > smallResolutionSize.height)
    {
        director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
    }
    // if the frame's height is smaller than the height of medium size.
    else
    {
      
        director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
    }

it will work for 16:9 ration phone but when we are using 18.5:9 it won’t work can anyone help me with that

#2

is “won’t work” means there are black border in the edges?

#3

thanks for reply, black border in case of (2560 * 1600) and some assets also get misplaced , and in case of 18.5:9 (samsung s9) some assets get mismatched

#4

I think your resources are scaled properly. The problem is with ratio. Do you have background image? Do you scale it to the size of the screen? What do you mean by “some assets get mismatched”?

#5

I am sorry, I meant misplaced, yeah you are right, assets get scaled properly, but it misplaced, and I guess that cause of ratio or I am wrong about the ratio? do you know any possible solution? thanks for the reply, I am taking some screenshot I am sending it in a moment.

#6

hi there again, here is the screen shoot

[Album] screenshoot
#7

How do you position your elements in the screen? Do you use “fixed” values like 200, 100 etc? Or do you use “percentage” e.g. 50% of visible area?

#8

sorry for later response… yeah we have used “fixed” value like 200 and 100.

#9

So, I think this is your issue. You shouldn’t use “fixed” values. Instead use “percentage” values and screen size to position/create your ui. Your current approach is ok if your design ratio is similar to the device ratio. With “%” approach you are extending your UI for every screen ratio. It takes a little bit more time to make it work, but if you do it you will support more than 99% of devices.

Do it for one screen first or even just for top panel. Also check other ratios, like 4:3.

#10

thanks , let me try and I will let you know what ever happens :slight_smile:

#11

This is wrong from my view, or may be because of this its making complex for you.
But your art should be made based on your design resolution.

1 Like