從2D到3D 開發者講述“街霸V”的美術秘笈

《街霸》系列自1987年推出首款作品至今已經誕生瞭5代,共計數十款的作品,系列全球累計銷量超過3365萬套。最新的作品《街霸5》也已經在今年的2月份發售,可以說已經成為瞭格鬥遊戲中的招牌。這款遊戲從最早的2D像素畫面一路進化到現在的3D水墨風格,期間也是經歷過諸多變革,而在日前舉辦的CEDEC2016上卡普空第二開發部第一開發室的龜井敏征也向我們講述瞭街霸系列在這些年在美術方面的秘籍。

38

capcom的龜井敏征

根據龜井先生的介紹街霸系列最早誕生在1987年,但是一直到1991年推出的《街霸2》才逐漸被人所熟知,成為一款現象級的格鬥遊戲,之後也是相繼推出瞭「II」系列、「ZERO」系列、「III」系列、「IV」系列,一直到現在的SFV。不過,雖然遊戲的畫風發生瞭數度的變化,但是有兩個特點卻一直被延續瞭下來,那就是“發達的肌肉”以及“誇張的表現手法”。

01

SF系列作為一款格鬥類的遊戲,具有極強的即時性,所以要讓玩傢能更快的產生對於遊戲的認知,而遊戲角色就是最重要的一部分。在SF系列中登場的角色根據性格、性質、氣質等元素,在設計的時候其實已經被記號或者說是符號化瞭。而SFV當然也不例外,所有的角色都是依照上述的關鍵詞進行設計的。

02

首先的話就是角色動作的設計必須是通俗易懂的,換言之就是角色一個動作做出去瞭,要讓玩傢明白這個動作會產生什麼樣的效果。

03

具體來說,以“陰”的刺拳為例,手臂和前臂以及拳頭的狀態以及關系是怎樣的,是否會感覺到別扭。這裡龜井也用點陣時代的風格來進行解釋,在那個時候,整個拳頭的高度也僅僅隻有10個像素點,為瞭更好的表現出前臂的旋轉以及發力,特意在前臂處設計瞭2個像素的肌肉,來增加畫面的張力。

05

當然瞭,和點陣時代的設計不同的是,到SFV中遊戲整體的設計全部是由3D打造的,這裡甚至有一本可以稱之為內部教材的美術解剖圖作為參考。

04

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

06

這裡也有幾個需要註意的點,以“隆”的手臂為例,從上方往下看上臂比前臂要粗,而從側面來看,前臂卻要略粗於上臂。雖然在實際中這是不可能的,但是這樣的表現手法更能夠表現出手部在出拳時的旋轉,呈現出更加強的力度。

08

按照龜井先生的說法,SFV其實是按照超現實主意視覺路線去設計的,但是在某些部分也並非那麼的合理,比如說SFV中角色的身高就和官方設定中的數值有所偏差,比如說“隆”的身高是175cm,而“維嘉”的身高是182cm,但是在實際模型制作的過程中,兩個角色的建模的高度卻是一樣的。

09

這其實是因為角色的姿勢不同,帶給玩傢感官上的體驗也完全不同。

10

而在動作設計這塊,主要有三要素:性能、格鬥技以及節奏重心。首先是性能,在SFV中所有與運動相關的行為,都必須滿足力學的規定;而在格鬥技方面也要滿足武術風格簡單易懂的設計;最後的節奏重心更多的是要考慮動作是否帥氣。

11

以“桑吉爾夫”為例,由於其背景設定是俄羅斯人,所以在設計這個角色的時候,其行動很多時候都帶著當地的習慣,比如說移動時的就有明顯蘇聯人行進的樣子,如果從正面來看的話,面部以及身體其實會在很大程度上朝向一邊偏移。這樣在普通的3D遊戲中來看,會顯得特別的扭曲,所以也對步伐進行瞭調整。

12

這裡主要是將身體的晃動調正,來體現出角色厚重的身軀。所以對於SFV來說,最合理的角度是偏移5°。

13

之後是必殺技的設定,這裡用一句話來形容就是:在貼合每個角色背景(成長出生地以及格鬥風格等設定)的同時,做到通俗易懂,並且還要能帶給玩傢感動,最好是能用一句話形容出來的。比如說上圖中“美嘉”所使用的超必殺,用一句話來形容就是“臀部三明治”。

14

除此之外,現在的SFV事實上還繼承瞭系列作品的很多要素,其中之一就是背景圖像,上圖是SFZ中的戰鬥場景,仔細拆解能發現很多有意思的地方。角色以及背景的顏色按照RGB三原色0~255的亮度來看,背景的亮度明顯低於角色自身,但即使是這樣,在背景中也並沒有采用黑色。這裡其實也是通過明暗的對比,來突出角色本身。

15

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

而在SFV中,雖然並不像SFZ中那樣極端,但是也進行瞭數碼調色的工作(COLOR GRADING)。下圖就是一張SFV中的戰鬥場景。

1718

如同我們所看到的,背景是以暗紅色為基調,色溫相對較低。對此,我們故意將角色圖像的色溫稍稍調高,以起到突出角色的立體感。

19

根據龜井的說法,在SFV中數碼調色總共有4個部分,這裡可以稱之為“Multi Color Grading”,分別對應左右和遠景。這裡痛過GPU進行渲染,並根據演出的意圖,展開不同的調色工作。

20

當然,有的時候由於舞臺背景的不同,有時候可能隻有2~3塊調色的情況出現。而且更多的是近景遠景呈現不同調色的情況。

21

在視角方面,由於遊戲的背景和角色都是3D的,如果隻是按照視角的金元來擴展視野,那麼整個戰鬥場景就會感覺像是半球狀的,而事實上,2D格鬥的場景卻應該像是在一個平面上的。所以在SFV中,根據角色所處於的位置(屏幕中間或者版邊)的不同,角色的胖瘦也會有所不同,一般來說越是中央就越瘦,越是靠近版邊反而越胖,甚至連攝影的角度都會有略微的不同。

22

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

23

講完瞭傳承,下面是講變革,相對來說SFV和SFIV在畫面表現上還是比較相似的,但是也有著諸多的不同,上面也說瞭。SFV的角色造型是按照“通俗易懂”“符號性”的理念進行設計的,而在角色的繪制上則是采用NPR(Non-Photorealistic Rendering非真實感繪制技術)的手法。下面就是SF系列的概念美術:

2425

SFV是采用UE引擎進行打造的,這裡主要是采用Deferred Rendering,其特點之一就是內置光源鏡頭。實際操作中通過附屬的光源設置。進行著色的話,就能呈現出很多的效果。

26

而在細節方面,其實還能看到筆刷的痕跡,在前作中,為瞭實現這樣的筆刷痕跡,主要是通過細微的凹凸呈現地圖紋理,在Photoshop中使用“細小的皺紋”的濾鏡來實現,最終效果也是呈現出獨特的陰影效果,而且這樣的陰影看起來會更加有層次感。

2728

而在SFV中一開始也嘗試瞭這個手法,但是由於分辨率的提升,這樣細小的筆觸反而看不到瞭,所以也想瞭其他方法。這裡開發團隊選擇的是面向Photoshop的插件“SnapArt”。其對油彩風格的渲染效果也較好,可以幫助開發團隊對畫面迅速的渲染。

29

它可以給任何一張圖片渲染真實世界中包括優化、鉛筆畫、鋼筆畫、漫畫等藝術效果,Snap Art是一個可以替代繁重的手繪工作並比動作和筆刷更有效的插件。可以替代繁重的手繪工作並比動作和筆刷更有效的插件。

更多的樣式和簡易的管理,通過樣式預設藝術,您可以得到各種各樣的物理介質,如油漆,水彩,鉛筆,木炭。在這些,你可以選擇厚塗顏料,或現代最先進的技術,如漫畫和風格化的風格,蠟筆。以及其它改進的預設,同時我們增加瞭多個蠟筆預設的。

30

然後是邊框線的描繪,輪廓線可以說是NPR中的經典要素,在《重力少女》系列中其實也有所應用,當然在SFV中也通過色彩來對其進行描繪。

31

這裡龜井先生也以SFV中的圖來進行圖解,上面這張是最初的效果。

32

對此左右移動n個像素,這裡具體以描線的粗細來決定n的大小。

3334

通過對圖像進行合並拆分,取得最基本的輪廓。然後由美術進行色彩制定。
36

將輪廓與原圖進行合成,得到的效果,這裡再測試的時候精良選擇色差與原圖較大的顏色,以方便觀察和調整。
37

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

Comments are closed.