您将如何在2d平台机中处理不同的长宽比？

很久以前，4：3几乎是您在PC上找到的唯一纵横比。今天，最常见的显示器是16:10，但是大多数新显示器（尤其是笔记本电脑）是16：9

我正在写一个2D平台游戏，但我无法决定如何处理所有不同的比率。

这里有一些想法：

1. 4：3获得更多内容，宽屏在顶部和底部切割
2. 16：9获得更多内容，其他内容则左右切
3. 游戏为16：9，其他AR带有黑色水平条
4. 游戏为4：3，其他AR带有黑色竖线

如果您没有令人信服的理由使游戏“变宽”（在这种情况下，使用方法3）或在游戏中变窄（在这种情况下，使用方法4），请选择1和2的组合（如果您愿意，可以选择3和4）隐藏屏幕外的内容）。

选择一个折衷的宽高比（16:10是一个很好的比例，甚至是16:11）。如果用户在16：9上，则向他们提供更多内容；如果用户在4：3上，则在顶部和底部提供更多内容。

无论如何-我发现最好在您的相机类中使用类似的方法来实现它：

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

在这一点上，您可以简单地尝试使用不同的标称世界尺寸（即：以世界单位表示的相机尺寸），然后选择最佳的。

好吧，作为基本建议，我会在PC上说“不要以为您的用户想全屏运行”。在窗口模式下，选择理想的比例并直接使用即可。

我认为，当用户看到全屏内容时，他们通常会接受黑条。因此，即使不理想，策略3和4也可以接受。它们的优点是您始终知道要渲染多少内容：即没有仅在宽屏上运行时才会发生的偷偷摸摸的错误。

如果您要自适应，并通过屏幕分辨率检测用户比例并显示尽可能多的内容，则必须以不同的方式考虑高优先级内容和低优先级内容。高优先级内容是用户绝对必须在屏幕上看到的内容，如果不在屏幕外，则游戏将失败。因此，这就是HUD和UI元素，以及播放器的头像以及与之交互的任何东西。低优先级的内容就是这样的东西，如果它在屏幕上那么好，但是如果它不在屏幕上那没什么大不了的。例如：背景图形和距离虚拟人物相当远的东西。

假设您的UI / HUD叠加在某些“物理” 2D世界的顶部，那么这很简单。低优先级的项目很容易，您只需确保4：3视口位于有趣的事物的中心，然后向左或向右绘制尽可能多的低优先级的项目。2D世界中的高优先级事物（例如，您的角色，您的角色直接与之战斗的敌人）应始终保存在4：3视口中。也就是说，您没有将游戏代码放大到摄像机以利用额外屏幕空间的优势，因为那样您在宽屏与非宽屏中的游戏代码将有所不同。让游戏代码假设世界是以4：3渲染的，并且仅让您的渲染代码知道实际上还有比可见的更多的东西。

可以通过以下两种方法之一来布局UI / HUD元素：

1. 动态定位：指定相对于屏幕边缘的所有元素（即并非相对于0,0的所有元素）。根据您的长宽比，这些元素将离屏幕中心更近或更远。优点：允许您将事情挂在角落，让它们“正常工作”。缺点：难以使布局在中心良好地工作，并且存在元素重叠的风险
2. 保守的静态定位：以4：3布局所有元素，并在宽屏中运行时简单地偏移它们。优点：简单，明确的布局逻辑/坐标。缺点：在UI控件的左侧和右侧留有视觉死角，您将在后台看到2D世界，但没有UI。

哪个最适合您的游戏？如果您要制作Canabalt（即取决于水平速度的游戏），那么在较窄的方面使用黑条（＃3）的宽高比将是突出横向运动的理想选择。另一方面，如果您有像《超级粉碎兄弟》这样的空中游戏，最好是更高的屏幕（＃2或＃4）。我将根据对游戏最有效的选择来做出决定。

我同意其他响应者的意见，即应谨慎对待在一个显示器上可见但在另一显示器上不可见的元素。

《 Castle Crashers》似乎使用了＃2和＃3的一些内容-在4：3屏幕上出现黑条，并且可见区域也非常小-但是边缘始终应该有一个“安全区域”无论如何，您都不会放置任何重要内容（例如CRT电视等会裁切边缘的屏幕）

还有另一种选择。您可以设置一个中间比率，并在两种正常分辨率下进行裁剪和扩展（或边界化）。

我相信电视拍摄是采用这种方式构图的，这样宽屏看起来还可以（每个人都不会挤到场景的中间），而4：3的裁剪并不那么激烈，平移也很少。

这是一篇有关在移动设备上处理多种屏幕尺寸的博客文章，其第二部分是如何使用libgdx在Java中对该方法进行编码。这有点像安德鲁的答案，但可能会帮助别人。

博客文章涵盖了三种主要方法：

1. 顶部或侧面带有黑条。
2. 使用虚拟视口。
3. 使用浮动元素，就像在网页flexbox布局中找到的一样。

1号是不言而喻的。

为了说明没有。2，假设您要支持具有三种不同纵横比的三种不同设备。在图像编辑器中打开图像。对于第一个设备，以该设备的宽高比绘制最大的矩形，该矩形将适合您的图像。对第二个设备和第三个设备执行相同的操作。您的可用区域或虚拟视口是所有这三个矩形的交集。不能保证该视口之外的任何内容都是可见的。

第3点涉及到在屏幕上放置对象的方式与使用flexbox或floats将元素放置在网页上的方式类似。例如，您可以将暂停按钮从顶部放置5个像素，从右侧放置5个像素。无论设备的宽高比如何，暂停按钮都将始终位于右上角。