最近本麻瓜骨頭老師頻繁被環(huán)球影城的推送刷屏，我去不了環(huán)球影城，難道還不能玩《哈利波特：魔法覺醒》嗎？

《哈利波特：魔法覺醒》首周的預估周下載高達237.9萬，首周登頂iOS中國游戲暢銷榜，預估周收入1376.7萬美元。

今天骨頭老師和葉子56班的海州同學給大家研究一下，最近游戲圈內(nèi)卷之王——《哈利波特：魔法覺醒》，作為經(jīng)典IP開發(fā)的游戲這么火的原因究竟是什么？

Part? 1

世界觀與美術還原

01??哈利波特文化影響力

《哈利·波特》可以說影響了一代人的青春。從小說里對魔法世界的想象，到電影初見三個小可愛扮演者的心動，

從9又4分之3車站到金色飛賊，

《哈利·波特》不僅僅教會了我們?nèi)绾魏突锇橄嗵?，也教會了我們面對生活的勇氣，對于黑暗勢力永不畏懼?/p>

02??美術風格

對于一個經(jīng)典IP的開發(fā)，最重要的一點是還原度。

《哈利波特·魔法覺醒》做的比較好的一點就是對于角色/場景設定的還原。

當對角巷展現(xiàn)在我們面前時，心中不得不感嘆--走心了！

極具辨識度的美術風格

譬如“Harry Potter“這個LOGO，從IP第一部小說一開始就沿用至今。

中世紀風格中略帶哥特風格的字體，結(jié)合哈利·波特本身腦袋上特有的閃電符號，形成了這種辨識度極強的美術風格。

也得虧與哈利波特強大的IP影響力，在其他的哈利波特系列的包裝設計以及原畫里可以看到這種畫風的沉淀。

游戲內(nèi)的美術風格，從人物設定到UI的裝飾紋樣都用了極具歐美風格的表現(xiàn)。

大家可以注意立繪和場景本身的輪廓，都運用了比較直的線條和偏方形的結(jié)構(gòu)。

場景化界面的游戲UI

游戲內(nèi)運用了大量場景化界面來做整體的包裝，主要的設計元素為中世紀風格的紙和魔法書等。

該參考為來自墨爾本大學設計學院學生的紙雕作品

該參考為世界立體紙藝大師馬修·瑞恩哈特立體書作品

哈利波特IP提煉出來的關鍵詞：魔法/魔杖/分院帽

界面中隨處可見、反復出現(xiàn)的元素：老舊紙張、花紋、蠟燭、火漆印、信封、羽毛筆……

優(yōu)缺點：代入感強，畫面精致程度較高，但對于一些交互體驗或多或少有削弱；

歐美繪本美術風格的把控

界面的取舍，通過不同程度的刻畫，拉開界面的主次。

部分裝飾性的元素，他們會不去做材質(zhì)的刻畫，只表現(xiàn)質(zhì)感，其實說白了就是想要平衡，就需要有取舍。

例如下面這個界面中，本該是金屬材質(zhì)的回形針，直接弱化的沒有材質(zhì)表現(xiàn)，但是依舊有造型的刻畫。（不失去元素的豐富度和識別性，舍棄掉材質(zhì)刻畫，統(tǒng)一畫面）

卡牌介紹頁面：突出一個重點

卡牌介紹的界面，唯一凸顯的是描述卡牌的動畫。

比起記住“八眼巨蛛的毒液”來說，玩家有更低的成本記住這是個“綠色的毒藥瓶”。

對界面來說，避免了大量信息數(shù)據(jù)對界面版式的干擾。

七日簽到也一樣，承載物（日歷）表現(xiàn)明確，其余的元素很弱化。

很多人一開始可能會擔心這樣表達不清晰、領取未領取識別度不夠等各種問題，不敢這樣取舍，但實際上從用戶角度看，這樣的界面卻做到了簡潔，玩家閱讀成本也變低，而且該突出的獎勵都足夠突出。

這樣的取舍還帶來了一個很大的優(yōu)勢，如果界面中有需要刻意刻畫的材質(zhì)，那么這個被刻畫的元素就會直接站上界面C位，這也是保持謹慎克制的界面帶來的優(yōu)勢。

等級數(shù)字的質(zhì)感刻畫稍微強一些，就會明顯拉開界面的主次關系。

場景界面中教科書式的冷暖對比

游戲美術的整體配色以淺棕的暖色為主，城堡夜空的靛藍的冷色為輔。

? ?剛?cè)雽W時的信息卡牌界面為最暖，因為離玩家的距離最近。

? ?魔藥界面視角要稍微遠一些，所以近處偏暖，遠處窗外的月光偏冷。

? ?占卜課界面窗外投過的光穿過水晶球冷色為視覺中心。

? ?二級彈出UI的顏色處理得更中性，這樣和背景的藍色可以自然過渡融合。

? ?密林系統(tǒng)整體包裝都突出“神秘”，顏色控制上冷色為主導。

Part? 2

游戲沉浸感

《哈利波特：魔法覺醒》中采用了大量驚人的動畫表現(xiàn)，是美術看到一眼就要哭的程度。

因此游戲很大程度上沉浸感的體現(xiàn)是綜合的：結(jié)合了動畫，特效，音樂，玩法等。

01??游戲玩法帶來的沉浸感

像皇室戰(zhàn)爭一樣的緊湊節(jié)奏性對局，要求玩家需要計算組合消耗，再加上有步數(shù)限制的走位拉扯，讓原本偏休閑向的卡牌游戲在每次對局中都及其吸引玩家注意 / 迫使集中注意力。

02??動效精彩的小細節(jié)

在勝利結(jié)算時候玩家模型會有一臉傲嬌的表現(xiàn)，在手機屏幕上看細節(jié)很小但是蠻出彩。

03??連貫且合乎邏輯的轉(zhuǎn)場及動效

仔細觀察，我們發(fā)現(xiàn)在UI里的動效表現(xiàn)也是有輕重的程度之分。

輕度動態(tài)

這類的動態(tài)表現(xiàn)一般是可循環(huán)播放的動效，不會對玩家做過渡干擾。

在商城界面中的加載圖和游戲中的加載也不一樣，在商城里就是鉆石圍繞法杖，在其他界面則是類似紙張在圍繞法杖。

中度動態(tài)

這部分的動態(tài)表現(xiàn)會更偏展示型動效表現(xiàn)，比如獲得卡牌或是獲得成就時出現(xiàn)。

獲得卡牌和道具時的表現(xiàn)

這個界面是開場時的裝扮界面，這個界面的動效大家注意看是有關閉順序的。

這是一個百看不厭的魔藥包絲滑動效表現(xiàn)！結(jié)合音效表現(xiàn)簡直絕了。

04??電影級的鏡頭運用

在這個部分游戲里通常把核心玩法都加入了鏡頭的運用，比如抽卡/劇情/宣傳動畫等。

開始游戲界面：一鏡到底鏡頭，增加代入感。

之前在大阪環(huán)球影城里的哈利波特項目也看到過有類似的鏡頭。

讓玩家第一視角身臨其境的感覺。

決斗前遛鳥，增加士氣

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

劇情對話

鏡頭運用：大場景鏡頭推進表現(xiàn)環(huán)境->中景鏡頭表現(xiàn)人物身份和動態(tài)->特寫手部動態(tài)或人物情緒

活動

活動UI突破了市場上千篇一律的彈出UI，讓馬爾福的其他兩個伙伴作為負型托底更突出卡片。

比如這個中秋節(jié)推出的套裝在活動界面里居然有MV特寫般的動畫表現(xiàn)！

特寫鏡頭

微弱的光效變化以襯托魔法杖為主。

分院徽章出現(xiàn)特效結(jié)合了魔法變換的水波紋效果漸出。

Part??3

版本迭代：視覺和交互優(yōu)化

01??微妙的交互區(qū)別：

讓客戶端玩家體驗到近乎完美的pc操作感

普通場景中使用“WASD”移動，在戰(zhàn)斗界面中，則加入了數(shù)字“~1234”為卡牌釋放快捷鍵，極大的優(yōu)化了電腦端操作體驗。

（值得注意的是，6月份的內(nèi)測電腦端還沒有這個交互方式，但是現(xiàn)在上線的正式版電腦客戶端里已經(jīng)優(yōu)化了，沒想到，本來已經(jīng)很優(yōu)秀了，結(jié)果人家還在想著一個勁的往上爬？可惡啊）

其他一些快捷鍵的對比

02??抽卡頁面優(yōu)化

更合理地布局，老的版本是有兩個選項的“閱讀”，現(xiàn)在統(tǒng)一為“圖書館通行證”一發(fā)五連抽。大大提升了抽卡效率，也把之前放通行證的位置，用來做活動的展示區(qū)域。

03??主界面優(yōu)化

個人信息收納，禮盒減弱，城堡調(diào)整布局可單屏展示更多交互入口。

04??寢室界面優(yōu)化

大家可以對比一下同樣是“寢室”界面，整體布局上的變化。

我們發(fā)現(xiàn)新調(diào)整的交互把個人信息和金幣的部分隱藏了，把最重要的左上角給到了“劇情”按鈕，系統(tǒng)圖標統(tǒng)一為了棕色系和扁平風格的按鈕。

統(tǒng)一感是有了，但為此在體驗時，為了找退出寢室按鈕到底在哪找了大半天～

05??“回響”的優(yōu)化

之前的回響只是做成了一個動態(tài)的異形卡牌，但現(xiàn)在的當前版本是做成了有點像是人物的魔法影象。

和基礎卡牌放在一起的時候也毫無違和感，同時還增加了畫面的層次感。

Part? 4

玩法分析

1.玩法豐富度以及關聯(lián)度做的非常好。

這就直接導致玩家不會因為玩法單一，玩法不連貫而導致失去粘性的風險。

2.主線劇情和原著基本呼應關系，情懷牌打的很到位，大家也都吃這一套。

3.決斗、禁林等玩法，互相聯(lián)動，關聯(lián)性也強，能讓玩家合理度過各種時期，可以說是拿捏了啊。

4.令人驚艷的煙花秀,視覺效果拉滿。

5.劇情里的彩蛋：點擊不同的模塊可以連成《哈利波特》的BGM，大家可以試試！

最后的話

通過游戲上線的這段時間深入體驗游戲，感觸頗深。

《哈利波特·魔法覺醒》游戲的成功，和游戲團隊對于哈利波特IP的用心研究與開發(fā)密不可分。同時為了營造更好的游戲沉浸感結(jié)合了動效，鏡頭運用等，還有上線前一次次地優(yōu)化與迭代，這才成就了現(xiàn)在的游戲。

又想起了進入游戲互動的第一句話：“你相信魔法嗎？”

“是的！我相信。”

希望大家都能用自己的“魔法”，創(chuàng)造出心中那個完美的游戲～

參考資料：

1.《煙霧與鏡面：哈利波特系列場景的再創(chuàng)造 / 墨爾本大學設計學院學生》

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

2.《回憶殺 | 世界立體紙藝大師帶你進入霍格沃茨城堡》https://www.sohu.com/a/335993223_757088