《进化猎场》幕后：用网页技术做手机上的 3D 进化动作游戏

笛枫

10/2725 浏览综合包含 AI 合成内容

大家好，我是《进化猎场》的开发者。0.5.0（新地图古树遗迹、更难的局内成长、安卓优化）刚刚上线，借这个机会聊聊这款游戏是怎么做出来的，以及这次更新里几个有意思的技术问题。偏技术，不感兴趣的可以直接看隔壁的玩法攻略。

一、它是个网页游戏

《进化猎场》是 H5 小游戏：在 TapTap 里点开就能玩，不用安装，安卓、iOS、电脑端用的是同一个包。

语言和引擎： TypeScript + Three.js，用 Vite 打包。没有用 Unity 之类的大引擎，渲染、相机、地形、特效、界面都是自己写的。
规模：约 8.5 万行 TypeScript，230 个模块；2,000 项自动化测试，每次改动都要全部跑过。
包体： 49 个 3D 模型，经 meshopt 压缩和顶点量化，从 49 MB 压到 27 MB；整包约 53 MB。
工具链：模型绑定、动作处理都用 Blender 脚本完成；改完的模型必须通过 glTF 官方校验器，0 错误、0 警告才能进游戏。

二、一只生物是怎么做出来的

游戏里玩家有十种身体（小壁虎加三条路线各三阶），还有七个首领和一群猎物。每只生物走的流程差不多：

概念图。先定好这只生物的样子和体型比例。
生成模型。用 AI 工具 Tripo 根据概念图生成 3D 模型（这一点在商店页的 AI 声明里也写了）。
绑骨骼、上动作。这一步最费工夫，生成的模型没有骨骼，姿势也是歪的（常常是边走边回头的样子）。我们写了一个 Blender 脚本，把一套已经调好的骨骼和动作“穿”到新身体上：
按标注点把脊椎、尾巴、四条腿的关节挪到新身体对应的位置，只平移不旋转，这样原来的动作还能直接用；
量出模型生成时的歪姿势，先按这个姿势算蒙皮权重，再反算回站直的标准姿势；
最后自动检查：必须正好四只脚着地，每根脚骨只能带动自己那只脚。
减面、烘焙法线。把模型减到网页能承受的面数，原来的细节烘焙进法线贴图。
校验。 glTF 校验 0 错误 0 警告，再在游戏里看走、跑、攻击、受击、死亡。

这次的根冠古鹿就是个例子。它最开始借用了源头首领（一只矮壮的树兽）的骨骼和动作。树兽的步子很小，套在鹿的长腿上，玩家反馈“腿不会动，像滑过来的”。后来我们把它换到羚羊类的有蹄骨架上，再用脚本按关键姿势写出首领需要的五个招式：横扫、人立踏地、冲锋、高高人立、甩角，每个招式的落点都对齐伤害判定的时刻。

三、怪物为什么会“滑步”

0.5.0 之前，不少玩家说怪物像在滑。我们在 Blender 里逐帧量了每种生物走路动作的脚步：一个循环里，脚只挪动身长的 3%~15%。原来的播放速度却是按“一个循环走 1.2 个身长”算的，于是身体走得比脚快好几倍。

现在的做法：

游戏载入每种生物时，自动量出它走路动作每个循环的实际步幅；
播放速度 = 地面移动速度 ÷ 步幅，身体走多快，腿就迈多快（首领有单独的上限，大个子不会碎步乱跑）；
腿藏在壳下面的生物（甲虫、乌龟），再加一点随步伐的上下起伏和左右轻摆。

中间还走过一段弯路：一开始想顺便把走路的摆腿幅度放大，结果裂牙兽的前腿往外甩、脚掌翻起，玩家一眼就看出变形了，所以这个放大最后关掉了。

四、战斗：判定和表现分开

动作游戏最怕“看着打中了却没伤害”或者反过来。我们定了一条规矩：伤害、距离、锁定目标、碰撞，全部由一套独立的逻辑决定；震屏、闪白、粒子、击退这些表现，只负责好看，永远不参与伤害计算，也不改变攻击距离。

首领的每个大招出手前，地上都会先画出范围预警。预警时长和伤害时刻写在同一份数据里，动作的落点也按这个时刻对齐，所以“看到的”和“算的”是一致的。

难度不是凭感觉调的。我们写了一个“脚本玩家”，在测试里用真实的首领逻辑打几百局：它会躲预警、在空当里反打，用来量不同成长程度下的胜率。比如这次调完以后，模拟里新存档第一次打到第二、三张图的首领，几乎都会输；而在基因库里点了约 1,500 精华强化的存档，胜率大约八成。也就是说，输了以后变强、再来一局能打过，是设计好的节奏。

五、安卓卡顿：先量，再改

0.5.0 很大一部分工作是安卓优化。电脑的显卡太强，帧率永远是 60，看不出问题，所以我们换了量法：用无头 Chrome 模拟手机横屏（844×390、触屏、CPU 降速 4 倍），统计每帧画了多少三角形，并记录游玩过程中超过 50 毫秒的卡顿帧。

量出来的问题：

画得太多。成批的树和岩壁是“要么全画、要么全不画”，镜头背后、雾后面的也按最高细节画，阴影里还要再画一遍。河谷每帧 218 万个三角形，光岩壁就占 146 万。
后处理浪费。每一道全屏处理都写进 4 倍抗锯齿的缓冲，色调映射和调色各占一整道。
中途卡顿。生物第一次出现在屏幕上时才编译着色器；玩家第一次按方向键时，整张图 24 只生物的身体一次性生成。

改法：

每棵树、每块岩石单独判断：视野外和太远的不画，近处画完整模型，远处画简化模型。简化模型在载入地图时用 meshoptimizer 在手机上现场生成，不额外下载；
后处理只有场景那一道做抗锯齿，色调映射和调色合成一道；
开局把所有材质、每种生物、阴影和首领特效的着色器都预先编译好，生物的身体也在开局就生成。

结果（手机横屏，默认画质）：

河谷 —— 每帧三角形，优化前：218 万；优化后：66 万
孢子沼泽 —— 每帧三角形，优化前：255 万；优化后：71 万
熔岩裂谷 —— 每帧三角形，优化前：101 万；优化后：42 万
古树遗迹 —— 每帧三角形，优化前：218 万；优化后：62 万
祭坛 —— 每帧三角形，优化前：460 万；优化后：194 万

模拟游玩里，进化时的卡顿从 300 毫秒降到 83 毫秒，首领出场从 317 毫秒降到 117 毫秒。开关简化模型的对比截图看不出差别。

真机上效果怎么样，还要靠大家反馈。设置里可以打开“帧率显示”，如果你的手机还卡，欢迎在评论区留下机型和帧率。

六、存档：所有 H5 游戏共用一个“抽屉”

最近我们其他 H5 游戏有玩家反馈存档丢失，顺着查下去，发现一个很多人不知道的情况：TapTap 里所有开发者的 H5 游戏，都从同一个网址域名加载。浏览器的本地存储是按域名分的，所以大家其实共用一个“抽屉”：别的游戏清空它，或者把它塞满，我们的存档也会受影响。

《进化猎场》更新版本本身不会丢档，我们模拟“旧版本存档 → 新版本读取”测过，进度一项不少。为了防住上面那种情况，下个版本会加上：

存档自动在游戏自己的数据库里再备份一份，本地存储被清掉后，下次打开自动恢复；
首页“存档备份”：可以复制一串存档码自己保存，换手机或清了数据后粘贴就能找回。

如果 TapTap 清掉了全部网页数据，或者换了手机，本地的两份都会没有，这时只能靠存档码。以后会考虑接 TapTap 登录做云存档。

七、AI 在流程里的位置

如商店页声明，游戏里有 AI 生成的资产，这里说清楚用在哪：

AI 生成的：玩家的十种身体、首领和部分猎物的 3D 模型（Tripo、Meshy），进化卡插画，商店图标和宣传图。生成后都要经过上面说的绑定、减面、校验，并按我们自己的骨骼和动作调好。
不是 AI 生成的：树木、草、石头等场景零件（Quaternius 的 CC0 素材包），地面贴图（ambientCG，CC0），音乐和音效（Kevin MacLeod 等，按授权署名），界面、特效、天空、水面和岩浆（代码程序化生成）。
代码：在 AI 编程助手的协助下编写，玩法设计、取舍、测试和最终决定由开发者负责。

八、接下来

玩家反馈的锁定目标问题，会继续改得更顺手；
存档备份和存档码；
新地图和新首领。

谢谢大家来玩。有任何技术问题或者卡顿、bug，都欢迎在评论区留言，我会逐条看。

进化猎场测试

前往论坛