前情提要
如果對我的 Side Project 「底火的芬芳」不清楚的讀者可能需要先閱讀底火的芬芳 - 專案起源才能理解這場旅程是怎麼開始的。而最近 (2022-12-19) 在逛 Github 的時候晃到一個 repo,它是少女前線這款遊戲的數值模擬器,往程式語言構成一看是用 Typescript 寫的立刻勾起了我的興趣。
neko-gg/gfl-combat-simulator
2022-12-19 在 Github 上閒逛的時候,看到一個 repo。
喔啦啦,這不是 Typescript 嗎? 喔啦啦,這不是 React 嗎? 是我的主場呢 = =+
於是就 clone
下來研究研究。
後來(約 2022-12-20)照著 README.md
的指示:
yarn update-resources
yarn update-assets
找到了 ResourcesUpdater 和 AssetsUpdater 這兩個程式,發現它把遊戲素材放在另外一個 repo。以及會從遊戲官方的 cdn 下載名為 ResData.ab
的檔案,因為不知道是什麼檔案類型,就用 Hex 瀏覽器打開來看:
啊啦啦,原來是 Unity ResData Bundle。
另外,從 ResourcesUpdater
看到它呼叫了來自 ChibiUpdater.ts 的方法,稍微研究一下內容發現它使用 Puppeteer 打開一個網站並做了某些事,不過因為程式碼已經有點過時了,網站已經被移到其他地方,DOM 的操作也和原本腳本內的方式有點落差。研究了它使用 Puppeteer 的方式,看得出來目的是取得一張 Chibi 站立的圖片。
- 原始的 Chibi (程式內對人偶的稱呼)檔案是將人偶拆件,並透過組態檔組裝的。
- naganeko 的網站能夠上傳 Spine 檔案,並播放動畫。
- naganeko 的網站也能下載組裝後的圖檔。
試著逆向工程 naganeko 的網站,發現它應該是使用了 Spine 的 Runtime。
2D 骨架動 畫
在 3D 模型/動畫中,會使用骨架 (Armature) 綁定模型節點,並透過權重、關鍵影格等方式讓模型執行動畫。
透過把模型壓扁,將這種技術應用在 2D 場景就是 2D 骨架動畫,可以解決傳統 Sprite 的一些限制。另外還有三渲二之類在遊戲開發上常見的手段,不過不在本次題目的討論範圍內。
Spine
Spine 是目前極為普及的 2D 骨架動畫 tool chain。用工業建模比喻的話就像 SolidWork,或是美術產業中的 PhotoShop 以及 Illustrator。原因在於其應用端成功的布局,包含 Unity3D, 又或是網頁遊戲開發 Three.js, Phaser, PixiJS...之類的執行環境,有著非常廣泛的 Runtime 支援。換句話使用它的產品,佈署目標的選擇十分多元。
然而這個格式終究是商業產品,編輯器本身需要付費,使用者(如:遊戲開發者)也需要購買授權。即便有 Runtime 的原始碼,其授權範圍仍不算開源的範疇,對我而言尋找替代方案就很重要了,因為我只是想寫寫 side project。
替代方案
與 Spine 類似的產品還有 Creature Animation、Rive 之類的,不過它們跟 Spine 一樣都有一股商業味,自然就排除在我的選項之外了。
往開源的生態系望去,則有 Blender 的生態系內有個名為 COA Tools 的工具能夠製作 2D 動畫。或是 Godot 作為開源的遊戲引擎也有內建的 2D 骨架動畫系統。
只是我懶得自己重頭綁骨架跟刷權重,能夠直接用撿到的少女前線檔案轉檔是在好不過了。
DragonBones
最後 (2022-12-22) 決定使用 DragonBones 的格式,雖然編輯軟體本身沒開源而且只能在 Windows 執行,但是至少是免費的而且能夠用 Wine 跑起來。這個工具背後的中國公司的 Tech Stack 算是從 Flash 長出來的,後來往 Javascript 轉型。因此它的 runtime 支援不少諸如 Three.js Pixi, Phaser 等知名的 Javascript 的套件。
最重要的是,它能夠匯入 Spine 格式的檔案,並輸出成 DragonBones 的格式。~~這樣我就可以直接撿 Chibi 的檔案來用囉~~~還有其他考量就是,如果編輯器也是基於 Javascript 的話,日後逆向工程起來比較容易。