iPhone cocos2dx 游戏的 X / Samsung Galaxy S8 纵横比问题
iPhone X / Samsung Galaxy S8 aspect ratio issues for cocos2dx games
我一直在设计我所有面向风景的 cocos2dx 手机游戏，分辨率为 2508x1584，"always visible area" 为 2112x1408，因此不会有黑色边框或缩放，只有一点裁剪会限于 "maybe not visible area"如下图
在 iPhone X 和 Samsung Galaxy S8 到来之前，这适用于所有移动设备的纵横比。这些设备分别具有 19.5:9 和 18:9 宽高比，这使 "always visible area" 从 1408 下降到 1158 这足够重要，看起来我别无选择，只能重新设计我的所有游戏，如下图。
因为我以前的所有游戏都设计了一个更高的可见区域，当我在 iPhone X 和三星 galaxy S8 上 运行 它们时，游戏的顶部和底部显然被切断了。
我是否坚持重新设计这些游戏以使其适合这种较短的纵横比？还是我在这里忽略了另一种解决方案？
遗憾的是我没有看到任何神奇的解决方案。以下是不同的选项：
- 测试屏幕比例，对于 iPhone X 和 Galaxy S8，将分辨率策略切换为
ResolutionPolicy::SHOW_ALL 而不是 ResolutionPolicy::NO_BORDER。这是一个quick-and-dirty解决方案，它会在左右两侧显示黑边。您可以通过缩放所有内容来稍微改进此解决方案，以便重要区域占据所有屏幕高度。
- 更改设计分辨率的宽度，偏移内容，并找到一种方法用背景纹理填充所有这些分辨率。这需要更多的努力，但除了偏移量之外，大部分内容不应更改。它将解决问题，因为更大的设计分辨率意味着垂直切割更少（这是您的问题）。
- 如您所说，您还可以重新设计重要区域，使其对不同比例更加灵活。这需要一些努力，并且缩小了这个重要区域的大小，从而影响了其他比例的体验。
我会选择第二个选项。希望这会有所帮助，很抱歉没有解决该问题的神奇方法。
对你来说可能有点晚了，但我想我已经解决了这个问题。
我使用了 ResolutionPolicy::NO_BORDER，1080x1920 的设计分辨率和这张引导图片
绿色区域为1080x1920。你应该设计你的应用程序以适应这个区域。较高的手机，如 S8 和 iPhoneX 将展开成橙色 space。较宽的设备（例如平板电脑）将扩展为左侧和右侧的橙色 space。
启动时您需要做的是计算一个比例因子供 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% 了解为什么会这样。我通过尝试随机比例因子发现它，直到找到一个有效的比例因子，然后尝试向后工作以得出一些可行的数学方法。事实证明，将设备的纵横比除以设计分辨率的纵横比就是你想要的。
我一直在设计我所有面向风景的 cocos2dx 手机游戏，分辨率为 2508x1584，"always visible area" 为 2112x1408，因此不会有黑色边框或缩放，只有一点裁剪会限于 "maybe not visible area"如下图
在 iPhone X 和 Samsung Galaxy S8 到来之前，这适用于所有移动设备的纵横比。这些设备分别具有 19.5:9 和 18:9 宽高比，这使 "always visible area" 从 1408 下降到 1158 这足够重要，看起来我别无选择，只能重新设计我的所有游戏，如下图。
因为我以前的所有游戏都设计了一个更高的可见区域，当我在 iPhone X 和三星 galaxy S8 上 运行 它们时，游戏的顶部和底部显然被切断了。
我是否坚持重新设计这些游戏以使其适合这种较短的纵横比？还是我在这里忽略了另一种解决方案？
遗憾的是我没有看到任何神奇的解决方案。以下是不同的选项：
- 测试屏幕比例，对于 iPhone X 和 Galaxy S8，将分辨率策略切换为
ResolutionPolicy::SHOW_ALL而不是ResolutionPolicy::NO_BORDER。这是一个quick-and-dirty解决方案，它会在左右两侧显示黑边。您可以通过缩放所有内容来稍微改进此解决方案，以便重要区域占据所有屏幕高度。 - 更改设计分辨率的宽度，偏移内容，并找到一种方法用背景纹理填充所有这些分辨率。这需要更多的努力，但除了偏移量之外，大部分内容不应更改。它将解决问题，因为更大的设计分辨率意味着垂直切割更少（这是您的问题）。
- 如您所说，您还可以重新设计重要区域，使其对不同比例更加灵活。这需要一些努力，并且缩小了这个重要区域的大小，从而影响了其他比例的体验。
我会选择第二个选项。希望这会有所帮助，很抱歉没有解决该问题的神奇方法。
对你来说可能有点晚了，但我想我已经解决了这个问题。 我使用了 ResolutionPolicy::NO_BORDER，1080x1920 的设计分辨率和这张引导图片
绿色区域为1080x1920。你应该设计你的应用程序以适应这个区域。较高的手机，如 S8 和 iPhoneX 将展开成橙色 space。较宽的设备（例如平板电脑）将扩展为左侧和右侧的橙色 space。
启动时您需要做的是计算一个比例因子供 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% 了解为什么会这样。我通过尝试随机比例因子发现它，直到找到一个有效的比例因子，然后尝试向后工作以得出一些可行的数学方法。事实证明，将设备的纵横比除以设计分辨率的纵横比就是你想要的。