2020年12月7日- 10日，由騰訊遊戲學院舉辦的第四屆騰訊遊戲開發者大會（Tencent Game Developers Conference，簡稱TGDC）在線上舉行。

TGDC自 2017年創辦以來，一直堅持以開發者視角與需求爲出發點，結合行業發展趨勢，對大會內容進行不斷升級和擴充，旨在爲國內外遊戲專業人士打造開放的交流分享平臺，推動遊戲行業良性發展、探索遊戲更多可能。

在第三日（12月9日）的活動中，來自騰訊互娛魔方工作室羣《王牌戰士》項目的主美謝海天進行了精彩的演講分享，從色彩、造型、還有動畫特效的角度，爲我們盤點了二次元遊戲裏面的那些黑科技。他表示“你要理解它的整個二次元，或者說這種品類遊戲的審美，提煉出一些東西來，同時你還需要一些技術的積累，來去實現黑科技。”

以下是演講實錄：

謝海天:大家好，我是謝海天，我很高興能夠在這個平臺，跟大家一起分享一下我近期的一些工作。

我這次分享的主題叫從畫皮到畫骨，盤點二次元遊戲裏面那些黑科技，我會從三個角度，色彩、造型、還有動畫特效的角度，來跟大家一起講一下什麼叫黑科技。

我現在大家放一段動畫，這段動畫是2000年的，一個日本的動漫電影《吸血鬼獵人D》。之所以放這段動畫，是因爲我們在做《王牌戰士》的這個項目中，有很多參考於這個片子，這個片子有一些它比較有意思的地方。

因爲第一它是日本動畫電影，同時在美國播放，美國院線上映，所以說它代表了歐美和日本兩方的一些審美的傾向。其次呢，它是一個逐幀的2D動畫電影。

說到了什麼叫黑科技，我這次分享的主題黑科技。一句話來說的話，就叫用3D技術來還原2D卡通效果。裏面有兩個關鍵點，一個是3D技術，一個是2D卡通效果。爲什麼？3D技術就是因爲剛纔我們看到電影，它是在賽璐璐的畫面上用逐幀的手繪方式來畫的，這次因爲我們要做的都是在遊戲的範疇，來討論這個問題。所以說我一定會用3D的技術來去做2D卡通效果。

爲什麼要說是黑科技呢？因爲我們通常看到的遊戲，基本上是用PBR的技術來做一些比較寫實的效果。剛纔那個片子的電影，它是有一些藝術加工的效果，我也想用3D的角度，來還原這種2D手繪的加工效果。

我們先從色彩部分來看，這個劇照也是剛纔影片裏面的。我們從色彩的角度來看，先從亮部、暗部、色彩對比關係來說。你可以看到左邊是劇照，右邊是我從上面取出來的顏色，一眼看上去，首先右邊色板的左邊的那一條是亮部色，右邊是暗部色。其實你一眼看上去，能大概感覺到它的色彩有一些變化，但是其實變化不是太大，這個就是日本傳統動漫角度的一個實現方式。

但是你從皮膚的角度來看，亮部的顏色、暗部的顏色，暗部會相對偏暖一點。從它的盔甲的顏色上來看，盔甲的顏色又會受到環境色的影響，所以說它有點偏冷，如果你是用一個3D的角度，去直接做一個3D遊戲的話，你是不需要考慮這些東西，因爲有很多現成的光線追蹤，或者說有些反彈就可以做這件事情。這個是我們後面會講到如何去處理的一個東西。

這個是色彩角度，從亮部和暗部的色彩對比關係來講，這張圖你可以看到，這個是從整體和局部色彩對比關係。如果同一個角色，在雨天、晴天和雪天，他也有他不同的色彩變化。這個也很好理解，因爲當你在哪怕是一個正常的電影，你看到的時候也是一個人會有很多色彩變化。

這個裏面雨天和晴天，雨天和雪天會有點接近，因爲它都是屬於一個漫反射的環境。晴天由於受到陽光的照射比較強烈，它整體看起來顏色會跟另外兩個對比度會強一些。

這是扳機社的《普羅米亞》電影，到了現在日本發展的動畫顏色來看的話，已經開始非常地強烈了，這個片子如果大家有興趣，可以找一些它的劇照和花絮來看，非常地華麗，華麗度已經是比剛纔那個要強烈很多，但是它也容易看久了會視覺疲勞。

你看到這邊你很明顯能看到，我現在用線連出來的也是亮部色和暗部色，從色板上明顯就能看出來，一個是偏黃、偏綠，然後偏橘色和偏粉紅色，它把這個顏色的飽和度的層級拉開得非常過。你可以看到有一些顏色，它頂得非常高，是RGB色，用打印機的顏色有可能會打印不出來，所以說這個如果是印刷的話，有可能會偏色的。這就是他們要追求的非常強烈的一個視覺效果。我們是怎麼樣去參考它們，我們理解了這種受衆和審美以後，我們是如何把它用到遊戲裏面的。

這兩個就是我們遊戲裏面的角色卡洛琳，左邊是她的原生狀態，右邊是她的其中一個皮膚。你看到左邊這個角色，她全身都是一個非常冷的顏色，包括像暗部，暗部我們也故意把她調的是一個偏冷的紫色，就是爲了讓她的色彩能夠統一，但是她色彩統一就會顯得容易變得比較生硬。

從色彩的角度來講，我們從暗部色，雖然說她是黃色的頭髮，但是我給她加了非常重的一個粉紅色，其實是用了一個紫色，這是暗部做襯托。然後她的皮膚，就身上衣服的暗部，是用的冷色來襯托，達到一個統一。

另外一個，這是校園教練，他的頭髮你對比一下能夠看出來，其實我們頭髮、皮膚和身體衣服的着裝的暗部，都是一個統一的顏色。他看起來像是沐浴在陽光中的一個狀態，其實你對應剛纔我講的亮部和暗部要有一個色彩的對比，是人爲去處理的，同時它整體要有一個色彩的飽和度的對比，這個就是一個簡單的技術說明，我就不說非常細節的內容了。

左邊第一張圖是實現出的效果，第二張圖是我們在暗部色去做的一個處理。你可以看到頭髮的顏色、飽和度和色彩的傾向是非常重的，最右邊的那張圖，你可以認爲是個shader。其中一個過程把黑色和白色作爲陰影來分離開，在黑色區域把中間這張圖，跟我們的亮部色去做一個疊加混合，就得到了最終的效果。我在每一個主題也都會給它加一個進階的內容，這個進階的內容，我們現在在做的過程中，我們會在這個基礎上，留一些空間，做一些淨化，是爲了以後也要有一些技能會提升，我們的審美要有追求就會把它做一些嘗試。

右邊這張圖是《愛，死亡和機器人》裏面的一個靜幀截圖，這個是偏一點美式的一個畫面效果。你可以看到角色白色的襯衣，往上有一個反射光，看起來是一個暖色的，如果你要是在正常的一個電影，或者說一個稍微寫實一點的畫面裏面，你不會看到這麼強烈的一個反光，這個是故意強調他的褲子，或者說整個環境對他白襯衣暗部的一個反射影響。

左邊是我做的一個模擬，這個我可以把它稱爲一個卡通渲染的光線追蹤，爲什麼叫卡通渲染的光線追蹤呢，因爲它的光線追蹤的關係，並不是基於一個特別物理或者基於一個特別寫實度的範圍，而是我給它直接指定了一個漸變。

還是看左邊那張球下面的圖，燈光顏色我是給了一個暖黃色，模擬一個大概太陽的顏色，暗部的顏色是做了一個從藍到粉紅的漸變。這是什麼意思呢？就是在它的暗部給它罩一層藍色，就相當於罩一層冷色，這個冷色是用來跟亮部的暖黃色做對比的。粉紅色它會產生什麼效果呢?光線追蹤它會不停地反彈，這個球的深色區域，讓這個粉紅色慢慢地滲透到暗部，包括它的投影，包括它的明暗交界線後面的區域，你會看到一個比較強烈的效果。這個工作我們現在也正在放在我們的角色實驗當中。

這是一段視頻，左邊是我們現在的《王牌戰士》的角色效果，右邊是我們正在嘗試中的一個畫面效果。可以對比看出來，之前的賽璐璐的效果是很有他的特點和風格的，但是如果我們要繼續往下走的話，我們想要更多的細節或者說技能提升以後，我們想要更多的表現力的話，我們需要做出很多嘗試，也去找到它的一個平衡點。

你可以看到我們現在，正在進化中的就是一些明暗交界線的色彩關係，包括高光區域的一些處理，現在這個角色的色彩裏面，就已經包含了我剛纔說的光線追蹤的效果。但是因爲我們要在遊戲裏面實時地跑的話，我們會用到一些其他的技術來做，這是一個隱含的黑科技，這個東西是要做到很多。

我們首先要用一個非實時渲染的效果，來去給他做一個預演，然後再把它在引擎中去實現，但是這兩個也是相輔相成的。爲什麼呢?因爲我們有很多遊戲出來以後。我們需要做很多宣傳片也好，去做一些海報也好，我們都要在這個基礎上去給它處理。這就代表了兩種方向，一個是賽璐璐非常傳統的一個做法，有一個是我們如果未來想要進化他的一個思路和效果。

我再跳到造型的部分，我還是從這張圖的角度來講。首先看右邊那張圖，這個角色是我們遊戲內的渲染效果，從這邊看的話，右臉頰有一個小的倒三角形，這個效果也不是說隨便就能出來的，如果稍微懂一點打光的朋友，都能瞭解這是一個比較經典的倫勃朗的三點光源，產生的一個明中有暗，暗中有明的效果。

如果卡通渲染想要達到這個效果的話，就要談到佈線的問題。可以看到這個佈線圖，這個小的三角形是一定要切出來佈線，去卡住這個光影的輪廓，你才能看到這個三角形，至於這個造型是什麼樣子，可能針對不同的角色有不同的情況，男性就要硬朗一點，女性就要小一點，但是這個小的桃心形，是一定要切出來的。

其次你可以看眼睛部分，眼睛應該不用多說，肯定是個球嘛，但是它是有一個像凸透鏡的效果，如果你用卡通的效果去做的話，你要去模擬玻璃晶狀體的效果，那是非常消耗性能的一件事情，而且從賽璐璐的一個卡通效果來講的話，它不需要做得那麼的物理。

所以說你看這眼球，其實我們是做了一個內凹的效果，它其實是一個凹陷的面。這個時候你再看它的光影，它看起來像是那個光被凸透鏡，被一個玻璃球給折射進去了一樣，其實人的眼睛還有一個很重要的東西，就是瞳孔。瞳孔是非常傳神的東西，這個是不能被遮掉的，所以說這個瞳孔，我們是單獨做的一個片放在前面的。

提到瞳孔，還有一個非常非常重要的點。瞳孔前面還有一個非常明顯的高光點，這個高光點是非常能夠表達人的心情，是心靈的窗口。那個小的高光點，你如果仔細看的話，我們也是做了一個模型在上面，可以用骨骼驅動，可以用Blend Shape來驅動，可以讓它晃動起來，這個人顯得水汪汪的眼睛。

再往下看嘴巴，嘴巴是有什麼黑科技，或者說不一樣的點呢？嘴巴的佈線，如果稍微懂一點的話，大家也能知道嘴巴和眼球，都是有一圈一圈的口輪匝肌，眼輪匝肌的佈線，這樣的話它動起來會看起來更自然一點，就是光影會比較自然。

如果你要看我們現在這個卡通渲染布線的話，其實從鼻底到嘴脣的診斷是沒有loop的，沒有圈線的。爲什麼要這麼做呢？就是因爲卡通角色他在做一些表情，在做一些說話動作的時候，有時候那個動作是非常誇張的，這是第一。第二個就是我們的這種渲染方式，不像傳統的那種渲染方式，它的光影非常明確，你可以看到右邊就是亮部，左邊是暗部，中間只有一條線過渡，它沒有一個明顯的光滑過渡，當這個人在做表情的時候，如果你的loop的圈線太多的話，它會產生很多不必要的瑕疵，那個會很影響表現，所以說這個嘴巴需要這麼去做。

還有一些比較小的點就是頭髮下面，你可以看到我們每一個頭發的下緣，都有一個小切角，因爲如果這個角色從正面打光的話，你必須要給這個頭髮的底部一個暗部，否則頭髮就會像一個

薄薄的紙片貼在頭上。有了這種小的一個切角，我可以給它人爲的做一個假的光影，因爲我默認這個角色不會經常做一些倒立，或者說一個非常奇怪的光影姿勢，90%的狀態就是站在那兒看着你，它這個光影在正常狀態下，都會有一個看起來比較自然的明暗關係。

這個造型剛纔講的就是一個比較基礎的黑科技的處理方式。還有一些更進階的，爲什麼這就提到一個進階的標題，因爲涉及到修型和增強光影，特別是如果你還要想在遊戲中呈現需要用到的技術，我們是蹚過很多坑才實現的。

先看一下這段，這個是我們角色五星的一個出場，但這是個視頻我還得說一下，視頻和真正遊戲內的處理方式還略有不同。視頻的自由度可能更大一點，因爲它相對來說，我只需要在這個鏡頭看起來對，就OK了，沒必要是360度轉着看。如果是遊戲內的話，就需要的更嚴格一些，如果你現在看這樣，感覺還比較正常的話，我給大家看一下，沒有處理過的一個狀態。

初始狀態就是左邊這樣，調整完是右邊那樣。首先你看炮筒，炮筒我們肯定不會單純從這個鏡頭來講，整個炮口性價比最高，同時表現效果最好的狀態一個處理方式，就是直接畫一張貼圖，給它貼到炮口就可以了，匹配現在的光影處理就OK了。這個是視頻裏邊，做得是最經濟，最划算，而且效果最好的方式。

其次角色的處理，一對比就能看出來，爲什麼要做這個處理呢。

因爲我們其實還是在用一個3D來去還原一個2D的效果，2D的效果是完全可以去畫的，你覺得不好看就完全可以去畫，但我們在3D中，如果這個角色動起來，還要轉起來，我不可能保證它所有3D的光影都是非常完美的。

你可以看到，我並沒有開模型之間的一個自身投影，我是用的面片去做了遮擋，包括胳膊，包括袖子，都在用一些處理方式來讓它變得更好看。其實默認狀態下的確看起來，有一些效果不夠好，所以這個需要我們進行收尾。這個收尾的過程是有很多工作要做的。

這裏我借用了一張日本雜誌的一個圖片來說明。這個增強透視呢，我們遊戲中其實也用到了，但我們那個遊戲其實是比較偏熱血的，就不會有這麼強烈的變形。這種動畫片就屬於比較誇張的動作幅度，而且變形力度都比較大，這個比較能說明問題。

你可以看到左邊打了一拳，臉上腫起來了，其實直接放了一個mash在這兒，它天生有一個好處。因爲它的光影比較簡單，它的造型比較簡單，我直接把這個mash貼到臉上，你看起來就像是臉上腫起來一塊，我們在遊戲中也是經常會用到這種，後面也會再提到。

左邊那張也是非常經典的用法，你看把手，有時沒做這種項目的時候，你也會納悶，就爲什麼，有這個必要嗎？非要把這個手拉成這樣拍，有什麼意義嗎？你如果自己拍過照片，拍過合影，你能感受到，當大家都站在一排拍的時候，遠處有人拿相機拍在兩邊的那個人，已經被拉伸得沒法看了，就胖得不行，中間的人稍稍往後靠一點點，他臉就顯得很小，就感覺比較消瘦一點，當鏡頭放到這麼近，你再去拍的話，那個鏡頭透視大到非常誇張了，回去你可以自己拿3D相機試一下。

你看到右邊那張，其實他的人物，就是站在前面的臉和手，還有後面的人臉，都沒有特別大的透視變形，我目測的話，這個鏡頭FOV也就是50到60左右，就是正常的一個透視狀態，所以說必須得把它做一個空間上的處理，你才能讓它透視。如果你現在只是單純地調相機FOV的話，看起來效果就非常不好了，這個也是用在視頻裏面的，或者說遊戲裏面也可以，但鏡頭一定要固定，這個是鏡頭固定的話就沒問題。

我再跳到動畫特效的部分，這整個部分都是屬於進階的一個內容，就是因爲我剛纔說的，用到的那個技術是比較複雜，我們花了很多時間去做。如果在遊戲中用的話的確是比較難的一個點。

動畫中間幀，我們傳統一些遊戲的，我不說黑科技了，就是正常的一個做法，動畫中間幀都是直接用差值來算，或者說也是動畫師去做。但如果我們要做這種二次元，或者說有一點性格的動畫的話，它的動畫中間幀，就有很多的處理方式了。

這個是《愛，死亡和機器人》裏邊的一段追逐戲，一閃而過，如果你看過這個片子的話，可能這一下過去，你都沒有意識到它中間發生什麼。但是你能感覺到，他的情感的表達比較強烈。發生了什麼事情呢?

你可以看這圖片，第一張還是正常的一個狀態，這個人在跑，但是他在追的時候，他非常着急的想要追過去，面目猙獰，這後面三張圖都是直接給它誇張化了。動畫中間幀如果插入這種效果，一閃而過的話，表現力非常地強，但是它用的時候也要很控制纔行，因爲它是一個整體調性的表達，就是看你是否要加這種動畫中間幀。我們遊戲中也用到一部分，但是沒有用到它這麼強烈，後面也會提到一點黑白閃，跟剛纔的動畫中間幀蠻像的。

黑白閃可以認爲是整個鏡頭的一箇中間幀，黑白閃這個叫法是日本的叫法，但是我覺得用這個片段來跟大家講的話更清楚一點。這個是《蜘蛛俠：平行宇宙》的中間一段，這個比較明顯了，往那閃動的時候那一瞬間，它也是強化那一瞬間動作的一個誇張度，這個誇張度並不是說他動作幅度有多大，而是說那一瞬間的情感表達要夠強烈，你看它直接就是用了一張。

其實這個電影裏邊用到了很多如果有興趣大家回頭再翻翻看的話，它插入了很多美漫的表達方式，美漫在處理很強烈的性格的時候，會用一些比較潦草的線條來表現強烈的情感，這個就被用到電影裏邊。

我們在《王牌戰士》的時候，是用得比較少黑白閃，我們另外一個項目，《一人之下》在做表演的時候，比如說有在龍虎山打鬥，就是那種下雨天突然間來一個閃電，整個畫面都是變成了黑白，但那個黑白可能就只有三四幀，那一瞬間，啪，一個黑白閃，感覺那個味道馬上就出來了。這個我就把它歸到特效裏面，因爲我們是特效同學來去做這件事情的。

還有一個叫法，可能沒有做過這一類的同學就不知道，這個詞叫幀內，幀內你可以認爲是卡通版的一個動態模糊。如果現在你在PhotoShop，或者說你如果是在遊戲裏面，如果可以打開這個動態模糊的話，它其實就是一個功能，開開以後就自帶動態模糊，它會讓他在運動的時候，看起來有一些模糊的效果，但你要回到我們剛纔看的動畫片裏邊來說，那個時候在膠片上畫一個模糊的感覺是比較難的，所以他們創造了一個詞，就叫幀內。就是在兩個幀之間，由於這個手的擺動，形成了一個視覺殘留，那它就不在這個過程中把這個手整個畫成一個整體。

我選了蜘蛛俠的平行宇宙，正好有個特別合適的例子，因爲這個小孩在這個平行宇宙裏面。有一個二次元的你認爲這個是蜘蛛俠的一個精神集成。這個電影裏邊對他的表達，都是一個卡通的做法。可能一晃而過，沒有注意。

我截了幾張圖，這個相當於是它的二維動畫版的一個動態模糊效果，它是把整條線都給非常具體地給它呈現出來了，當這種幀內充斥在這個項目當中的時候，你會能明顯地感覺到跟寫實遊戲的一個很不一樣的地方，我剛纔提到的所有的動畫，就是從中間幀到黑白閃到幀內，它都用到了我剛纔說的那個技術，後面我會提到這個。

在最後有一個特效，比較好玩的效果，大家應該也會非常熟悉了，就是表情線。臉上滴一滴汗，一頭黑線，有點小紅暈都是可以做的。你看左邊就是表現出來效果就比較含蓄了，我們這個遊戲做得是比較含蓄的，你看右邊那個不起眼的幾條線，有紅線，有黑線，還有一些面部皮膚顏色的線，這個是還挺重要的一個東西。

我的這個線可以把它放大，把它放在屏幕的周圍，它就變成了速度線，你仔細看他的嘴角的話，就是左邊咧開嘴的嘴角，那嘴角的線，其實也是用我們的線擺上去的。

還是回到剛纔那個你用3D模擬的時候，它不可能在所有視角看起來都是那麼的自然，我們需要有一些工具去修補它的瑕疵。比如說他咧開嘴以後，他嘴巴的邊緣就缺少一些黑色的區域，來跟他白色的牙齒來做區分，我們只能用這種方式去彌補它。包括像剛纔說的幀內，也可以用這個東西去做。

最後總結一下說，這個黑科技到底是什麼呢，其實我做了這麼久的項目以後，這種品類的項目我發現一點，首先你要理解它的整個二次元也好，或者說這種品類遊戲的審美，你能提煉出一些東西來，同時你還需要一些技術的積累，來去表達，來去實現這些東西。我後面提到的動畫和特效的一些做法，都涉及到用一個Blend Shape的技術，那個也是我們自己花了很長時間，去研究，去打磨，最後實現出來這些效果。

有時候你在做的時候，你有時候也會迷茫，所謂的黑科技，就是因爲我們在做的時候，並沒有一個前人走過的。當然也有一些，我們能夠看到行業中，有很多人在去研究這些，已經開始越來越多的人去研究這個技術了。但其實它並沒有成型，相對PBR的一個製作思路來說，其實我們這種卡通的做法是充滿了一個未知的變數，我說這是黑科技，其實就是我們自己嘗試，在尋找各種各樣的工具，各種各樣的道路來去實現我們想要達到的效果。

我們想要達到的效果是什麼樣的，回到一開始的那個效果，就是我們現在魔方在做的很多項目，也是有國漫的動畫IP，有日本的動畫IP，他們都有一整套傳統動畫的審美，這跟寫實的遊戲和電影都是不一樣的。我們就想能夠通過這種，我們研究出來的工具，能夠把一個非常好的畫面效果呈現給大家，這個基本上就是我今天想要跟大家分享的一個內容。

剛纔我在做演講的過程中，後面也有很多人提一些問題，我這邊挑了兩個問題，我來回答一下。

問題一就是卡通渲染在畫面表現力上有什麼優勢，玩家爲什麼會認可這種表現形式？

你還可以把它類比成影視行業，卡通渲染現在在做的事情，就是在還原一個我們影視行業有過的一個表現形式，比如說我們看過

皮克斯的動畫片，也看過夢工廠的一些動畫片，它跟傳統的，寫實的或者更加寫實一點的動畫是不一樣的，因爲它有更強烈的表現力，或者說它有更誇張的一些表現手法，而且色彩感也會比較強烈，會有很強烈的個人風格，如果你對這種表現非常有興趣的話，你會體會到一種跟傳統，或者跟寫實的題材的作品，不一樣的一個感受，我們想做到的也是這麼一件事情。

玩家現在認可這種表現形式，其實也是現在市場上可以很明顯能夠看到，你在做一個作品的時候，你會有自己的態度，同時你會有自己的表達，如果這種態度和表達是能夠獲得很好的效果的話，玩家是會認可這種表現形式的。

還有一個問題是非寫實渲染的研發難度高嗎？要運用到哪些技術或工具？

其實非寫實渲染的研發絕對難度並不高，就是它用到的技術不是

現在我在做的，可能僅限於PC和手機平臺的研發，它其實都是一個實時渲染的，一個非現實渲染的框架裏邊。因爲我們這邊TA的同學，我也跟他們有很多交流，其實真正用到的shader的複雜度，就是單純從複雜度來講並不是太高，但是有一點，它需要你把技術和藝術做一些結合，或者說兩邊都要懂一些。

用到的技術和工具，剛纔我也提到了一些，我們大部分的技術和工具是靠自己的團隊來搭建的。這套整個的工具流和技術流都是我們自己研發的。這個難度高可能高在這，就是沒有很多現成的工具可用，我們都是要基於我們想要的效果，包括我自己。我現在跟過兩三款這種有風格化的項目之後，我也感覺到每一個項目的技術，它有一個叫work flow工作流和工具流。工作流和工具流都有些不一樣，是針對不同項目的不同要求，它有些區別。

好的，我的分享今天就到這裏結束了，非常感謝大家的聆聽，希望大家過一個愉快的夜晚。

相關文章