最近本麻瓜骨头老师频繁被环球影城的推送刷屏，我去不了环球影城，难道还不能玩《哈利波特：魔法觉醒》吗？

《哈利波特：魔法觉醒》首周的预估周下载高达237.9万，首周登顶iOS中国游戏畅销榜，预估周收入1376.7万美元。

今天骨头老师和叶子56班的海州同学给大家研究一下，最近游戏圈内卷之王——《哈利波特：魔法觉醒》，作为经典IP开发的游戏这么火的原因究竟是什么？

Part  1

世界观与美术还原

01  哈利波特文化影响力

《哈利·波特》可以说影响了一代人的青春。从小说里对魔法世界的想象，到电影初见三个小可爱扮演者的心动，

从9又4分之3车站到金色飞贼，

《哈利·波特》不仅仅教会了我们如何和伙伴相处，也教会了我们面对生活的勇气，对于黑暗势力永不畏惧。

02  美术风格

对于一个经典IP的开发，最重要的一点是还原度。

《哈利波特·魔法觉醒》做的比较好的一点就是对于角色/场景设定的还原。

当对角巷展现在我们面前时，心中不得不感叹--走心了！

极具辨识度的美术风格

譬如“Harry Potter“这个LOGO，从IP第一部小说一开始就沿用至今。

中世纪风格中略带哥特风格的字体，结合哈利·波特本身脑袋上特有的闪电符号，形成了这种辨识度极强的美术风格。

也得亏与哈利波特强大的IP影响力，在其他的哈利波特系列的包装设计以及原画里可以看到这种画风的沉淀。

游戏内的美术风格，从人物设定到UI的装饰纹样都用了极具欧美风格的表现。

大家可以注意立绘和场景本身的轮廓，都运用了比较直的线条和偏方形的结构。

场景化界面的游戏UI

游戏内运用了大量场景化界面来做整体的包装，主要的设计元素为中世纪风格的纸和魔法书等。

该参考为来自墨尔本大学设计学院学生的纸雕作品

该参考为世界立体纸艺大师马修·瑞恩哈特立体书作品

哈利波特IP提炼出来的关键词：魔法/魔杖/分院帽

界面中随处可见、反复出现的元素：老旧纸张、花纹、蜡烛、火漆印、信封、羽毛笔……

优缺点：代入感强，画面精致程度较高，但对于一些交互体验或多或少有削弱；

欧美绘本美术风格的把控

界面的取舍，通过不同程度的刻画，拉开界面的主次。

部分装饰性的元素，他们会不去做材质的刻画，只表现质感，其实说白了就是想要平衡，就需要有取舍。

例如下面这个界面中，本该是金属材质的回形针，直接弱化的没有材质表现，但是依旧有造型的刻画。（不失去元素的丰富度和识别性，舍弃掉材质刻画，统一画面）

卡牌介绍页面：突出一个重点

卡牌介绍的界面，唯一凸显的是描述卡牌的动画。

比起记住“八眼巨蛛的毒液”来说，玩家有更低的成本记住这是个“绿色的毒药瓶”。

对界面来说，避免了大量信息数据对界面版式的干扰。

七日签到也一样，承载物（日历）表现明确，其余的元素很弱化。

很多人一开始可能会担心这样表达不清晰、领取未领取识别度不够等各种问题，不敢这样取舍，但实际上从用户角度看，这样的界面却做到了简洁，玩家阅读成本也变低，而且该突出的奖励都足够突出。

这样的取舍还带来了一个很大的优势，如果界面中有需要刻意刻画的材质，那么这个被刻画的元素就会直接站上界面C位，这也是保持谨慎克制的界面带来的优势。

等级数字的质感刻画稍微强一些，就会明显拉开界面的主次关系。

场景界面中教科书式的冷暖对比

游戏美术的整体配色以浅棕的暖色为主，城堡夜空的靛蓝的冷色为辅。

•  刚入学时的信息卡牌界面为最暖，因为离玩家的距离最近。

•  魔药界面视角要稍微远一些，所以近处偏暖，远处窗外的月光偏冷。

•  占卜课界面窗外投过的光穿过水晶球冷色为视觉中心。

•  二级弹出UI的颜色处理得更中性，这样和背景的蓝色可以自然过渡融合。

•  密林系统整体包装都突出“神秘”，颜色控制上冷色为主导。

Part  2

游戏沉浸感

《哈利波特：魔法觉醒》中采用了大量惊人的动画表现，是美术看到一眼就要哭的程度。

因此游戏很大程度上沉浸感的体现是综合的：结合了动画，特效，音乐，玩法等。

01  游戏玩法带来的沉浸感

像皇室战争一样的紧凑节奏性对局，要求玩家需要计算组合消耗，再加上有步数限制的走位拉扯，让原本偏休闲向的卡牌游戏在每次对局中都及其吸引玩家注意 / 迫使集中注意力。

02  动效精彩的小细节

在胜利结算时候玩家模型会有一脸傲娇的表现，在手机屏幕上看细节很小但是蛮出彩。

03  连贯且合乎逻辑的转场及动效

仔细观察，我们发现在UI里的动效表现也是有轻重的程度之分。

轻度动态

这类的动态表现一般是可循环播放的动效，不会对玩家做过渡干扰。

在商城界面中的加载图和游戏中的加载也不一样，在商城里就是钻石围绕法杖，在其他界面则是类似纸张在围绕法杖。

中度动态

这部分的动态表现会更偏展示型动效表现，比如获得卡牌或是获得成就时出现。

获得卡牌和道具时的表现

这个界面是开场时的装扮界面，这个界面的动效大家注意看是有关闭顺序的。

这是一个百看不厌的魔药包丝滑动效表现！结合音效表现简直绝了。

04  电影级的镜头运用

在这个部分游戏里通常把核心玩法都加入了镜头的运用，比如抽卡/剧情/宣传动画等。

开始游戏界面：一镜到底镜头，增加代入感。

之前在大阪环球影城里的哈利波特项目也看到过有类似的镜头。

让玩家第一视角身临其境的感觉。

决斗前遛鸟，增加士气

一气呵成的抽卡界面增加“爽”感

剧情对话

镜头运用：大场景镜头推进表现环境->中景镜头表现人物身份和动态->特写手部动态或人物情绪

活动

活动UI突破了市场上千篇一律的弹出UI，让马尔福的其他两个伙伴作为负型托底更突出卡片。

比如这个中秋节推出的套装在活动界面里居然有MV特写般的动画表现！

特写镜头

微弱的光效变化以衬托魔法杖为主。

分院徽章出现特效结合了魔法变换的水波纹效果渐出。

Part  3

版本迭代：视觉和交互优化

01  微妙的交互区别：

让客户端玩家体验到近乎完美的pc操作感

普通场景中使用“WASD”移动，在战斗界面中，则加入了数字“~1234”为卡牌释放快捷键，极大的优化了电脑端操作体验。

（值得注意的是，6月份的内测电脑端还没有这个交互方式，但是现在上线的正式版电脑客户端里已经优化了，没想到，本来已经很优秀了，结果人家还在想着一个劲的往上爬？可恶啊）

其他一些快捷键的对比

02  抽卡页面优化

更合理地布局，老的版本是有两个选项的“阅读”，现在统一为“图书馆通行证”一发五连抽。大大提升了抽卡效率，也把之前放通行证的位置，用来做活动的展示区域。

03  主界面优化

个人信息收纳，礼盒减弱，城堡调整布局可单屏展示更多交互入口。

04  寝室界面优化

大家可以对比一下同样是“寝室”界面，整体布局上的变化。

我们发现新调整的交互把个人信息和金币的部分隐藏了，把最重要的左上角给到了“剧情”按钮，系统图标统一为了棕色系和扁平风格的按钮。

统一感是有了，但为此在体验时，为了找退出寝室按钮到底在哪找了大半天～

05  “回响”的优化

之前的回响只是做成了一个动态的异形卡牌，但现在的当前版本是做成了有点像是人物的魔法影象。

和基础卡牌放在一起的时候也毫无违和感，同时还增加了画面的层次感。

Part  4

玩法分析

1.玩法丰富度以及关联度做的非常好。

这就直接导致玩家不会因为玩法单一，玩法不连贯而导致失去粘性的风险。

2.主线剧情和原著基本呼应关系，情怀牌打的很到位，大家也都吃这一套。

3.决斗、禁林等玩法，互相联动，关联性也强，能让玩家合理度过各种时期，可以说是拿捏了啊。

4.令人惊艳的烟花秀,视觉效果拉满。

5.剧情里的彩蛋：点击不同的模块可以连成《哈利波特》的BGM，大家可以试试！

最后的话

通过游戏上线的这段时间深入体验游戏，感触颇深。

《哈利波特·魔法觉醒》游戏的成功，和游戏团队对于哈利波特IP的用心研究与开发密不可分。同时为了营造更好的游戏沉浸感结合了动效，镜头运用等，还有上线前一次次地优化与迭代，这才成就了现在的游戏。

又想起了进入游戏互动的第一句话：“你相信魔法吗？”

“是的！我相信。”

希望大家都能用自己的“魔法”，创造出心中那个完美的游戏～

参考资料：

1.《烟雾与镜面：哈利波特系列场景的再创造 / 墨尔本大学设计学院学生》

https://www.sohu.com/a/300088383_163548

2.《回忆杀 | 世界立体纸艺大师带你进入霍格沃茨城堡》https://www.sohu.com/a/335993223_757088

Powered by Froala Editor