【Spine】Spineで原点（中心点）を変更する方法

2023.02.13

目次

Photoshop上で原点を設定する

jsonファイルで書き出す前に以下を行います（下記は画像の中心に原点を合わせる場合を想定しています）。

  1. 表示 ▶ 定規にチェック
  2. 表示 ▶ ガイド ▶ 新規ガイドレイアウトを作成 をクリック。列＆行の数を2にして他は空欄にする。マージンはあってもなくても良いです。
  3. 表示 ▶ スナップにチェック
  4. 定規の左上から十字を引っ張ってきて中心を合わせる

以上の手順で原点を中心にしてから「PhotoshopToSpine」を使用してjsonファイルに書き出すとspine上で画像の真ん中が0,0になっているはずです。
たまに中心に合わせたのに左上が0,0になっている時があるので、その時はもう一度手順を繰り返してから再度書き出してインポートしてください。

Spine上で原点を調整する

アニメーションを作ってから「原点を左上じゃなくて背景の中心に合わせなきゃならなくなった…」などあると思います。そういう時にspine上で原点（中心点）を調整する方法です。

  1. 設定モードにあるツリーから移動させたいスケルトンのrootを選択する
  2. 「トランスレート」にして画像を中心に移動させる
  3. トランスレートの2個右にある「ボーン」「イメージ」を両方クリックしてアクティブにする
  4. トランスレートの数値の所にX、Y軸共に「0,0」と入れる
  5. 「ボーン」「イメージ」を両方クリックして解除する


以上です。
5番の「ボーン」「イメージ」を両方クリックして解除するを忘れがちなので注意してください。

調整後、jsonファイルを書き出すと最初の方に「”x”:〇〇,”y”:〇〇,…」
と記述があるので、ここの数値が自分の合わせたい数値（背景サイズの丁度半分など）になっていればOKです。
ズレていたらトランスレートでズレている分だけ再度数値を調整して0,0で合わせればOKです。
※その後の記述にあるwidthとheightが意図しない数値の時は、そもそも「PhotoshopToSpine」での書き出しの際に画像サイズが意図しないサイズになっている場合があるので、書き出した画像サイズを確認＆Photoshopで画像を編集し直してみてください。「PhotoshopToSpine」で書き出す際、デフォルトだとpaddingが1pxになっているので注意です。

おまけ：パーツ単体の位置を調整する

パーツ単体を動かしたい場合は、編集モードのツリーから動かしたいパーツをクリックしてトランスレート値をいじればOKです（中心にしたい場合は0,0など）。
とはいえspine上でパーツの数値いじりだすとキリがなくなるので程々にしたほうが良い気がします。

タグ：