返回

Halloween Manor

一款在浏览器里玩的万圣节小游戏:你是老宅里的一只鬼,附身画像、镜子和摇椅,把打着手电进门的访客吓得逃出前门。访客是换上万圣节服装的吉祥物翠宝,换装、建模、绑骨和动作都用 Tripo API 完成。

作者: Theodore
在线体验
Halloween Manor在线体验

描述

Halloween Manor 是一款直接在浏览器里玩的万圣节小游戏。你是一栋黑暗老宅里的鬼,访客打着手电推门进来,你要附身屋里的物件、伺机现身,把他们一个个吓得尖叫着逃出前门。屋里最多同时有 4 个访客,有时两人结伴进门;每个人胆量不同,名牌上会标出谁胆小、谁不信邪。

屋里的物件分两类。八音盒和厨房门是引诱:发出声音,把听见的人引过去。台灯、摇椅、画像、落地镜、卧室的床和衣柜是惊吓:必须有人看着才管用,物件上方亮起一只眼睛,就说明此刻有人看得见它。基本套路是先引诱、再惊吓——八音盒配卧室的台灯,厨房门配摇椅。画像平时是一位女士的肖像,被附身时眼睛转过来,整张脸化成恐怖的样子;落地镜里会扑出一张脸;门厅、走廊、书房、客厅和卧室的墙上还挂着六幅恐怖画。

访客只看得见手电照着的东西。你被手电照到时身形会变浓,对方会停下来盯着看,但这还吓不到他;这时按 F 或右键现身,附近的灯像坏灯泡一样暗两下,0.6 秒后你在原地显出一个暗色的人形,停 1.5 秒、慢慢抬起头。现身只吓得到两种人:手电正照着你的,和已经紧张、又看得见你的;人越怕,这一下吓得越狠,所以要先用物件把人吓紧张,再现身收尾。现身后冷却 18 秒。

对着物件按住左键约半秒可以设机关:物件结一层薄霜,等有人走近时自己挑时机发作,最多同时设两个,60 秒没人来就解除。准星对准物件时,地上会浮出一条淡淡的霜线,线里面就是它吓得到、或者引得来的范围;名牌上名字前的小眼睛亮着,表示这一下会吓到他。出手以后,准星旁的标签直接写结果,比如「Theo jumped」或「No one saw it」。

一局就是一夜,约 5 分钟:开局一个人推门进来,之后每隔 12 秒再来一个,直到屋里有 4 人;3 分 20 秒收夜,门廊灯熄灭,不再有人来;4 分 30 秒天亮,没被吓跑的人自己出门。最后一个人离开后,游戏翻开访客登记簿,记下每个人几点进门、被什么吓跑,或是天亮时自己走掉,页脚的评语按这一夜吓跑的比例给出。不计分、没有输赢,可以选 Keep haunting 接着闹,也可以选 Another night 重来一夜。

操作方式:用鼠标和键盘时是第三人称,你就是那只鬼。点一下锁定鼠标,WASD 飘动(可以穿墙),鼠标转向,滚轮调镜头远近;准星对准 4 米内的物件点击附身,按住左键设机关,右键或 F 现身;Esc 放开鼠标、查看完整操作说明,M 静音,右下角可以切换画质。隔着墙看不到人,要靠脚步声找人,建议戴耳机。手机和平板上是娃娃屋式的俯视视角,点物件附身、可以旋转镜头;这个模式没有现身、机关和挂画,要趁访客还没平静下来再吓他一次,把他吓跑。

推荐用支持 WebGPU 的浏览器(如新版 Chrome / Edge)打开,不支持 WebGPU 的浏览器会自动改用 WebGL2。单人游戏,不用登录、不用下载;第一次打开要先加载模型、预编译着色器,需要等一会儿。游戏界面为英文。

Tripo 用在哪里

游戏里的角色——打着手电进门的访客和你操控的鬼魂——都用 Tripo API 生成;房子、家具和道具是代码用基础几何体搭出来的,挂画、画像和镜中人脸是另做的贴图。

  • 访客形象:Tripo 团队 VAST 的吉祥物翠宝,换上四套万圣节服装——维多利亚吸血鬼、提灯夜行的探险家、女巫和手绘骷髅。先用 Tripo 图生图把翠宝摆成 T 字站姿,四套服装都从这张图出发,比例一致,也更好绑骨;再用图生图换装,黑色球形身体、正面 logo 和黄色球鞋都保留,服装做成搪胶玩具配件式的帽子、披肩和领子。
  • 访客模型:换装图先生成四视图,再用 Tripo 多视图生 3D 做出带 PBR 贴图的模型。第三人称里玩家多半从背后看访客,四视图让背面的斗篷、披肩更准;贴图去掉了烘焙的光照,交给游戏里的灯和手电来打光。
  • 骨骼和动作:经过绑骨前检查,用 Tripo 自动绑骨绑上人形骨架,再套上 8 个 Tripo 预设动作——待机、走路、奔跑、张望、害怕、逃跑和两种受惊。导出前用 Blender 脚本统一精修:球身、帽子、披风跟着躯干整块动,腿边的配件不随腿拉伸,同时限制面数、去掉根运动;每套约 1.1–1.7 MB,贴图都是 WebP。
  • 鬼魂:用 Tripo 文生图出了四张概念图,挑中一张,再用图生 3D 做成不带贴图的白模——半透明的冷雾、被手电照出时变浓、现身时变成暗色实体,都由游戏自己的着色器来画,用不上贴图。白模再用 Blender 清理:兜帽里的脸推成一个深洞,面数压到 8000 以内,并把遮蔽烘进顶点,兜帽里、褶子深处会跟着暗下去。

在浏览器里怎么跑起来

游戏没有用游戏引擎,直接基于 three.js 的 WebGPU 渲染器,用 TypeScript 和 Vite 构建;遇到不支持 WebGPU 的浏览器会自动改用 WebGL2。构建出来是纯静态文件,资源都用相对路径,放在任何静态托管的子路径下都能打开。

手电是这栋房子里最重要的光:每个访客手里一支,各自投下影子。鬼魂的着色器逐像素判断自己落在哪几支手电的光锥里,光锥里的部分变浓、轮廓收紧、带一点手电的暖色,光锥外还是冷雾;现身时整个换成一份暗色的「实」材质,挡光、写深度,被手电照着的那面亮一点。鬼魂穿墙、穿过家具时,墙和家具在它周围溶开,洞边结霜。

声音全部用 Web Audio 实时合成,游戏里没有一个音频文件:尖叫、摇椅的嘎吱声、台灯的电流嗡声、八音盒、镜子里扑脸的那一声和老宅的环境声都是程序生成的。隔着墙看不到人时,脚步声就是找人的线索。

开场按钮会等房子、第一套访客造型和整栋房子的着色器预编译都完成才亮,点下去约 20 毫秒就开场;其余几套服装开场后边玩边下载,编好管线才加入轮换。灯光闪烁做了防光敏限制,任意一盏灯一秒内最多暗三下。画质分高、低两档,低档按 75% 分辨率渲染。