本文來自網易雲社群，轉載務必請註明出處。

1. 概述

live2d是由日本Cybernoids公司開發，通過扭曲畫素位置營造偽3d空間感的二維動畫軟體。官網下載安裝包直接安裝可以得到兩種軟體，分別是Cubism Modeler和Cubism Animator，最後我們還需要安裝第三個軟體Viewer用作預覽調戲等。

由於還是由2d圖形制作，所以對動畫師要求比較高，除去原畫繪製能力，動畫師還需要具有一定三維空間感，以及複雜邏輯能力（問什麼要有邏輯能力，請看完= =）。

先簡單說一下製作流程：

• psd原畫切圖

• 匯入Cubism Modeler裡蒙皮

• 設定蒙皮

• 匯出到Cubism Animator裡面製作動畫

• 匯出

搞定，這樣就能得到一個活蹦亂跳的二次元小哥哥了。看起來十分簡單，然而... ...

期間踩過的坑，可能比吃過的飯都多...

2.例項解析：

• psd原畫切圖

為什麼我每個圖層後面都標註了序號，因為免費版對圖層數量有要求，不能超過30個，所以在切圖的時候，請務必精打細算，重點擺在那裡，是表情動畫還是四肢動畫，哪裡需要細緻一些，哪裡可以合在一起，算準了之後，在多數幾遍，確保圖層數目≤30就ok。

在live2d裡貼圖自動排列成這樣。

切圖沒神馬難點，下一步蒙皮其實也簡單。

• 蒙皮

匯入psd之後，會直接跳出蒙皮介面，左側的數值可以自己調整，建議邊界不要太大，但也不能太小，太小會切割原畫，基本上不用手動設定，眉毛和嘴巴這種細長的部件可以手動多加幾個點，也可以在後期製作的時候補上。

另外，如果不是太奇葩的原畫，live2d內建了一些模板可以直接套用。

左邊是萬惡的蒙皮設定，就是前面說到需要較強邏輯的地方。

• 蒙皮設定

先了解一下幾個簡單工具。

1選擇蒙皮點的工具，

2點選網格工具，

3.曲線蒙皮工具，多數用在頭髮，眉毛這樣的細長部件上，適合製作飄動的物體使用。

4點開後可以建立旋轉和網格的蒙皮，

區別是：

網格將部件按照格子的每個點做繫結，網格的縱列數目可以自己調整。

旋轉可以控制物體按照圓點進行整體位移或者旋轉。

5.自由選擇和柔選工具，柔選比較常用。

瞭解了工具之後，然後開始講這個我十分不想講的東西：

看下圖四個板塊

1是繫結樹，可以直觀檢視部件與部件之間父級關係

2是部件+蒙皮圖層關係，關聯3

3可以設定部件或者蒙皮的ID（技術讀取的關鍵），部位，透明度，圖層等等

4考驗動畫師三維空間和邏輯關係的操控臺（可以簡單理解為設定部件位移範圍的操作檯）

psd檔案在蒙皮關係全部整理完之後，大把的時間都花在第四個板塊上，舉一個“臉”講一下：

裡面有兩個控制器（變形工具），以及自身蒙皮。

一個部件蒙皮後可以由多個控制器控制運動範圍以及運動方式，如上圖1，曲面主要控制3d空間的轉面，迴轉控制繞圓心點的整個位移和左右軸旋轉，而部件自身蒙皮的點可以單獨操控精修彌補。

首先可以思考一下，臉的動畫拆出來大概有點頭擡頭低頭，向左看向右看，以及左右歪腦袋，轉換到3d視角就是球體以自身為軸點的上下左右旋轉，以及世界軸的X軸旋轉位移（脖子是中心）。

注意一下，由於live2d實際上還是個2d工具，所以3d裡面的沿著世界軸X軸的旋轉動畫在live2d裡面是Z軸動畫。

我們將原畫角度設定為0點動畫，選擇第四板塊中的角度X，點選後選擇插入3點，其中，0點是原畫角度，將綠色小點依次拖到最左邊以及最右邊後挪動控制器，（軟體將自動記錄挪動後的結果作為關鍵pose）然後將角度Y,角度Z也設定完，就可以調戲控制點玩（檢查）了。

是不是看起來很簡單，然後可以點開

引數左邊的空格，可以愉快的多維度的繼續玩（檢查）了。

蒙皮的控制器們的父子關係是：旋轉＞曲面＞曲線＞點

每一個部件設定好之後都要記得檢查，並檢查他的上下級關係，如果下級部件沒有被上級動畫帶動起來，那就一定是哪裡出了問題。具體大家可以自己試著做一個完整的小動畫嘗試下，畢竟，只是一個臉還是很簡單的，不然你看下圖：

還有下圖：

是不是瞬間很迷... ...總之，蒙皮設定就到此為止，我們接著下一步。

• 動畫製作

開啟Cubism Animator，將蒙皮檔案直接丟進去，然後得到介面

1舞臺

2動作資料夾

3時間軸

4控制器

首先在2裡面新建一個動作檔案，設定好檔名如：idle，在3裡開啟live2d引數，點選4裡的操控器擺好第一幀pose，建議將所有部件都K上動作，然後複製這個初始動作檔案繼續可以繼續製作下一個動作。

最後匯出。對沒錯，動畫製作就這麼簡單，並沒有什麼難點，除了快捷鍵讓人蛋疼之外...

常用快捷鍵：A回到第一幀，S前一幀，D後一幀，F播放，再按一次暫停，Z前一關鍵幀，X後一關鍵幀，C曲線。

• 匯出

一個完整的文件應當包含以下內容:

其中幾個比較重要的檔案：

1.蒙皮等引數資訊moc檔案匯出

Live2D Cubism Moc(*.moc)檔案是用於為CubismSDK提供繪製資料的檔案格式。這個檔案包含了圖層、引數、座標系和元件，這四部分資訊。一個Moc檔案和一個影象檔案（用於儲存紋理），在理論上就能夠提供重現角色所需的全部資訊（這裡不包括動作動畫）。

2動畫匯出gif/序列幀

3動畫匯出技術可以使用的js檔案

注意下截圖是兩個軟體。

踩過的坑和心得

• psd原稿過大記得先轉化為智慧物件再縮放。

• 不要再live2d裡面修改尺寸，會很蛋疼，可以保留原來的檔案，去psd裡重新縮放拆好後，啟用舊檔案當做模板，可以減少返工時間。

• 記得檢查控制器下部件動作的父子關係！！！！！

• 蒙皮時記得更改部件ID資訊，方便技術讀取。

• 蒙皮控制器兩邊的pose不滿意可以右鍵整個刪除回覆初始pose重新制作（前提是已經保留了0點pose）

• 動畫時間軸不要有空幀，工作區間一定要設定好，如下圖是錯誤示範：

• 

• live2d兩個軟體可以無縫銜接，psd不行。但是如果moc重新修改了建議動畫檔案關閉後再開啟，可以自動更新最新蒙皮資訊。

最後介紹一下Viewer軟體的使用：

紅框內把√取消可以去掉邊框和背景

勾上紅框可以讓小哥哥自己動

點選左上角的project→sample可以設定物理運算，讓頭髮飄動更加自然，還有自帶的微笑眨眼等等~~~

如上這樣就可以得到一個自己心儀的小哥（姐）哥（姐）了~可以自己擺在PC/手機桌面玩耍，或者根據專案需求交給技術大佬可以實現在WEB端or遊戲中使用。

本文來自網易雲社群 ，經作者（網易雷火夏琰）授權釋出。

網易雲免費體驗館，0成本體驗20+款雲產品！

更多網易研發、產品、運營經驗分享請訪問網易雲社群。