[Spine]ダイヤモンド回転の復習

擬似3D的に見せるテクニック

Spine公式ブログにてダイヤモンドが3次元的に回転している素晴らしいチュートリアルがあり、そのテクニックを簡潔に復習してみたいと思った。公式ブログはこちら

まずこういった素材を用意する。上面下面が三角形の上下4面のダイヤモンドを作成する。真ん中の四角は上下の三角形を接続させる支持体だ。

PhotoshopToSpineでjsonファイルを書き出す際、レイヤー名の頭に[bone]と入れるとそのスキンの真ん中にboneが生成された状態で読み込まれる。その詳細は参考サイトにて。

Spineに読み込んだら各スキンのメッシュを割る。支持体のmiddleボーン直下にmiddle_rotateボーンを作成。ボーンのトランスフォームをローカルにしてから位置を0にして親と同ポジにする。このmiddle_rotateがダイヤモンドの回転を担当し、親のmiddleが奥行きのスケールを担当する。

アニメーションモードでmiddle_rotateの回転を0,120,240,360と4つキーを打って回転させる。その後、middleボーンのスケールを1/0.4にして奥にパースを付ける。そうするとパースがついた状態で回転される。

三角形の底辺(水平面)の両端のメッシュ頂点をmiddleのメッシュ頂点と同ポジにさせる。まずトランスフォームのワールドにチェックを入れる。middleの底辺の角2つのメッシュ頂点をコピー(cmd+c)をする。そして上の三角形の底辺の2つの頂点を選択しペーストすると、位置が同ポジになる。下の三角形も同じように行う。

そしてここでウェイト設定する。上の三角形ならtopとmiddle_rotateボーンをバインドして、三角形の底辺をmiddle_rotateにウェイト100%にする。下の三角形も同じようにしてtopとmiddleとbottomを下画像のようにくっつける。

これでアニメーションを見てみると上下の三角形がmiddleに追従して回転しているのがわかる。

middleの一辺分ができたので残りの3辺も作成する。topとbottomをそれぞれ3個複製する。

それらはアニメーションモードで編集&バインドする。アニメーションモードで作業する理由は作業しやすい向きでバインドできるのが利点。

アニメーションモードで編集しやすい向きにタイムラインを合わせてから同じようにmiddleの頂点2点をコピー、くっつけたいアタッチメントの2点を選択してペーストして位置を合わせる。バインド位置を更新するためにバインディングをアップデートを押す。すると位置が大幅にずれるが、これは自動キーによる変形なのでキーを削除すれば直る。以下GIFを参照に。公式ブログを見た方がわかりやすいかもしれない。

全ての面のバインド位置をアップデートできたら最後に表示順序をタイムラインで調整して終わり。

コメント