《公交公司》开发者日志4

修改于10/2210 浏览

《公交公司》开发者日志4 · 把界面砍到只剩地图和两条窄栏

这一期聊界面与适配。

一、起因：界面「不够美观简洁」

第一版的界面上面文字太多，不够美观简洁。第一条具体建议是图标化——左上角的「车」字换成公交图标，右侧线路色签换成对应颜色的公交车。

但我们很快就撞上了一个根本冲突：

我们的站点编号是功能性信息，不是装饰。

在这个游戏里，乘客的目的地就是用站点编号表示的，车上座位格子里显示的是编号，站台候车方块里显示的也是编号。把编号砍掉，游戏就没法玩了。

所以最终策略定为：视觉极简 + 信息分层，而不是砍信息。

二、定稿方向：站点卡片 + 极简线条 + 保留语义

玩家原话确认了方向：「站点卡片 + 极简线条 + 保留候车颜色语义」。

站点卡片长这样：横向白色圆角矩形，左侧深墨黑方块写站点编号，右侧上排站名、下排候车数比，卡片上缘外侧贴着一排候车方块（每块写目的地编号）。

关键的一条：候车方块的红/墨两色语义必须保留（见第 02 期）。方案里专门写了一句「实现时不要改这两行的判定逻辑」——因为 AI 生成的概念图反复把这层语义画丢。

三、当前视觉层级是「反的」

诊断下来，最根本的问题不是「不好看」，而是层级错了：

元素原规格问题

线路宽 4，用「直线段 + 两端补圆」模拟圆头偏细

道路宽 24/桥 29，用灰色 divider 比线路更抢眼

玩家的视线应该先落在彩色线路和站点上，结果却被灰色的道路抢走。修改后：

线路：非选中 4→5、选中 6→7.5，圆头端点改用真正的 nvgLineCap(ROUND)（视觉等价，还省掉每段两次绘制）；
道路：宽度 24/29 → 20/25，颜色从灰改成极浅蓝灰{229,238,242}，并加了一层描边。

四、过程中修掉的两个「改色改出来」的坑

视觉改动看起来没风险，但这两处差点让信息读不出来：

坑 1：候车方块与站点编号撞色。

站点编号从青绿改成深墨黑后，候车方块原本也是深墨，两者完全分不清。原来靠「青绿站号 vs 深墨候车」区分，改色后这层区分消失了。

解法：改成「实心黑块（站号）vs 空心白块（候车）」，靠实心/空心区分，而不是颜色深浅。

坑 2：白底方块在白卡上不可见。

候车方块改白底后紧贴白色站卡，整块消失了。

解法：给方块加描边。

五、车体：参考图看起来简单，比例得量

按玩家给的参考图重做车体。这里有个教训：参考图看起来简单的地方，直接量像素比目测可靠。

改动内容

车体尺寸 54×30 → 78×20，长宽比 1.8 → 3.9（实测参考图蓝车 3.31、红车 3.88）

座位布局 4 座从 2×2 改为 4×1 横排

车体形状圆角方块 → 胶囊

车轮新增

车轮初版做成车高的 0.28，截图后明显偏大；参考图里的轮子几乎贴着车底、只露很窄一条。这种地方量像素比目测靠谱。

六、手机适配：把顶部 54% 的高度还给地图

按真机横屏逻辑尺寸（836×384）实测，顶部一共占了 207px = 54%：标题行 52、状态条 20、阶段卡 58、进度条 4、色签行 45、页脚 28。地图只剩 177px。

改成「地图 + 左右两条窄栏」，顶部完全清空：

┌──────┬──────────────────────────┬────────┐

│ 车 │ │ 第1周 │

│ 空闲 │ 地图 │ 第1日 │

│ 枢纽 │ │ 送达 0 │

│ 撤销 │ ├────────┤

│ │ │ 开始 │

│ │ │ 1× │

│ │ │ 红线 │

│ │ │ 更多 │

└──────┴──────────────────────────┴────────┘

地图可视高度 337 → 486px（+44%）。

阶段卡、完整计数器、模式行、帮助文字全部进「更多」抽屉，并按**「当前任务优先」**重排——打开抽屉第一眼看到的是「我现在该做什么」，而不是模式切换按钮。

七、手机横屏上踩的坑

坑：地图缩到 0.415 倍，站点糊成一团。

横屏（886×410）下，地图控件只有 266 逻辑像素高，而相机内部固定扣除了 175px 的留白（占 66%），可用高度只剩 91px。再叠加内容高度保底，缩放被压到 0.415。

修复：内容高度保底从 220 降到 1、相机留白按视口高度自适应、垂直锚点改为上移。横屏相机缩放 0.415 → 1.500，站点卡恢复可读。

坑：Yoga 文字块宽度不够会逐字换行。

这个问题我们撞了三次——「00:04」「第1/4阶段」都因为宽度不够被拆成竖排单字列。规律是：给 Label 设了 whiteSpace = "nowrap" 也没用，父容器宽度不够时仍会逐字换行。修法是按最长读数实测宽度，不够就把文案缩短。

八、设计错误：两个数字「一直不变」

有一处玩家反馈特别有价值——他问：「02/04 和 10分是什么意思？一直没变。」

查完发现确实是设计错了：

读数实际含义为何不变

02/04 阶段序号每 160 模拟秒才跳一次

10分本局总时长它是常量，永远不变

两个数字都不表达「时间在流逝」，玩家看着像坏了。

修复后：时钟区显示已运营时长（每秒更新），并加了真正的表盘指针。

但这里又引出一个更深的错误：表盘和文字用了两套时间语义——指针按 60 秒转一圈，文字显示累计 MM:SS。玩家一眼就看出「指针转一圈但数字才走 1 分」，两者对不上。

查证后发现游戏里 1 个游戏日恰好 = 60 模拟秒，与指针周期天然一致。于是统一为：表盘外圈弧=阶段进度、时针分针=当前时刻（一圈=1 游戏日）、文字=「第 N 天」。三者现在表达同一件事，不再互相矛盾。

九、图标化不是万能的

倍率按钮我们试过用「1/2/4 个三角」表示，觉得比文字更直观。结果 4 倍速时四个三角挤成一排，既看不出是「倍率」，也读不出具体值。改回文字 X1/X2/X4。

教训：当「数量」本身就是信息时，文字比图标更直接。

十、还有一个反复踩的坑：渲染错误不进测试统计

我们两次遇到「改了一行渲染代码，整屏变白」，而测试报告 lua_errors = 0、断言也全过。

原因是渲染路径的错误（比如用了未 require 的函数）不在断言覆盖范围内。第一次是漏了 require 一个模块，第二次是用了别的文件里的局部函数。

后来立了规矩：渲染类改动，除了看断言，必须同时查日志里的 Execute Lua function failed。

十一、PC 大屏 UI 偏小

最后一个适配问题：所有 PC 分辨率下 UI 缩放恒为 1.0，48px 按钮在 1080p 上只占屏宽 2.5%，而在手机上占 6.7%——同一套控件在大屏上显得明显更小。

根因是引擎默认缩放把密度系数上限钳在 1.0：短边 ≤720 时收缩曲线生效，短边 >720 后系数被钉死，大屏不再放大。

修复后（只去掉上限）：

分辨率修复前修复后

720×1280 1.0 1.0（手机行为不变）

1366×768 1.0 1.067

1920×1080 1.0 1.5

连带修复：缩放放大后，车的固定命中区开始盖住停靠柄，导致「点柄选线」变成「拖车换线」。把命中优先级改成停靠柄优先于车辆——柄是固定的编辑控件，车是移动实体，点击落在柄上时柄必须赢。

十二、这一期的教训

极简有代价，先确认哪些信息不能砍。编号和颜色语义是玩法，不是装饰。
视觉层级比配色更重要。道路比线路抢眼，是设计错误，不是审美问题。
同一个概念不要用两套表达。表盘和数字表达同一件事时，必须统一语义。
图标不是万能的。数量本身是信息时，文字更直接。
测试全绿 ≠ 渲染正常。渲染类改动必须看日志。

聚光灯游戏创作挑战

9.1

9.0