読者です 読者をやめる 読者になる 読者になる

RPGツクール素材メモ

同人RPGの制作で役立ちそうなスクリプト・プラグイン素材を書き留めておく

spine-pixi.jsでslots切り替えのアニメ

f:id:gamecome:20151214001146j:plain

f:id:gamecome:20151214001204j:plain

同じボーンにスロットを2つセットし、それを(正確にはそのスロット下のメッシュを)アニメ中で表示・非表示することで表情(スプライト)変化、という事をやっていた。
spineツール上ならこれが正確に見られる。

だがpixi.js上で再生してみた所、一回目のアニメは良いが、二回目のアニメで顔が丸ごとなくなったりしておかしい。

失敗動画:

つまりスロットの設定を残したまま、次のアニメを再生しようとしてるのではないか?
という仮説の下に、slotsのattachment(メッシュ関連の変形処理は全てここに入るようだ)
をアニメ前にリセットしたら、ちゃんと動くように。


具体的には、アニメさせる前の初期状態の該当スロットのattachmentを保存しておく
(slotsの17,18は表情モーフが入ったスロットだった)

// 保存
mino_face = this.skeleton.slots[17].attachment;
mino_face_2 = this.skeleton.slots[18].attachment;

そしてアニメを指定する前に、必ず再セットする。

// アニメの前に初期状態に戻す再セット
this.skeleton.slots[17].attachment = mino_face;
this.skeleton.slots[18].attachment = mino_face_2;

これで常にアニメ開始時には初期状態のattachmentになってOK、という訳だ。
今回用いたのは顔の表情切り替えだけだったが、もう全てのslotsのattachmentを保存して、アニメ前には代入&リセット処理、ってやった方が良いのかも知れない。

うまく動くようになった:


あとattachmentの型は合わさないといけないと思う。
ウェイト設定してあるmino_faceは
SkinnedMeshAttachment
してないmino_face2は
MeshAttachment
となっていて、これまた挙動がおかしくなる原因のような気がした。


*Skin Placeholderというのもあるけど、これは「同じアニメでも、普通顔か苦しい顔かを指定」とか、あるいは「同じアニメでも、鎧か、下着かを指定(服破れ)」とかに用いるものだと思う。
いわば外部からテクスチャ設定をすることであって、アニメキーを設けたりするものではない。

Placeholder設定:
SpineでSkinを使うべきシチュエーション - kikki's tech note

pixi.jsでplaceholder切り替えコード:
Pixi.js Examples


2015/12/17 *いや普通にサンプルのドラゴンの設定見たら(spine入れた場所のexamples下)
1スロット内に複数画像入れて切り替えしてたわ…。
スロット切り替えはふつうアニメで使わない、画像変更はそうやってやるのね…。
でもそれでやってみたらpixi.jsではなぜか表示が消えたりする時もあるし(単に画像だけ切り替えればいいのに、余計なとこいじるとそうなるみたい。消してやり直すのが吉)
まあこういう方法もあるよ、って事で…。