モーション

2Dモーション制作ソフト”SPINE”覚書

2019-12-15

spineとは……

kickstarter発の2Dスケルタルアニメーション作成ソフト。メッシュを掛けて変化を持たせ、2.5Dに見せることも可能。採用例にはCygamesのアニメRPG『プリンセスコネクト!Re:Dive[26]や、バンダイナムコエンターテインメントのブラウザゲーム『アイドルマスター シャイニーカラーズ[27]などがある。

Wikipediaより▶リンク

ブラウザーやソシャゲ界隈でよく使用されている2Dモーションソフトです。私の2020年~現在の本業で使用しております。バージョンは古いやつだけどね…

Sponsored Links

Live2Dなんかと似て非なるものではありますが、ざっくり言えば同系統です。

個人的にLive2Dで良いな~~~、と思うのが目パチ口パク。Vチューバーさんが使用しているのもここら辺が理由だと思います。あと、凝らなければ無料で使える。

spine、データ保存できるようにするのに3万ちょいしますしね………。※一応無料版もありますが使用感つかむ程度。

さておき

Photoshopをアップデートしたのかされたのか、気がついたらいつの間にか2020版に進化していた私のパソくんですが。

今まで「Layers to PNG」というものを使用していましたが、「PhotoshopToSpine」を初めて使ってみようと思います。

「PhotoshopToSpine」 自体はだいぶ前からあるようですね。

PhotoshopToSpineの方が新しい且つ「タグ付け」なるものが使用できるよう。楽しみ

オリキャラ ゆきちゃん の背面イラストをspine上で動かすためのあれやこれややっていこうと思います。

この子。まだイラストとしても完成してないけど動かすのを待てない人間。

使用ソフトおよびバージョン

  • Photoshop2020
  • spine3.8.77PRO

もちろんバージョンが別のやつでも使用可能です。

※今回紹介しているPhotoshopToSpineが使えなかった場合はLayers to PNGで書き出してください。

多少画面や入れられるスクリプトに違いがある場合もありますが、心配な場合は私に合わせてくれるとわかりやすくなるかと思います。(ついすぐ最新版にアップデートしてしまうタイプ……)

下準備

PhotoshopToSpineってどこだよって方向け。とりあえず入れてみましょう。

spineをダウンロードすると付属しているので、PSのフォルダー内に移植するだけです!!

SpineをDLすると、【C:\Program Files (x86)\Spine\scripts\photoshop】の中に「PhotoshopToSpine.jsx」というものが入っているかと思います。

こいつを Ctrl+Cでコピー ⇒ フォトショのフォルダー【C:\Program Files\Adobe\Adobe Photoshop 2020\Presets\Scripts】内に⇒Ctrl+Vで貼り付けます。

この時すでにフォトショが起動していた場合は、一旦落とさないとスクリプトが反映されないので再起動してください。PC自体じゃなくてソフトのみでOKです。

素材分けをしたイラストをspineに持って行く前に、フォトショでいじっておくと後が楽

 Photoshopを開きなおして

 メニューバーの ファイル⇒スクリプト⇒PhotoshopToSpine と進むと、入れたてほやほやのスクリプトが出現しているのがわかるかと思います。

 こいつを起動させると、素材分けしたデーターを 腕一本髪一束 単位でトリミング&レイヤー名にリネームして書き出してくれます!なんて便利なんだ!

 でもその前に下準備があります。

データを整理整頓

PSDのレイヤーを整理整頓しておくととても後が楽です。

素材分けの段階である程度レイヤー名や表示順序なんかは調整しているかとは思いますが、SPINEに持って行く前の段階できれいに整理していると

「え? なんか右腕がいない…?????」とか「は げ て る」

とかいう不具合で書き出しなおしが発生することも防げます。

  • レイヤー名は英語のみ
  • レイヤー名は半角のみ
  • 同一レイヤー名は使用不可
  • 空白などは削除

特にここに気を付けてリネームしていきます。かわいい女の子がハゲるところなんて見たくない……大事。

表示順序なんかも間違いがないか見ておくとよいかと思います。

ある程度はspine上でも調整できるので別に今じゃなくてもいいんですが、まあ、ある程度は整えとくと良いのではかと。

ネーミングセンスなんてレイヤーにはあんまり必要ないですが、わからなくならない程度適当につけて大丈夫です。

私は普段こんな感じでつけています。

なんとレイヤーの半角全角を直してくれる便利なscriptもあるみたいです。

PhotoshopToSpineの本領。タグとは?

ここみてここ!!

フォルダー階層になっていて、【腕】【足】といったセットに分けて格納しています。

フォルダの名前も     【bone】L_arms    と作成しています。これが”タグ”です。

”左腕”というカテゴリーの中に ’上腕(L_upper_arm)’ ’下椀(L_under_arm)’ ’手(L_te)’ という3つの要素があります。基本構成ですね。

たまーに装飾で袖裏ができたり、ブレスレットができたりもしますが、生腕のみだと3つが基本かと思います。

これを「左腕のセット」ですよ~~~とspineに伝えるために、1個のフォルダの中に入れてしまいます。

でもこのままだとまだ「セット」と判別してくれないので、名前を付けます。今回でいう【bone】です。

こうすることによって、spine上で

L_armsという骨(bone)を親にして、 ’上腕(L_upper_arm)’ ’下椀(L_under_arm)’ ’手(L_te)’ という3つの要素を勝手に子供にしてくれます。

親子関係は 親boneの動きに子boneまたは子slot(*画像の入れ物)が追従してくれるように設定することです。

3Dとかでも親子とかペアレントとかいって使われてるので知ってる方も多いかと。

設定例としては

  • [bone]L_arms L_armsという骨の中に画像がスロット化されて配置されます。ボーンの位置は画像の中心。
  • [slot]L_arms L_armsというスロット内に画像が配置されます。腕や顔の表情差分など、画像切り替え時に使用すると便利です。
  • [skin]L_arms L_armsというスキンプレースホルダーに配置されます。スキンはいまいちまだわかってません。色変えとかに便利らしいです。
  • [merge]L_arms L_armsという単一に統合された画像が配置されます。たぶんフォルダー内の画像を統合してくれます。(試してない)
  • [ignore] このタグを付けたレイヤーは出力されません。

とからしいです。私よりよっぽど詳しく説明してくれているサイトさんもあるので、興味があれば調べてみることをお勧めします。

語彙力すごい…

spineは個人使用だと初期投資3万円くらいでお高めですが、1度触ると楽しいのでspineの民が増えてくれると嬉しいです。 

Sponsored Links

-モーション
-, ,