到底什麼是遊戲的「美術風格」？Part.03
遊戲企劃的美術懶人包 Part.03 科技與手繪技術的解析
如果還沒看過前面兩篇的朋友，可以點這邊前往：
好的，在聊完了美術題材後，我們要進入美術風格的最後一個環節「技法」。
在這篇文章中，會先介紹現在遊戲的軟硬體科技技術等知識，再介紹繪畫上的技巧以及搭配上遊戲引擎呈現的最終風格等等。
繪圖科技的基礎知識
向量與點陣的差異
在科技知識的第一個重點，就是了解「圖片是如何儲存的」。
在電腦中，圖片的儲存方式其實只有兩種，就是「向量」和「點陣」這兩種方式。下面介紹一下兩者的差異。
向量圖
所謂的向量圖，指的是僅儲存圖片構成的「邏輯」，例如錨點和顏色等等。舉個例子，如果儲存一個「圓形」，向量圖中就只會儲存圓心座標、圓的半徑和顏色等等資訊，這些資訊傳到顯示端（例如從網頁中下載下來，呈現在瀏覽器）時，會在該處直接重新繪製一次。
向量圖的優缺點：
優點包括檔案小下載快（基於數學公式渲染），放大尺寸不會出現鋸齒等等。但缺點也比較明顯，就是基於數學公式所以不能做出很複雜的圖形。
其實在2000年左右流行的Flash就是基於向量圖形繪製的成果，在當時網路速度很慢，向量圖形容量小，能夠迅速下載顯示，頗受使用者歡迎。除此之外開發也非常快速，因此造成了一陣流行風潮。
點陣圖
點陣圖是由一格一格「像素」（Pixel）組成的圖案，圖形的尺寸直接影響儲存容量需求。獨立遊戲常見的「像素風格」其實指的是模仿以前低像素圖形時代的遊戲，每個螢幕中能使用的精細度有限，所以像素的顆粒很大，在這個情況下產生出的獨特美術樣式。
舉個例子，當時的「電子雞」（或怪獸對打機）就是利用簡單的電子顯示屏，用像素拼接出來的電子寵物。
點陣圖的優缺點：
優點包括只要像素夠多，就能繪製很複雜的圖形。缺點和向量圖相反，圖檔越大容量就越大，同時放大會有鋸齒狀失真的問題。
其實在顯示器（螢幕）剛被研發出來的時候，就有「向量顯示器」和「點陣顯示器」（映像管顯示器）兩種差別，但後來由於顯示資訊量和色彩的緣故，現在所有的顯示器都改以點陣方式繪製，例如LED螢幕就是由很多小點發出RGB色彩的光線混合而成。
遊戲「渲染」技術的升級
這邊推薦一部非常值得一看的影片。
關於「圖像繪製」技術的演進歷史。（有中文字幕，可以點右下角開啟）
一開始其實電腦根本沒有設計用來遊戲的需求，是慢慢的演進，後來加入了專門用來渲染美術資源用的（例如「顯示卡」等等）技術，才進化到了我們現在看到的這樣。
延伸影片：遊戲引擎的歷史
2D物件與動畫
在遊戲中，2D圖像是所有顯示的基礎，就連3D場景也脫離不了2D圖像，因為貼圖也是用圖片達成的。
遊戲中使用2D資源的內容包括「UI（使用者界面）」、「材質」、「物件資源」、「動畫（Sprite）」或剛剛提到的「3D物件貼圖」等等。
Sprite（逐幀動畫）
這邊特別提一下Sprite的概念。
所謂的Sprite指的是一幀一幀的繪製圖片，然後連續播放所產生的動畫。也就是如同「傳統動畫」一般的動畫繪製方法。
傳統賽璐璐片動畫的製作方式，就是一張張的繪製圖片，然後一一拍攝，接成一部完整的動畫。
但由於Sprite的工作量很大（要繪製或是製作每一幀的圖形），因此現在很多2D遊戲會改用「2D骨骼」（2D Rigging Anime）來代替傳統的逐幀Sprite。
事先將角色或物件的各個零件繪製好，綁定骨骼後，藉由骨骼的移動來演出動畫，除了方便調整動作外，也可以輕易的替換角色，只要零件內容一樣，就能重現一樣的動作。這個技術原本是被用在3D動畫上，後來才在2D遊戲上被採用。但骨骼動畫也有缺點，就是看起來比較死板，不太自然。
如果想用骨骼做出很自然的效果，需要把零件拆細之外，動作的調整也需要大量的時間。
利用錨點和選取圖層製作2D動畫
現在技術日新月異，像是 Live 2D 或 Spine 2D 之類的動畫軟體，可以將2D圖形藉由錨點和漸變演算，藉由2D圖形的變形功能，做出類似3D動畫的豐富效果。
例如命運之子那種晃的要死（我是說角色動態，別想歪）的動畫就是利用這種技術製作的。
這種2D動畫的製作成本其實並不低（有時候製作時間甚至比做3D動作還久），但在二次元領域的效益卻是比較高的，原因是因為要把二次元角色3D化的門檻太高，不僅僅只是做出3D模型那麼簡單，一個不小心很容易把人物做崩掉。（崩壞三那種等級的品質是世界少有的）
因此立基於2D圖形做出來的這種動畫相對之下是比較穩的。
延伸思考：
把老婆3D化一點都不容易。
舉個例子，可以想一下，漫畫人物也很少繪製「眼睛區域是完全切到側邊」的視角，原因就是因為不好看。但在3D狀態下攝影機很容易轉出這樣的視角，這時模型的製作和渲染要如何避免看起來「很不二次元」就是一門學問了。
延伸閱讀：
3D物件與動畫
接下來要來簡單介紹一下3D的世界了。
3D模型是由「模型」和「貼圖」所組成的。貼圖指的是2D的圖片資源，貼到3D的物體上面來形成物件。
3D模型本身是沒有顏色的，甚至也沒有「實體」，只是一堆點和面的資訊，也被稱為「Mesh」（網狀體）。
如同上面提到的，3D模型的動作需要靠綁定骨骼來完成，在大公司裡面專門調整和製作模型動作的美術職位也不少。不過現在也有一些動作捕捉的技術，讓機器捕捉真人動作的位置，複製到模型骨骼動畫上，讓模型演出更為逼真。
在3D物件中，有幾項比較重要的資訊，對原理不了解的朋友可以稍微看一下，筆者會一一介紹。
模型面數（Polygons）
所謂的「面數」（Polygons，多邊形）指的就是構成3D模型所花費的面的數量，例如上面Mesh的圖中，一個角色身上一塊三角形或是四角形就是一個面，3D物件是由很多個面所組成的。面數決定了物件的精細程度，3A級遊戲的一個人物可能就由好幾萬面組成。
常聽到的「Low-Poly」風格指的就是低面數的極簡風格，和點陣圖一樣，都是模仿早期遊戲中3D模型不能太複雜，所造成的特殊呈現方式。
法線貼圖
所謂的法線貼圖，指的是除了紋理貼圖之外，還有一張貼圖，專門紀錄物體表面的「皺摺或縫隙」資訊，在渲染的時候做特別處理，利用光影變化，讓物件表面的「立體感」更明顯的一種技術。在上面的「遊戲引擎」介紹影片中就有解釋這個原理。
法線貼圖由於不需要增加模型的面數，就能增加立體感，所以被大量的運用在建模技術中，後來變成次世代遊戲的標配之一。
GPU是什麼？
所謂的GPU就是 Graphics Processing Unit （圖形處理器），相較於CPU是中央處理器（Central Processing Unit），GPU專門負責電腦的「顯示」，所以包含了GPU的這張設備卡也被稱為「顯示卡」。
GPU接收來自CPU的需求，然後專門負責在螢幕上繪製出最終玩家會看到的視覺資訊。可以想像成CPU是個只出一張嘴的老闆，GPU是負責最終產出的平面設計師……（這什麼悲催的形容）
雖然部份電腦的主機板會搭配「內顯」，也就是內建顯示卡，但現在的遊戲需求都相當高，不買一塊顯示卡的話，很難讓遊戲順暢的運行。
Shader（著色器）
所謂的Shader，就是遊戲引擎中負責「告訴GPU怎麼畫圖」的那個單位。
遊戲研發團隊中，一般會有人負責調整渲染相關的工作，小團隊通常是程式（客戶端或全端）自己做，在大團隊中通常是由TA（Technical Art 技術美術）或專門研究圖學的工程師進行。
要設計Shader所使用的語言和一般程式語言不同，需要專業的知識。（這部份的人才缺口也是相當多的）
Shader的應用範圍很廣，可以簡單的理解為，用還做出「特別的特效或質感」的工具。例如金屬的反光光澤，水面波光粼粼的效果等都可以靠Shader達成。
材質，貼圖和紋理的差異
材質（Material）實際上是包含了多個貼圖（Map），而紋理（Texture）則是貼圖的其中一種。
紋理貼圖搭配上各種貼圖（例如法線貼圖）會成為一個貼圖的集合體，而這個集合體被Shader整理好之後，繪製出來的被稱為「材質」。
以下引用自3DMax論壇
These are often interchanged incorrectly when people are discussing 3d…
‘material’ is an umbrella term for the collection of shader and settings applied to an object.
‘map’ is an external reference that drives a particular channel in a shader. It can be procedural or bitmap and there are many kinds.
‘texture’ is the same as ‘map’, but is more commonly referring to a bitmap.So you could say “a glass (material) has a fresnel falloff (map) in the reflection channel and an HDRI (texture) in the environment override channel”.
簡單的翻譯就是：「一個完整的材質，是由Shader的指揮下繪製完成的，這個繪製過程包含多個通道（Channel），每個通道提供的資訊都不同，紋理貼圖是點陣貼圖（Bitmap）的一種，和其他貼圖加上Shader共同呈現了最終的材質。」
以上科技，以下美術
好的，科技軟硬體的部份告一段落，接下來聊聊「美術」本身。
我們常常提到的「日系」、「韓系」或「美漫」風格，其實相較我們第一篇的「遊戲美術風格」相比，是比較狹窄的定義。
以下會先從寫實程度開始介紹，一步步帶大家理解這些市場熱門的「美術風格」。不過也希望大家能理解，筆者並不是美術專業出身，同時風格這種東西的界定也比較模糊，所以麻煩自行選擇吸收囉～
來談談「寫實」與「卡通」（風格化）
首先來談很重要的一個概念，就是風格的「寫實程度」。寫實程度會對最終呈現的美術風格造成很大的影響，例如Q版人物就不太適合用來做硬核軍事戰爭題材的遊戲，風格和題材以及世界觀都是會互相影響的。
以繪製角色概念來說，根據「四肢和五官比例」、「光影呈現手法」等等不同的細節，與「現實」的狀況有多貼近，來決定一個風格的寫實與否。
由於我們的現實世界只有一個，所以「寫實」是有個明確的參照物的，但偏向卡通的非寫實風格就不見得了，各種派別和技法都不同，衍生出現在所謂的「商業美術派系」，我們在遊戲行業也稱這種統一美術方向，並且往「非寫實」靠攏的行為叫做「風格化」。
要留意這個「寫實」指的不是現實世界才能發生的事情，例如魔法或星際科技題材一樣可以「很寫實」。一般我們所謂的「3A遊戲」都是以偏寫實為主的，而為了要呈現這些細節，大大的提高了研發技術和成本的需求。（反過來說，也正是因為燒了大量的錢，運用大量的高階技術以及資源堆疊，所以才被稱之為3A）
影響人物寫實程度的要素
影響寫實程度的細節牽涉很廣，這邊就一些比較重要的條列說明。這些細節也是現在市面商業領域的「美術風格」之所以看起來都不一樣的原因。
1.身材比例
身材比例指的是一個角色的「頭身比」、「肌肉線條」或是「四肢長度」等等的綜合設計。在不同派系的美術風格中，這些比例可能會有很大的變化。
2.五官
五官指的就是角色的「臉部構成」，例如眼睛的大小、位置和畫法等等，例如日系風格的角色眼睛就非常大，和歐美風格相較之下顯得比例很大，但歐美風格的「表情」和日系相比就非常誇張，各有不同的特色。
3.光影呈現方式
在光影的表現方面，不同風格採用的方式也非常不一樣。
在傳統美術光影的繪製中，主要分為六種類型，如下圖所示：
Halftone：主色，也就是看上去最正常，沒有特別亮也沒有陰影的區塊。
Cast Shadow：主光源到不了的地方，也就是投影。
Core Shadow：主光源和反射光都到不了的區塊，作為明暗的分界線使用。
Reflected Light：從環境中反射到物體上的反射光。
Highlight：垂直於主光源的直接反射，也稱為高光。
Occlusion：在坑洞或縫隙中，不會反射任何光線的絕對黑色區域。
除此之外還有例如鏡像（從水面或桌面反射的影像）、反射投影等等。
這些光影的呈現方式會決定最終的美術風格，例如在美漫風格中，就習慣將Cast Shadow 和 Core Shadow 全部壓低成類似 Occlusion 的深黑色。
這其實是因為美國印刷技術當時尚無法印出太多的漸層效果，在日本漫畫中發明了「網點紙」這種用來表現不同濃度深色的作法，但美式漫畫沒有這種技術，所以只好將陰影部份全部繪製成黑色，這種鋼筆繪製線條加上深色陰影的表現方式後來就演變成了一種獨特的「風格」。
4.配色與色彩過度
配色應該就不用我解釋太多了。
不同的用色組合會有不同的效果，甚至不同的歷史或文化涵義。
例如 https://nipponcolors.com/#momo 這個網站中就儲存了許多日本傳統配色的色票。
而所謂的色彩過度指的是繪製時，不同顏色之間的過度是有很明顯的邊界線，或是模糊漸變的。
5.描邊
描邊指的是卡通人物身體周圍的「線條構成」。在現實世界中，你絕對不會看到誰的身體周圍有這種黑色的框對吧？
描邊其實是因為印刷和動畫製作需求出現的一種表現技法。例如日本歷史中的「浮世繪」其實很多時候是製作在木板上然後大量印刷的，因此需要先將輪廓突顯出來，方便塗上顏色。
除此之外，所謂的賽璐璐動畫也是先將線稿繪製在賽璐璐片上，然後一張一張疊著繪製下一幀的動作。用這種方式方便上色，也方便對照動作，是流程上必須使用的技法。
什麼是厚塗畫法？什麼是賽璐璐畫法？
這邊我不囉唆直接上參考影片囉。裡面也提到許多這篇文章中討論到的觀點，相當值得一看。
所謂的厚塗，指的是傳承自歐洲美術油畫技法的概念，將色塊一層一層疊上去，最終繪製完成的一種作畫流程。因為採用這樣的流程，所以色塊之間的過度會是漸變的，光影的變化也比較傾向於連續。
而賽璐璐畫法則是先構成線稿，再進行上色處理的一種流程，通常都會有描邊的效果。
不過若是厚塗完稿時加上描邊，或是賽璐璐畫法最後將邊線消除，疊上陰影和漸層，那兩者其實並不是那麼容易可以辨別出來的。
科技和美術技法告一段落，「派別」留待下篇
本來想在第三篇全部講完，結果寫完發現又破萬字了……
沒辦法，今天只好先講到這邊，關於日系美系這些商業美術的派系分析，以及3D渲染的一些介紹就留待下次再說明囉。
我是水狼，我們下次見。
也可以到臉書追蹤我喔： 粉絲專頁連結
最後，請多利用我的個人文章列表，會持續更新：
