以前講到了如何將live2d呈如今本身的博客上,接下來即是設定小人所響應的動做。git
上次咱們講到了咱們是經過傳live2d模型的json文件來讓小人呈如今咱們的網頁上,而其中json文件所包含的就是各類對於模型資源的設定,例如能夠看到motions所指的的就是模型的動做這一大類,hit_areas所定義的就是model的觸碰範圍等等。編寫model.json的文件能夠軟件Live2DviewerEX。目前該款軟件在steam上收費(不過若是你也能夠和我同樣直接編寫json文件)。再者,目前另外一款能在電腦上運行model的軟件即是Live2DViewer(沒有EX)。若是你和我同樣準備本身編寫的話能夠參考以下兩個鏈接(其實根據軟件的規則編寫的json文件會和在網頁上的效果會有出入,在後面會講到爲何)github
1.http://live2d.pavostudio.com/doc/zh-cn/live2d/model-json-example/(中文文檔)express
2.https://www.bilibili.com/video/av28408754?from=search&seid=6607613555690708666(視頻)json
(正確的編寫方式)網絡
(錯誤的編寫方式)ide
在編寫好json文件後,咱們即可以上次說的上傳到github後release一個版本即可以給咱們的腳本傳一個文件了。可是當你滿心歡心的準備去測試本身所編寫的功能可能立刻就會受挫,由於效果並非和咱們在軟件上所顯示的那樣。這裏咱們來分析爲何。由於咱們藉助了腳本<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js "></script>(如下簡稱爲腳本A)。咱們所編寫的model.json文件至關於向這個腳本傳遞了咱們所編寫的內容。可是由於這個腳本編寫的處理數據的方式與咱們以前所顯示live2d的處理數據方式存在着必定的誤差。這比如你向兩個不一樣的函數傳遞相同的參數。出來的結果也會存在誤差。在腳本A中對應body部分的事件處理只會處理動做的數據(若是存在多個,便會隨機選擇一個)。而對應臉部的事件處理則是隨機觸發一個表情而不處理動做(你甚至能夠點擊模型頭部上方的空氣來切換表情),若是你的模型並不存在表情這一參數的話,你大可放心,你只要編寫除了tap_head事件外的事件併產生對應的表情和聲音便可。但若是你像我同樣若是須要在點擊後產生相對應的表情和動做,那就須要改寫腳本A所引用的另外一個腳本了,因此咱們須要改寫的是L2Dwidget.0.min.js而不是腳本A文件。改寫這個文件是一件很是痛苦的事情。由於不知道什麼緣由博主顯示這些代碼是不具有換行和格式的。什麼意思?看下面的圖你就懂了。函數
我想你在看完這張圖後應該就能理解博主的心情了.......即使如此,博主仍是用本身僅有的知識水平對腳本作出了一些修改,使得只要模型的表情和tap_body中的個數相同的前提下,在加載順利的狀況下可使得表情的順序與動做的順序一一對應。可能這麼說不是很明白,大體意思即爲,即便不在tap_body中不編寫expression這一選項,然而能夠加載表情,其中所選擇的表情次序在網絡加載沒有錯誤的狀況下與動做的次數同樣,即第二個動做會加載json的expressions參數的第二個值。(因爲博主很菜,並不能寫出在參數相同的狀況下呈現像跟live2dviewerex同樣的腳本,只能根據本身的需求改寫成了只適合本身用的腳本,故也不對外公開了,若是你敢興趣,也能夠經過F12得到)。測試
此外因爲博主的模型個數比較多,故對於一年四季不一樣季節,一天不一樣時間段所使用的live2d模型也是不同的(其實就是很是簡單的邏輯處理問題),若是你敢興趣一樣經過F12搜索」Date「後查看。spa
以上即是博主對於live2d網頁版的探索。若是你感興趣你能夠改寫上面的L2Dwidget.0.min.js文件使其與live2dviewerex的效果如出一轍或者改爲像我同樣適合本身模型的腳本(若是有更好的辦法請務必不要像我同樣改寫腳本文件,與此同時若是能夠的話也請告訴博主(ノへ ̄、))。因爲博主最近學業壓力重,也參加了學院裏的實驗室,故對於此事再也不進行更新,若是感興趣,請自行探索,去更好的瞭解本身所喜好的事物。3d