文章最後更新於2022-08-25
嗨嗨，大家好呀，我是吉橙數位學院的Yellow。
《Celeste》最讓人津津樂道的，便是它優異的遊戲手感。
喜愛《Celeste》的玩家，無一不被它自在、流暢的體驗所折服。然而，一款遊戲的手感，需要結合程式、美術、音效多方雕磨而來。
其中，主角Madeline身為玩家體驗的核心，每個動態都與玩家的感受有著直接的關聯性。
今天就讓我們從美術的角度，聊聊Madeline的優異動態感從何而來吧！
角色設計
《Celeste》是使用傳統8bit像素風格繪製而成。
在《Celeste》裡，人物身上並沒有表現太多細節，省略了五官也沒有繁雜的造型。
與其他遊戲相比看似簡單，但反而能讓玩家更專注於角色的動態上，而不是他們美麗精緻的臉蛋。
角色主要動作
要造就強烈的視覺回饋，動畫扮演了極為重要的角色。
首先，我們來簡單介紹一下Madeline的幾個主要動作。
在《Celeste》中，玩家除了一般的待機與左右移動之外，可以使用三個技能，分別是「跳躍」、「攀牆」及「衝刺」。
跳躍動作
攀牆動作
衝刺動作
變形應用
變形是製作動畫時的重要技術，能夠使人物及物體在視覺呈現上更有張力。
伸展與擠壓
伸展與擠壓是最基本的變形方式，源自於現實世界最真實的物理變化，可以賦予物體重量與靈活感。
讓我們請出範例球球工讀生，用身體為大家做個舉例。
首先是沒有加入任何變形，僅只有移動軌跡的彈跳動畫。
而加入了變形後，我們的球球會變成什麼樣子呢?
讓我們放在一起比較看看。
可以看到，右邊加入變形的球與左邊單純的圓球相比更有活力，擁有了彈性，就像真實落下並接觸到地面一樣，而不是定點的垂直移動。
那《Celeste》又是如何把這類元素應用在Madeline身上的呢？
我們來看看幾張Madeline跳躍動畫的拆解圖。
Madeline先是拉長了身體，也就是「伸展」的要素，讓Madeline像球一樣富有彈力的彈起。
抵達最高點後，回歸了原先的狀態，降下來接觸地面後，逐漸壓扁，即為「擠壓」的動作。
它延續了先前的動態，使Madeline有彈性的落在地面，為這個跳躍動作做了一個完美的結束。
誇張化
再來是變形的第二要點，誇張化(不真實化)。
結合前面的伸展與擠壓，加上誇張不符合現實的現象亦是增添動畫的張力，也可使用在爆發力上作展現。
請一樣的工讀生球球作示範，我們已經有了一顆加入伸縮與擠壓技法的球。
撒上一點誇張/不真實化作為佐料。
接著比較一下。
可以發現，相較於左邊的球，加入這幀不真實變形後，右邊的球看起來更像是被衝擊一樣往上彈起。
這樣彎曲且零碎的形狀是真實的球不會出現的狀態，比一般的變形更為誇大，卻營造了向上打擊出去的強烈力道，為整個動畫帶來了一種衝擊感。
那誇張化又是如何應用Madeline身上的呢？
來看看Madeline的衝刺動畫拆解圖。
首先，一個預備動作，這是為Madeline製造壓縮出去的初步動態。
再來，就是誇張化使用的這個影格。
這個影格相當關鍵，可以看到，它幫Madeline加上了一個圓弧的變形，銜接了前一格的動態，加入了衝擊的要素，加強彈出去的感覺。
最後延伸了過去。
這兩種變形的技巧，強調了Madeline的身體動作。它為Madeline的動態注入了靈魂，讓玩家操作時是靈活有生命的，而非死板硬梆梆的角色。
軌跡應用
除了角色本身的動畫之外，還有一些技法，能夠結合角色的狀態、場景的互動等等，讓整個動態更有回饋感。這邊要介紹的，便是《Celeste》中對動態營造有大大影響的軌跡技法。
軌跡技法在於強調速度與方向性，它能讓玩家對角色的移動有更多認知，加強動作的感受，是讓整體動態表現更豐富的方式。
《Celeste》的軌跡應用在衝刺及反彈上。主要使用了三種方式「軌跡線」、「殘影」和「波紋」，我們就一起聊聊這三個技巧為動畫做了怎麼樣的加成吧。
軌跡線與殘影
首先是「軌跡線」和「殘影」。
在Madeline衝刺時，可以看到她的背後先是出現了圓弧狀的軌跡，為彈出去的動作打下了基礎。
隨後轉換為線狀並延伸了出去，一個個殘影逐漸出現。
最後慢慢飄散，殘影也漸漸消失。
殘影的應用來自人眼。當眼睛捕獲移動事物的速度不及事物自身的移動速度時，眼睛無法看清事物在運動中的位置，但因視覺暫留的影響，人將看見事物之前位置的影像，這種影像便被稱為殘影。
也就是說，視覺的殘影是在「速度快」時才會觸及的現象，因而運用在動畫中，就能進一步的加強速度與動感。
而這邊的軌跡線則像是子彈發射時，後方拖尾的煙霧，象徵瞬間的衝擊力。
因此，結合軌跡線與殘影，就能營造快到看不清楚的感受，讓Madeline的「衝刺」彷若子彈一樣，快如雷電又極具爆發力。
波紋
我們接著來看看波紋。
Madeline藉著外力，如機關、雲朵或球狀氣泡反彈時，都有波紋狀的軌跡依序出現，再逐步消失。
波紋所呈現的，是不同於軌跡線及殘影的速度感。
軌跡及殘影主要展現的為「爆發力」，而波紋則是營造「彈出」的效果，就像水面被風吹起的漣漪，相較之下多了一分輕盈感。
一樣的圓球，改變了軌跡的表現手法，感覺是不是就不同了呢？
結語
今天針對Madeline的優秀動態感列出了幾點做了簡單的介紹，不知道大家是否對這些方法有稍微的認識了呢？
想當然爾，《Celeste》的厲害之處肯定不只於此，打造優異的動態感僅是營造操作體驗的第一步，想呈現更完美的回饋感，還須結合更多的技巧和細節才能達成，而《Celeste》能在此處獲得如此高的評價，正是因為恰如其分的每個細節。
其實不僅美術給予的視覺回饋，企劃層面的關卡設計、故事劇情、成長曲線，程式層面各類元素及數值的調整，這些要素環環相扣，造就了《Celeste》優異的遊玩體驗，每個部分都功不可沒，真的是非常令人佩服的團隊呢！
※若是對「Celeste遊戲設計分析」有興趣的話，推薦閱讀：淺談《Celeste》的教學引導設計與機制設計
《Celeste》真的很有趣，雖然關卡很困難，卻會讓人一直想挑戰。挑戰到疲倦的時候，就看著《Celeste》的優秀畫面發呆，啊真的好漂亮啊，音樂也好好聽噢，然後休息一下再繼續努力。筆者目前卡在Level 6B一段時間了，希望能盡早攻破它呢！
好啦，那筆者要先下班吃個便當再繼續破Celeste了。為大家上山下海、還領不到基本薪資的工讀生球球也要先去休息啦！
關於動態製作技巧還有很多，下次再一起分享給大家吧！
我是Yellow，我們下次見囉，掰噗！
參考資料
- Video Game Animation Study(2018)。Fluid Motion | Celeste’s Animation。https://www.youtube.com/watch?v=h2VMnzawfh0
- Game Maker’s Toolkit(2019)。Why Does Celeste Feel So Good to Play?。https://www.youtube.com/watch?v=yorTG9at90g
- Mickey Mouse(2014)。”The Illusion Of Life” by Cento Lodigiani | Disney Favorite。https://www.youtube.com/watch?v=jn5OB12u8Pw
- 《我滿懷青春的有病測驗》製作人 哈利菠菜(2015)。【專欄】別再揮空氣了！關於遊戲中的「打擊感」三兩事。https://gnn.gamer.com.tw/detail.php?sn=125251
- 漢語詞典：殘影。https://kmcha.com/cidian/%E6%AE%98%E5%BD%B1
