获奖站拆解
EN

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,旁边显示着在线人数和累计车手数。

车库:暗处的红色赛车、菜单和 BEST DRIVERS 排行榜
车库里,HOW TO PLAY 和 Join Club、About、Merch、Legal 四个菜单入口后面,一辆红色的车亮着车灯停在暗处。下面是车手名牌 HUNTER-230 和车辆名牌 PHANTOM,右边是 BEST DRIVERS 排行榜,顶部是写着 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。

About 页面像片尾字幕一样滚动的文字和暗色三维场景
About 页面的文字像电影片尾字幕一样往上滚,开头是 ABOUT PROJECT 和黄色小标题 WORLD / SPEED 下面的一段,背后是一个暗色的三维场景,几个软软的角色和一段赛道被打上了洋红色的光。文字下方是 BACK、PAUSE 和 1X 三个按钮

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 按钮排着发射、炸弹、氮气和后退四个小圆按钮,右手拇指就能够到,四个仪表缩小后竖排在右边。

手机上的三个画面:竖屏车库、带摇杆的开赛和比赛
这张图是三台手机上的游戏。左边是竖屏车库,写着 HOW TO PLAY、车手名 CHALLENGER-374 和车名 BLAZE。中间是比赛刚开始,荧光绿线条的地面上横着 LET'S RIDE!,左下角是一个圆形摇杆,右下角是一个大大的 DRIVE 按钮,周围是三个小图标按钮和 BACK。右边是玩家的车开过几个绿色的图标方块,四个评分圈排成一列放在右边

03动效

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

加速的赛车周围,地面配色一格一格换掉
换色刚刚扫过玩家赛车周围的地面,大部分格子已经变成群青色、线条变成白色,左边沿、顶部和右下角的格子还是深色底和荧光绿线条。赛车开着氮气拖出白烟,游戏自带的动态模糊把散落的图标方块和杯子拉成了虚影

车上的角色跟着音乐的节拍点头,每到一拍,游戏就把角色的头往前或往后推一下。车开得越快,这一下推得越重,最快时的力道是慢速时的 1.75 倍。车速本身也会给角色一股持续的风力,车开得越快,角色被吹得越歪。访客关掉声音时,游戏改用一个固定节拍来驱动角色,所以角色在静音时也照样晃。

撞击和爆炸的反馈都是夸张的漫画风格。引爆炸弹时,屏幕上炸出一个写着 B-A-A-M! 的漫画爆炸字,周围的图标方块被真的炸飞,蓝色的点赞硬币从车上弹出去。漂移时车尾拖出一团团白烟,捡到护盾后车外罩上一层六边形网格,回血时车身外闪过一圈青色光环。开局的 LET'S GO 和场上的一些提示文字先显示成一串乱码字母,再一个个归位成正确的字。

白烟里炸开的漫画字 B-A-A-M! 和四散的点赞硬币
白线条的群青色地面上,一团白烟里炸开一个红黄色的漫画爆炸字 B-A-A-M!,四周飞着蓝色的点赞硬币、一只咖啡杯和几个图标方块,左下角是 ARMOR 和 RIVAL 两个标签

游戏画面在动的时候会出现动态模糊和红蓝色的色边,画面静止时就没有。模糊的方向和长度按每个像素在屏幕上的移动速度来算,比赛中的强度是车库里的两倍多,色边的偏移量跟着模糊量一起变,所以车开得越快,屏幕边缘的红蓝错影越明显。

开场画面的动作都很慢,健康警告和 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 种几何体各 300 个槽
示意图,中间是四张实例贴图里的两张,在开始画面上、竞技场已经载入时从页面里读出,这里横过来摆。每一行是 34 种几何体中的一种,每一列是它 300 个实例槽中的一个,用到的槽按数值上色,空槽是深色,所以一行有多长,就是这种几何体此刻有多少个物体在场上,这一刻一共 398 个。另外两张存的是上一帧的同样数据,顶点着色器按几何体编号和实例编号从这些贴图里取出每个物体的变换

游戏每帧固定发出两次这样的调用,一次画场景,一次画阴影。每次调用带着 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 相同