Case Study | CUPHEAD 茶杯头！来自上世纪的游戏邀请

UX辞典

公众号：UX辞典

2023-12-01浏览 78972,558 字 · 约 8 分钟

…

Whale LabPresents
撰文/编辑│金赭/梦奇

排版│梦奇

本文约2930字，阅读需要8分钟

《茶杯头》背后的故事

研究主题：《CUPHEAD 茶杯头》游戏中的设计逻辑 研究对象：《CUPHEAD茶杯头》游戏 随着欢闹的音乐进入茶杯头的世界 这是一款以 BOSS 战为主的横版卷轴类游戏，受上世纪30年代动画片启发，游戏画面、音效都努力再现当时的技术，如传统的赛璐璐手绘动画、水彩背景还有原声爵士乐录音等。游戏的故事很简单：

翻译来源于网络

说起茶杯头，必须要说的就是其美术风格——橡皮管动画（Rubber-Hose-Animation），它的几大特点为： 橡皮管，身体可任意拉伸，如同橡胶一般，游戏内众多形象的肢体都是扭曲自如的； 模块化，外形特征非常有限，眼睛、手部等造型比较模糊，风格更是30年代独有的； 立体，任意造型都能直接转化为立体实物（相当于 3D 建模）； 线条圆滑，虽然偶尔出现形状尖锐的头发、牙齿、利爪等，但总体线条是非常圆润的； 简洁，没有过于繁杂的细节设计。

以上是一些和米老鼠同时期出现的动画形象

游戏角色原型

所有的 BOSS 都是以世纪30年代动画片中的形象为原型，当然其中不乏一些脍炙人口的形象。
-Tom and Jerry（猫和老鼠） /1939 小时候能让 VCD “冒烟”的动画片，百看不厌！1939年，米高梅电影公司制作发布，该片由威廉汉纳、约瑟夫巴伯拉编写，弗雷德昆比制作，首部剧集《甜蜜的家》于1940年2月10日在美国首播。

△ 关卡 Murine Corps

（老鼠军团）

游戏原型：猫和老鼠 ▷

Tom 猫进化史

制作组选择了1940初版形象，虽不是最完美，但最贴合游戏基调

-Woody Woodpecker（啄木鸟伍迪）/1940 该动画形象是40年代卡通电影中的一个经典角色，它出现在一系列以打闹为主的卡通喜剧片中，所以它被设计得非常灵活，能表演各种高难度的惊险动作。
天生喜爱“恶搞”的伍迪，它的笑声最有意思，透着一股“坏”劲儿，它像把兔八哥、老鼠 Jerry、高飞、萍琪派（小马宝莉中的人物）的搞笑特点都吸收过来了。除此之外，还带有唐老鸭早期的暴脾气。

△关卡 Treetop Trouble

（树顶危机）

游戏原型：啄木鸟伍迪▷

-Popeye the Sailor（大力水手）/1929

大力水手是派拉蒙公司发行的动画片，故事讲述的是一个水手奇迹般的遭遇。他有自己顽固的人生哲学，但是在七大洋的航行中，他的人生哲学受到了挑战，以至于后来他问自己：我是什么？但是在旅行中，他遇到了可爱的奥利佛，然后结伴环球旅行。这是所有70后80后的中国孩子童年的回忆。

△ 关卡 Dreamatic Fanatic

（戏剧狂人）

◁ 游戏原型：大力水手的女朋友奥利佛

-Mickey Mouse （米老鼠）/1928 米奇老鼠（英文名称：Mickey Mouse），迪士尼代表人物形象，是一只有着圆滚滚的大脑袋，圆滚滚的大耳朵，梨形的身体与像橡胶软管一样柔软，没有明显的关节，可以自由拉伸仿佛没有骨骼的四肢的小老鼠。他以随和，乐观，活跃，充满奇思妙想的性格广受世界各地的观众的欢迎。

关卡 All Bets Are Off！（倾家荡产）

动画原型：米老鼠（左图） 世界上第一步有声动画《蒸汽船威利号》（右图） -Betty Boop（贝蒂娃娃）/1930 美国的卡通明星“Betty Boop”贝蒂娃娃，于1930年8月9日面世，是由美国纽约弗莱舍兄弟工作室 (Fleischer Studio) 所设计的。1930~1939年间，贝蒂娃娃 (Betty Boop) 已于多部受欢迎的卡通片集里演出。到了80年代贝蒂娃娃 (Betty Boop) 再度兴起，更被制成包包、文具等各种商品，广受消费者与卡通迷的喜爱。

△ 关卡 Threatenin Zeppelin

（凶兆幽浮）

动画原型：贝蒂娃娃海▷

其他形象参考

「Popeye the Sailor Meets Sindbad the Sailor」1936

「Pacnic Panic」1935

「The Cobweb Hotel」1936

「Hell's Bells」1929

游戏设计思路

在设计每个 BOSS 时，Jake（角色&动画设计师）会围绕这几点来创作： 与其他 BOSS 相比，它有什么差异？每个 BOSS 都要与众不同，有独创性； 哪些设计是已有的？自己的游戏中，或者其他的游戏当中已经出现过了，不想再重复它们； 假设自己是玩家，什么设计会让自己感到惊喜？想象自己在玩游戏，操纵着茶杯头闯关，遇到什么可互动的内容会让我感到兴奋； 什么样的设计，会让我享受做动画的过程？当然希望自己的设计尽可能优秀，但不能要过于夸张的细节，否则一帧一帧画起来很要命。要享受做动画的过程，做出来的成品才能好看； 设计什么样的内容，能延展出游戏性效果、动画演出效果？身体要能做出大幅度的姿势，还有要考虑攻击方式。

动画手稿

雪茄 BOSS 的设计手稿

△ 雪茄 BOSS失败后被踩灭

◁ 角色的进入与退场

如何与其形象、背景巧妙地结合

-以美人鱼 BOSS 为例 Jake 先想了一些关键词来帮助他设计：
强大、凶悍、狂野、会魔法、头发是章鱼、能口吞海盗船。

美人鱼BOSS设计流程稿

设计的流程（Design Process）越长，需要画的图就越少。在开始确定大体形象，哪些部分是至关重要的，比如确定美人鱼头顶上有什么东西，以此类推。再缩小范围，决定部位的大小，比如她眼睛该有多大。 -设计流程 他先参考了30年代的卡通形象，Betty Boop 大眼睛，小鼻子，小嘴的面部特征很贴合美人鱼的形象，而 Olive Oyl 就感觉不合适。然后又参考了游戏角色和其他相关的形象，他起初有美人鱼脑袋上顶艘海盗船的想法，灵感来源自Eliza，不过画起来会很麻烦，就放弃了。也考虑过戴头饰，这参考了神奇女侠，也认为她的气质很接近他想要的那种范儿。

△ 美人鱼 BOSS 形象参考

准备动画化 ▷

-流程赏析 Murine Corps（老鼠军团） 老鼠军团关卡融入了创作者很多的巧思，敌人的不断反转是本关最大的特点，关卡的设计也成为了玩家间津津乐道的话题。

你的敌人是个罐头，但你会知道里面肯定隐藏着什么

老鼠现身，背景有什么东西在看着你们

打败了老鼠后背景里的猫抓住机会，一口吃掉老鼠，敌人也从老鼠变化为了猫

猫脸里的驾驶员老鼠现身，原来还是老鼠！ -流程赏析 High Seas Hi-Jinx！（公海大闹剧） 公海大闹剧则是凭借着小美人鱼超高的颜值来博得玩家的青睐，其中小美人鱼的形象从“可爱的小人鱼”到“魔性的美杜莎”再到最后“毁形象的飞头怪”给玩家带来了很大的反差感。

第1形态：美人鱼

第2形态：美杜莎，头上的章鱼变成了蛇发

最后形态：飞头怪

就连玩家胜利后 BOSS 的表情也十分值得玩味：

一只蛇发悲伤的拉起了小提琴

游戏音乐的选择

游戏原声中很有 Ragtime 风格的曲目

茶杯头黑胶唱片

茶杯头的设计不仅限于画面，在音乐上也是十分的考究，制作组选择了拉格泰姆（Ragtime）作为游戏音乐的风格。这种曲风出现于19世纪末，是美国历史上第一个真正意义上的黑人音乐，采用黑人旋律，依切分音（Syncopation）循环主题与变形乐句等法则，盛行于第一次世界大战前美国经济十分繁荣的时期。而我们所熟知的爵士音乐也正是来源于布鲁斯（Blues）和拉格泰姆（Ragtime）。