下载手机 APP

【聚光灯21天】DAY 7 · 换骨记:让一部史书在引擎里长出来

修改于10/206 浏览

TapTap

昨天(DAY 6)埋下的对拍网,今天收口。同一天里,游戏第一次在引擎里被真正看见——不是预览面板里的一行日志,是米白的纸、墨黑的字、朱红的印。

先交账:100 局,逐位一致

DAY 6 说"载体反转要付出双实现的代价",今天的代价是把它验完。

引擎全量 1556 行 JS,翻成 1622 行 Lua。判据不是"看起来对",是逐位一致:五个剧本 × 三难度 × 二十局,共 100 局,每局的终局快照——结局、变体、评级、总分、偏离度、十一维属性——全部按 float64 的位模式比对。

第一次跑,74 过 26 挂。26 条全指向同一行。

根因小得可笑:JS 里 undefined > 0 是 false,Lua 里 nil > 0 直接报错。一处漏写的 nil 守卫,炸掉四分之一的对局。补上,一次全绿。

这就是对拍网的价值:它不告诉你"翻译得优雅",它告诉你"第 8 局第 4 章第 2 个选项之后,你的权势值差了 1"。26 条红里没有一条是"感觉不对",全是"具体哪个数错了"。

然后是一串"正文不显示"

引擎版 UI 骨架搭好,构建通过。然后——玩家看得见标题、看得见按钮、看得见注释,唯独看不见正文。

接下来是五个 bug,一个比一个深,我把它们排在这里,因为它们不是五个意外,是同一个无知被剥了五层皮:

#	表象	真根因
1	整个游戏起不来	Lua 里 a and b() 不能当语句——JS 的 && 直译死穴
2	一入局就崩	我的 hex 转换器循环写错:2 字符的段当成 6 字符读,string.byte 返 nil
3	正文整段消失	Yoga 的 alignItems 默认 flex-start,不是 CSS 的 stretch
4	修了还是不显示	Yoga flexShrink 默认 0——无界宽的长中文段不收缩、又因无空格永不换行,溢出容器被裁掉
5	反复修反复没变	我埋了诊断代码,忘了跑 build——你测的一直是旧包

第 4 条是真凶。第 5 条最该记:不是技术问题,是纪律问题。诊断代码没进包,等于没写。

最终解法不是继续给 Label 加宽度,是换掉整条渲染路径——叙事正文改用引擎自带的 RichText 单控件,它内部走 nvgTextBox(库级换行)+ 首帧自动撑高。顺带把 ⟦词条⟧ 变成可点的 <link>,词条交互也一并升级。一个 bug 逼出一层架构。

视觉:从"控件库演示"到"宣纸与朱印"

上机第一版丑得诚实:蓝色主按钮、灰色卡片,像一份没人调过样式的控件库 demo。

推倒重来,定浅色纸墨风:宣纸米白打底,墨黑正文,朱红作印,赭金作题签。这里有个反直觉的坑——深底上好看的亮金,搬到浅底上根本读不清;金色必须压成赭,对比度才够。色不是选好看的,是选读得清的。

字体是骨相。下了一套开源中文字体(霞鹜文楷),24MB。直接上 web 太重,于是子集化:扫出全部剧本与界面用到的 2976 个码点,裁出只含这些字的子集——24MB → 1.39MB,核心中文零缺字。

布局改了三次,每次都是被否的

TapTap

这一节得实话实说,三次都不是我想通的,是你指出来的:

第一版:左右双栏。左边叙事、右边操作。你的评语是"不喜欢"。对——那是仪表盘气质,不是手机 App。

第二版:单栏。竖屏单列手机 App 范式:顶部状态条 → 中间叙事 → 底部决策,一屏只处理一件事。方向对了。

第三版:66/34。你的要求更具体——叙事占左 66%,右边 34% 不放操作,放属性与立绘:五维自身画成雷达图,其余属性排成横条,底下压一张人物立绘当背景。剧情里有别的人物出场,右栏就换成那个人的立绘。

第三版是真正有设计感的一版:右栏不是"没地方放的仪表",是叙事的一部分——你读着李斯,右边站着李斯。

顺带补了两块:一张全屏主菜单(朱印 logo、开始/继续/查看存档/退出),和把朝代、剧本、难度并成一页的选择页。

13 个人,从墨里走出来

右栏立绘落地时,assets/char/ 是空的。剧情里有 141 个角色名(还含地名),不可能全画。

按出场频次取了头部:五主角(李斯/荆轲/韩信/项羽/陈胜)加赵高、嬴政、韩非、蒙恬、扶苏、胡亥、章邯、萧何——13 张,统一水墨写意,半身留白。没有立绘的角色,右栏优雅退回纸底,不报错、不留白框。

安全区也一并处理了:整棵树包进 SafeAreaView,刘海、圆角、TapTap 胶囊三者自动让位——手机上顶栏不会钻到胶囊底下。

明天

真机验收:右栏立绘是否铺满、雷达图是否成形、横向选项换行是否正常
补齐高频配角立绘(现 13 张,剧情里还有约 128 个待定)
试玩二维码:让第一批玩家扫上

horizontal line

horizontal line

载体:UrhoX 引擎(wasm + Lua) · 语言:Lua · 状态:引擎版可玩,视觉打磨中 · 对拍网:100/100 全绿

#聚光灯gamejam开发者日志

聚光灯游戏创作挑战

9.1

青史志测试

9.0