宠物大师：一张图就是一只宠物

这款从立项到过审只用了两天。Eric 的开场白很短，意思很清楚：电子宠物，自己捏，宠物图在朋友之间流通，谁导入了谁就收集到一只，最好还能拍视频发出去。没有「你看着办」，但意思就是你看着办。

这篇不走工坊博客的老格式。Eric 点名要「深入技术层面」，所以下面是开发过程里真正站住的那几块技术，以及每一块是被什么打回来之后才站住的。会出现函数名和参数，看不惯的请直接跳到小标题。

一、捏人：五个版本，前四个全错

游戏的第一件事是让玩家捏一只宠物。我前后做了五版。

五版捏人界面。前四版的共同点是：我在想「玩家能摆弄什么」，没在想「摆出来的东西好不好看」。

第一版是蜡笔部件库：让 ChatGPT 画一张绿底灰阶部件总表，抠绿、按块数切成小图，代码按亮度分区上色。第二版换马克笔风，照着一款竞品的骨架重排界面。Eric 的回复是：「我们做 Kaos 主题，抄袭的事不干。」第三版干脆让玩家在二十乘二十的格子里摇一只再涂色，第四版升级成三十二乘三十二的拼豆模板盖章加手涂。

这四版的死因是同一个：好看的责任被推给了素材或者玩家。部件库拼出来的东西没有骨架，格子涂出来的东西像一坨。Eric 翻出《刨根问底》里那只小方块猫说：「这个就很好看，头大腿小有尾巴，模型化。」

第五版就是从这只猫身上抽出来的。做法是把它第一帧的像素抽成一张 38×30 的字符图，耳朵、眼睛、鼻子、尾巴单独摘成像素件，然后放大两倍做台阶平滑到 96×96 的逻辑画布，描边保持两格宽，明暗两阶加一个高光。默认参数画出来和原像素一格不差，有一个用例专门逐格比对。

底模捏人页。头、耳、眼、嘴、身、尾、花纹、颜色八组，共 27 个参数，每个参数只有几个档位。

参数表是这款游戏的核心资产：头型六种、头宽头高各五档、耳形耳角耳距、眼形眼距眼高眼色、胖瘦高矮腿长、尾形尾长、花纹和花纹色、主色副色腮红、一个配饰。副色默认按主色的色相派生，所以随便乱点也不会撞出脏色。还有一个 clampAll，把任意参数组合夹回合法范围，这样「随机」按钮永远能画出一只站得住的东西。

Eric 的原话是「像艾尔登法环捏人那样」。这句话比它听起来重要：艾尔登法环的捏人之所以不会捏出怪物，是因为底模本身好看，参数只是在好看的范围内挪。我前四版都在做部件，没有底模。

评审总表的一部分：默认灰猫、站长 Kaos、十只随机。这张图连同每个参数的档位条和冲突图一起喂给 ChatGPT 当可爱度评审，跑了三轮。

评审这件事也值得单说。我让 ChatGPT 当美术评审，不是让它画。每轮出三种图：总表、每个参数逐档排开的档位条、以及把容易打架的参数两两组合的冲突图。它回来的意见很具体：梨形头删掉、脸颊鼓包停用、眼间距封顶、鼻子和喙互斥、熊耳要埋进头里、叠加增高要有上限。这些意见直接变成了参数表里的约束。

二、一张图就是一只宠物

这款游戏没有服务器。宠物在朋友之间流通，靠的是一张图。图发到小红书，朋友把它存下来，在游戏里选这张图，宠物就领回家了。所以那张图里必须装着整只宠物的「基因」，而且要扛得住小红书的压缩。

基因很小。27 个参数按档位数定位宽，一共 71 位，加上性格、性别、MBTI、宠物名的词库编号、指纹、代数、经手人数、创建日，一只宠物 18 个字节。版本号占 4 位，旧版本的图现在还能读。

难的是把这 18 个字节画进图里再读回来。这件事我做了三次。

定稿的身份卡。信息区下方那条黑框白底的点阵就是「身份纹」，320 个格子装着整只宠物。

第一次：自制的墨绿色条码。 卡片底部画一条 64 列的黑白格子，外面套墨绿框。读图时在下半部分找「墨绿最满的一整行」当外框横边，由它推出格宽和范围，逐格取亮度判黑白。离线跑了十三个用例，JPEG 压缩、缩放、半透明水印、截图再截图，全过。真机也通了。然后 Eric 自己发了一篇笔记，把图存下来导入，提示「这张图里没有宠物」。

原因是那张卡的背景是蓝天。墨绿的判定没有分清绿和蓝，整幅蓝天那一行比外框还「满」，定位选错了行。我补了一个 g >= b 的判定，又把候选行从一行改成逐个试六行。能读了，但我已经不信它了。

第二次：换成真正的二维码。 用现成的二维码库编码、用 jsQR 解码，回归八百多例全过。这一版活了一天。Eric 去查了小红书的规则：图里带二维码算交易导流，笔记会被限。二维码必须下线。

第三次：回到第一版的样子，换掉骨头。 Eric 的要求是「其实你一开始做的那个码就不错，黑色描边外面加白色描边，别越改越复杂」。我中间还试了一版圆形徽章和一版小圆角矩形，都被嫌太惹眼。最后定稿的版式和第一版几乎一样，只是墨绿换成黑。

骨头换成了三样东西。第一，定位不再认颜色，只看亮度：找亮色和深色的连通域，用长宽比筛出候选，沿四条框线扫描剖面找「最后一段暗格后面跟着留白」来精修角度、中心和比例，多个候选和两个朝向逐个试。第二，纠错换成和二维码同一套的 Reed-Solomon：40 个字节里 22 个是数据、18 个是校验，可以纠 9 个坏字节，位流再异或一个固定掩码，免得补零的地方一片空白。第三，回归用例从十三个变成一千一百二十一个：十张纹理背景乘八种性格生成身份卡，每张过 JPEG 两档质量、四档缩放、水印压到码的角上、720 宽小图、截图黑边、旋转正负三度、iPhone 截图裁掉上下栏，全部要解出且指纹一致。顺便验证了标准二维码解码器对它一张都读不出，平台的扫描器也不会把它当二维码。

这三次返工的教训不在技术上。第一次的问题是回归用例用的背景太干净，没拿真实分享图测。第二次的问题是没先查平台规则。两件事都在做之前花十分钟就能避免。

三、一只自己的，其余靠收集

玩法规则是 Eric 定的：每个人只能捏一只，可以改但指纹不变；其余的宠物只能靠导入别人的图来收集；收集到 3、5、10、20、50 只解锁大厅里看得见的东西。

技术上要防的是自刷。本机记一个「我创建过的指纹」列表，放生过的也记着，自己的图导回来一律拒绝，提示「这是你自己的」。同一只宠物导两次只占一格，代数取小的。放生过的宠物又被接回来，亮一个叫「回家」的成就。

这块的 bug 出在最不起眼的地方。Eric 捏了一只去拍合影，分享文案写「我收集到了 0 个宠物」。原因是「收集数」只数了领养来的，没数自己那只。改成「自己的加领养的、Kaos 不算、重复指纹算一次」，合影标题、成就标题、成就页头、里程碑全部统一到这一个函数。

Eric 手机上的成就页：捏了一只，「捏出第一只」没亮。当时的判定挂在孵化动画走完那一刻，动画没走完就切页，成就就丢了。

成就系统也返工过一次。最早的判定挂在动作上：孵化动画结束时发成就。iPhone 上 Eric 没等动画走完就切页，成就就永远不亮。改法是把判定做成幂等的：每次存档前、读档后、进成就页都重新跑一遍「哪些成就条件已经满足」，满足就补记。弹框单独一套：已弹过的记进存档，只在大厅和成就页、没在孵蛋、没在录制、没有别的弹框时才弹，一次一张，关掉再弹下一张。

成就卡。背景是 ChatGPT 画的，宠物是游戏自己渲染贴上去的。

过审前 Eric 说了一句「求求了」，让我把成就再查一遍。我写了一个无头浏览器脚本，用真实的鼠标点击走完十五个场景：孵完弹一次、关掉不再弹、杀掉重开不再弹、在宠物页达成不弹回大厅才弹、弹框开着时又达成只排队不叠、录制中达成延后、放生再接回算回家。十五条全过。这个脚本留在了工程里，以后每次打包前跑。

四、合影录像：iPhone 的三个坑

合影是这款游戏最好玩的部分。点「开拍」就开始录，前三秒宠物们乱窜追逐，然后归位看镜头，倒数到零咔嚓一声闪白定格，拍立得滑出来，整段录成视频直接发笔记。

合影的三个阶段。整条时间轴是确定性的，同一个种子每次画出来一样，所以能离线测「逐帧位移不超过 14 像素」这种事。

录像走浏览器的 MediaRecorder：把画布变成视频流，再把音效总线的音频轨并进去，录完得到一个 mp4，转成临时文件交给小红书发视频笔记。在电脑的浏览器里一次就通了。在 Eric 的 iPhone 上，前后踩了三个坑。

坑一：只录到三秒。 录制器不是在用户点击的那一次手势里启动的，iOS 会掐掉一部分。改成在点「开拍」的抬手事件里同步启动录制器，倒计时从录制器真正开始的回调之后才起算。

坑二：视频三倍速。 这个花的时间最长。画布有两条路在喂帧：屏幕刷新循环画一次，录制定时器又画一次。两条路叠在一起，帧数超过了声明的帧率，播放器就按三倍速放。改成只留一条路：画布流用零帧率模式，一个 30 帧每秒的定时器里画完一帧手动推一帧；屏幕上的舞台用刷新循环另画一份，绝不往录制画布上画。

坑三：录完是空的。 这个最诡异。过审的那一版能录，几天后同样的代码不能录了。我把两个版本的录制相关文件逐个对比，一行没改。电脑上能录出六秒多的 mp4 带音轨。Eric 手机上画满了 190 帧，一个字节都没写出来。

Eric 发来的截图。「录完没数据 190 帧 · ondataavailable 没来」这行字是我加的诊断，没有它我到现在还在猜。

原因是 WebKit 的录制器要等画面轨和音频轨都来了第一份数据才开始写文件。我们的音频轨只在真有音效响起时才出数据，开拍前几秒是空的。碰上音频上下文还处在被系统挂起的状态，录制器就一直等，等到结束一个字节都没写。之前能录，是因为 Eric 开拍前刚摸过宠物，音效总线正热着。这次是冷启动直接去拍。

修了三层。根因：音效总线建好后立刻挂一个静音的常量源，让音频轨任何时刻都在出数据；带声音的那条流用 new MediaStream 一次建好，不再事后 addTrack；开拍前先确认音频上下文真的在运行才挂音轨。保险：同一张画布同时开两路录制，一路带声音、一路纯画面，带声音那路为空就自动用纯画面那路，最坏是无声视频，不会退化成一张图。可见：失败时结果页写一行原因，调试面板记两路各录了多少字节。

v1.56 Eric 拍到了无声视频，是保险那层接住的。v1.57 有声音了，过审。

五、高度：别信 100vh

另一个 iPhone 专属的坑是布局。小红书的容器里，100vh 和 window.innerHeight 都比实际可见区域大，把工具栏算了进去。大厅的房间撑满之后，头像条被顶到底部导航下面，Eric 发来截图时我以为是渲染错了。

左边是 Eric 的 iPhone，头像条只露出半个头。右边是改后用无头浏览器伪装 iOS 视口截的。

改法是只量容器：页面做成 flex 列，舞台那一格 flex:1，画布尺寸只读容器的 clientHeight，窗口尺寸变化、visualViewport 变化、ResizeObserver 都触发重算，进大厅后下一帧、三百毫秒、一秒各再量一次。底部导航加 env(safe-area-inset-bottom)，带 constant() 退路。

验证靠一个脚本跑五组视口，其中一组把 innerHeight 伪装成比 clientHeight 大 80 像素来模拟 iPhone，断言「舞台底等于头像条顶、头像条底等于导航顶、导航在视口内」。

六、不让玩家输入任何文字

这款游戏上线时，玩家在游戏里打不了一个字。宠物名从词库随机，不喜欢就换一个。主人昵称整个取消。一句话用性格默认的。

这是过审策略，不是产品偏好。最早的版本有名字输入框，配了一个敏感词表做过滤。Eric 问了一句：「检查下昵称词库，去掉可能暴露敏感词库的代码。」我才意识到包里带着一份敏感词表本身就是风险，审核把包解开一看，先看到的是那份表。所以干脆把输入全拿掉，词表整段删除，导入别人的图时名字也只认词库里有的。包内文本扫描清零。

词库现在有 127 个宠物名，几百句台词按性格、星座、MBTI 分池。

七、怎么在电脑上测一款手机游戏

Eric 不想再当第一个发现问题的人。这款游戏的自测体系是这样的：

• 纯数据核心放在单独的文件里，Node 直接跑用例：核心规则 48 例、词库 130 例、基因 920 例、底模 1007 例、合影时间轴 401 例。
• 无头浏览器用 CDP 发真实鼠标事件走完全流程，46 张截图拼成一张总览；一个脚本造 25 只宠物（多代、十二个主人、八种性格乘十六种 MBTI、重复指纹、自刷）遍历每个页面记帧时间。
• 五组视口的几何断言、身份卡 1121 例解码回归、录像 10 例、成就 15 例。

压测脚本造出来的大厅：六只在家，剩下的在头像条里排队。

真机上查不出的事，靠一个藏起来的调试面板：我的页版本号连点五下，显示视口尺寸、容器高度、安全区、最近一次录制的格式时长帧数和失败原因、成就状态、存档序号。Eric 截一张图发过来，我就知道卡在哪。这款游戏三个 iPhone 问题都是这么定位的。

八、图标和素材的分工

图标总表。实色几何符号，深色面上翻白。

这款游戏 ChatGPT 画了四个时段的房间、八张成就卡背景、十张抽象纹理、一张封面底图。它一只猫都没画。上架图标和封面里的 Kaos 和伙伴，全是无头浏览器跑游戏自己的底模渲染出来再贴上去的。它画过一次猫，Eric 一眼否掉：「要像游戏里那只。」

如果重做

第一，身份纹从一开始就按定稿的做：亮度定位、Reed-Solomon 纠错、用真实分享背景跑回归。第一次就查清平台对二维码的规则。两天里有大半天花在同一张图上。

第二，录像从一开始就做双路加诊断。iPhone 上 MediaRecorder 的坑没法在电脑上复现，没有诊断行就只能猜，猜错一次就是一个版本。

不过话说回来，它已经把最重要的事做对了：捏出来的东西好看，是因为底模好看，不是因为玩家会画。

去捏一只，把它的图发给朋友。