今回の内容

　Spineデータを作る際の最初の工程について、　公式ページの「ユーザーガイド（https://ja.esotericsoftware.com/spine-user-guide）」等のページも見てみましたが、基本的な操作方法や、細かいメニューの選択方法までは載っていなかった為、自分用の覚え書きを兼ねてまとめてみました。

これ以外にも操作方法や便利なショートカット操作があるかと思いますが、網羅しているわけではないので、その点は悪しからず。

１．新規作成　～　画像データ読み込み

①Spineを起動し、左上の「新規プロジェクト」を選択

→PSDデータがある場合はAへ
画像データを読み込んで使用する場合はBへ

※ここではPNGデータを使用しています。
あらかじめ部位ごとに分け、背景透過処理をしておいたものです。
JPEGデータも対応しているようですが、JPEGは透過処理ができないので基本はPNGにしておけば良いです。
PNGは可逆（ロスレス）圧縮、JPEGは非可逆（ロッシーと言うらしい）圧縮のデータなので、その点でもPNGにすべきです。

プログラムに組み込んで使われる場合、画像、PSDいずれのデータでも、ファイル名（レイヤー名）は半角英数や一部の記号で表しておく必要があります。
どのような文字が使用可能かは制御担当の方と相談されると良いかと思います。

A②　左上のメニューを選択
A③　「PSDインポート」を選択
→あらかじめ保存しておいたPSDデータを開く

B②　画面右側の「ツリー」内の「イメージ」を選択
B③　ツリー下に表示されるメニューからフォルダのマークを選択
→あらかじめ保存しておいたPNGデータを開く

④　ツリー内の「イメージ」下にそれぞれの画像が配置される

⑤　任意の画像を「root（基準となるボーンの点）」へドラッグ＆ドロップする

⑥　任意のスロット名を入力（デフォルトで画像ファイル名（レイヤー名）になっています）

プログラムに組み込んで使われる場合、スロット名についても画像ファイル名（レイヤー名）と同様に半角英数や一部の記号で表しておく必要があります。

⑦　画像の中心が「root」の位置に配置されるので、画面下部のメニューから「トランスレート」を選択した後、任意の位置へ画像をドラッグ＆ドロップで移動させる

⑧　他の画像データも同様に任意の位置に配置する

　

いくつかのグラフィックソフトに対応したスクリプト（プラグイン）を利用することで、インポートするだけで配置まで完了出来る方法も提供されていました。
PhotoshopやGIMP等に向けて用意されているようですが、GIMPに関しては現行のVer.3には対応していないようです。
対応したグラフィックソフトでデータを作成しており、レイヤー数（＝パーツ数）が多かったり、パーツの位置合わせを正確に行いたいという場合はスクリプトを利用すると良いかと思います。

さいごに

　今回はSpineデータを作る際の最初の手順説明を書きました。

　次回は続きの工程を投稿する予定です。

 

参考ページ

イメージ – Spineユーザーガイド
https://ja.esotericsoftware.com/spine-images