The Tie-break

The Tie-break 把一组联名大片改成了比赛的奖励，访客要打完一分，才看得到下一张照片。这些照片没有排在一页往下滚的相册里，而是跟着比分一张一张出来。开始页上那行小字把这个玩法直接写了出来，Play the game and discover the latest New Balance X Miu Miu collection with Coco Gauff（打一局，看看 Coco Gauff 穿的 New Balance 和 Miu Miu 联名新系列）。整组照片一共 13 张，访客要把比分打到 7 比 6，才能全部看完。这个站另外准备了 39 个国家和语言的版本，打的都是同一局游戏。

这个站的名字来自网球里的抢七（tie-break），也就是局分打到 6 平以后的决胜局，先拿到 7 分并且领先 2 分的一方获胜。The Tie-break 只照搬了先到 7 分这一条，打到 7 比 6 也算赢。访客点下 Start 之后，屏幕上依次出现三句说明，You vs Opponent（你对对手）、You are about to play the Tie-break（你要打一局抢七）和 Score 7 points to win（先得 7 分者胜）。对手是程序控制的球拍，访客用键盘的上下方向键、W 和 S 键，或者上下移动鼠标，来控制自己那块球拍。

照片这份奖励不分输赢，不管是访客得分还是对手得分，只要有一球出界，这一分就结束，屏幕随即揭开一张照片。一个一球都接不住的访客也照样能看到 7 张照片，只是比分会以 0 比 7 收场。游戏因此不再是一道挡在照片前面的门槛，访客打得好坏只影响看到几张照片，不影响看不看得到。

既然每一分都换来一张照片，比分咬得越紧，一局打得越长，访客看到的照片就越多，而对手的难度正是用来把比分咬紧的。对手开局是最松的一档，访客领先 2 分时换成中等，领先 4 分时换成困难，领先 6 分时换成一档几乎不失误的难度。对手自己领先的时候，难度始终停在最松的那一档。同一个回合里双方连续接到第 8 板以后，对手每多接一板，瞄准误差就再放大一点，所以一个回合不会无限拖下去。

这些照片在一局里占掉的时间，和访客真正打球的时间差不多。打完一局 7 比 3 的比赛大约要 4 分钟，其中真正打球的时间是 131 秒，停在揭开的照片上 86 秒，每张照片之后的 3、2、1 倒计时又占了 28 秒。访客差不多有一半时间在看照片和等下一球，打球本身更像一根把这些照片串起来的线。

Merci-Michel 把购买入口放得很克制，只有暂停页和结算页上才有一个 Discover 按钮，访客点进去就是 Miu Miu 官网上这个联名系列的商品页。结算页按输赢换一句话，赢了写 Game, Set and Match!（全场比赛结束，你赢了），输了写 Tough Luck, Next Time!（运气不好，下次再来）。这句话下面还有分享链接和 Want a rematch?（再来一局）两个按钮。

The Tie-break 的整个画面由三层叠成，最底下是一张模糊的照片，中间是用白色细线画的网球场，最上面是球、球拍和比分。球场是从正上方往下看的，并且横了过来，球网变成屏幕正中的一条竖线。竖线中间断开一段，放着 New Balance 和 Miu Miu 的联名标志，暂停键和静音键两个小圆钮分别钉在这条竖线的最上端和最下端。双方的比分用两位数写在发球区里，对手的 00 在右上，访客的 00 在左下，旁边各有一行很小的 OPPONENT（对手）和 YOU（你）。

画面里没有一套固定的配色，球场线、比分和球拍的颜色都从底下那张照片里取。程序画球场线时，会把线的白色和正下方照片的颜色做一次叠加混合（overlay），这是修图软件里常见的一种图层混合方式，亮的地方更亮，暗的地方更暗。照片偏蓝时，整个球场连同比分一起泛出浅蓝，照片里有一块红色的衣服时，压在上面的那段线就带一点红。每换一张底图，球场就跟着换一次颜色，设计师并没有为任何一张照片单独指定颜色。

两块球拍和那颗球的做法完全不同。球拍不是三维模型，而是一个平面，上面的圆角、描边、高光、外发光和投影全部由一段着色器算出来，看上去像两根竖着的玻璃管。着色器（shader）是在显卡上逐个像素计算颜色的小程序，这个站的大部分效果都靠它完成。球是整个场景里唯一的三维模型，着色器会把 New Balance 和 Miu Miu 两个标志印在球面上，并把球面的绒毛和缝线处理成两种明暗。在 1920 像素宽的屏幕上，这颗球的直径却只有大约 33 像素，对打时上面的两个标志几乎看不清。

照片本身是一组棚拍，大多是灰蓝色的背景，里面有 Coco Gauff 穿着这个系列在系鞋带、奔跑，也有从正上方拍的运动鞋。照片完全揭开时，球场、比分和球拍都会退掉，屏幕上只剩整张照片和底部一行 Click to continue（点击继续），这行字下面有一条细线在慢慢走满。这一刻的画面和一本时装杂志的跨页没有区别，游戏的部分被整个收了起来。

全站的文字只用两款字体，字号拉得很开。标题用的是 Instrument Serif 的斜体，开始页那行 The Tie-break! 有 131 像素高，结算页的 Game, Set and Match! 是 81 像素。其余的说明文字和按钮都是无衬线体 Work Sans，只有 12 到 14 像素，和开始页的标题差了将近十倍。比分数字同样是 Instrument Serif，但它们不是网页文字，而是在 WebGL 画布里画出来的，用的是一张 MSDF 字形图。这种字形图记录的是每个像素离字形边缘有多远，所以数字放到多大边缘都是清楚的，结算页因此能把两个比分放大到占满左右两侧，正中夹着那行斜体标题。

揭开照片的波纹是这个站的主效果，它由一段着色器在一张铺满屏幕的平面上算出来。波纹的起点是球出界那一刻在屏幕上的位置，访客得分时波纹从右边荡开，对手得分时从左边荡开。着色器以这个点为圆心，同时放大三个半径相差很小的圆，照片只在圆里面显示。三个圆的结果取平均，于是揭开的边缘不是一条线，而是深浅三层的一道宽边。

着色器还会把这道宽边附近的照片推开一点，看起来像隔着一层水或者弯曲的玻璃。具体做法是在每个圆的边缘附近叠一段随时间移动的正弦波，把读取照片的位置往外推，离边缘越远推得越少。与此同时，照片从放大 3 倍的状态缩回原大，圆环上还有一层淡淡的白光。整个揭开过程从球出界算起不到一秒。画面在这一秒里和开始页、对局、倒计时时一样，全程保持每秒 60 帧，也就是每帧约 16.7 毫秒。整局最慢的一帧出现在照片揭开的时候，也只有 37 毫秒。

每一分开始之前，画面都有一段铺垫。对局刚开始时，球场的每一条线会从一端画到另一端，各条线前后错开出场，大约 2 秒画完。照片揭开之后，底部那条细线用 6 秒走满，走满后游戏自动进入下一分，访客也可以点一下屏幕直接跳过。下一分开始前，屏幕正中会依次跳出 3、2、1 三个数字，每跳一下，球网中间都会荡出一圈光环。揭开照片加上倒计时一共大约 11 秒。访客按一下暂停键再恢复时，游戏同样会先走一遍这段倒计时，不会直接把球发出来。

对打过程中的小动效都在强调击球的手感。球每碰到一次球拍，碰撞点都会荡开一圈小波纹，球本身会压扁一下再弹回，身后拖着一道渐隐的尾迹，脚下还有一团柔和的影子。每得一分，整个画面会先抖动 300 毫秒，然后照片才开始揭开。比分变化时，两位数像里程表一样往上滚一格。

Merci-Michel 用 Vue 3 写界面，用 Vite 打包，三维部分交给 three.js，three.js 外面还包着一层统一管理资源清单、画质和场景的框架。13 张照片都存成了 KTX2 格式，这是一种显卡可以直接读取的压缩纹理，浏览器先用 Basis 解码器把它转成显卡支持的格式，比普通图片省显存。音效全部拼在一个音频精灵（audiosprite）文件里，也就是把几十段短音效首尾相接存成一个文件，播放时按时间点截取，另有一段环境音循环播放。

这个站每一帧要画的物体很少，显卡的负担很轻。对局中程序每一帧只向显卡发出 7 到 11 次绘制指令（draw call），程序每让显卡画一样东西就要发一次这样的指令。三角形最多不到 2,000 个，几乎全部来自那颗球，场景里其余的物体都是平面。模糊的背景照片用的是 three.js 最普通的贴图材质，运行时不做任何模糊计算，因为模糊效果是事先做进图片文件里的，13 张照片各存了一份模糊版和一份清晰版。

这个站的画质会跟着运行时的帧率自动升降。画质一共分六档，程序先按显卡型号查表，定一个初始档位。页面跑了几秒以后，帧率稳在每秒 60 帧就往上升一档，帧率掉下去就往下降。浏览器会记住最后定下来的档位，下次打开直接沿用。为了省下显卡的开销，画布的像素密度最高只到屏幕的 1.6 倍，桌面版 Safari 上只到 1.2 倍，抗锯齿也关掉了。

浏览器第一次打开这个站要下载 7.2 到 7.4 MB，其中前三张照片的模糊版和清晰版占 3.3 到 3.5 MB，音效和环境音 1.4 MB，剩下的是脚本和图片解码器。其余的照片是边打边加载的，程序最多在内存里留 4 张，旧的会被释放。打满 7 比 6 的一整局一共下载 18.4 MB，其中 26 个 KTX2 文件就有 14.5 MB，正好是 13 张照片各两份。

首次下载里最重的单个文件，却是那颗网球的颜色贴图。这张贴图是 1024 乘 1024 的图，扩展名写的是 jpg，实际却是一张 1.6 MB 的 PNG。它占了首次下载量的两成多，而那颗球在屏幕上只有约 33 像素宽，一张 1024 像素见方的贴图在这么小的球面上几乎看不出细节。

首屏出来得很快，服务器在 23 到 80 毫秒内就返回第一个字节，远低于 Google 建议的 0.8 秒，浏览器 64 到 207 毫秒就画出第一块内容（FCP）。访客最先看到的却只是一个品牌标志，页面上最大的那块内容（LCP）要到 4.9 到 7.2 秒才画出来，超过了 Google 建议的 2.5 秒。加载过程中没有任何东西跳位置，布局位移（CLS）是 0。加载时只有两个长任务，也就是浏览器被一段脚本连续占住、顾不上响应输入的时候，长 78 到 151 毫秒。

用键盘的访客能玩这个游戏，用读屏软件的访客和怕晃动画面的访客却几乎被落下了。游戏本身就是为键盘设计的，方向键、W 和 S 键都能打，暂停键和静音键也都有读屏软件念得出的名字。开始页的 Start 按钮却在键盘选中时看不出任何变化，因为样式表把它的焦点框整个去掉了，只用键盘的访客不知道焦点落在哪里。读屏软件的用户受影响更大，13 张照片只作为纹理画在画布里，画布没有任何文字说明，照片也没有配商品名或说明，他们完全不知道这里有一组系列大片。操作系统里有一个减少动态效果的设置，是给容易被屏幕上的运动弄得不舒服的人用的，这个站在访客打开它之后，只有手机版摇杆的一条样式会跟着变，揭开照片的波纹和得分时的画面抖动照常播放。

Merci-Michel 还为这局游戏做好了一个街机版本，有两名玩家对打、实体手柄支持、没人玩时的自动演示，以及一份由网球术语和法语词拼成的玩家昵称表。网站上没有开放这个模式，访客在线上只能一个人对着程序控制的对手打。

The Tie-break 先在 7 月 7 日拿到 FWA 的当日站，82 分，两个多月后又拿到 Awwwards 的当日站，总分 7.28。Awwwards 的四个分项里 Creativity（创意）7.53 最高，Design（设计）7.29 和 Usability（易用性）7.20 居中，Content（内容）6.99 最低，内容分偏低可能和这个站只有照片、没有商品名和说明有关。十九位评委里有十六位的总分落在 6.5 到 7.6 之间，最高的一票是 9.34，最低的一票是 6.00。

这个站在 Awwwards 的开发评委那里拿到 7.38 分，这组评委专门看技术实现。开发分项里 Animations（动画）9.20 远高于其余各项，这和揭开照片的波纹是这个站的主效果对得上。Semantics（语义）和 Accessibility（无障碍）都只有 6.60，照片只画在画布里、读屏软件读不到，正是这两项要看的问题。WPO（网页性能优化）是 7.60，Markup（网页代码的写法）是 6.80。

两个平台上署名的都只有 Merci-Michel 这个工作室，没有列出个人分工。Merci-Michel 在 Awwwards 上称自己是一家数字游戏化工作室，从 2012 年起已经拿了 79 个 FWA，今年进了 FWA 的名人堂。FWA 页面上列出的它的其他作品里，有两个是法国网球服饰品牌 Lacoste 的游戏，分别是 90 分的 Ace Breaker 和 86 分的 Polo Factory。另一个是 Miu Miu 的 A House that we shaped，拿了 85 分，The Tie-break 是 Merci-Michel 和 Miu Miu 的又一次合作。