Messenger

团队在 Awwwards 上发表的制作文章里说，他们想做一个安静、但又有一点古怪的游戏，这种感觉来自团队在亚洲旅行时去过的一些地方。他们把它定位成一个大约十五分钟就能玩完的免费实验作品，也借这个项目继续打磨自己做多人在线三维环境的技术。世界从一开始就被设想成一颗很小的球，访客朝任何方向一直走，最后都会回到出发的地方。故事是最后才定下来的，团队试过科幻悬疑和硬派犯罪的点子，最后只留下了送信这件事。游戏里没有拯救世界的任务，也没有箭头和新手教程，访客按自己的节奏去发现该去哪里、该找谁。

网站的标题画面上只有一颗慢慢转动的小星球和压在它前面的 MESSENGER 标志。访客按下 BEGIN 之后，屏幕变成白底的加载页，几秒后镜头从星球外面落到一个背着邮差包的少年身后。少年用三句话交代了今天的处境，大意是自己睡过了头，单子上有五件东西要送，得赶紧出发。说完这三句，访客就可以自由行走了。星球上一共有九个有名字的地方，访客走进其中一处，屏幕左下角就会用方块字打出它的名字，比如 MAIN SQUARE（主广场）、Smelly Falls（臭瀑布）和 Mountain Temple（山顶寺庙）。

五件派送分别属于五段小故事，每段都牵涉两三个居民，一共十三步。办公室职员想在老板读到之前要回一封信，穴居人托访客把明信片带给广场上卖花的女人，两位名字几乎一样的科学家（Frieb 和 Frebi）收错了彼此的东西。另外两段里，一位老婆婆想把供品送上山顶的寺庙，潜水员则从海底的箱子里捞出一封写着 Dave 的旧信。每段故事的步骤要按顺序走，五段之间却不分先后。访客走近一个头顶冒着省略号气泡的居民、点一下对方，就会开始对话。对话结束后，屏幕左下角会弹出一张卡片，写着下一步去找谁（NEXT UP），拿到东西时则写着 PACKAGE RECEIVED。

这五段故事分散在星球的不同角落，所以送完它们就等于把整颗星球走了一遍。游戏不给地图，也不画路线，指路的线索全都放在世界里：地名会在访客走进去时出现，有话要说的居民头顶有气泡，在瀑布边弹吉他的 Dave 则要靠声音去找。团队说，这把吉他的声音会随着访客走近变大，并且在三维空间里有方向，访客靠耳朵就能找到 Dave。最后一件送到之后，画面压暗，屏幕中间出现 YOU MADE IT!，下面是两位开发者和作曲者的名字，以及"留下来继续逛，或者刷新浏览器重新开始"的提示。进度存在访客自己的浏览器里，下次打开会接着上次的进度，五件全部送完后再打开，就会从头开始。

星球上同时还有别的真人玩家，服务器会把访客分进一个个房间。团队发现同一个地方超过十个人就显得太挤，会破坏安静的气氛，所以把每个房间的人数上限定在了十人。每位访客一进来就会被随机配上一套发型和衣服，所以街上几乎看不到两个长得一样的送信员。玩家之间不能打字，只能发十种表情，团队说这样既不用审核聊天内容，也不会有人在聊天里说难听的话。团队还在文章里提到，常有玩家主动带迷路的人去找藏得很深的寺庙和居民，靠的就是走在前面、发几个表情。

整个世界的视觉规矩是让一切看起来像手画的、带点不完美。每个物体只涂一种颜色，背光的一面换成同一种颜色的暗色，画面上没有渐变和材质纹理。物体的轮廓、窗框、台阶边缘和岩石的纹路都用一种偏蓝的深灰色线条（#373f42）描出来，这些线条有粗有细，还会在中途断开，像是用笔快速勾的。团队说，他们先试了几种都很依赖描边的画面风格，最后发现描边最能把几何形体和细节衬托出来。界面也守同一条规矩，按钮和对话框的边缘都有一点歪，像手剪的纸片。

天空和海水用的是同一种偏绿的青蓝色（Awwwards 页面上取到的主色是 #81BFBC），房子和路面是灰绿、米灰和浅褐色，再用少量红、橙、黄点缀在信箱、路锥、招牌和人物的衣服上。团队把游戏里用到的每一种颜色都放进了一张 16×16 像素的小图里，所有模型都从这张图里取色，所以改一个像素就能改掉全世界所有用到这种颜色的地方，调整光线和气氛也方便。画面最后还整体经过一次调色，颜色偏暖、偏绿，饱和度也高一些，后面工程章会讲它是怎么做的。

世界本身照着一座中等规模的亚洲城市来画，团队参考了 YouTube 上拍中等城市街景的视频，还专门去日本看了实地。画面里看得到电线杆、自动售货机、路锥、挂在窗外的毛巾和写着一种虚构文字的招牌，城市的密度介于乡村和大都市之间。因为星球很小，地平线弯得很明显，远处的房子会朝两边歪下去，这是访客一眼就能看出这是一颗球的地方。主光只有一个方向，从斜上方照下来，房子投出边缘柔和的影子，人物身上的明暗交界却是硬的，所以人物在场景里显得更清楚。

游戏里的界面部件都做成同一种纸片，白色的卡片（#F8F8F8）带着一个向右下方偏移、不模糊的灰蓝色阴影（#647A87）。对话框顶上贴着一个彩色的名字标签，颜色按故事区分，办公室这条线是红色（#c25959），穴居人这条线是黄色（#f3c258），寺庙这条线是绿色（#8cc48c），Dave 这条线是橙色（#de794e），开场和科学家这条线是蓝色（#66BDE6）。屏幕右上角是打开任务清单的按钮，右下角竖排着声音、换装和表情三个按钮。网站用了三款自己做的字体：一款粗壮的方块字，用在 BEGIN 按钮和名字标签上，一款更大、更像积木的方块字，用在地名上，对话、任务清单和结局页则用一款大写的手写体，读起来像一个人随手写的便条。完成的任务会在清单上被一条手画的线划掉，后面写着已完成的步数，比如 (3/3)。

人物同样是平涂的，头身比例接近真人，脸上只有用几笔画出来的眼睛和嘴。团队说主角的灵感来自荷兰那些课余打工送东西的青少年。访客按 L 键或者点 T 恤按钮，就会打开换装面板，镜头转到正面拍着主角，四排左右箭头分别换发型、上衣、下装和鞋子，一共有七种发型、九种上衣、七种下装和七种鞋子。

到了竖屏的手机上，同一套规矩几乎没有变，只是重新排了位置。标题画面的方块字标志会撑满屏幕的宽度，对话框也横跨整个屏幕的下半部分。走路时，手机上的主角留在画面中间，而在电脑上，主角会偏在画面左边，把前方的视野让出来。

从标题画面进入游戏的那一段镜头，是全站最长的一个动作，在这之前，标题画面上的星球一直在慢慢自转。访客按下 BEGIN 后，网站先切到加载页，等新场景准备好，镜头再从星球外面、比主角高出一截的地方开始往下落。镜头用两秒钟落到主角的肩膀后面，起初落得很快，到最后慢慢停稳，落下的同时会响起一声呼啸。在这之后，天上的两群鸟才慢慢显现出来，主角的三句开场白也是这时才开始。这段开场只在第一次玩的时候出现，之后再来，镜头落下的时间会拉长到三秒多，落完直接让访客自由行走。

走路时，镜头会一直跟在主角背后，访客不用自己去转镜头。电脑上按住 W 和方向键就能走，按住 Shift 会跑得更快，空格键跳跃。只用鼠标的访客按住左键，主角就会朝光标所在的方向跑去。镜头追主角时会慢半拍，所以主角转弯时镜头是慢慢跟过去的，不会生硬地甩过去。进到窄巷子里，镜头会自动往前收，不会钻进墙里。

主角自己的动作跟着移动的快慢变化，会在站立、跑和冲刺之间平滑过渡。访客半分钟不操作，主角就会随机做一个发呆的小动作。走进海里，主角的衣服会从下往上变深，像被水打湿，上岸后再慢慢变回原来的颜色。整个游戏在电脑上一直保持每秒 60 帧，站着不动和一路冲刺都一样流畅。

游戏界面上的每一样东西出场时，都会分两到四下跳到最终的大小，像定格动画里一帧一帧换上去的纸片。对话框用大约三分之一秒跳出来，里面的字再以每秒 35 个字符的速度一个个打出来，同时播放这个角色的配音音效，男声和女声各有三种。访客按一下空格或者点一下箭头，字会立刻全部显示出来，再按一下才翻到下一句。收起对话框只要大约五分之一秒，比打开快得多。光标停在按钮上时，按钮的边缘会换一种歪法，看起来像线条在抖动，影子也会缩短，像按钮被按下去了一点。

访客点中一位居民后，镜头会立刻切成两个人同框的过肩镜头，有的居民还会转身面向主角。居民说话时，嘴会在几种口型之间随机切换，每秒换八次，看起来就像在说话。每个人物的眼睛隔一阵就眨一下，眨眼的间隔不固定，所以一群人站在一起时不会同时眨眼。没在说话的时候，有几位居民会沿着固定的路线在街上来回走，让街道一直有人走动。

访客发出的表情也是一个会动的小东西。访客点开表情面板或者按数字键 1 到 0，主角头顶就会冒出一个三维的小图标，比如爱心、挥手、骷髅或者一卷厕纸，图标慢慢往上飘，两秒后消失。离得不远的其他玩家也会在同一个人头顶看到它。在手机上，手指按下的地方会出现一个半透明的圆盘，拖动它就能控制主角走路的方向和快慢，在屏幕上轻点一下就是跳跃，所以团队说一根手指就能玩。

整个游戏都画在一块 WebGL 画布上，用 three.js 渲染，外层用 Svelte 搭起页面，画布被放进一个封闭的 shadow root 里，页面的 DOM 里只剩几个空的 div。对话框、按钮、清单和地名这些界面也都画在同一块画布里，团队说这样才能毫无限制地给每一个细节做动画。主角的移动靠一套自写的物理，一个胶囊形的碰撞体在合并好的碰撞网格上做 shapecast（用 three-mesh-bvh 加速），重力指向星球中心，每一帧把主角的"上方"重新对准星球的法线。负责碰撞的网格是另外五个 Draco 文件，和画面上的模型分开。

画面的手绘感来自一个后期描边的通道。场景每一帧同时渲染进两张贴图（MRT）：第一张存颜色，透明通道里塞着每个面的编号，第二张存深度、压缩过的法线，以及这个像素是否描边的权重。全屏的描边着色器在每个像素周围取上下左右四个点，分别比较编号、深度和法线有没有突变，三者任何一个变化超过阈值，就在这里画上深灰色的线，离镜头 50 到 300 个单位之间，线条会慢慢淡掉。线条会断开，是因为各个材质在写描边权重时用噪声把一部分像素关掉了：地形用三向投影的噪声贴图，人物用自己局部坐标里的正弦噪声，所以同一条边上会出现长短不一的空隙。岩石上的条纹、草地和湿地的边界也被写进了面的编号，描边通道自然就会沿着它们画线。描完线之后，画面再经过一张 3D LUT 统一调色（用四面体插值），最后做一次 SMAA 抗锯齿。

颜色和明暗都在一个自己写的基础材质里算出来。每个模型的 UV 都指向那张 16×16 色板里的某一格，按最近点取样，所以一个面就是一种纯色。背光面的颜色是把这种颜色转成 HSV，色相挪一点、明度减半，再用 smoothstep 在亮面和暗面之间切出一条窄窄的过渡，人物用的过渡更窄，于是明暗交界更硬。高光只是一个阈值切出来的小亮块，而且只加在不朝上的面上。眼睛和嘴各是一条四格的小精灵图，眨眼由三个周期分别是 22、34、57 秒的计时器叠出来，任何一个走到头就播一次，于是看起来是随机的。嘴在说话时每秒随机换八次口型，图里的红、绿、蓝三个通道分别是嘴、牙齿和舌头，好让着色器给它们上不同的颜色。

画一颗完整的星球，最大的开销在地形上，团队为此专门设计了建模的方式和分档显示的规则。团队在制作文章里说，他们先试过把普通的平面模型按程序弯成球面，效果可以，但给每个角落添细节太慢，最后改成把整个世界当成一个摊开的立方体来建模，再把立方体变成球，这样变形最小，也更容易改。

变成球之后，地形被切成十组，每组有四种精度的版本，每种精度放进一个 BatchedMesh。每一帧，脚本对每一块地形做三次检查，不在镜头视野里的不画，在星球背面的不画（主角头顶方向和这块地形所在方向的点积小于 0.45）。剩下的地形按离主角的距离挑精度，6 以内用最精细的一档，12、20 是下两档的分界，再远的用最粗的一档。团队说这套 LOD 换档时会保住物体的轮廓，所以访客很难看出模型被换掉了。BatchedMesh 底层用 WEBGL_multi_draw，整个世界每帧只要二三十次绘制调用，其中十几次各自合并了四十个左右的物体。主角身上那盏方向光的影子只覆盖主角周围 24 个单位，影子贴图跟着主角走，所以 2400×2400 的影子贴图在近处足够清晰。

多人在线靠一个跑在 Google Cloud Run 上的 WebSocket 服务器。每个玩家的状态（位置、朝向、动作、所用的模型和衣服、名字）用 protobuf 编成二进制，客户端每 35 毫秒检查一次哪些字段变了，只发变化的部分，站着不动时几乎不发数据。发表情这种一次性的事件不等这个节奏，按下就立刻单独发出去。别人的角色在本地用插值从上一个位置平滑地走到下一个位置，离开房间时在 0.15 秒内缩小消失。所有玩家，包括自己，都是同一个带骨骼动画的 BatchedMesh 里的一个实例，骨骼矩阵放在一张贴图里，所以多一个人不会多一次绘制调用。团队说，实时更换人物模型很容易让游戏卡一下，所以别人换上的新衣服每帧最多只往显卡上传 512 个数据单元，传完后这个角色再用 0.35 秒放大出现，自己的衣服则一次传完。

游戏界面上的字没有用常见的 MSDF 字体图集。团队说，他们用 WebAssembly 生成字形，再交给显卡直接画出来，所以字在斜着看时也很锐利。下载的字体是网站自己格式的字形文件，界面图标也按同样的方式画，按钮的歪斜和抖动则是顶点着色器里按随机种子挪动顶点做出来的，鼠标悬停时换一个种子，线条就抖了一下。

这套做法首先要访客下载不少东西，好在大部分不用在一开始就下。访客打开标题页时要下载约 5.9 MB，其中声音占了 3.6 MB，单是背景音乐就有 2.26 MB。按下 BEGIN 后，网站再下载约 11.75 MB，几乎全是 188 个 Draco 压缩的模型文件，合计约 17.6 MB。屏幕在 0.43 到 0.46 秒之间就会出现白底的加载页，星球约三秒后出现，标题画面大约六秒半才完整，按下 BEGIN 之后还要再等几秒。

显卡的负担则压得很低。网站把像素比限制在 1.15（三倍屏的手机是 1.5），再根据实际帧率每隔几秒上下调一次，低于每秒 30 帧就降低分辨率，降到一定程度连影子贴图也减半，回到 60 帧就调回来，调整的方向来回改变四次之后就不再调整。iPhone 会被当成低内存设备，拿到更粗的地形模型、更小的背景音乐和 1024 的影子贴图。团队说 iPhone 上的 Safari 用多了内存会直接关掉页面，所以他们追踪每一个资源，不用了就立刻释放。

这个游戏对读屏软件没有任何内容可读。页面的 DOM 里没有一个字、一个按钮，所有界面都画在画布里，键盘焦点也一直停在页面本身。电脑上的访客可以用键盘走路、对话、换装和发表情，但开始游戏和找居民说话都必须用鼠标点。网站也不读取系统的减少动态效果设置。

Messenger 在 FWA 先拿到 88 分的当日最佳，又被选为 2025 年 10 月的月度最佳，一个多月后才在 Awwwards 拿到当日最佳。在 Awwwards 的评分里，Creativity 是四个分项中最高的，Content 也有 8.15，这和它把五段小故事、二十个居民和一个能联机的世界放进浏览器有关。最低的 Usability 是 7.46，一个可能的原因是星球上没有地图和路线提示，第一次来的访客要自己摸索该去哪里。开发评委给 Animations 打了 9.00，是六项里最高的，Semantics、Accessibility 和 Markup 都是 7.60，正好对应前面说的，页面里没有可以读的文字和标签。在 Awwwards 2025 年的年度评选里，它拿的是年度最佳开发这个分项，不是当年的年度最佳（Site of the Year）。

这款游戏基本上是两个人的作品，三维模型在 Houdini 和 Blender 里完成，界面用 Figma 和 Photoshop 设计，代码是 three.js、three-mesh-bvh、原生 JavaScript 和 C++，团队说他们喜欢用自己能掌控的工具搭自己的系统。abeto 上一个获奖作品 Igloo Inc 拿了 Awwwards 2024 年的年度最佳和年度最佳开发。团队说 Messenger 是他们传播最广的项目之一，上线几个月后每天仍有几千人在玩。