Awards Racing
Awards Racing 是一个在浏览器里玩的漂移赛车游戏,它把设计评奖做成了一场比赛。玩家扮演一名刚入围的初级设计师,开车撞碎设计软件的图标,捡起点赞,躲开评委和对手的围攻,屏幕右边的四个仪表就是评奖网站常用的设计、易用、创意和内容四项分。比赛途中,整片场地每隔二十秒会从车底下开始一片一片换成另一套颜色,车上的角色跟着音乐的节拍晃脑袋。
阿联酋的 Ecofuture Technology Services 做了这个游戏,About 页署名的是一个六人团队。Awards Racing 先拿到 FWA 的当日最佳,又被评为 FWA 2026 年 9 月的当月最佳,还拿到了 Awwwards 的荣誉提名。

01概念
Awards Racing 出自迪拜一家做垃圾处理软件的公司 Ecofuture Technology Services,这家公司的产品有污水清运的下单平台和用可回收垃圾换钱的 Re-bin。Ecofuture 自己的公司官网在 2023 年 12 月就拿过一次 FWA 的当日最佳,这一次它做了一个拿评奖开玩笑的游戏。
Awards Racing 的每一个设定都在拿评奖文化开玩笑。玩家的身份牌上写着 JUNIOR DESIGNER,比赛要攒的是点赞,攒够了就涨设计、易用、创意和内容四项分,结算页还会统计这一局拿到几次提名、几个奖。赛场上散落的是设计软件的图标方块、咖啡杯、马克杯和办公椅,追着玩家打的是评委和别的入围者。排行榜上的车队名取自写代码的人每天碰到的报错和术语,比如 TEAM 404、TEAM NAN、TEAM SEGFAULT 和 TEAM BÉZIER。
游戏第一次打开时,访客要先过几道开场画面。加载画面上,AWARDS RACING 的字母随着进度一个个填成黄色,接着是一块黄底黑框的菱形道路警示牌,上面写着健康警告和免责声明,提醒画面有闪烁和剧烈的视听效果。路牌之后,屏幕上用逐个跳出的字母写着 WELCOME 和系统随机分配给访客的车手名,比如 SOMEBODY-915。接下来,一个卡通角色举着一块写着 MADE WITH 的黑牌子出场,牌子上列出 three.js、Bullet3、GSAP、Vue.js 等工具,下面注明这个游戏支持触屏、键盘、DualSense 和 Xbox 手柄。最后一屏是一张占满屏幕的红色大脸,它问访客要不要开声音,访客按 ESC 就关掉声音,按回车就打开声音。
前两道画面各停 6 秒就自己往下走,问声音的那一屏会一直等访客回答。访客什么都不按,大约 25 秒后会停在这一屏。回答之后,访客进入车库,下次再来时这几道开场画面就不会再出现。
车库是游戏的主页,左边一行大字写着 HOW TO PLAY,旁边的回车图标告诉访客按回车就能开局,下面是 Join Club、About、Merch 和 Legal 四个入口,再下面是访客的车手名牌和车的名牌。右边是 BEST DRIVERS 排行榜和一块 YOUR BEST 面板,面板上记着访客自己的最好成绩,其中一行写着 SOTD。页面顶部挂着三个月桂花环徽章,写着 FOTM、SOTM 和 SOTD,旁边显示着在线人数和累计车手数。

开局之后,玩家用方向键或 WASD 开车,按 Q 发射火箭,按 E 引爆炸弹。Shift 是氮气加速,空格是跳跃,R 是重开。赛场上可以捡到点赞、金色点赞、护盾、回血、炸弹、火箭和氮气。对手的车上坐着软乎乎的卡通角色,玩家撞翻或者打爆它们,屏幕左下角就跳出 RIVAL DEFEATED。车被打坏时,屏幕上出现大字 WASTED,接着进入结算页,上面列着总分、点赞数、等级经验和四项分的百分比。
车库里还藏着几块面板,访客按 O 进入换车页,这一页写着 CAR CHANGING SOON,只列出当前这辆车的耐久、动力、质量和速度。访客按 U 进入车手编辑页,页面上有 SKIN、H&H、EXTRA、MOOD 和 MAGIC 五组外观选项。BUILD DETAILS 打开的是更新日志,这个游戏标着 Early Access,写报告时已经更新到 0.8.4 版,车库左下角的版本号是 v2026-10-01,比它拿当日最佳的 9 月 9 日晚了三周。SCORES & CHEATERS 解释了计分方式,点赞是总分的核心,四项玩法加成按 40%、30%、20% 和 10% 计入,等级和段位则要靠长期的成绩慢慢攒。这块面板还写着,作弊的人不会被拦下来,系统只是把每一局的记录留着。
About 页是团队自己写的制作说明,也是一个单独的三维场景。这一页列出了团队的六个人,引擎和着色器由 Ilia E. 负责,前端由 Kate A. 负责,界面和素材由 Tony K. 负责,三维造型由 Paul K. 和 Andy B. 负责,Angie P. 的职责写的是 everything, apparently。

02设计
Awards Racing 的颜色规则是一深一亮,深色铺满地面,亮色画线,所有方块和道具也染成亮色。白线或彩线把地面分成大小不一的多边形格子,格子里铺着细碎的颗粒纹理,看上去像一张放大的毡布。比赛分五个阶段,每个阶段准备了三套配色,一共 15 套。第一阶段的三套分别是深藏青配荧光绿(#16233B 和 #8EC322)、深酒红配玫红(#4D0018 和 #FF1A5E)、群青配白(#000876 和白色),后面的阶段换成紫、粉、翠绿、琥珀、青绿、金、天蓝等组合。换配色时,场上的每一种材质一起换掉,图标方块、杯子和椅子都跟着变成新的亮色,结算页的背景色也跟着换。
赛场上的物件都来自设计师的工作台。图标方块上印着 Ea、Sp、Id、Ia 这类两个字母的缩写,模仿设计软件的图标,也有一些方块直接印着 Figma 和 GitLab 这些工具的真实标志,旁边是外卖咖啡杯、马克杯和办公椅。车身上贴满了贴纸,写着 KERNING KILLERS、BEZIER BUMP 和 HUE'S HUSTLE 这些拿排版和配色开玩笑的车队名。角色是一团一团圆滚滚的软体小怪物,大嘴、龅牙、戴墨镜或者尖帽子,坐在车里随车身一起晃。

游戏的界面只用了一款字体 Druk Wide,这是一款横向拉宽的粗体无衬线字,也就是笔画末端不带小脚的字体,界面用了它的 900 斜体和 500 两种粗细。车库的大标题把 HOWTO 写成空心描边,把 PLAY 写成实心白字,两种写法叠在一起。比赛中的界面沿着屏幕四边排开,左边是炸弹、火箭和氮气的存量,顶部中间是倍率、里程和点赞数,右边竖排四个圆形仪表,底部是一排画成真实键帽的按键说明。提示消息从左下角弹出,粗体斜体的大字写着道具名,后面跟一个小字的动作,比如 ROCKET LAUNCHED。
手机上的界面是专门为竖屏单手操作重新排的。车库只留下标题、车手名牌和车名牌,菜单收进右上角的三道横线里。比赛时,左下角是一个虚拟摇杆,右下角围着一个大的 DRIVE 按钮排着发射、炸弹、氮气和后退四个小圆按钮,右手拇指就能够到,四个仪表缩小后竖排在右边。

03动效
Awards Racing 最有辨识度的动效是换配色,每隔 20 秒,新的颜色从车底下开始在地面上晕开。晕开的边缘不规则,像颜料在纸上洇开,新颜色在 1.5 秒里铺满整片场地,图标方块和杯子也在同一时间换色。换配色的顺序每一局都打乱,第一套固定,其余几套随机排。阶段升级时,游戏换掉整组配色,镜头和昼夜也跟着切换。偶数阶段是侧面俯视的镜头加白天,奇数阶段是跟在车后的追尾镜头加夜晚,两种切换都用 1 秒完成。

车上的角色跟着音乐的节拍点头,每到一拍,游戏就把角色的头往前或往后推一下。车开得越快,这一下推得越重,最快时的力道是慢速时的 1.75 倍。车速本身也会给角色一股持续的风力,车开得越快,角色被吹得越歪。访客关掉声音时,游戏改用一个固定节拍来驱动角色,所以角色在静音时也照样晃。
撞击和爆炸的反馈都是夸张的漫画风格。引爆炸弹时,屏幕上炸出一个写着 B-A-A-M! 的漫画爆炸字,周围的图标方块被真的炸飞,蓝色的点赞硬币从车上弹出去。漂移时车尾拖出一团团白烟,捡到护盾后车外罩上一层六边形网格,回血时车身外闪过一圈青色光环。开局的 LET'S GO 和场上的一些提示文字先显示成一串乱码字母,再一个个归位成正确的字。

游戏画面在动的时候会出现动态模糊和红蓝色的色边,画面静止时就没有。模糊的方向和长度按每个像素在屏幕上的移动速度来算,比赛中的强度是车库里的两倍多,色边的偏移量跟着模糊量一起变,所以车开得越快,屏幕边缘的红蓝错影越明显。
开场画面的动作都很慢,健康警告和 MADE WITH 两块牌子在 10 秒里慢慢放大到 1.1 倍。WELCOME 和车手名的每个字母各自随机等 0.2 到 1.3 秒才出现,所以字母是东一个西一个冒出来的。问声音的那一屏用一个从中心扩开的圆形在 0.5 秒里揭开,揭开后的红色大脸会跟着光标轻轻移动。
Awards Racing 在车库和比赛中一直稳定在每秒 60 帧,比赛时没有一帧超过 33 毫秒,切换到 WebGPU 后也一样。这个游戏不读系统的减少动态效果设置,只在开场用健康警告提醒对闪烁敏感的玩家。
04工程
Awards Racing 的界面层用 Nuxt 和 Vue 搭,游戏本身是一个约 2.5 MB 的独立脚本,传输时压缩到约 0.7 MB,代码经过混淆,对外只暴露一个 CarGameModule 对象。three.js 在这个游戏里只负责数学、场景树和模型加载,画面由团队自己写的渲染器来画。这个渲染器有 WebGL2 和 WebGPU 两条路径,着色器各写了一份 GLSL 和一份 WGSL,设置面板里可以切换,默认用 WebGL2。
About 页说每一个物理物体都在一次绘制调用里画完,游戏脚本里的多重绘制缓冲区就是这句话的做法。团队写的这个缓冲区收下全部可以撞碎的方块和可以捡的道具,把它们的几何体塞进同一份顶点和索引缓冲,每一种几何体占一个槽,每个槽最多放 300 个实例。每个实例的位置和旋转写在四张浮点纹理里,分别存这一帧和上一帧的位置与旋转,顶点着色器按几何体编号和实例编号去纹理里取自己的变换。WebGL2 下,这些物体由 WEBGL_multi_draw 扩展的 multiDrawElementsInstancedWEBGL 一次画完。

游戏每帧固定发出两次这样的调用,一次画场景,一次画阴影。每次调用带着 34 种几何体,车库里约 92 个实例,比赛中 290 到 415 个。这次调用之外,每帧还有 80 到 145 次普通绘制,画的是地面、车、角色、特效和后期处理,所以一次绘制调用说的是全部物理物体,不是整个画面。切换到 WebGPU 后,游戏改为每种几何体各画一次,每帧绘制次数升到 139 到 149 次,帧率仍是 60。
物理用的是 Bullet,团队用 C++ 在它外面包了一层再编译成 WebAssembly,下载 240 KB。场景按格子组织,静止的物体放在格子里,被撞到才搬进运动物体的集合,停下来后再收回格子,这就是 About 页说的世界在车周围按格子流进流出。车辆的参数有质量、前进力、刹车力、最高速度和漂移速度,车还有护甲和血量,对手的追击和冲撞也写在同一层里。火箭、炸弹和爆炸都是物理对象,爆炸会把方块真的推开。物理每秒的子步数按设备分 60 和 90 两档,物理速度还会随阶段提高。
渲染器画一帧画面要经过这几道工序。
- 先画阴影图,再把场景的颜色、法线和深度写进几张缓冲,然后在一趟延迟光照里统一算光
- 透明物体再单独走一趟前向渲染,也就是逐个物体直接算光
- 后期处理依次是五级降采样的泛光、混入上一帧 88% 到 97% 的时间抗锯齿、按每个像素的移动速度做的动态模糊和色边,最后是曝光 0.9 的色调映射和一个方框形的暗角
角色没有骨骼,每个角色是一个由质点组成的球,质点之间用弹簧连起来。求解器每帧迭代四次约束,弹簧刚度 0.05,比赛中的阻尼 0.05,另有一股回复力把形状拉回原样。每个角色头顶上方有一个施力点,车速给它一股持续的风力,每到一拍再加一次向前或向后的推力,力度 5,车速越快乘得越大。节拍来自每首曲子事先算好的节拍表,表里记着每一拍和每一小节的第一拍落在第几秒,游戏每帧拿音乐的播放时间去比,相差不到 0.15 秒就算踩上了这一拍,按四拍一小节分出拍位。访客没开声音时,游戏按固定间隔自己打拍子。
阶段由分数决定,到 50、100、200 和 500 分各升一级。每升一级,物理速度和对手速度各提高 0.1,对手开火更频繁,从第二阶段起会出现首领。界面层每 20 秒向游戏发一次换配色的指令,配色表写在界面脚本里,每套配色记着地面颜色、线条颜色、线宽和格子大小。另有一个兴奋度数值,点赞、礼物盒、咖啡杯、击中对手和爆炸会让它上涨,被撞会让它下降,高速、漂移超过 0.1 秒和腾空超过 0.5 秒也会让它持续上涨。
游戏把设备分成手机、高像素比屏幕和普通屏幕三档,每档又有三到四个画质等级。画质等级决定每个格子里放多少物体、有没有阴影、阴影贴图多大、用哪一条渲染管线、画布按几倍像素画和物理子步数。所有设备默认都是最低一级,所以电脑上的画布按 1 倍像素画,1920×945 的窗口就是 1920×945 的画布,手机上只按 0.85 倍画。访客在设置里调过的画质、帧率上限、图形接口、昼夜和镜头都会存在浏览器里。
第一次打开要下载约 23.2 到 23.7 MB,三百多个请求全部来自游戏自己的域名和它的接口子域名,页面上没有统计和广告脚本。最大的一类是图片,约 9.6 MB,其次是约 8.1 MB 的 MP3,6 首背景音乐每首 1 到 1.5 MB,访客选择关闭声音也照样要下载。三维模型是 4 个 glb 文件,共约 1.9 MB,最大的一个约 1.5 MB,文件名叫 everything。手机下载的是同一套文件,体积和电脑一样。屏幕在 1.3 到 1.6 秒之间画出加载画面,加载期间有 8 个长任务,最长的一个 2.1 到 2.4 秒,访客这时看到的是加载画面。
Awards Racing 在操作方式上照顾得很周到,键盘、手柄和触屏都能完整地玩一局,手机上还有专门的单手竖屏界面。读屏软件的用户能读到的内容却很少,赛场和角色全画在画布里,开场时 Tab 键只能停在问声音的两个按钮和画布上,比赛界面的几个触屏按钮也没有名字。相比之下,About 页的结构是完整的,读屏软件能读到一个一级标题和八个二级标题。
05评分与团队
| 奖项 | 出处 | 日期 | 分数 |
|---|---|---|---|
| FWA of the Day | The FWA | 2026-09-09 | 84 POINTS |
| FWA of the Month | The FWA | 2026 年 9 月 | 无单独分数 |
| Honorable Mention | Awwwards | 2026-09-20 | 页面没有公布评委分 |
Awards Racing 在 FWA 拿到 84 分,9 月 9 日成为当日最佳,FWA 又在 10 月 1 日把它评为 9 月的当月最佳。Awwwards 给它的是荣誉提名,荣誉提名页上只有会员投票,没有评委分。FWA 的介绍和 About 页的说法一致,讲的都是对象池、按格子流动的世界、一次绘制调用、由物理驱动的特效和没有骨骼的角色,团队自己最看重的是这些做法。
| 署名 | 身份 | 战绩 |
|---|---|---|
| Ecofuture Technology Services | 迪拜的垃圾处理软件公司,产品有污水清运的下单平台、用可回收垃圾换钱的 Re-bin,以及工业和城市垃圾的管理平台 | Awwwards 作品 2,HM 2。FWA 3,分别是 2023 年 12 月公司自己的官网拿到的当日最佳,和这个游戏的当日最佳、当月最佳 |
| Angelica P. | 阿联酋的设计师,Awwwards 荣誉提名页上的提交者 | Awwwards 作品 2,HM 2 |
两项战绩都是截至写报告时的累计数。About 页列出的六人团队里,Angie P. 的职责写的是 everything, apparently,奖项页上没有说明 Angie P. 和 Angelica P. 是不是同一个人。
06档案
- 获奖日期
- 2026-09-09
- 奖项
- The FWA FOTD 2026-09-09,The FWA FOTM 2026-09,Awwwards HM 2026-09-20
- 站点
- https://awards.racing
- 署名
- Ecofuture Technology Services,Angelica P.
- 设计取向
- interface
- 技术路线
- realtime
- Awwwards
- 荣誉提名,页面没有评委分。https://www.awwwards.com/sites/awards-racing
- The FWA
- 84 POINTS,DAYS 2。https://thefwa.com/cases/awards-racing
- 技术栈
- Nuxt / Vue,自研 WebGL2 与 WebGPU 渲染器,three.js(数学与加载器),Bullet(自编 WebAssembly),WEBGL_multi_draw,GSAP,Howler.js,nippleJS,Draco
- 资产总计
- 首次打开约 23.2–23.7 MB / 332 个请求,其中图片约 9.6 MB、MP3 约 8.1 MB、模型约 1.9 MB、WebAssembly 240 KB
- 首屏与帧率
- FCP 1.3–1.6 秒(加载画面),8 个长任务,最长 2.1–2.4 秒。车库和比赛 60 fps,WebGL2 与 WebGPU 相同