cocos2dx 游戏的 iPhone X / 三星 Galaxy S8 纵横比问题答案

【问题标题】：iPhone X / Samsung Galaxy S8 aspect ratio issues for cocos2dx gamescocos2dx 游戏的 iPhone X / 三星 Galaxy S8 纵横比问题
【发布时间】：2018-07-28 00:02:02
【问题描述】：

我一直在设计所有面向横向的 cocos2dx 手机游戏，分辨率为 2508x1584，“始终可见区域”为 2112x1408，因此不会有黑色边框或缩放，只是进行了一些裁剪，仅限于“可能不可见”区域”，如下图。

在 iPhone X 和三星 Galaxy S8 上市之前，这适用于所有移动设备的纵横比。这些设备分别具有 19.5:9 和 18:9 的纵横比，这将“始终可见区域”从 1408 降低到 1158，这非常重要，看起来我别无选择，只能重新设计我的所有游戏，如下图所示.

由于我在 iPhone X 和三星 Galaxy S8 上运行之前的所有游戏时都设计了更高的可视区域，因此游戏的顶部和底部显然被切断了。

我是否坚持重新设计这些游戏以使它们适合这种较短的纵横比？还是我在这里忽略了另一种解决方案？

【问题讨论】：

interesting arguments

标签： cocos2d-x resolution aspect-ratio

【解决方案1】：

遗憾的是，我没有看到任何神奇的解决方案。以下是不同的选项：

测试屏幕比例，对于 iPhone X 和 Galaxy S8，将分辨率策略切换为 ResolutionPolicy::SHOW_ALL 而不是 ResolutionPolicy::NO_BORDER。这是一个快速而简单的解决方案，它将在左右显示黑色边框。您可以通过缩放所有内容来稍微改进此解决方案，以便重要区域占据所有屏幕高度。
更改设计分辨率的宽度，偏移内容，并找到一种方法用背景纹理填充所有这些分辨率。这需要更多的努力，但大部分内容不应该改变，除了偏移量。它将解决问题，因为较大的设计分辨率意味着垂直切割的次数更少（这就是您的问题）。
如您所说，您还可以重新设计重要区域，使其更灵活地适应不同的比例。这需要付出一些努力，并且会减小这个重要区域的大小，这会影响其他比率的体验。

我会选择第二个选项。希望这会有所帮助，很抱歉没有解决这个问题的神奇方法。

【讨论】：

【解决方案2】：

对你来说可能有点晚了，但我想我已经解决了这个问题。我使用了 ResolutionPolicy::NO_BORDER，设计分辨率为 1080x1920 和此指南图片

绿色区域为 1080x1920。您应该设计您的应用程序以适应该区域。 S8 和 iPhoneX 等更高的手机将扩展到橙色空间。平板电脑等较宽的设备将扩展到左侧和右侧的橙色空间。

您需要在发布时做的是计算一个比例因子供 Director 使用。

在您的 AppDelegate.cpp 中执行此操作

auto frameSize = glview->getFrameSize();
float deviceAspectRatio = frameSize.height / frameSize.width;
float designAspectRatio = designResolutionSize.height / designResolutionSize.width;
director->setContentScaleFactor(MAX(
        deviceAspectRatio / designAspectRatio,
        designAspectRatio / deviceAspectRatio)
);

说实话，我不是 100% 知道为什么会这样。我通过尝试随机比例因子来发现它，直到找到一个有效的比例因子，然后尝试向后工作以提出一些有效的数学。事实证明，将设备的纵横比除以设计分辨率的纵横比就是您想要的。

【讨论】：

非常有趣的解决方案，它确实工作得很好。我还根据接受的答案中的建议提出了类似的解决方案，我也不得不使用反复试验。感谢您的贡献。