Search code examples
cocos2d-xresolutionaspect-ratio

iPhone X / Samsung Galaxy S8 aspect ratio issues for cocos2dx games


I have been designing all my landscape oriented cocos2dx mobile games at 2508x1584 with a "always visible area" of 2112x1408 so there would be no black borders or scaling, just a bit of cropping which would be limited to the "maybe not visible area" as shown below.

design area before iphone x

This worked well for all mobile device aspect ratios until iPhone X and Samsung Galaxy S8 arrived. These devices have 19.5:9 and 18:9 aspect ratios respectively which takes the "always visible area" down from 1408 to 1158 which is significant enough that it looks like i have no choice but to redesign all my games as shown in the image below.

design area after iphone x

Since I designed all my previous games for a taller visible area when I run them on iPhone X and Samsung galaxy S8 the top and bottom of the game are obviously cut off.

Am I stuck re-designing these games in order to make them fit this shorter aspect ratio? Or is there another solution I am overlooking here?


Solution

  • Sadly I don't see any magic solution. Here are the different options:

    • Test the screen ratio, and for iPhone X and Galaxy S8, switch resolution policy to ResolutionPolicy::SHOW_ALL instead of ResolutionPolicy::NO_BORDER. That's a quick-and-dirty solution, which will display black borders on left and right. You can improve this solution a little bit by scaling all content so that the important area takes all screen height.
    • Change the width of your design resolution, offset the content, and find a way to fill all this resolution with your background textures. This requires more effort but most of the content should not change, except for the offset. It will solve the problem because a larger design resolution means that it has less to cut vertically (which is the problem in your case).
    • As you said, you can also redesign the important area so that it is more flexible to different ratios. This requires some effort and reduces the size of this important area, which affects the experience on the other ratios.

    I would go with the second option. Hope this helps, and sorry for not having a magic solution to that problem.