No Mercy Michel

Merci-Michel 是 Adrien Pin、Antoine Ménard 和 Pierre Hagège 在 2012 年底创办的巴黎工作室，专做游戏化的数字作品，也就是把品牌要讲的内容做成可以玩的游戏。替客户做了多年游戏之后，工作室也给自己做了一个，用它来介绍自己。

工作室把自己的员工做成了游戏里的对手。对手一共有 28 位，每一位都有自己的名字、外号和难度等级，手臂也有各自的肤色、配饰和纹身。难度分成简单、中等、困难和专家四档，简单和专家各有 8 位。纹身大多是个人化的小图案，有人文着自己的名字，有人文着 Game Boy、骰子和小胡子。工作室名字里的 Michel 也是一位对手，而且出场两次，一次叫 Merci Michel，一次叫 Nomercy Michel。游戏每次派员工上场，都会挑一位访客还没交过手的人，直到访客把所有人都打过一遍。

访客从进门到开打，要先走完四个步骤。网站的第一个画面上只有一颗橙色的 Enter the arena（进入擂台）按钮，放在深蓝色背景的正中，访客点击它之后才会进入首页，这次点击也让浏览器允许网站播放声音。首页上，访客要先输入一个昵称，再按下 Fight 按钮。访客没填昵称就按下按钮时，输入框会变成红边，下面出现一行 IT TAKES A NAME TO BE A CHAMPION（要当冠军，先得有个名字）。访客按下 Fight 以后，游戏会先在线上找一位同时在玩的真人当对手，找了十几秒到二十几秒还找不到时，就改派一位员工上场。开打之前，屏幕上先并排列出两位选手的名字和各自的连胜次数，网站还会随机给访客的名字配一个外号，比如 Savage 或者 Super。

比赛的规则只有点击，访客每点一下鼠标、按一下空格键或在手机上点一下屏幕，就给自己的手臂加一次分。双方的分差决定两条手臂往哪边倒，分差拉到一个固定值，这一局就结束，整场比赛三局两胜。为了不让一局拖太久，每一下的分值会随时间变大，开局 2 秒后从 1 分涨到 3 分，6 秒后再涨到 4 分。

作为对手的员工也有自己的出手节奏。程序按难度给每位员工定一个基础点击间隔，每一下的间隔再随机浮动一成，所以对手的手速忽快忽慢。开局 6 秒后，对手开始变累，点击间隔一点点拉长。一位中等难度的员工开局每秒能点 6.6 下，打了 20 秒后降到每秒 3 下多，访客只要撑过开头，就有机会把比分扳回来。

这个游戏用越打越值钱的手臂和首页上的连胜榜，让访客一场一场打下去。访客每赢一场，就能从一个转盘上抽一件奖品，奖品一共 12 种，从戒指、劳力士和皇冠，到头巾、指甲油和纹身。抽到的奖品会直接戴到访客自己的手臂上，访客下次来玩时它还在。可是访客输掉一场，网站就会随机收走手臂上的一部分配饰，纹身也可能被一并抹掉。访客还能拿自己的连胜次数和别人比，首页右下角的 TOP 10 Winstreak（连胜榜）只列前十名，第一名已经连赢了 214 场。

比赛结束后的文案延续了开场那句话的嘲讽口吻。访客输掉一场时，如果手臂上本来什么都没有，屏幕上会写着 LOL 和 we are not surprised at all（我们一点都不意外）。如果手臂上有配饰被收走，屏幕上则换成 YOU SUCK 和 give us back all your stuff!（把你的东西都还回来）。访客赢下一场时，屏幕上是 VICTORY（胜利）和连胜次数。

比赛之外，首页顶部一直滚着一条 FREE STICKERS（免费贴纸）的横幅。访客点击横幅后会看到一张订阅表单，订阅的人可以抽 Merci-Michel 的贴纸。

No Mercy Michel 的整个游戏发生在一个三维的拳击台上。Merci-Michel 把台面、围绳、角落里的凳子和搭在围绳上的毛巾都做了出来。一束聚光灯从上方打下来，光柱里飘着灰尘，背景是一片虚焦的蓝色灯点，像一座坐满观众的场馆。两条手臂是软胶玩具一样的卡通造型，表面圆润、反光柔和，纹身像贴纸一样印在皮肤上。首页的 Fight 按钮是一颗带厚度的橙色圆钮，看起来和手臂是同一类软胶材质。

比赛中的界面借用了电视转播的版式。两位选手的名字分列在屏幕左上和右上，名字上方用手写体写着外号，下面是橙色的实时每秒点击数，名字旁边的两个小圆圈记录各自赢下的局数，赢一局就填满一个。屏幕下方正中立着一块半露出来的仪表盘，指针指向哪边，就是哪一方占了上风。屏幕上同时有两只手指形状的光标，一只是访客自己的，另一只是对手的，所以访客能看到对手点得有多快。整个画面的四周还画着一道细细的圆角边框，让访客像隔着一块电视屏幕在看比赛。

这个游戏界面上的字体也来自体育比赛。昵称、回合数，以及 READY、FIGHT 和 VICTORY 这些大字，用的是 United Sans 里笔画极粗、字身压窄的字形，看起来像球衣号码和赛事海报上的字。外号、Winstreak（连胜）和结尾的 Wanna play again?（再来一局吗）则用一款叫 Cetary 的手写体。界面上的字号跟着窗口大小缩放，桌面上正文约 30 像素，手机竖屏上约 14 像素，所以同样的排法在两种屏幕上都放得下。

No Mercy Michel 的界面以四种颜色为主，另有三种颜色只在特定的时候出现。场景和背景是深海军蓝（#0A2945），按钮、数字和标题立体字是橙色（#F89953），手写体的外号是霓虹青（#00F0F0），大字和计分条是白色。在蓝色的场景里，橙色和青色是对比最强的两种颜色，橙色因此用来标出能按的按钮和比分，青色用来标出选手的外号。其余三种颜色跟着比赛的状态出现，蓝色（#469DCE）用在次要的数字上，金黄（#FED062）属于胜利和奖品，红色（#DB0202）只用在连胜归零的那个数字上。

除了界面上的这几种颜色，拳击台场景本身的颜色也跟着比赛的状态变，平时整个场景是深蓝色的。访客领先时，屏幕下缘泛起一片红光，仪表盘旁边冒出火苗，画面中间像被热浪烤得微微扭动。访客落后时，屏幕下缘变暗，整个画面褪掉一部分颜色，四周的暗角也收得更紧。访客赢下一整场时，拳击台会整个变成金黄色，输掉一整场时，场景则先变成褪了色的粉红，最后沉成一片暗红。

Merci-Michel 把观众的声音做成了飘在场地里的文字。比赛时屏幕上会不断浮起一行行倾斜的白字，有的是 GO GO GO、KEEP IT UP 这样的欢呼，有的是 HAHAHA、STOP WHINING 这样的嘘声。这些字从选手身后浮起，再慢慢淡掉，给访客一种有人在台下看着的压力。

这个游戏在手机上换成了竖着的取景。首页上的手臂和标题字放大到占满竖屏，昵称框和 Fight 按钮移到下方，连胜榜收成屏幕底部一张可以拉开的 TOP 10 Winstreak 卡片。比赛时，两位选手的名字缩到屏幕顶端两角，手臂占据中间，仪表盘仍然在屏幕下缘正中。

这个游戏的每一个画面都由一台会移动的镜头带进来。网站给镜头设了七个机位，分别对应首页、等待、开场、比赛、胜利、失败和失败后的特写。每换一个画面，镜头都从远处推近到新的机位，整个推进用一秒多，起步和收尾都很慢，中间很快。镜头推到其中几个机位时，画面会轻轻震一下。在桌面上，镜头还会跟着鼠标微微偏转，鼠标往哪边移，画面就往哪边转一点，手机上没有这层偏转。鼠标停着不动时，画面也在缓慢地起伏，像有人扛着摄影机在拍。

访客点击 Enter the arena 以后，按钮在 0.2 秒内淡掉，盖在画面上的那层深蓝色用一秒左右散开。镜头接着用 1.6 秒推向两条扣在一起的手臂，顶部的贴纸横幅再从屏幕上方滑下来。访客按下 Fight 后，首页的界面收起来，画面缩进一个圆形的舷窗里。顶部横幅在 0.3 秒内滑出屏幕，一个小号的游戏标志从上方落下。舷窗里是访客自己的手臂，后面横着一行巨大的半透明字，写着访客的名字。找到对手后，舷窗先缩成一个点，再在一秒半左右张开到整个屏幕，镜头同时从贴近访客手臂的位置退到能看见整座擂台的地方。

每场比赛的开场画面大约持续 5 秒，之后屏幕上才开始倒计时。屏幕先打出 ROUND 1 的立体大字，2 秒后是 READY，再过 1 秒是 FIGHT。READY 和 FIGHT 出现时都伴着一团白色的冲击波，镜头也跟着震一下。访客要等 FIGHT 出现 1 秒后，才能开始点击出力。每一局结束后，画面停 2 秒，再打出下一局的回合数，比如 ROUND 2，然后重复一遍 READY 和 FIGHT。

比赛中的动画都在放大点击的反馈。两条手臂的角度跟着分差走，但不会一下跳过去，每一帧只追上一部分差距，所以访客点得快时，会看到自己的手臂一点点把对方压下去。一方领先得越多，镜头就越往这一方的身后转、越往前推，访客大比分领先时，镜头已经低低地贴在访客的手臂旁边，画面也放大到原来的一倍半。这个镜头不会跟着比分抖来抖去，它只按固定的几档移动，每秒最多换一档，换档时再慢慢滑过去。分差越大，仪表盘的指针抖得越厉害，屏幕也越频繁地闪白，像场边有摄影师在拍照。比赛拖得越久，一直在用力发抖的两条手臂上就会慢慢渗出汗珠，汗珠还会顺着皮肤往下淌。

访客赢下整场时，屏幕先被一道白光整个吞没。白光退去以后，拳击台已经变成金黄色，镜头推向单独留在台上的访客手臂。VICTORY 几个大字斜着压在手臂前面，下面的连胜次数从 0 跳到 1。几秒后，一道黄光再次盖住屏幕，屏幕中间张开一个黄色的圆，圆的背后滑过一行空心大字 REWARD（奖励）。圆里的奖品像老虎机的滚轴一样从上往下一件件滚过，有手表、金链子和皇冠，转动先快后慢，2.7 秒后停在其中一件上。黄色的圆随后缩小，收进访客的手臂里，手臂闪一下光，那件奖品就戴在了手臂上。

访客输掉整场时，镜头停在对手巨大的手臂后面，拍着它把访客的手臂压到底，然后画面变黑一秒左右。画面再亮起来时，拳击台已经褪成暗淡的粉红，访客的手臂单独悬在中间，有气无力地晃着。如果手臂上有配饰被收走，那件配饰原来的位置会先迸出一团火星，配饰随后从手臂上消失。几秒后，手臂垂了下去，斜体大字 LOL 或 YOU SUCK 压了上来。大字下面的那句嘲讽一个词一个词地蹦出来，连胜次数也被划掉，跳回 0。最后大字淡掉，屏幕上出现一块黄色的霓虹招牌，写着 Wanna play again?，下面是 YES 和 NO 两个选项。

这个游戏的声音也跟着比分实时变化。访客领先得越多，火焰的噼啪声和一段往上走的音调就越响，落后时则换成一段往下走的音调，观众的助威声随着两边分差拉大而变响。背景音乐分成三层，首页上同时播放前两层，访客开始等待对手以后只留下第一层，音乐因此一下子变得单薄，等待的时间也显得更紧张。

游戏的画面从首页、比赛到胜利和抽奖，一直保持在每秒 60 帧。访客大比分领先、画面上同时冒着火苗和热浪时，帧率也没有往下掉。

No Mercy Michel 的转播效果都由同一个分差驱动，手臂、镜头、画面颜色和声音各自把它换算成自己的变化。两条手臂的动作是从模型里预先做好的一段动画中取出来的。手臂是一个带骨骼的 glb 模型，模型里存着一段从一边压倒到另一边的掰手腕动画，游戏把平滑后的比分换算成这段动画的播放位置，每一帧直接跳到那个位置。比分本身用一个指数衰减来平滑，所以手臂总是带着一点滞后跟上比分。发抖是叠在上面的两段附加动画，赢了炫耀肌肉、输了垂下手臂则是另外几段单独播放的动作。

游戏用一个小小的状态机控制镜头。七个机位各自记着一个远处的起点和一个落点，进入一个机位时，镜头用指数缓动在 1.2 到 1.6 秒内从起点推到落点。比赛机位是例外，用的是起步更慢的五次方缓动，推进用 1.4 秒。比赛中的镜头在正中、右侧和左侧三个落点之间混合，混合的比例来自比分。比分先被取整到每 0.2 一档，而且一秒内最多换一次档，再用平滑插值慢慢过去，所以镜头的移动是一档一档的，不会跟着每一次点击晃动。每个落点都另有一份手机版的位置和视角，手机上的视角是 70 度，桌面是 55 度，游戏按设备在两者之间插值。

最后一道后期处理负责访客领先和落后时画面的全部调色和扭曲。访客领先超过两成时，着色器开始用一张噪声图扭曲画面中间的取样坐标，做出热浪，再给屏幕下缘混入红色。访客落后超过两成半时，着色器压暗下缘、降低饱和度、收紧暗角。同一道后期处理还负责等待时的圆形舷窗和它张开的动画、摄影闪光灯一样的整屏闪白、输掉后的粉红色调、蓝噪声抖动和屏幕四周那道圆角细框。舷窗只是这道后期处理里的一个圆形遮罩，改变它的半径，就能把整个三维场景缩进一个圆里，或者再放出来。

所有声音都经过 Web Audio 播放，音效来自一个 142 秒长的音效合集，几十种音效排在同一个文件里，按时间段取用。比赛中有五段循环音一直在播放，音量都由比分直接控制，其中火焰声和上升音的音量等于访客领先的程度，下降音等于落后的程度，观众助威声等于分差的绝对值。三层背景音乐是三个单独的文件，都按 32 秒循环，同步启动，所以随时加入或拿掉一层都对得上拍子。

手臂的材质会跟着比赛的进程变化。游戏把纹身画进一张贴图，肘窝阴影的强弱则跟着肘关节弯曲的角度变化，手臂越弯，肘窝越暗。汗珠是片元着色器里程序生成的，算法和常见的雨滴打在玻璃上的效果同源，几层随机的水滴一边出现一边往下淌，再用它们去扰动表面法线。一个代表用力程度的数值在比赛中慢慢上升，大约 50 秒升到六成多，汗珠的多少就跟着它走。低画质档则用一种计算量更小的方法来算水滴的法线。

擂台的气氛几乎全靠着色器里的假象做出来。场景的光照来自一张 318 KB 的 HDR 环境图。聚光灯的光柱只是一块平的三角面，着色器在上面画出由亮到暗的边缘、沿着光柱的波纹和一层往上飘的烟雾。光柱里的灰尘是一组粒子，着色器只让落在光柱范围里的粒子显示出来。背景里的观众灯光是一片会闪的贴片，围绳靠顶点着色器轻轻晃动，手臂下面的影子则是一张单独渲染的接触阴影。

仪表盘、火苗和屏幕上的光晕画在另一个用正交镜头的界面场景里，叠在三维场景上面。仪表盘由底座、指针和轴心三张贴图拼成，指针最多转 81 度，分差超过三成五时开始抖动，到七成以上抖得最厉害。火苗是三组序列帧贴片，只在访客领先时升上来。

Google 的 Firebase 替游戏管理对战房间、连胜榜和连胜记录，两位真人对战时，比赛中的数据则走 WebRTC 的点对点数据通道。访客进站时会被分配一个匿名身份，按下 Fight 后进入 Firebase 实时数据库里的等候区，匹配成功后，Firebase 只负责让两边的浏览器建立直连。两边互相发送的消息只有比分、光标位置和比赛状态三种。两边之中会有一方担任主机，由它决定什么时候开始倒计时、什么时候结束一局，再把状态发给另一方。对手的那只手指光标就是这样从对方的浏览器传过来的，改派员工当对手时，程序也会模拟出一只光标在屏幕上点击。

游戏把奖品系统建立在手臂的配饰上。12 种奖品都是做好的小模型，访客抽到一件，游戏就把它的几何体合并进手臂的网格，再在着色器里打开一次闪光，表示这件奖品刚戴上。游戏会把手臂的状态连同昵称和连胜次数一起存进浏览器的本地存储，所以访客下次打开网站，手臂还是上次的样子。存档里还另放了一份用浏览器自带的加密接口加密过的副本。访客输了以后，游戏会随机拿掉几件配饰，还有四成的机会连纹身一起清空。

画质一共分成六档，游戏先按显卡型号定一个初始档位，再根据实际帧率上下调整。网站一开始会建两个用完即弃的 WebGL 上下文，其中一个要求浏览器在只能用软件渲染时直接报错，用来判断这台设备有没有真正的显卡。每一档限制画布最多渲染多少像素，最低两档是 1080p，最高两档是 3K。帧率持续高于每秒 58 帧就升一档，低于 52 帧就降一档。调出来的档位会存进浏览器的本地存储，访客下次再来时直接从这一档开始。

这个游戏的三维画面用 three.js 渲染，three.js 外面还包着一层 Merci-Michel 自己的 WebGL 框架，界面则是用 Vue 写的。游戏用的 three.js 是 2022 年发布的 r146 版，项目在后台数据服务上的名字是 mm-10years，而工作室在 2012 年底成立，十周年正好落在 2022 年。这个游戏因此看起来是工作室十周年时做的，可能早在几年前就做好了，到 2026 年才拿到 FWA 当日最佳。

No Mercy Michel 的下载量很大，访客第一次打开网站就要下载约 11.4 MB，而这时屏幕上还只有一个按钮。下载量里最大的单个文件就是前面说的音效合集，有 1.6 MB。贴图占得更多，所有 PNG 贴图加起来约 6.6 MB，其中手臂用的三张就有约 3.2 MB，最大的一张是 1.5 MB 的法线贴图。打完两场比赛后累计是 13.6 MB，多出来的主要是三层背景音乐，每层约 380 KB。

下载量虽然大，网站的第一个画面却出现得很快，服务器 0.04 到 0.22 秒就返回第一个字节，屏幕在 0.15 到 0.34 秒画出第一块内容，加载过程中页面上的内容也没有跳动。画面出来之后，页面仍在继续加载和准备，其间会卡住将近一秒，访客这时点击任何地方都没有反应。

手机和平板下载的是和桌面完全相同的 11.4 MB，三维场景也是同一个，差别只在取景、版面和画布的清晰度。手机上的画布最多按两倍像素密度渲染，即使屏幕是三倍像素密度也一样。游戏同时监听鼠标按下、空格键和手指触摸三种输入，每一下都要松开以后才能算下一下，所以按住不放不会自动连点。

这个游戏能只用键盘玩完，读屏软件的用户和怕晃动画面的访客却被挡在了外面。键盘用户也会遇到不方便的地方，进门按钮在得到键盘焦点时没有任何变化，访客看不出焦点停在了哪里。整个比赛画在一块没有任何文字说明的画布里，读屏软件的用户听不到比分，也不知道对手是谁。网站的脚本和样式表都没有读取减少动态效果的设置，镜头推拉、晃动、闪光和冲到手臂跟前的特写在任何设置下都照常播放。

Merci-Michel 的这个游戏在 FWA 拿到 85 分，FWA 把它归在 Fun & Playable（有趣可玩）、Game（游戏）和 Personal/Portfolio（个人与作品集）三个分类下。FWA 不公布分项分数，所以看不出评委在哪一方面给分最高。

署名只有 Merci-Michel 这个工作室，而游戏里的 28 位对手就是这家工作室的成员，所以做游戏的人和被打的人是同一群人。Merci-Michel 在 FWA 的档案里自称专做前沿互动作品的数字制作公司。这个游戏是这家工作室拿到的第 80 个 FWA 奖项，其中包括 64 个当日最佳和 8 个月度最佳，工作室 2017 年还拿过一次 FWA 的年度最佳。在 2026 年 9 月巴黎举办的第一届 Three.js 大会上，联合创始人 Antoine Ménard 讲过这家工作室搭三维世界的固定做法，先尽早做出原型，在构图和交互上反复试验，再围绕体验把整个世界搭起来。Antoine Ménard 还说，实时三维不一定要看起来像三维，它可以是给访客搭一个舞台的办法。