【经验分享】关于竖屏游戏适配的制作思路分享

修改于前天 14:5116 浏览

在开始思路分享的之前，我们先看看上面我最近参加聚光灯制作的游戏《我不是学神》的界面适配截图，分别是竖屏、宽屏（平板）、PC

看到上面的三个图，聪明的你应该是可以看出是分了两个部分：基础部分、适配部分

基础部分

需要先设定一个基准尺寸，如比较常见的720×1334，那么我们的效果图、界面具体显示，都将以这个基础尺寸为准，我们的按钮、图标等UI组件也应该以这个容器尺寸来设计，这代表游戏的最基础显示尺寸

到了适配部分，看我上面图的你，应该也发现了，我出的图是按照1:1来设计的，是有两边溢出的，我习惯尺寸设计为1024×1024，确保我们屏幕在1:1的比例时是可以正常显示，但是有时候会超出这个比例，那么就需要一个默认大底图作为容错的显示了

我们上面两个部分确定之后，还是不能解决适配问题，因为屏幕的像素是不一样的，如果我720×1334的尺寸放在1080×1920的分辨率下就会显得和很小，在390×867的分辨率下就右会显得很拥挤，这时候就需要进行缩放的操作，下面是AI给我总结的

720×1334。所有界面都按这个尺寸来画，坐标、字号、间距全写这套数字。别的屏幕不管多大，都当它是这张画纸被放大或缩小了。

S = min(W/720, H/1334)

拿屏幕宽除以 720、屏幕高除以 1334，两个倍数里取小的。

为什么取小的？因为两个方向用的是同一个倍数（等比，不分别缩放）。如果取大的那个，另一个方向就会溢出 —— 画纸塞不进屏幕，内容被裁掉。取小的，保证两个方向都塞得下，最坏情况只是有边留空。

宁可留白，不可裁切 —— 这是整个缩放的地基。

取 min 的直接后果：缩放后的画纸在两个方向上都 ≤ 屏幕。所以永远不存在"内容画不下"的问题，只有"屏幕多出来一块"。

多出来的是哪一边？看屏幕比画纸宽还是比画纸长：

缩放本身只能做到"等比塞进去"，它解决不了多出来的那块怎么办。所以缩放适配必然要接一个后续决策：

换句话说：缩放负责"统一尺寸口径"，封顶负责"控制拉伸上限"。两者是一套的，光有缩放不够。

S = min(W/720, H/1334) 本身就是纯比例运算。别写成"宽度超过 1000 像素就封顶"这种 —— 分辨率、DPR 千差万别，绝对阈值必然在某个设备上错。

竖屏手机（720×1334、1080×1920、1170×2532）算下来，宽度永远是被限制的那一边 → 高度多出来 → 只走"放开"这条支路，封顶永远不触发。所以对主场景是逐像素无变化，规则只在宽屏才介入。

一句话：等比缩放、取最小倍数、锚定窄边 —— 保证内容完整放得下，代价是多出来的边交给后续规则（放开或封顶）处理。

关于带异形屏的适配，可以看看我这个游戏

9.8