純乾貨！live2d動畫製做簡述以及踩坑

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

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+款雲產品！

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

相關文章：
【推薦】 論用戶體驗測試：牛逼的功能千篇一概，好的體驗萬里挑一
【推薦】 如何實現最佳的跨平臺遊戲體驗？Unity成亮解密實時渲染