Spineのスキン機能を使ってみる1

宇田川(デザイナー)
マイペース

どうもです。宇田川です。
台風の多い季節ですね。休日にお出かけしようと思って台風がくるとがっかりする人も多いのではないでしょうか。
私は家でゲームしてるのでがっかりしません。インドア派というやつです。お家最高。
インドア派かアウトドア派かという話は置いといて、今回はspineのスキン機能をいじってみようかなと思います。

スキン機能とは?

ざっくり言うと「spineで作ったキャラのアニメーションはそのままで色違いバージョンが欲しいな」とか思った時にスキン機能を使うと切り替えが簡単にできる便利機能です。
ボーンの動きを引き継げるので、ボーンアニメーションはそのままで色だけ変えることができるので本当に便利。
そんなわけで、基本的な使い方を紹介していこうと思います。

まずは素材を用意

まず素材を用意します。
通常カラー色差分カラー2つ用意しましょう。 lulu こんな感じ。

まず、パーツごとに画像を書き出します。 nomal_img
通常カラーのものと blue_img 色差分カラーとこんな感じで2つできました。

次にspineを起動して新規プロジェクトを作ります。
guide1 ツリービューにあるイメージを選択して下にある閲覧を押して、先ほど書き出した画像のファイルを指定してあげます。
guide2 あとはキャラクターを画面に配置すれば、やっとこさ素材の準備ができました。次にスキンの設定をしていきましょう。

スキンの使い方

ツリービュースキンを選択して一番下の新規を押します。
guide3 すると名前をつけろと言われるので適当に名前を入れましょう。 skinwindow
この時通常のスキン用色差分のスキン用と2つ作っておきます。 guide4
今度はスロットを選択してまた一番下の新規からスキンプレースホルダーを選択します。 guide5
また名前をつけなさいと言われるので適当にわかりやすい名前を設定します。 skinwindow2
これをすべてのスロットに作っていきます。

次に通常スキンの設定をしていきます。
ツリービュースキンから「nomal」を選択した状態で、各スロット内のスキンプレースホルダーに画像をポンポン入れていきます。
guide6
すべてのスロットに画像を設定し終えたら、通常スキンの設定は完了です。

次に色差分スキンの設定をします。
ツリービュースキンから「blue」を選択した状態で、
通常スキンを設定した時と同様、各スロット内のスキンプレースホルダーにポンポン入れます。
guide7 こちらもすべてのスロットに画像を設定し終えたら、色差分スキンの設定も完了です。

これでスキン機能の設定はすべて完了しました。

スキンをポチポチと切り替えることができます。わーい。 view 便利なスキン機能ですが、実はちょっとした注意点があって各パーツの画像のサイズを同じにしていないと、ボーンがずれてアニメーションが崩れたりするので、画像を書き出す時はサイズに注意しましょう。

ここまでざっと基本的な使い方を紹介してみましたが、実はこのやり方ではなく簡単にスキンを設定できる方法があります。
早速紹介したいところですが、長くなってしまったので次の記事で紹介しようと思います。お楽しみに!