前情提要
運行環境
- macOS High Sierra系統 10.13.6
- node v14.2.0
- electron v8.0.0
項目
畫自己的虛擬形象
雖然Bongo Cat有自己的虛擬形象，我還是畫了一個新的，形象是參照《靈籠》的白老板畫的。由於是鼠標畫的，不是很精細，后面拿到我的數位板再改改吧。
稍微介紹下繪制過程。我是盡量按照制作live2d的流程來繪制的，方便后期改成live2d。
草稿
簡單打個稿。我用的是Photoshop CC 2017，主要是macOS安裝不了SAI，如果覺得Photoshop不適合繪畫的話macOS可以用MediBang Paint，至少防抖還是不錯的。
分層細化
下面是我Photoshop的圖層，圍巾后來沒有畫，就改成衣服了。
這個是分層效果，畫技一般，看看效果就行。
動作繪制
因為角色需要根據我們的按鍵行為做出相應操作，所以需要把左右手的關鍵動畫幀畫出來。好吧，其實也就只有關鍵幀，中間一點過渡效果都沒有，后面再改改吧。下面是圖層。
然后這是效果，這手是直接自由變換的，沒有重新畫，形變有點嚴重。
動畫播放方案
bongo.cat 的動畫播放策略
bongo.cat 的動畫播放策略和嗶哩嗶哩返回頂部的那個動畫策略是一樣的。
都是通過修改background-position-x來達到播放動畫的效果。Bilibili還用修改背景圖片的background-position的方法還達到了抖動的效果。
看一下bongo.cat的動畫。他是通過修改background-position-y來修改主題，也就是黑/白貓，修改background-position-x來播放動畫，也就是抬手/按下。
我的動畫播放策略
我沒有實際去測過插入gif、修改背景圖片的background-position-x和控制dom元素的顯隱這三種方法的效率。所以不推薦任何一種播放動畫的方法，如果有比較了解的伙伴可以溝通交流一下。
最后我也模仿了bongo.cat的播放策略，把手部拼成一個橫向長圖，用於播放。其他部分暫時沒有動畫效果就先合成一個圖吧。
動畫播放效果
我拿瘋狂小人大亂斗這個游戲來展示一下結果。想要看效果的可以下載項目嘗試。
git clone http://gitee.com/xuanyusan/bongocat_for_mac.git
cd bongocat_for_mac
npm install
# 因為我已經在package.json配置好了，所以順利的話不用rebuild，不順利的話就參照上一篇教程改install.js文件吧
# 如果安裝失敗，記得rebuild一下
npm start
