紙片人老婆能在遊戲里順滑地動起來，背後是十幾年的圖形技術成果

「點陣圖矢量變形動畫技術」讓世界充滿動（搖）感！

最近兩年，很多遊戲都突然變得動感了起來。程度輕的，立繪和CG開始有了「呼吸」的效果，衣飾會像是在風中飄動。而程度高的，則各種畫面上的元素都在扭動。

大概這個感覺（來源：Dao Le Trong）

Steam上的名作《Nekopara》，算是比較早利用了這種動畫技術的遊戲之一。這部已經賣出了200萬套，創造了銷售奇蹟的美少女遊戲，一個重要的功能就是可以讓二維的女性角色動起來。

「那個會抖動的東西」——大家都懂的羞恥成就

只要按下預設的按鍵，小姐姐們充滿膠原蛋白的肉（nai）體（zi）就會展現熱辣的彈力。不知有多少懵懂的青春少年，在這軟粘的天堂中迷失了自我。

《Nekopara》使用的動畫系統不是Live2D，而是另一款類似的E-mote

也許有人會說：「這就是Live2D嘛！」

這種說法對也不對，作為此類技術的先行者，Live2D很多時候都會被簡單地當成這種動畫技術的代言，不過這種二維動畫技術的真實歷史，可就要稍微複雜一點了。

遇到瓶頸

早在1992年的《餓狼傳說2》中，初次登場的不知火舞就已經用自己彈性十足的軀體吸引著純真或者不純真的少年們，但是在之後的十幾年裡，像老格鬥、橫版清關遊戲那樣，人物動作鮮活的二維遊戲反而越來越少。

這是因為，過去遊戲里的「精靈」（Sprite）動畫系統，核心還是像傳統的二維動畫一樣，是通過一幀一幀有微妙差別的連續畫面來實現人物動作的。

這樣的動畫有兩個最主要的缺點。

第一個就是開發時間比較長，整套動畫都需要畫師一幀一幀來製作。不但對畫師的技術水平要求很高，美術資源之間的風格協調也比較麻煩。

另外一個缺點就是資源容量太大。圖片素材通常是遊戲中佔據存儲容量最大的資源，遠遠超過三維模型和各種程序文件。而傳統的幀動畫，如果想要讓畫面足夠流暢，每秒都要有10張以上的圖片，要求更高的話甚至能到30張以上，積累下來的圖片容量就很可觀了。

高質量的動畫中短短一句話，就需要50多張圖片來表現（來源：Animator』s Survival Kit, Richard Williams）

在不知火舞的身體只有很少像素點的時代，這種二維動畫製作方式還能夠被承受，但隨著遊戲畫面品質和解析度的提升，製作時間和成本也迅速飆升，已經遠遠比不上素材可以輕易組合復用的三維遊戲了。

雖然使用骨骼動畫或者拼接動畫可以比較快地表現動作，但是由於作為元件的點陣圖本身是固定死的，很多效果還是要靠幀動畫來解決。

《奧丁領域》是骨骼動畫結合幀動畫的二維遊戲的一個代表

因此，在很長一段時間裡面，遊戲里假如出現了比較精美的二維畫面，通常只局限於拿不同表情的立繪播個幻燈片來表現一下人物，或者關鍵的劇情里補上幾張CG，滿足一下最基本的敘事需求。

迎來曙光

不過二維繪畫這種幾乎和人類歷史一樣長的藝術形式，有著自己的特點和生命力。

受限於電腦硬體、技術和相應工具軟體的限制，遊戲中再精美尖端的三維畫面，也比不上二維繪畫細膩豐富，風格多樣。

三維建模難以還原細緻的手繪畫面（來源：Dao Le Trong）

另外一方面，隨著二次元萌文化崛起而變得無處不在的紙片人們，並不太適合用三維模型來表現。

大家喜聞樂見的「萌系」、「二次元」畫風，根本不符合透視和解剖學。「二次元」風格人物的在不同角度下的美感，很多都要靠有技巧地處理造型來解決。

這樣的可愛造型其實並不太嚴格符合透視和解剖學

如果用三維模型還原這種腦殼大下巴尖的頭骨造型，從特定角度看過去，配上三維引擎的光照特點，就顯得十分驚悚嚇人了。

嚴謹的轉面大概會是這種感覺，emmm…

有沒有辦法，可以既廉價又有效地讓「二次元」的人物呈現出三維的動感呢？。

第一個突破點，是矢量圖形技術。我們常見的由像素組成的圖片，比如JPEG、PNG這種的，都叫做點陣圖（Bitmap）。矢量圖形和傳統的點陣圖不同，反而和三維建模的原理相似，是靠虛擬空間中的坐標來計算畫面應該如何被投射到屏幕上。

和三維圖像的成像原理相似，矢量圖形只是虛擬空間的一系列坐標，被投射到屏幕上

矢量圖形不像傳統的點陣圖繪畫方式，需要用各種工具人為指定每個像素應該顯示什麼顏色。計算機看不懂點陣圖里每個像素的作用和意義，但是卻能明白如何調整和計算矢量圖坐標數值的變化。矢量圖形也因此可以很方便地進行變形和填色，而不用擔心填色範圍出錯，或者圖像質量損失。

這就是為什麼Flash可以計算出非常順滑的變形動畫。這種動畫完理論上想要多少中間幀就可以有多少中間幀，效率和效果在很多情況下遠遠勝過用手一張一張繪製。

矢量圖形的變形相對簡單，效果也十分順滑（來源：Toondra）

有一些聰明人就想到，可不可以使用矢量圖形易於變形的特點，來讓二維畫面通過變形來實現像三維圖形一樣的轉面呢？畢竟在二維平面上所表現的所謂的「空間感」和「立體感」，說白了也不過就是遵循透視原則安排畫面來形成的視覺錯覺而已。

並沒有一個真正的「立方體」在轉動，只有幾根線條在變形而已

這就是最早的《Live2D Vector》。這套軟體通過對矢量圖片進行變形和轉換，可以讓簡單的平面角色圖片實現三維感覺的轉頭和移動效果。

由於Live2D Vector的案例已經不可考，本圖為Live2D Cubism的早期作品《條碼女友》

新的發展

雖然這樣的角色只能進行有限度的活動，但是已經比起靜態的圖片或者幻燈片好太多。普通人也可以通過軟體調整參數甚至自采素材來定製屬於自己的會動的紙片人妹子。

通過自採的素材來製作的Live2D角色（來源：brian_tsui）

當然，矢量圖片畢竟還是有很多限制。雖然佔用容量資源減小了，但是複雜畫面的呈現會消耗很多CPU運算資源。而且矢量圖片也沒法呈現日後越來越流行的，被稱為「厚塗風格」的油畫、水粉風格的畫面。

在2010年前後，正是移動互聯網和獨立遊戲迅速發展的時代。個人開者對新的二維、三維工具需求很高。很快二維動畫技術就在其他方向上有所發展。

最新的思路就是將點陣圖轉化為網格模型，從而把點陣圖和矢量模型結合起來，通過分配和計算模型上每個節點（正式的叫法是「頂點」）對圖片的影響力，來決定在變形時點陣圖上的像素應該如何被重新安排。

點陣圖在標記轉化以後，就可以作為矢量模型使用（來源：Dao Le Trong）

任何圖片，只要經過正確的標記和處理，都可以被轉化成可以被調整和變形的矢量模型。這種做法不但減輕了製作動態元素的成本，還可以完整保留圖片本身的繪畫風格。在此之上，如果再結合已經十分成熟的骨骼動畫系統，就能用相對低廉的成本和工作量，製作出媲美大成本手繪幀動畫的最終表現效果。

結合骨骼系統後的表現效果十分出色（來源：Dao Le Trong）

到今天，這種技術的運用已經十分廣泛了。在《英雄聯盟》的登錄界面上，手機艦娘槍娘遊戲的立繪里，在美少女遊戲的動態CG中，都可以看到點陣圖矢量變形的身影。各種虛擬主播、虛擬偶像，使用矢量點陣圖變形技術的也不少。

《龍之皇冠》里出色的動畫效果讓人印象深刻

由於主流遊戲引擎、影視軟體對於這種表現方式的支持越來越成熟，這種一切會都動起來的效果在未來只會變得更加普遍。考慮到新版本的Live2D已經支持360度的人物旋轉和VR，相信以後的還會有更多令人期待的發（lao）展（po）在等著我們。

長按下圖，獲取

游研社APP

發送

紅色

EVA

暫別EVA的6年里，總導演庵野秀明在忙什麼？

專八

看不懂「專八旅人」？您可能是「神字幕」的受害者

差評

 | 

Steam上「差評如潮」的7個遊戲，都是些什麼神仙？

灌籃 

《灌籃高手》最強陣容里，有一個位置的人選是公認的

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！