《街霸》系列自1987年推出首款作品至今已經(jīng)誕生了5代，共計(jì)數(shù)十款的作品，系列全球累計(jì)銷量超過(guò)3365萬(wàn)套。最新的作品《街霸5》也已經(jīng)在今年的2月份發(fā)售，可以說(shuō)已經(jīng)成為了格斗游戲中的招牌。這款游戲從最早的2D像素畫面一路進(jìn)化到現(xiàn)在的3D水墨風(fēng)格，期間也是經(jīng)歷過(guò)諸多變革，而在日前舉辦的CEDEC2016上卡普空第二開(kāi)發(fā)部第一開(kāi)發(fā)室的龜井敏征也向我們講述了街霸系列在這些年在美術(shù)方面的秘籍。
?

capcom的龜井敏征

根據(jù)龜井先生的介紹街霸系列最早誕生在1987年，但是一直到1991年推出的《街霸2》才逐漸被人所熟知，成為一款現(xiàn)象級(jí)的格斗游戲，之后也是相繼推出了「II」系列、「ZERO」系列、「III」系列、「IV」系列，一直到現(xiàn)在的SFV。不過(guò)，雖然游戲的畫風(fēng)發(fā)生了數(shù)度的變化，但是有兩個(gè)特點(diǎn)卻一直被延續(xù)了下來(lái)，那就是“發(fā)達(dá)的肌肉”以及“夸張的表現(xiàn)手法”。
?

SF系列作為一款格斗類的游戲，具有極強(qiáng)的即時(shí)性，所以要讓玩家能更快的產(chǎn)生對(duì)于游戲的認(rèn)知，而游戲角色就是最重要的一部分。在SF系列中登場(chǎng)的角色根據(jù)性格、性質(zhì)、氣質(zhì)等元素，在設(shè)計(jì)的時(shí)候其實(shí)已經(jīng)被記號(hào)或者說(shuō)是符號(hào)化了。而SFV當(dāng)然也不例外，所有的角色都是依照上述的關(guān)鍵詞進(jìn)行設(shè)計(jì)的。
?

首先的話就是角色動(dòng)作的設(shè)計(jì)必須是通俗易懂的，換言之就是角色一個(gè)動(dòng)作做出去了，要讓玩家明白這個(gè)動(dòng)作會(huì)產(chǎn)生什么樣的效果。
?

具體來(lái)說(shuō)，以“陰”的刺拳為例，手臂和前臂以及拳頭的狀態(tài)以及關(guān)系是怎樣的，是否會(huì)感覺(jué)到別扭。這里龜井也用點(diǎn)陣時(shí)代的風(fēng)格來(lái)進(jìn)行解釋，在那個(gè)時(shí)候，整個(gè)拳頭的高度也僅僅只有10個(gè)像素點(diǎn)，為了更好的表現(xiàn)出前臂的旋轉(zhuǎn)以及發(fā)力，特意在前臂處設(shè)計(jì)了2個(gè)像素的肌肉，來(lái)增加畫面的張力。
?

當(dāng)然了，和點(diǎn)陣時(shí)代的設(shè)計(jì)不同的是，到SFV中游戲整體的設(shè)計(jì)全部是由3D打造的，這里甚至有一本可以稱之為內(nèi)部教材的美術(shù)解剖圖作為參考。
?

列如像下圖中手臂的動(dòng)作方向以及前臂的剪影都能在這份“教材”中找到參考。
?

這里也有幾個(gè)需要注意的點(diǎn)，以“隆”的手臂為例，從上方往下看上臂比前臂要粗，而從側(cè)面來(lái)看，前臂卻要略粗于上臂。雖然在實(shí)際中這是不可能的，但是這樣的表現(xiàn)手法更能夠表現(xiàn)出手部在出拳時(shí)的旋轉(zhuǎn)，呈現(xiàn)出更加強(qiáng)的力度。
?

按照龜井先生的說(shuō)法，SFV其實(shí)是按照超現(xiàn)實(shí)主意視覺(jué)路線去設(shè)計(jì)的，但是在某些部分也并非那么的合理，比如說(shuō)SFV中角色的身高就和官方設(shè)定中的數(shù)值有所偏差，比如說(shuō)“隆”的身高是175cm，而“維嘉”的身高是182cm，但是在實(shí)際模型制作的過(guò)程中，兩個(gè)角色的建模的高度卻是一樣的。
?

這其實(shí)是因?yàn)榻巧淖藙?shì)不同，帶給玩家感官上的體驗(yàn)也完全不同。
?

而在動(dòng)作設(shè)計(jì)這塊，主要有三要素：性能、格斗技以及節(jié)奏重心。首先是性能，在SFV中所有與運(yùn)動(dòng)相關(guān)的行為，都必須滿足力學(xué)的規(guī)定；而在格斗技方面也要滿足武術(shù)風(fēng)格簡(jiǎn)單易懂的設(shè)計(jì)；最后的節(jié)奏重心更多的是要考慮動(dòng)作是否帥氣。
?

以“桑吉爾夫”為例，由于其背景設(shè)定是俄羅斯人，所以在設(shè)計(jì)這個(gè)角色的時(shí)候，其行動(dòng)很多時(shí)候都帶著當(dāng)?shù)氐牧?xí)慣，比如說(shuō)移動(dòng)時(shí)的就有明顯蘇聯(lián)人行進(jìn)的樣子，如果從正面來(lái)看的話，面部以及身體其實(shí)會(huì)在很大程度上朝向一邊偏移。這樣在普通的3D游戲中來(lái)看，會(huì)顯得特別的扭曲，所以也對(duì)步伐進(jìn)行了調(diào)整。
?

這里主要是將身體的晃動(dòng)調(diào)正，來(lái)體現(xiàn)出角色厚重的身軀。所以對(duì)于SFV來(lái)說(shuō)，最合理的角度是偏移5°。
?

之后是必殺技的設(shè)定，這里用一句話來(lái)形容就是：在貼合每個(gè)角色背景（成長(zhǎng)出生地以及格斗風(fēng)格等設(shè)定）的同時(shí)，做到通俗易懂，并且還要能帶給玩家感動(dòng)，最好是能用一句話形容出來(lái)的。比如說(shuō)上圖中“美嘉”所使用的超必殺，用一句話來(lái)形容就是“臀部三明治”。
?

除此之外，現(xiàn)在的SFV事實(shí)上還繼承了系列作品的很多要素，其中之一就是背景圖像，上圖是SFZ中的戰(zhàn)斗場(chǎng)景，仔細(xì)拆解能發(fā)現(xiàn)很多有意思的地方。二手買號(hào)平臺(tái)角色以及背景的顏色按照RGB三原色0~255的亮度來(lái)看，背景的亮度明顯低于角色自身，但即使是這樣，在背景中也并沒(méi)有采用黑色。這里其實(shí)也是通過(guò)明暗的對(duì)比，來(lái)突出角色本身。

登場(chǎng)人物和背景圖像的柱狀圖 橫軸為亮度縱軸為像素量

而在SFV中，雖然并不像SFZ中那樣極端，但是也進(jìn)行了數(shù)碼調(diào)色的工作（COLOR GRADING）。下圖就是一張SFV中的戰(zhàn)斗場(chǎng)景。
?

如同我們所看到的，背景是以暗紅色為基調(diào)，色溫相對(duì)較低。對(duì)此，我們故意將角色圖像的色溫稍稍調(diào)高，以起到突出角色的立體感。
?

根據(jù)龜井的說(shuō)法，在SFV中數(shù)碼調(diào)色總共有4個(gè)部分，這里可以稱之為“Multi Color Grading”，分別對(duì)應(yīng)左右和遠(yuǎn)景。這里痛過(guò)GPU進(jìn)行渲染，并根據(jù)演出的意圖，展開(kāi)不同的調(diào)色工作。
?

當(dāng)然，有的時(shí)候由于舞臺(tái)背景的不同，有時(shí)候可能只有2~3塊調(diào)色的情況出現(xiàn)。而且更多的是近景遠(yuǎn)景呈現(xiàn)不同調(diào)色的情況。
?

在視角方面，由于游戲的背景和角色都是3D的，如果只是按照視角的金元來(lái)擴(kuò)展視野，那么整個(gè)戰(zhàn)斗場(chǎng)景就會(huì)感覺(jué)像是半球狀的，而事實(shí)上，2D格斗的場(chǎng)景卻應(yīng)該像是在一個(gè)平面上的。所以在SFV中，根據(jù)角色所處于的位置（屏幕中間或者版邊）的不同，角色的胖瘦也會(huì)有所不同，一般來(lái)說(shuō)越是中央就越瘦，越是靠近版邊反而越胖，甚至連攝影的角度都會(huì)有略微的不同。
?

在SFV中也是結(jié)合了透視投影法，簡(jiǎn)而言之就是越近的東西越大，而越遠(yuǎn)則越小，與平行透視法不管遠(yuǎn)近大小都一樣兩種技法像結(jié)合的描繪手法。而且雙方的比重基本相同。
?

講完了傳承，下面是講變革，相對(duì)來(lái)說(shuō)SFV和SFIV在畫面表現(xiàn)上還是比較相似的，但是也有著諸多的不同，上面也說(shuō)了。SFV的角色造型是按照“通俗易懂”“符號(hào)性”的理念進(jìn)行設(shè)計(jì)的，而在角色的繪制上則是采用NPR（Non-Photorealistic Rendering非真實(shí)感繪制技術(shù)）的手法。下面就是SF系列的概念美術(shù)：
?

SFV是采用UE引擎進(jìn)行打造的，這里主要是采用Deferred Rendering，其特點(diǎn)之一就是內(nèi)置光源鏡頭。實(shí)際操作中通過(guò)附屬的光源設(shè)置。進(jìn)行著色的話，就能呈現(xiàn)出很多的效果。
?

而在細(xì)節(jié)方面，其實(shí)還能看到筆刷的痕跡，在前作中，為了實(shí)現(xiàn)這樣的筆刷痕跡，主要是通過(guò)細(xì)微的凹凸呈現(xiàn)地圖紋理，在Photoshop中使用“細(xì)小的皺紋”的濾鏡來(lái)實(shí)現(xiàn)，最終效果也是呈現(xiàn)出獨(dú)特的陰影效果，而且這樣的陰影看起來(lái)會(huì)更加有層次感。
?

而在SFV中一開(kāi)始也嘗試了這個(gè)手法，但是由于分辨率的提升，這樣細(xì)小的筆觸反而看不到了，所以也想了其他方法。這里開(kāi)發(fā)團(tuán)隊(duì)選擇的是面向Photoshop的插件“SnapArt”。其對(duì)油彩風(fēng)格的渲染效果也較好，可以幫助開(kāi)發(fā)團(tuán)隊(duì)對(duì)畫面迅速的渲染。
?

它可以給任何一張圖片渲染真實(shí)世界中包括優(yōu)化、鉛筆畫、鋼筆畫、漫畫等藝術(shù)效果，Snap Art是一個(gè)可以替代繁重的手繪工作并比動(dòng)作和筆刷更有效的插件?？梢蕴娲敝氐氖掷L工作并比動(dòng)作和筆刷更有效的插件。

更多的樣式和簡(jiǎn)易的管理，通過(guò)樣式預(yù)設(shè)藝術(shù)，您可以得到各種各樣的物理介質(zhì)，如油漆，水彩，鉛筆，木炭。在這些，你可以選擇厚涂顏料，或現(xiàn)代最先進(jìn)的技術(shù)，如漫畫和風(fēng)格化的風(fēng)格，蠟筆。以及其它改進(jìn)的預(yù)設(shè)，同時(shí)我們?cè)黾恿硕鄠€(gè)蠟筆預(yù)設(shè)的。
?

然后是邊框線的描繪，輪廓線可以說(shuō)是NPR中的經(jīng)典要素，在《重力少女》系列中其實(shí)也有所應(yīng)用，當(dāng)然在SFV中也通過(guò)色彩來(lái)對(duì)其進(jìn)行描繪。
?

這里龜井先生也以SFV中的圖來(lái)進(jìn)行圖解，上面這張是最初的效果。
?

對(duì)此左右移動(dòng)n個(gè)像素，這里具體以描線的粗細(xì)來(lái)決定n的大小。
?

通過(guò)對(duì)圖像進(jìn)行合并拆分，取得最基本的輪廓。然后由美術(shù)進(jìn)行色彩制定。
?

將輪廓與原圖進(jìn)行合成，得到的效果，這里再測(cè)試的時(shí)候精良選擇色差與原圖較大的顏色，以方便觀察和調(diào)整。
?

最后這就是完整版的線描。

總結(jié)

以上是生活随笔為你收集整理的从2D到3D 开发者讲述“街霸V”的美术秘笈的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。