從AFK裡提煉遊戲視覺表現-拆解篇

前言闡述：

一直想利用閒暇時間寫篇文章介紹下視覺表現設計，正好最近一直在玩美服的AFK，那就借爆品的設計進行一個簡單的分析和介紹，睡前班門弄斧一波了！

視覺表現設計簡而言之就是對遊戲產品的視覺包裝或者說是動效包裝。涵蓋了整個遊戲的動態表現、特效、和銜接轉場等，更高階一點的還需要設計分鏡。不過當前大部分遊戲產品的視覺表現設計基本是基於UI互動設計的基礎上進行系統的開啟、常駐、關閉、銜接部分的動態+特效的美術設計製作。

在具體功能上，視覺表現功能設計=功能動畫+UI動畫+特效+模型（SPINE）動畫+運鏡+環境變化等等。

視覺表現設計其實更像是一個系統美術敲定後的精修過程，需要考慮到美術資源、功能以及效能消耗。先模擬演示，後精準實現復刻。視覺表現設計師不僅需要把握遊戲的調性，實現階段也要很好的協調相關板塊的邏輯，才能很好的把想要的效果呈現給玩家。

AFK整個遊戲的視覺設計在美術層面的特點、手法以及節奏都非常好，效能上在資源利用率以及功能複用上也很自然。可以看出團隊的視覺表現設計能力有一套很好的框架和功能支援。行雲流水的視覺表現設計不僅僅能提煉產品的互動特點，同時能加深玩家的體驗記憶，對於後續產品續航有很大的助力。

產品解析：

這邊就從AFK裡邊常見的幾個表現設計給大夥一個直觀的拆解分析：

角色建立系統手法：模型動畫+UI擾動+UI動畫


這個系統的開場視覺表現透過3D模型的立體感結合2D的介面設計，讓畫面立體了許多。在功能層面上能看到是紅框標準部分流體帶遮罩的擾動和人物溶解。

註冊名字階段手法：模型待機動畫+UI擾動+UI動畫+運鏡（新增）


註冊系統的視覺表現讓我提神的是那一瞬的運鏡，還保留了擾動的UI點綴效果。玩到後邊我發現擾動的這個設計是AFK的視覺表現的特點元素之一。在揹包，獲取物品，升階等很多系統都有起到一個豐富入場動畫的作用，把整個視覺表現的元素關聯性串了起來。

首衝+開戰+抽卡表現手法：壓暗蒙版（新增）+UI動畫+粒子特效+溶解+遮罩動畫（新增）


找了幾個視覺表現手法和元素比較相似的系統，很有特點的一個元素動態設計。大量的規則紋理溶解漸隱配合UI動畫和遮罩的細節動畫讓整個看起來結構和層次表現都很豐富，UI資源的設計和拆解不得不說也很用心。

戰鬥結算手法：遮罩動畫+預製體切換+UI動畫+3D模型行走動畫+字型帶通道遮罩（新增）


戰鬥勝利整個表現大概2.8秒左右，利用3D模型動畫+UI表現配合讓戰鬥結束多了一種MVP的既視感。預製體的切換節奏也卡得很好。

拆解好以後，幾個表達的核心元素也就一目瞭然了。





整個遊戲體驗下來，視覺表現中這幾個核心元素是比較明顯的，也讓玩家記憶深刻。還有幾個系統有利用相機深度做了景深模擬效果這裡就不過多贅述了。

AFK一直保持著個性濃郁插畫風，配合層次感豐富的視覺表現設計，給人一種絲滑的體驗感。當然這和效能最佳化得很好也有關係。很多系統出現了3D模型資源和模型動作結合UI和材質功能去增加畫面的活度，這種手法在2D遊戲也可以和SPINE結合去展現，效果也會很不錯 。

總結概述：

分析完說說視覺表達設計的意義。

• 產品體驗上，遊戲裡每個系統會更加生動有趣，豐富玩家體驗感。同時能很好的引導玩家的視覺聚焦點和想傳遞給玩家的情緒，更好達到系統開發的目的性。
• 開發上面，專案前期立項和系統開發階段，能有效降低系統試錯成本。能在短時間內模擬出幾個視覺表現模板，進行開發前的設計研判。
• 產品開發後期上，視覺表現設計模板產出後，能好精準的傳達給美術和程式需要拆分最佳化那些美術資源，程式需要開發哪些功能，兵合一處，加快開發效率。
• 質量把控上，視覺表現的前期製作能快速的匹配各個系統的風格和節奏，傳達給玩家的感受是否符合預期，及時對各板塊進行矯正。
  

當然，視覺表現設計的製作也需要注意一些問題。

視覺表現設計師要熟悉比較多的軟體，同時也要了解一定的TA常識，才能判斷哪些設計是可以實現的，同時有哪幾種方法實現，這樣能更好的告訴TA你需要哪些功能加持。

在UI板塊，筆者踩過一些坑，很多UI設計師的PSD的元素拆分不精細，以及UI元素剛好卡邊並不完整，這對於視覺表現的設計會比較限制。

同時整個視覺表現開發過程中一定需要提煉共同點，在上邊AFK專案拆解裡，相信大夥已經懂我的意思了。

最後整理了一個比較糙的思維導圖


時間匆忙，不能盡善盡美，歡迎開發者和美術大佬們多指導交流！

作者：Leo張凌鵬 微信：zk6763023