本文來(lái)自網(wǎng)易云社區(qū)，轉(zhuǎn)載務(wù)必請(qǐng)注明出處。

1. 概述

live2d是由日本Cybernoids公司開(kāi)發(fā)，通過(guò)扭曲像素位置營(yíng)造偽3d空間感的二維動(dòng)畫(huà)軟件。官網(wǎng)下載安裝包直接安裝可以得到兩種軟件，分別是Cubism Modeler和Cubism Animator，最后我們還需要安裝第三個(gè)軟件Viewer用作預(yù)覽調(diào)戲等。

由于還是由2d圖形制作，所以對(duì)動(dòng)畫(huà)師要求比較高，除去原畫(huà)繪制能力，動(dòng)畫(huà)師還需要具有一定三維空間感，以及復(fù)雜邏輯能力（問(wèn)什么要有邏輯能力，請(qǐng)看完= =）。

先簡(jiǎn)單說(shuō)一下制作流程：

• psd原畫(huà)切圖

• 導(dǎo)入Cubism Modeler里蒙皮

• 設(shè)置蒙皮

• 導(dǎo)出到Cubism Animator里面制作動(dòng)畫(huà)

• 導(dǎo)出

搞定，這樣就能得到一個(gè)活蹦亂跳的二次元小哥哥了。看起來(lái)十分簡(jiǎn)單，然而... ...

期間踩過(guò)的坑，可能比吃過(guò)的飯都多...

? ? ? ?

2.實(shí)例解析：

• psd原畫(huà)切圖

為什么我每個(gè)圖層后面都標(biāo)注了序號(hào)，因?yàn)槊赓M(fèi)版對(duì)圖層數(shù)量有要求，不能超過(guò)30個(gè)，所以在切圖的時(shí)候，請(qǐng)務(wù)必精打細(xì)算，重點(diǎn)擺在那里，是表情動(dòng)畫(huà)還是四肢動(dòng)畫(huà)，哪里需要細(xì)致一些，哪里可以合在一起，算準(zhǔn)了之后，在多數(shù)幾遍，確保圖層數(shù)目≤30就ok。

在live2d里貼圖自動(dòng)排列成這樣。

切圖沒(méi)神馬難點(diǎn)，下一步蒙皮其實(shí)也簡(jiǎn)單。

• 蒙皮

導(dǎo)入psd之后，會(huì)直接跳出蒙皮界面，左側(cè)的數(shù)值可以自己調(diào)整，建議邊界不要太大，但也不能太小，太小會(huì)切割原畫(huà)，基本上不用手動(dòng)設(shè)置，眉毛和嘴巴這種細(xì)長(zhǎng)的部件可以手動(dòng)多加幾個(gè)點(diǎn)，也可以在后期制作的時(shí)候補(bǔ)上。

另外，如果不是太奇葩的原畫(huà)，live2d內(nèi)置了一些模板可以直接套用。

左邊是萬(wàn)惡的蒙皮設(shè)置，就是前面說(shuō)到需要較強(qiáng)邏輯的地方。

• 蒙皮設(shè)置

先了解一下幾個(gè)簡(jiǎn)單工具。

1選擇蒙皮點(diǎn)的工具，

2點(diǎn)選網(wǎng)格工具，

3.曲線蒙皮工具，多數(shù)用在頭發(fā)，眉毛這樣的細(xì)長(zhǎng)部件上，適合制作飄動(dòng)的物體使用。

4點(diǎn)開(kāi)后可以建立旋轉(zhuǎn)和網(wǎng)格的蒙皮，

區(qū)別是：

網(wǎng)格將部件按照格子的每個(gè)點(diǎn)做綁定，網(wǎng)格的縱列數(shù)目可以自己調(diào)整。

旋轉(zhuǎn)可以控制物體按照?qǐng)A點(diǎn)進(jìn)行整體位移或者旋轉(zhuǎn)。

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

了解了工具之后，然后開(kāi)始講這個(gè)我十分不想講的東西：

看下圖四個(gè)板塊

1是綁定樹(shù)，可以直觀查看部件與部件之間父級(jí)關(guān)系

2是部件+蒙皮圖層關(guān)系，關(guān)聯(lián)3

3可以設(shè)置部件或者蒙皮的ID（技術(shù)讀取的關(guān)鍵），部位，透明度，圖層等等

4考驗(yàn)動(dòng)畫(huà)師三維空間和邏輯關(guān)系的操控臺(tái)（可以簡(jiǎn)單理解為設(shè)置部件位移范圍的操作臺(tái)）

psd文件在蒙皮關(guān)系全部整理完之后，大把的時(shí)間都花在第四個(gè)板塊上，舉一個(gè)“臉”講一下：

里面有兩個(gè)控制器（變形工具），以及自身蒙皮。

一個(gè)部件蒙皮后可以由多個(gè)控制器控制運(yùn)動(dòng)范圍以及運(yùn)動(dòng)方式，如上圖1，曲面主要控制3d空間的轉(zhuǎn)面，回轉(zhuǎn)控制繞圓心點(diǎn)的整個(gè)位移和左右軸旋轉(zhuǎn)，而部件自身蒙皮的點(diǎn)可以單獨(dú)操控精修彌補(bǔ)。

首先可以思考一下，臉的動(dòng)畫(huà)拆出來(lái)大概有點(diǎn)頭抬頭低頭，向左看向右看，以及左右歪腦袋，轉(zhuǎn)換到3d視角就是球體以自身為軸點(diǎn)的上下左右旋轉(zhuǎn)，以及世界軸的X軸旋轉(zhuǎn)位移（脖子是中心）。

注意一下，由于live2d實(shí)際上還是個(gè)2d工具，所以3d里面的沿著世界軸X軸的旋轉(zhuǎn)動(dòng)畫(huà)在live2d里面是Z軸動(dòng)畫(huà)。

我們將原畫(huà)角度設(shè)置為0點(diǎn)動(dòng)畫(huà)，選擇第四板塊中的角度X，點(diǎn)擊后選擇插入3點(diǎn)，其中，0點(diǎn)是原畫(huà)角度，將綠色小點(diǎn)依次拖到最左邊以及最右邊后挪動(dòng)控制器，（軟件將自動(dòng)記錄挪動(dòng)后的結(jié)果作為關(guān)鍵pose）然后將角度Y,角度Z也設(shè)置完，就可以調(diào)戲控制點(diǎn)玩（檢查）了。

是不是看起來(lái)很簡(jiǎn)單，然后可以點(diǎn)開(kāi)

參數(shù)左邊的空格，可以愉快的多維度的繼續(xù)玩（檢查）了。

蒙皮的控制器們的父子關(guān)系是：旋轉(zhuǎn)＞曲面＞曲線＞點(diǎn)

每一個(gè)部件設(shè)置好之后都要記得檢查，并檢查他的上下級(jí)關(guān)系，如果下級(jí)部件沒(méi)有被上級(jí)動(dòng)畫(huà)帶動(dòng)起來(lái)，那就一定是哪里出了問(wèn)題。具體大家可以自己試著做一個(gè)完整的小動(dòng)畫(huà)嘗試下，畢竟，只是一個(gè)臉還是很簡(jiǎn)單的，不然你看下圖：

還有下圖：

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

• 動(dòng)畫(huà)制作

打開(kāi)Cubism Animator，將蒙皮文件直接丟進(jìn)去，然后得到界面

1舞臺(tái)

2動(dòng)作文件夾

3時(shí)間軸

4控制器

首先在2里面新建一個(gè)動(dòng)作文件，設(shè)置好文件名如：idle，在3里打開(kāi)live2d參數(shù)，點(diǎn)擊4里的操控器擺好第一幀pose，建議將所有部件都K上動(dòng)作，然后復(fù)制這個(gè)初始動(dòng)作文件繼續(xù)可以繼續(xù)制作下一個(gè)動(dòng)作。

最后導(dǎo)出。對(duì)沒(méi)錯(cuò)，動(dòng)畫(huà)制作就這么簡(jiǎn)單，并沒(méi)有什么難點(diǎn)，除了快捷鍵讓人蛋疼之外...

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

• 導(dǎo)出

一個(gè)完整的文檔應(yīng)當(dāng)包含以下內(nèi)容:

其中幾個(gè)比較重要的文件：

1.蒙皮等參數(shù)信息moc文件導(dǎo)出

Live2D Cubism Moc(*.moc)文件是用于為CubismSDK提供繪制數(shù)據(jù)的文件格式。這個(gè)文件包含了圖層、參數(shù)、坐標(biāo)系和組件，這四部分信息。一個(gè)Moc文件和一個(gè)圖像文件（用于存儲(chǔ)紋理），在理論上就能夠提供重現(xiàn)角色所需的全部信息（這里不包括動(dòng)作動(dòng)畫(huà)）。

2動(dòng)畫(huà)導(dǎo)出gif/序列幀

3動(dòng)畫(huà)導(dǎo)出技術(shù)可以使用的js文件

注意下截圖是兩個(gè)軟件。

踩過(guò)的坑和心得

• psd原稿過(guò)大記得先轉(zhuǎn)化為智能對(duì)象再縮放。

• 不要再live2d里面修改尺寸，會(huì)很蛋疼，可以保留原來(lái)的文件，去psd里重新縮放拆好后，啟用舊文件當(dāng)做模板，可以減少返工時(shí)間。

• 記得檢查控制器下部件動(dòng)作的父子關(guān)系！！！！！

• 蒙皮時(shí)記得更改部件ID信息，方便技術(shù)讀取。

• 蒙皮控制器兩邊的pose不滿意可以右鍵整個(gè)刪除回復(fù)初始pose重新制作（前提是已經(jīng)保留了0點(diǎn)pose）

• 動(dòng)畫(huà)時(shí)間軸不要有空幀，工作區(qū)間一定要設(shè)置好，如下圖是錯(cuò)誤示范：

• live2d兩個(gè)軟件可以無(wú)縫銜接，psd不行。但是如果moc重新修改了建議動(dòng)畫(huà)文件關(guān)閉后再打開(kāi)，可以自動(dòng)更新最新蒙皮信息。

最后介紹一下Viewer軟件的使用：

紅框內(nèi)把√取消可以去掉邊框和背景

勾上紅框可以讓小哥哥自己動(dòng)

點(diǎn)擊左上角的project→sample可以設(shè)置物理運(yùn)算，讓頭發(fā)飄動(dòng)更加自然，還有自帶的微笑眨眼等等~~~

如上這樣就可以得到一個(gè)自己心儀的小哥（姐）哥（姐）了~可以自己擺在PC/手機(jī)桌面玩耍，或者根據(jù)項(xiàng)目需求交給技術(shù)大佬可以實(shí)現(xiàn)在WEB端or游戲中使用。

本文來(lái)自網(wǎng)易云社區(qū) ，經(jīng)作者（網(wǎng)易雷火夏琰）授權(quán)發(fā)布。

網(wǎng)易云免費(fèi)體驗(yàn)館，0成本體驗(yàn)20+款云產(chǎn)品！

更多網(wǎng)易研發(fā)、產(chǎn)品、運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。

相關(guān)文章：
【推薦】?nej+regular環(huán)境使用es6的低成本方案

總結(jié)

以上是生活随笔為你收集整理的纯干货！live2d动画制作简述以及踩坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。