ツクールでSpine導入したときのメモ

ツクールのSpine実装の勉強会をする予定で作った資料を上げる。
ほぼ自分用のメモ書きなので、細かいところは詳細を省く。

基本

pixi-spine.jsというPixi.jsコミュニティが作っているspine用のライブラリを使う。
PictureSpine.jsはそれをツクール用に使えるようにしたもの。
ツクールのピクチャのようにSpineを使える。

Spineのバージョン

MVはPixi.js4系なのでSpineは3.8限定
MZはPixi.js5系なのでSpineは3.8~4.1まで使用可能
PictureSpine.jsはSpine3.8基準。多分みんな3.8で作っているので安定を取るなら3.8。
Spine4以上を使いたい場合、pixi-spine.jsは最新のビルドをする必要ある。普通にDLできずNode.js入れてnpm install しないといけない。
こちらで試した限りでは細かいところは未検証だが、4系もとりあえず動いた。

Spineの3.8と4以上の差は、グラフエディタや細かな便利機能が追加されている差がある。
基本的な機能は3.8時点で完成されているが、最新使えるなら使いたい。

Spineのエクスポート

json形式でエクスポートすれば良い。
4系使っているとオプションで3.8系式のjsonで出力できるが、原因の切り分けが難しくなるので推奨しない。
テクスチャパックのオプションは基本いじる項目はないが、scaleだけいじることはある。
イラストを大きいサイズで作って出力するときscaleを0.5とかにすれば出力するテクスチャの解像度を減らせる。

トラックの重ねの話

トラック(アニメーション)を重ねることができる。
私は待機アニメーションの上にまばたきアニメーションを重ねるなどする。

例:
トラック0 : 待機アニメーション
トラック1 : まばたき

まばたきと待機の周期が違うし、まばたきを共通で使いまわしたいからこのような重ねる。
PictureSpine.jsはトラックの削除がないので、削除する場合は何もないアニメーションで上書きすればトラックを無効化できるのでそれで対応する。
あるいは自分でpixi-spine.jsにあるsetEmptyAnimationの実装すれば良い。

トラックごとのアルファ値を設定する機能があるが、ここでいうアルファは透明度ではない。
どのくらいの影響度で重ねるか。ダメージ食らって足を引きずるのを徐々に強くするみたいなときに使うらしいが、私は使ったこと無い。

ミックス

ミックスはアニメーション間の補完の話。
何も設定しないと瞬時にアニメーション切り替わって、シームレスじゃないので適当に設定しておく。
Spine側のエディタではデフォで0.2。
私はデフォで適当に設定して、個別に必要なところは設定している。

透明度

setColor(1, 1, 1, 0.1)などとすれば、全体を透明にできる。

Scale

Spineで出力時にscaleを変えてもテクスチャの解像度が変わるだけで、モデルのサイズが変わるわけではない。
ツクール側でscaleを変えないといけない。

モザイク

元ファイルもモザイク処理をする必要ありますが、モザイクしているパーツをメッシュ変形すると違和感がすごい。
だから元ファイルをモザイク処理した上で用意されているモザイク機能を上からかけるのが良いのではないか。

シーン切り替え

アニメーション状態を保存しているので、メニューを開いたり、場所移動しても前のアニメーションを継続できる

イベント

Spine側で設定したオーディオをツクール側で再生したり、スイッチ操作する機能がある。
Spine側で設定したオーディオは別にエクスポートしたファイルに含まれるわけではない。ファイル名を参照したいだけ。
スイッチ操作はイベントに直で設定するのではなく、タイムライン上で設定しないといけない。微妙にハマった。