巴哈姆特

哈啦區 戰鬥女子學園
查看全文

【密技】【教學】 live2d 讓自己喜歡的學生動起來吧!(文長)

綜合討論
老黎 (s94021209) 2019-06-16 03:59:16
CC
#1

基於遊戲目前剩下幾個月的時間,為了讓畢業(失業)後的老師,能夠在其他地方還能見到學生,因此發了這篇教學文。


首先,在此誠摯的邀請各位老師一起協同製作。(›´ω`‹ )

在做料理前,如果沒有食材一切都只是空談。
live2d也是一樣,沒有素材一切都無法開始。

本次教學會使用到的程式如下:

教學開始:

首先,我們先大致的了解一下從素材到完成的過程吧!

  1. 找到檔案,並用Asset Studio拆解成各類型檔案。
  2. 並把檔案分類放置後,就準備要正式開始了。
  3. 分別把檔案放入Live2D Viewer進行整合。(此程式為預覽+簡單配置)
  4. 並把所有選擇的物件放入同一個資料夾,並產生model.json。(這只能算是半成品)
  5. 確認無誤之後,有二種的編輯方式。1.使用Notepad++進行編輯 2.使用Live2DViewerEX內建的工作室EX Studio編輯。

影片教學: https://drive.google.com/file/d/1eKWbaMAnCusb-Kbg-ByNDvM0gBgQqG4P/view
(因為版權的因素,所以才選擇用雲端上傳)


第一部分:找檔案
目前只有2種方式可以找到檔案:
  1. 直接從手機裡尋找
  2. 大大整理完的資料 (推薦)

第1種:從手機裡找
(如果未刪除遊戲,可從遊戲資料夾內尋找)

檔案的存放路徑,台日版並不相同
台版: .../android/date/tw.sonet.bgh/cache/assets (已於2019/09/01關閉)
日版: ...data/data/jp.colopl.bgirl/cache/assets (已於2019/07/31關閉)

模擬器拆檔案+教學可參考SADevil7729大大文章: https://home.gamer.com.tw/creationDetail.php?sn=4157677

以下以台版為例。

1.點進去assets資料夾後,會看到一堆副檔名為.unity3d的檔案(這就是未拆封的檔案)

2.全選後,複製一份到電腦裡。(資料夾自取名子)
之後放入Asset Studio進行讀取。

點選 左上 File>Load Folder 進行載入。

3.畫面上沒有任何東西,是正常的,直接按 選擇資料夾 載入即可。

4.載入之後,按Asset list選擇以檔名排序(type),尋找副檔名為Texture2D的檔案。
以完整的模型來說,需要找2個檔案
1.臉的檔案
2.服裝的檔案(自選)
5.找到後,臉的部分就直接右鍵Expoet selected assets輸出即可。

  而服裝的部分就比較麻煩了,右鍵選show original file找到原始檔untly.3d並複製一份到其他資料夾(自取),之後再個別載入解壓縮(因為裡面含有moc檔案,一次拆很容易找不到)





第二種:找其他大大整理好的檔案

1.巴哈文章: https://forum.gamer.com.tw/C.php?bsn=27637&snA=9964&tnum=1
(感謝 X終極王子 ms0647510 大大提供)


簡易教學:(7樓)
2.雲端內有其教學
(感謝 flash16765 大大提供)
這樣第一部分就算告一段落了。



第二部分:載入模型

1.檔案更改副檔名如下:
原始 更改後
moc.txt moc.moc
m06 #54332.txt m06 #54332.mtn
f01 #545518.txt f01 #545518.exp.json
physics.txt physics.physics.json


2.解壓縮完後,打開TextAsset的資料夾,會發現副檔名是.txt
(請參照上方圖表進行更改附檔名)


更改完以後,就可以正式進入到預覽的步驟了。

3.打開Live2D Viewer載入.moc檔,會看到以下畫面
(紅框處為互動區域,之後寫程式碼會用到)

4.之後載入臉跟服裝,設定層級如下。
(臉是no.0,服裝是no.1)
確定好後,按Apply進行載入。成功後就會看到可愛的學生了!

之後分別載入
  1. 動作檔.mtn(自選,如果沒有喜歡的,可以自己做or找其他遊戲的設定檔)
  2. 表情設定檔.exp.json(自選,同上)
  3. 物理設定檔.physics.json (這是胸部會搖的原因!!)

完成圖
# 點選Animation>lding Motion 可開啟閒置動作
# 點選Live>Lip-sync>add 可新增語音感應

5.再來是新增idle(閒置動作)
點選想要設定的.mtn之後,在下方的Group打上idle,或是直接在檔名加上idle即可完成設定。
# 而Sound的部分則是新增點擊時撥放的語音(推薦是.mp3)
  剛才解壓縮的物件,找到AudioClip的資料夾,裡面就有部分的音檔了。
  (雲端資料夾裡,已經有大大上整理過的音檔)

手動下載網址: http://img.bgirl.so-net.tw/asset_bundles/Android/1.0.44/GirlVoice-01-voice_3520.unity3d
(已無法使用)
(感謝 妖孽退散 tony2110123 大大提供)


6.之後把此次全部使用到的檔案,複製到另一個新的資料夾裡。
(把絕對路徑換成相對路徑)

完成後,再重新載入一次更新路徑。
之後點上方的Project>write>setting file輸出modle.json設定檔
注意:此時的modle設定檔是半成品!



這樣第二部份就告一段落了


第三部分:撰寫model.json

model.json類似給程式執行時的清單,可以透過此清單直接修改模型內容。

以下會介紹2種程式撰寫的方式給老師們
  1. Notepad++ (直接進行程式編寫。雖然耗時間,但相對可以對模型進行細部修改)
  2. EX Studio   (模組化程式,省去除錯的時間。最快只要30秒即可完成,缺點是付費軟體)

程式編輯內容可參考Disaster Plume大大的文章:
https://forum.gamer.com.tw/C.php?bsn=31877&snA=3373&locked=F&page=1&gothis=19714#19714


以下為程式基本架構: 綠色一組,紅色一組,藍色一組
{
  "name":
  "model":                                       
  "textures": [
    
  ],
  "hit_areas": [
    {
      "name":
      "id":
    }
  ],
  "motions": {
    "idle": [
      {
        "name":
        "file":
        "expression": "default",
        "priority":
        "weight":
     },
    ],

    
    "tap_hand": [
      {
        "name":
        "file":
        "sound":
        "priority":
        "weight":
      },
    ]
  },
  "expressions": [
    {
      "name":
      "file":
    },
  ],
  "physics":
  "lip_sync": "true",
}

首先先介紹Notepad++的部分:

1.打開後什麼都沒有(棒讀)


2.匯入上面的基本架構後,就可以開始愉快的程式編輯之旅了。





在這裡介紹一下這段ID要怎麼
"hit_areas": [  //點擊互動的區域
    {
      "name":
      "id": //呼叫的區域名稱
    }

首先先用Notepad++打開moc檔,然後就會得到一堆亂碼
(畢竟輸出成moc檔後就沒辦法轉回cmox,只能用暴力一點的方式了)


紅框處把3拿掉後,就是相對應的3處感應區域了

基本上戰女都是使用這三個名稱,所以不用擔心每開一個就要對一次的問題

Notepad++的部分就先介紹到這裡。
相信會選這個方式的老師,都對程式有一定的概念。

再來是EX Studio的部分:
EX Studio 配置教學: http://live2d.pavostudio.com/doc/zh-cn/live2d/model-config-sdk2/#version

1.開啟Live2D Viewer對著右下角的Live2D Viewer小圖示右鍵選擇EX工作室
2.點選Live2D編輯器>選擇Moc或JSON文件

3.匯入之前輸出的model.json

4.點選配置文件>編輯
(從這裡可以補足沒有被設定到的互動區域)

至於設定的詳細內容,請參照Notepad++EX Studio 配置教學的說明。


EX Studio好處的部分是當點網格>其他部件時,即可標示出相對位置,
就不用慢慢看亂碼到眼睛脫窗了。(遠目...FK)

完成後可以直接關閉程式,它會自動同步到model.json裡面。
之後就可以測試成品了~

到這裡就算是完成了。恭喜!!




計畫說明(二樓):  
之後會開一個雲端,讓各位老師可以交流檔案。
但完成品請斟酌上傳Live2DViewerEX的雲端(畢竟是那是公共平台,還是低調一些)
(上傳Live2DViewerEX雲端如產生法律問題,本人一蓋不負責)

製作問題Q&A(八樓):
底下有整理了一篇問題集,目前還在收集問題中。

最後,離別來臨時,是否能好好道別呢?


ありがとう、そして さよなら     
108/09/01

看較舊的 106 則留言

給精精: B109 2019-09-03 21:50

我是直接用hit_areas欸 是不是不要用這個比較好

老黎: B110 2019-09-03 21:55

hit_areas 主要用途是定義區塊,只有標記的功能而已

給精精: B111 2019-09-03 21:58

喔喔 難怪我弄不出來

逝水流年悠悠空過: B112 03-27 23:15

雖說無關,但感謝這篇文章讓我在處理別的問題時有了靈感,但只是前進一步還沒解決==畢竟我不懂程式

老黎: B113 03-30 02:38

如有需要歡迎提出來,可以一起討論,說不定就有新的想法

延伸閱讀

閒聊每年的愚人節,都有阿魯魯來搞怪!戰女也要復活!?

2024-04-01 00:03:05

其他募集!狼師們給學生們的最後歌聲!

2019-06-24 10:50:34

情報學生們終於要到珍重再見的時刻了QQ

2019-08-30 16:23:47

心得老師和學生們 我有話想和你們說(文長慎入)

2019-08-16 22:36:36

妖魔鬼怪降伏於我

看更多

楓之谷M_陰陽師神那 X 圈內的事

插畫

楓之谷M 陰陽師MapleStoryM Kanna

插畫

楓之谷陰陽師

插畫

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】