iPhone X / Samsung Galaxy S8 对于cocos2dx游戏的纵横比问题

Question

我一直以2508x1584的横屏分辨率设计我的cocos2dx移动游戏，并将“始终可见区域”设为2112x1408，这样就不会出现黑色边框或缩放，仅有少量裁剪可能在如下的“可能不可见区域”中出现。

这在所有移动设备的长宽比方面都表现得很好，直到iPhone X和三星Galaxy S8问世。这些设备的长宽比分别为19.5:9和18:9，这将“始终可见区域”从1408降至1158，这足以导致游戏看起来似乎没有选择，除非我重新设计所有游戏，如下图所示。

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

我是否必须重新设计这些游戏，使它们适应更短的长宽比？或者我是否忽略了其他解决方案？

- Greg Ellis

---

有趣的参数 - Jon Goodwin

Answer 1

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

• 测试屏幕比例，并针对iPhone X和Galaxy S8，将分辨率策略从ResolutionPolicy::NO_BORDER更改为ResolutionPolicy::SHOW_ALL。这是一个快速而肮脏的解决方案，会在左右两侧显示黑色边框。您可以通过缩放所有内容使重要区域占据整个屏幕高度来稍微改善此解决方案。
• 更改设计分辨率的宽度，偏移内容，并找到一种方式以您的背景纹理填充所有这些分辨率。这需要更多的努力，但大多数内容都不应更改，除了偏移之外。它将解决问题，因为更大的设计分辨率意味着它在垂直方向上要切割的内容更少（这是您情况下的问题）。
• 正如您所说，您还可以重新设计重要区域，使其更加灵活适应不同的比例。这需要一些努力，并减小此重要区域的大小，这会影响其他比例的体验。

我会选择第二个选项。希望这可以帮到您，很抱歉没有一个神奇的解决方案来解决这个问题。

- nyr1o

Answer 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)
);

说实话，我不完全明白为什么这个方法有效。我是通过尝试随机的比例因子来发现它的有效性，然后试图倒推出一些可行的数学方法。结果发现，将设备的长宽比除以设计分辨率的长宽比是需要的。

- lbenedetto

---

非常有趣的解决方案，它确实运行得非常好。我也根据被接受的答案中的建议提出了类似的解决方案，但我也不得不使用试错法。感谢您的贡献。 - Greg Ellis