Creative Blog #8 Spineのセットアップしました！

こんにちは。ポケラボクリエイティブ部です。

クリエイティブ部の若手メンバーがスキルアップに励む姿をお送りしているCreative Blogですが、今回は「Creative Blog #6 Spineキャラ描きました！」でご紹介したSpine用に描き起こしたキャラクターのセットアップを行います！

Spineの実務経験が１年未満の若手メンバーに、復習も兼ねつつセットアップをしてもらいました。

Spineについてはコチラをご参照ください。
http://ja.esotericsoftware.com/

Spine用に描き起こしたキャラクターがコチラです。（可愛い！）

キャラクターの画像データはPSDです。PSDの中身は下記のようになっています。

キャラクターは正面と側面があり、体の部位ごとにレイヤーを分けています。
側面フォルダの中も正面フォルダと同様の構成になっています。

部位ごとに画像を切り出してSpineに反映させていきます。
愚直に１つずつ画像をSpineに入れていくのも１つの手ではありますが、その度に移動や回転などを行いながらのセットアップでは時間が掛かってしまいます。

そこで便利なのが「PhotoshopToSpine」です！

このツールを使うと、PSDと同様のレイヤー階層と画像位置でSpineにデータを反映してくれます。
細かい使い方は割愛しますが、大枠の流れは下記の通りです。
・PhotoshopToSpineの設定を行う
・PhotoshopでPhotoshopToSpineを実行しjsonデータを出力
・Spineを起動しPhotoshopToSpineで出力したjsonデータを読み込む
・PSDと同様のデータがSpineに反映

このように反映されました！

ここからボーン、ウェイト、スロットの調整を行います！

ボーンの数が多くなるとその分調整コストが増えるので、できる限り少なく済むよう設定します。
しかし、少なすぎるとモーション作成時に表現がしづらい場合もあるので取捨選択が重要です。

今回で言えば、正面と側面で同じボーンを使いまわして画像のスイッチだけで済むように調整しています。軽く動作チェックをしながら切り替わりの際に違和感がないよう調整します。

柔らかさを出したい前髪や、腕や足のように単純な曲げ方が出来ない胴体や腰は、メッシュ化してウェイトを設定することで理想通りの動きを出せるようになります。
※メッシュ化とウェイトの設定のコツは、後ほど説明します。

左から、前髪、胴体、腰（スカート）。

細かな部分に調整をいれつつセットアップを進め、メッシュの調整、関節まわりが無事に制作できたらIKコンストレイントを入れていきます。

腕のボーンを2つ選択し、

ツリーから、コンストレイント→新規→IKコンストレイントを選択。

手首のところに仕込みます。

作成された赤丸（ポインター）を掴んで動かすと、２本のボーンをそれぞれ動かさずとも腕が動くようになります。
これ（IKコンストレイント）を両手両足に入れ制御し易くしていきます。
足に作成したIKコンストレイントは、腰からの親子関係を外しておくと足が地面に固定されるのでとても便利です！

IKコンストレイントを作成して色々動かしてみると破綻が生じる箇所も出てくるので、
ボーンやウェイトを１つ１つ調整し、それを地道に繰り返して・・・、完成！！！（イェイ☆）

今回セットアップを担当してもらった若手メンバーの感想がコチラです。

アバターイラストをSpineに組み込むと、腕と肘のジョイント部分の画像が上手く噛み合わなかったりします。
ピボット位置（関節の位置）を中心に円を描くように接合部を削るのが上手くできるコツなのですが、どうしても最終的にSpineに組み込んでみると微妙なズレやIKの作用ではみ出してしまうことがあります。
その場合、Photoshopに戻って絵を削っていくのですが、このやり取りに苦労しました。（慣れれば速くできるのか・・・）
でも、ジョイント部分はバッチリ決まった時は気持ちがいいです！

また、初めてメッシュを割る作業をした時は、どこをどうしたら綺麗に変形するのか全く見当が付かずとても難しく感じたのですが、こちらも作業しながらだんだんとコツがわかってきました。
まずアウトラインを囲うように割っていき、そのあと中を割る。
影の部分があればこれも囲む。
割るときは大きく割って、ウェイトを振りながら必要なところをまた割っていく・・・、といったところでしょうか。
本当は容量を軽くするために必要最低限の割り方にするべきですが、このあたりはもう少し修行が必要そうです。引き続き頑張ります！

左図；ジョイント部分が上手く噛み合わない。　右図；メッシュの割り方。

セットアップの監修者のコメントがコチラです。

手首、肘、腕、足首、膝などは、キャラクターの動きにまつわる重要な関節部分になります。
今回制作頂いた中では特に膝が飛び出して見えている部分がありました。
それに対する調整案としては、大きく隙間が見えるまで削ってから付け足していくのが良いと思います。
ジョイント部分で画像が上手く噛み合わず、SpineとPhotshopを行ったり来たりする事はある程度必要な部分になるかとは思いますが、最小値、最大値を割り出してから削減、増減を行う等で作業量を減らす事ができそうです。
早い段階で簡易的なチェックを挟むことでも作業量の削減に繋がると思います。

メッシュの割り方に関しても、思考錯誤しながらある程度回数をこなす事が必要です。
どういうブロックに分けて、どこにボーンを配置し、どこまでウェイトを調整して動かせるようにするのかを考えます。
例えば今回であれば、一本のボーンでまるまる一つの前髪を動かすという想定で作成しているので、力の流れなど不自然にならないよう髪の根元は頭にくっつき、末端にかけて強く揺れるように調整します。
きれいな動きをしていたとしても、おでこが見えすぎると影の関係が破綻しているように見えるので注意が必要です。
今回だと胴体や腰が該当しますが、模様がつながっているようなデザインになると、人体の曲がりを意識したメッシュの割り方を考えていく必要性が出てきます。
今後もデザインを破綻させずに可動領域の限界に挑戦していきましょう！

今回はSpineのキャラクターセットアップについてお送りいたしました。
キャラクターに魅力的なモーションを付ける為に必要な大切な工程ですね！

これでついにモーションをバンバンと作っていけそう！？

それでは次回もお楽しみに！