[Spine]スキン機能でキャラの色を変える

スキン機能で模様替え

Spineではスキン機能でキャラのボーンはそのままにスキンだけ変更できる機能がある。手順は公式の説明を見るよりもYoutubeの動画を見た方が解りやすい。

スキン分の素材を用意&imagesに別フォルダで格納

まずキャラクター素材を用意する。画像では一つのPSDファイルにまとめているが、別個のPSDファイルで作ってそれぞれjsonファイルに書き出す必要がある。

保存する画像データはimages内でスキン分のフォルダに分ける。この場合blueフォルダとyellowフォルダに分けている。中の各パーツの名前は統一しといた方が後々楽である。

Spineでイメージのパスをimagesに変更

どちらかのjsonファイル(今回はblue)を開く。イメージのパスに注目してほしい。今このSpineファイルでリンクされている画像のパスはBlueフォルダのみである。これではスキンの変更はできない。なのでyellowフォルダもリンクさせる必要がある。方法はこのパスを一つ前のimagesフォルダに指定して、blueフォルダとyellowフォルダの両方を呼び出すのだ。右下のパスの欄右端のフォルダマークを押して、imagesフォルダを選択する。

下画像のimagesフォルダを押してからOpenボタンを押す。

すると一時的に画像のリンクが外れるが、Spineファイルのイメージ内にblueファイルとyellowファイルが表示された。

イメージのパスを変更したので各パーツのパスも変更する

スキンの切替を行うには、Spine上に全スキンのイメージがリンクされている必要がある。なのでとりあえずイメージ内に全スキンが格納されているimagesフォルダを指定してあげて、各パーツの画像のパスを再指定してあげる。

まずスキンを新規作成してblueスキンを作成する。その後ツリー上部のクリップマークを選択&ボーンとスロットマークを非選択にして、全てのイメージを選択&新規でスキンプレースフォルダを選択する。これでblueスキン時のパーツ画像が指定された。あとはMissingになっているblueスキンパーツのパスを再設定するだけだ。右上の検索マークを押して、パスの置き換えを行う。

ここでは正規表現を使って現在のスキンの全てのパスを画像名からblue/画像名に変更しようとしている。範囲とフォールドとタイプは下画像のように選択し、検索で(.*)と入力する。これは全てという意味だ。で、置換でblue/を追加し、その後$1を入力。これは検索欄で入力された()内と同じ物という意味である。これでパスを指定できたので置換ボタンを押す。

無事に画像が表示できた!

スキンを複製し、そのスキン用の画像のパス変更

yellowスキンも作成する。blueスキンを選択して右下の複製ボタンを押してスキンを複製する。スキンは新規作成ではないので注意。名前をyellowにする。

yellowスキンを選択状態にして、yellowスキン時の各画像のパスを設定する。検索ボタンを押して、以下のように設定する。(.*)とか$1はパスの一部のみでも使えるので便利だ。

無事スキンが切り替わった!スキンを選択すれば色が瞬時に切り替わっている。

コメント