live2d 的妹子很可愛,自從在某些謎站看到後,我也抓回來在
demo.3wa.tw 裡放了一隻
不過近期常常覺得有時角色人物的臉會變得很古怪
今天花了點時間研究一下原始碼查原因
正常的畫面
出現異常時的畫面
debug 方式就是先想辦法看懂被壓縮處理後的 live2d.min.js 原始碼
之所以滑鼠動一動就變空臉,很大的原因是在 mouse move event 發生時
根據 mousemove 查詢,發現可以打開 DEBUG_MOUSE_LOG 來看看
所以先把 506、507 行的
DEBUG_LOG: !1,
DEBUG_MOUSE_LOG: !1,
改成
DEBUG_LOG: 1,
DEBUG_MOUSE_LOG: 1,
重新載入畫面後,在螢幕上移動,就可以在 F12 主控台看到所有滑鼠事件
接著不停的划,划到又出現空洞臉
從資料中發現 x 的值變成 NaN 了
接著再從 onMouseMove device
這個關鍵字去搜尋
發現在 728 行左右
原來是變數 n 在某些情況下,會發生計算錯誤,出現 NaN
為了證實是 NaN 造成
所以先使用 n = NaN; 測試
果不奇然,畫面重整後,每次划滑鼠,都變空洞臉…XD
所以在最終計算結果,加入二行
if(isNaN(n)) n = 1; //By Feather Mountain
if(isNaN(s)) s = 1; //By Feather Mountain
如果是 NaN ,就無腦變成 1 吧
前因後果就不管他了...
同樣的語法在 762 行左右又出現了一次
不知道這二邊有啥不一樣,所以二邊都加上
總算之後再怎麼划,都不會出現空洞臉了^_^~
修正後的 js 檔:
https://demo.3wa.tw/inc/javascript/live2d_demo/assets/live2d.min.js
P.S:最後要再記得把剛才506行的,改回來,免得 F12 一堆 debug 內容
DEBUG_LOG: !1,
DEBUG_MOUSE_LOG: !1,