How to keep same aspect ratio in different devices with cocos2dx?

Question

I have been making a board game and I am using cocos2dx. There are two scenes for now, One is main menu and the other is gameplay scene. When I run the apk on tablet with EXACT_FIT resolution policy in AppDelegate.cpp sprites in the scene seems stretched out a little bit. How can I maintain the same aspect ration in all devices and also the positions of game entities? Thanks.

Answer 1

In my games, I choose what is the priority dimension: width or height. If I choose to prioritize WIDTH, I set it in AppDelegate.cpp

glview->setDesignResolutionSize(resolutionSize.width, resolutionSize.height, ResolutionPolicy::FIXED_WIDTH);

and all my background images have enough height to cover all aspect ratios, based on my design resolution. For example, if my design resolution is 460 x 800, to cover a 19:9 screen we need a 460 x 971 background image.

Then, I set UI components position relative to the safeArea borders

auto safeArea = Director::getInstance()->getSafeAreaRect();

someSprite->setPosition(Vec2(safeArea.getMinX() + margin, safeArea.getMaxY() - margin));

Hope this answer helps you

Answer 2

SHOW_ALL resolution policy. Show all policy will scale up the container to the maximum size in the frame which shows all your content on screen with the original width/height ratio you have set. Read more here

C++ code:

glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionShowAll);