從概設流程、審美、設計思路幾個方面，漫談遊戲美術設計的思維方式

首發騰訊遊戲學院《真經閣》欄目，GameRes獲授權釋出
講師介紹 Leona
騰訊互娛 北極光工作室群 遊戲美術2D設計

導語

本文主要從專案中的概設流程、審美、設計思路這幾個方面，漫談設計時的思維方式。

一、專案流水線

先來看下研發專案的流水線。


一個角色從需求提出到角色誕生可能會經歷這些步驟：

大量方向圖：在一個角色需求出來後，找這個題材的相關參考；或者連角色方向也沒有，就找各種主題的方向參考。

快速出設計/細化設計：可能是隻確定了職業屬性的角色，服裝風格還沒有確定，就需要出不同方向的設計稿；可能是服裝風格已經有明確參考方向的角色，需要出不同於參考圖但風格類似的設計稿。

3D製作：協調3D落實到模型。

效果壁壘：3D製作或動畫蒙皮過程遇到的各種問題，需要在設計上做調整或返工的。

然而實際研發可能經歷以下過程：

1、前期還不瞭解遊戲引擎的短板和視覺效果的禁區時，重新推翻設計回到參考圖方向，調整角色方向。


2、之後避開方向禁區後，繼續披荊斬棘，會碰到遊戲中效果不好的問題（比如身材比例顯腿短，需要在著裝上做顯腿長的設計規避裸模缺陷）。



3、在專案中後期，基本經歷過所有的效果壁壘，最後可以在設計起始就規避掉製作返工的風險。



4、當然，專案前期不可避免的會存在以下過程：找大量方向圖，或者快速出概念圖，揣摩角色方向。

二、概念設計流程


再來看下傳說中的概設，可能是特別奔放灑脫的剪影圖，線稿圖，或者黑白色塊。


也可能是特別寫實的專案，最後呈現是以3D效果為主導，著裝風格已經很確切，給原畫的發揮空間就很小了。


看了一些外部專案概設圖，我們可以對比以下幾個方面來看研發專案流程。

1.必不可少的都需要做方向調研：


可以是角色靈感圖，或者限制一個外星種族的人形獸化程度。


2.需要有足夠多的設計可能性，也就是設計方向：


3.需要了解下游工種，瞭解技術團隊的可行性：

在設計階段就瞭解效果壁壘，規避掉不能避免的坑，有規劃的督促技術團隊填坑。


4. 根據重要度分配精力（不同的細節/配色版本）：


根據專案流程時間寬裕程度，把精力放在需要的步驟上。比如Fallout4的這個武器設定，就有時間可以出多種方向的概念。


ROE專案這個類似武器，因為是作為角色的一個背後裝飾，並無實際功能，於是只一稿一個方案就過了。

三、審美

1、說到審美老生常談最基礎的就是點線面。


出自Yaroslav Iakovlev 在behance上的作品平面海報是最能直觀的感受點線面規劃的作品。會有點構成的線，線構成的面，點與點之間有大小對比，面與面之間有疏密對比。我們看到即使被我這麼框框畫畫了一通，這張圖整體也沒垮掉，因為它一開始的點線面分佈就是美觀的。

紋身風格里，個人最喜歡trash polka這種風格，好比把平面設計做到立體的人體表面，需要結合表皮的平視面積和人體的轉向做設計。


也會有點線面，線的趨勢（輻射的視覺導向），弱對比的面和強對比的面，來確定視覺重心是強對比的面。此外還需避免在關節位放圖案，因為會有彎肘拉伸。

ROE專案——滑翔翼皮膚設計

再來看下專案例項，ROE的滑翔翼皮膚設計。


大體上套路是先有一個主體圖或者logo，滑翔翼一邊放完整的主體圖，另一邊放放大版的主體圖。之後總結了一套模板套用：一邊是主體圖作為高對比度的面，加少量高對比的點線，和低對比度的元素（文字）用來填充空白處；另一邊是放大版主圖做低對比度的面襯在後面，加上高對比的點線豐富版面，加高對比度的元素（文字）做這一邊的視覺重心。

2、平衡：它可以指畫面的平衡也可以指一個物體的平衡。這裡我們看下單個物體的平衡。

首先形狀的不同，會直接影響人的平衡感受。對稱——平衡；不對稱——不平衡，需要調和來使之平衡。



角色的不對稱設計，能突出特色，但需要平衡重量感，但有時適度的重量失衡能增加角色身上的衝力。圖示這個單手加農炮就是重量失衡的不對稱設計，所以pose上需要它邁開小腿兒。腳邊的煙塵也是有支撐作用的，我們看到，去掉後明顯感覺腳撐得很累了。所以，視覺上的平衡，跟物理上的質量是不對等的。

其次顏色的不同也會影響人的平衡感受。淺色感覺輕；深色感覺重。


這組時裝圖我們可以感受到，（圖左）一個白人模特，如果全身亮色（沒有黑髮和紋身的話）整個人是很輕的。（圖中）上下身截斷式深淺色，如果沒有頭頂的那抹黑，整個人下身是偏重的。（圖右）一個黑人模特搭配大面積中性色和一些亮色，上半身有深色頭髮皮膚，下半身有皮膚平衡，所以即使衣物亮色居多但很平衡。

3、對比：它不僅能襯托出視覺重心，也能豐富畫面節奏。對比無所不在，可以是形狀上的，大/小，整/碎；顏色上的，明/暗，豔/灰，冷/暖；質感上的，光滑/毛躁，柔和/剛硬；位置上的，高/低，遠/近。甚至可以是詞義上的反義詞，老/幼，新/舊。對比的東西太多，不多贅言。

4、畫面裡的節奏：好似音樂裡的節奏。音樂的視覺化效果就是音樂節奏的視覺化。


畫面裡的節奏可以大體分為重複和漸變。重複，即單一個體的簡單複製排列。


比如漸變，可以分為大小/間隔/方向/位置漸變。


對於角色上節奏的塑造，個人總結下來就是幾種元素有次序的交替重複，而比較理想的組合節奏就是：2種主要+1種輔助節奏。

我們看下面這個畫師Carlyn Lim的組合角色，每組角色都風格統一，我們把一組角色看成一段旋律的話，能看到貫穿始終的2種主要樂器和1種到2種輔助音色。



5、角色整體的配色：按美術風格的不同可以有不同的方案，以下分類是更偏向寫實角色的配色方案。


中心這個餅圖是大體角色身上會出現的顏色屬性，四周是各種配色方案。

我們以品牌服裝為例，Pucci是亮色+淺粉色，McQueen是亮色+淺粉色+深色，Armani是淺粉色+深色，Gucci是亮色+中性色，Vivienne是亮色+中性色+深色，CK是中性色+深色。品牌的配色方案，決定了這一季釋出會的服裝是不是成一個體系，決定了品牌基調。


再看一些常服配色，從2色配色到3色配色。





在這些排排站式的角色配色圖上，我們也可以看到之前說的對比和節奏。亮色作為淺色和黑色對比，亮色作為深色和白色對比，亮色和中性色作為主要配色，白色作為輔助色，粉色中性色作為主要色，黑色作為輔助色。

我們把單個女生拿出來看，會覺得她穿得很普通，但放在整體裡成一個體系後，就變得賞心悅目。這跟草書書法有點類似。如果把草書裡的單一個字拿出來，有的甚至很醜，比如這個“作”字，你感覺自己用腳寫都比他好看，但它放在整體下就是有道理的。

5、每張畫面都需要視覺中心：這是遵循人的視覺成像原理，人在看東西時，注視的焦點只能是中心一塊區域，這是中央凹成像的關係——眼球后部中心位置的中央凹視錐細胞更集中，色彩和成像資訊更豐富。於是任何平面影像最好也只有一個視覺中心，如果有好幾個，人就會分散注意力。

視覺中心有哪些我整理為以下幾個：

色彩飽和度、明度、細節量的突出點


四周的深色襯托中心的白衣女，兩張城堡圖都是用雲隙光照亮來突出重點，格子西裝女的亮色胸衣，石膏頭像的紅色牙齒，最後張圖裡的橘色燈。

產生運動趨勢的發力點


感覺下一秒就要閉上的大嘴，感覺已經直插你胸口的劍。

畫面視覺引導線下的中心點


血跡，沙丘的稜角，道路都作為視覺引導線，來導向視覺中心——中遠景的未知物體，人，和建築。

引起本能關注的訊號點

本能關注就涉及到視覺的首要目的，無非就是為了生存：戰或逃反應(Fight-or-flight response)。追溯到遠古人類，石器時代的人日常需要防範的就是眼睛和牙齒，食肉動物的眼睛通常雙目向前，食肉動物會露一排白牙，於是人對兩個眼睛形狀和一排點形狀會本能的敏感。


以Carlyn Lim這個圖為例，左圖門襟的布和兩邊獸類的眼睛會特別顯現，右圖上寶座上那排圍繞的甲片會特別顯眼（像一口牙）。

四、設計思路


許久之前，我在看了一個仰慕的畫師所出的教程之後，就很氣，因為心心念念指著他講些設計思路，但他沒講，在教程中你只見他行雲流水地就出了幾個很有趣的方案，畫外音好似在說：“咦，我也不知道我怎麼想出來的，反正我就是思如泉湧”。於是我整理了下為什麼有的人就是能“思如泉湧”。

先從創作的兩種開啟模式講起，可以是感性、隨性、不假思索地“亂塗亂畫”，也可以是理性、有邏輯、有規劃地“碼圖”。

1.感性隨塗時，不用去考慮它是什麼東西，只管外形視覺上自己滿意。



比如這組抽象圖形，畫完後再去思考怎麼用它，它可以是生物植物飛船等等，於是只需在這些形體大輪廓內，把不同的區域用功能性的結構替換就行。


再來看下一個懸浮小店的設計，草圖只看側面剪影和簡單的黑白對比，可能帶有一絲理性，知道有些廣告牌/幕布，燈籠氣球旗幟之類的東西。之後選定一個草圖後，細化時再去思考這個剪影下有些什麼細節。



比如個人專案鬼九仔，在當時我的腦力下，出草圖時也是隻用本能反應，不假思索就“思如泉湧”了。

再來看看另一種開啟方式，理性分析。我把它分為元素拆分和元素替換兩個步驟。

先來看一組槍械例項。我把槍械拆分成了這些方面，基礎結構、傳動方式、操作方式、手持方式以及變形。元素替換上，又從這幾個方面切入替換點：原理、生物、擬態、替換物。

替換元素是個龐大的不受限的資訊庫，可以是任何東西：

槍→槍械原理→物理攻擊→向外/向內→吸過來→磁鐵/吸塵器；

擬態→龜→部分可收縮/堅硬外殼保護脆弱部分→易碎品→化學制劑→槍械上彈出內建化學制劑。

那些跟槍完全不相關的元素，是通過一系列聯想推導串通起來的。



接下來看一些槍械例項。



制動原理上的替換，弩槍以及蓄能制動，微薄槍聲波槍，吸入式武器，雙手手持加肩帶式槍械。


比較有趣的幾個替換例子是《Sunset Overdrive》的幾款槍，槍膛替換成水管，槍托替換成鞋子，手柄替換成吹風機手柄，等等。有的幾乎完全不是槍，只是武器，是可以攻擊的東西，雖然壓根打不死人（保齡球，唱片），但這些武器很有趣味性，那就夠了。

角色的拆分可以從很多方面，外形（男/女/老/幼）（形體 ：高/矮/胖/瘦，蘋果形/梨形/倒梯形），職業屬性（世界觀：寫實/科幻/魔幻/幻想）（醫生/運動員/暴徒，法師/獸人/劍士），服化道風格（世界觀）（中世紀/暗黑/神族），個性特徵（陽光/陰暗/奸邪/好戰），個人習慣（邋遢/念舊/酗酒/愛好讀書）等等，涉及方面太多，得先有個世界觀背景才能有個聯想依託。


需要強調一個在設計角色時的分析視角——用卷福的眼睛看人。現實細節的資訊量，可以是材質表面乾溼程度來判斷有沒有淋雨，甚至小到一個戒指的內外側新舊程度就能推斷出佩戴習慣。也許你會覺得，遊戲設計的細節不至於如此細緻入微，但我們用代入角色式的表演方式來設計角色的話，角色會更立體，更有說服力。


剛才提到了一個詞，遊戲設計的細節。這裡細節可以是指單位面積裡的畫素點豐富度，比如這張CCAG的得獎作品，龍頭上每片鱗片都畫出來了。另外，細節指的也可以是資訊量，從使用痕跡看使用習慣。比如下圖這個廢土世界觀下的腳踏車助力洗衣機。


下面看一些角色例項。



這張圖是Fallout4裡的一個角色設定，以移動方式來拆分，有輪椅、坦克履帶、多足機甲，先做了有代步工具這一屬性的拆分，隨後從角色身份背景、民族信仰、生活習慣、偏好武器等，用反向偵探思維，從各方面構建這個角色的個性。



這裡拿Lee InHyuk的角色作品做元素替換的範例，他拿了兩個熟識的動畫角色形象做魔改，雖然整個衣服款式變成潮服了，但仍然一眼還是能認出原角色，因為他保留了原來的色塊顏色和位置，只做了剪裁方式替換，每張圖右邊我放了些時裝潮服可以找到對應的替換元素。


元素替換的案例還有A站上Box of mystery的兩個競賽作品，左邊這個用了些水母的元素，給衣服和身體做了替換，右邊用了龜殼元素，這些都先在外輪廓上破了傳統的人形，立刻就抓住了眼球。


豆三先的作品裡充斥了各種奇妙的元素替換，用貝殼替換刀刃，女體替換刀柄上的裝飾，哪吒的腿用蓮藕替換，裙子用荷葉替換。

這些設計可能給一些人看來，會有種已經突破常識太奇怪了的感覺，但創意可能就體現在超出常識那一點點新意裡。我建議在一開始思考設計的時候可以把“怪”這個方向做到自己的極致。

回溯這個觀點的起因，要從剛入行時一個多手角色說起。我當時提了一個問題：“為什麼不設計背脊長一排手臂（豎向排列）呢”，當時被給到的回覆是“沒人這麼做”。現在我可以這樣回答，因為黑格爾說“存在即合理”，這樣的存在不合理所以不能豎向排列，但可以成對豎向排列，這樣在人體解剖上更合理，你感覺那對手臂是長在多出的那兩片肩胛骨上，它們也能在肋骨上滑動，總之它們是能被使用的。




比如以上這三張圖，黑章的這個人偶，Metal Gear的角色和Martian Stickfighter一個外星生物設定。


再看一個哪吒的模型，嚴格還原了中式古典畫作裡的三頭六臂形象，這個模型真的做得已經很棒了，但古代的這個設定本身，用現代的科學，我們可能可以理解為一種突破空間和視覺上的錯覺讓我們看到了三頭六臂，但在解剖學上是不現實的。我們可以看到一些現實存在的身體部分相連的連體嬰，他們的行動都是很受限的。而近年的哪吒動畫裡的哪吒形象，則取用了遵循解剖學的背後長手的方式。



這裡推一個寶藏畫師，Simon Dubuc，腦回路清奇，在作“怪”的路上走位風騷。我們能從他設計裡看到很多“沒人會這麼做”的設計。

再看一組武士主題的設計，作品均取自A站。


常規的我們看到這樣中規中矩的武士盔甲：


也有這樣用裝飾畫畫風做出自己特色的：


和開始作“怪”的一些設計，肩甲替換成兩半撞鐘，軀幹替換成鬼頭，真正的頭懸浮成鬼頭。


再來看看我們的寶藏男孩Simon Dubuc，正常腦回路切入點可能是武士服，頭盔面具，但他的切入點是武士的儀式感，坐等斬首，對寶刀的鍛造。

學會用偵探思維構建角色個性，在合理的範疇內把作“怪”做到極致後，我們來總覽下，設計的感性思維和理性思維是如何協同運作的。


可以是先從剪影形態，點線面切分等一些無關功能意義的美學基礎出發，或只帶有本能和常識的理性開啟，後期深入設計時再做理性的功能意義填充。


也可以是一開始就用理性思維，把要設計的東西拆分歸類，想好替換元素，再在落實到畫面上的時候規劃它的美感。這兩種開啟方式上面有例項了。


可以是前期查閱大量資料，理性的整理歸納思考之後，拋開所有參考，任憑這些臨時抱佛腳的資訊在腦中變成遊離的潛意識，此時用感性思維出設計，但並不是只考慮美感的，此時遊離的想法會自己滲入到這些本能的設計裡。




比如做這個賽博朋克日本妹子時，先大量查閱資料，再拋開資料在面前展開張白紙，從剪影出發，色塊填充功能和意義，細化，最後再出不同頭部方案。


當上一種過程走多了之後，大腦裡已經有大量的資料，大量的方案，大量的前期思考，就能省掉上面第一步理性思維步驟，直接上頭就搞了。就是傳說中的“我也不知我怎麼想出來的”就是“思如泉湧”。

於是回過去我們再看看豆三先的設計，他已經做了成百上千個圓形軀體的拆分替換練習，確實就能信手拈來了。

五、頭腦風暴

最後一部分，我們來一場頭腦風暴，練習一下理性拆分和元素替換，以及聯想想象力。在我準備課程時，我隨手抓了桌子上兩個東西，我們拿這兩個東西來構建下世界觀。

1、魔方

用魔方構建的世界觀，在影視作品裡已經有幾個知名的設計了，比如《心慌方》三部曲，《林中小屋》等。




開始進行拆分：式樣→正方體，6個面6個色，6箇中心塊12個稜塊8個角塊，中心塊1個面，稜塊2個面，角塊3個面……，功能→可旋轉，打亂排齊。

然後進行替換：塊面替換→房間，街區，小鎮……，貼面替換→主題，信仰，幫派……，旋轉替換→重力切換，日照切換……，同色貼面→塊面連通，不同色貼面→不通。

綜合成世界觀：一個正方體的星球/空間站，受一個恆星照射有日夜變化，星球上有3x3x12個地表區域，可以是有界限的領地，不同領地的主題/信仰/幫派不同，世界受到地心作用力控制，會有規律/無規律的擰動滑塊旋轉變化，轉動後每個領地就能跟不同的地域交界/運輸，但轉動的同時日照情況也會迅速轉變。

2)鍵盤

拆分：式樣→ 皮膚,按鍵,有固定位置,不同大小…，功能→ 可按下,有含義和功能,可組合鍵,可拆卸重組…

替換：按鍵替換→ 房間,街區,小鎮……，含義替換→ 主題,信仰,……，功能替換→ 能力,技能……，可按下替換/組合鍵→ 可尋規律的機關觸發,可尋規律的災害……

世界觀：一個實驗廠房，被切分成規則的房間，每個房間有不同的功能/有不同的住客，當房間機關被觸發時/人被喚醒時，會為這個實驗廠服務的終端裝置觸發不同的反應，觸發順序有一定的規律，處於其中的人需要找到這個規律，才能逃出房間。



最後，我們做一個開放性習題。辦一場虛擬雙年展。我們知道雙年展的作品可以有各種表現方式，平面設計、雕塑、裝置藝術、影像、行為藝術等等。所以不做任何形式限制，我們以椅子和時間為主題，先做一個拆分練習。


隨後左右兩兩結合我們列的元素，結合些想象，就能有作品了。


來源：騰訊遊戲學院
原文：https://mp.weixin.qq.com/s/YSgt8oUvCYrI9BCS0hvUCQ