在平面画布上呈现四分之三视角

在 15.0 版本之前,TUNL 中的飞船是从正上方绘制的,而周围的洞穴却是侧面剖视图。修复这一点需要一个小型 3D 模型、一个图像不得超出的碰撞箱,以及在决定哪些部分该动之前的大量克制。

開發日誌 · 2026 年 9 月 20 日 · 所有文章

不匹配之处

TUNL 的洞穴是一个侧面剖面。重力向下拉,钟乳石从天花板垂下,每次飞行开始时的进入场景是黄昏中的天际线。而飞船是其中唯一一个直接从正上方绘制的东西,就像一架飞机从山体侧面图像中飞过的俯视平面图。玩家通常不会这样明确表达出来,但这确实让飞船显得有点像是被贴上去的。

显而易见的修复方法,即绘制一个简单的侧视图,会丢弃飞船赖以辨认的俯视轮廓,而飞船的形状恰恰是从上方看时最好看的。折中方案是一个四分之三视角:同一个船体的 3D 模型,从俯视角度绕其长轴转出后进行平面投影。

一个微型渲染器

TUNL 里没有任何 3D 库,也没有构建步骤,所以渲染器很小巧。船体原本就是由一组平面切面构成,从上方打光,上半部分向白色混合,下半部分向近黑色混合。3D 版本给每个切面增加了第三个坐标,绕长轴旋转模型,进行正交投影,并以同样的平面、上方打光风格填充每个面。这大约相当于每帧填充 90 个可见面,相比之下平面船体只需约 40 次填充。这里没有模糊效果,这一点很重要,因为模糊在手机网页视图中是开销很大的调用,而发光效果只是一次简单的径向填充。如果哪天弱设备遇到性能问题,明显的削减方案是按滚转角度把船体缓存到离屏画布中。

碰撞箱说了算

最重要的约束是碰撞判定不能改变。飞船的碰撞箱是一个圆形,整个游戏的难度都是针对它调校的。所以 3D 画面不能看起来比这个圆更大,也不能小太多,以至于机翼还没明显碰到任何东西飞船就"死了"。

这使得滚转角度成为一个需要测量的问题,而不是凭喜好选择的问题。从俯视角度倾斜 45 度时,只有近侧机翼能被看清,画面覆盖的高度只有圆形高度的一半多一点到约五分之四。90 度时就只是回到旧的俯视图。在60 度时,两侧机翼都能被看清,翼展也回到了圆形的约 85%。我搭建了一个小型实验室,包含五个候选视角和一条覆盖率曲线,最终选择了 60 度。现在有一项测试断言:在任何滚转角度和任何机翼后掠角下,绘制出的船体都绝不会超出圆形范围,也绝不会超出扁平的机头,而且飞行时仍能填满圆形的相当一部分。

哪些在动,哪些是刻意不动的

一旦飞船变成了 3D 物体,就很容易想把所有东西都做成动画。其中大部分都被砍掉了。留下来的必须承载信息:

没能保留下来的是一种自由摆动的晃动。早期有一个版本,飞船会在一个动作"之后摆动",看起来很生动,但那其实是噪音:在一个唯一技巧就是判断距离的游戏里,一个为了自身而振动的船体会与你需要的信息互相竞争。这和当天被移除的远处岩石轮廓视差背景,用的是同一套逻辑--那个背景添加当天就被删掉了。在一个核心玩法就是判断墙壁位置的游戏里,即便对比度很低,一组以不同速度移动的第二组形状也会分散注意力。

在 3D 船体上上色

飞船的六种涂装是按平面图坐标为平面船体设计的。我没有重新绘制它们,而是用了一个小小的几何技巧:在给定的滚转角度下,船体上表面恰好会投影为平面图,并按滚转角度的正弦值在垂直方向上被压缩。这样一来,现有的涂装逻辑就可以在这种压缩下运行,并按 3D 轮廓进行裁剪。有两样东西没法用这种方式表现,那就是切面接缝和轮廓边缘,它们是在屏幕空间中单独描绘的。

3D 版本需要一处修正。平面船体有七个切面,而 3D 版本大约有九十个,如果给每一个都画上明亮的接缝,STEALTH 涂装就会变成一盏灯。所以在 3D 中,接缝以一半强度绘制并跳过小的面,而当船体在桶滚过程中几乎侧对镜头时,这几帧会直接跳过这个图案。

保持平面的部分

只有飞行中的飞船获得了新视角。机库、商店和分享卡片仍然从上方展示飞船,因为那些是飞船的肖像,而不是飞行的画面,而俯视图正是能展示整个平面轮廓的角度。应用图标和商店的宣传图也同样是俯视肖像,它们是否应该有朝一日也采用飞行视角,目前仍是一个悬而未决的问题。

关于飞船是如何构建和上色的完整介绍在飞船页面上,你也可以在今天的洞穴里看到它飞行的样子。

遊玩今天的洞穴