本記事は英語の原文 Turn a PNG or JPG into a Spine animation の日本語版です。翻訳には AI を使い、プロンプトは実際に送った英文をそのまま載せています。
Spine でキャラクターを動かすには、ふつうはパーツごとにレイヤーを分けた素材（PSD など）が必要です。でも手元にあるのは、購入・依頼・生成した 1 枚絵だけ ということも多いはずです。
自作ツール Riggy で、レイヤーのない PNG 1 枚をパーツに分け、リグを組み、待機（idle）と勝利（win）のアニメを付けて Spine 4.2 で書き出すところまでやってみました。例はスロットゲームのマスコットのロボットです。主なプロンプトはそのまま載せ、途中で直したところもまとめます。
完成したリグは公式 Spine Web Player で動かせます：デモ。頭、左右の上腕と前腕、両脚がそれぞれのボーンで動き、腕はひじで曲がります。
入力：レイヤーのない 1 枚絵
1024×1024 の PNG 1 枚。レイヤーはありません。
ステップ 1：何の絵で、どこが動くかを伝える
新しいプロジェクトに画像をドロップすると、Riggy は 1 枚絵だと判断してパーツ分けを提案します。チップを押すと依頼の書き出しがチャット欄に入るので、続きを書きます。何の絵か、どこが動くか、関節はどこかを伝えます。
Cut this picture into parts: it is a lucky robot, a slot-game mascot. Later it needs an idle loop and a win celebration where it raises both arms and waves, bending at the elbows, and does a small hop. Cut each arm at the gold elbow ring into an upper arm with the shoulder ball and a forearm with the hand; keep each leg whole with its boot; the antenna stays with the head. Each box should take in its whole part, joint included.
AI は絵を見て、パーツ名の一覧と Cut ボタン上の見積もりを返します。この時点ではまだ何も切っていません。
今回はプランの枠が外れていました（前腕の枠に手の大部分が入っておらず、頭の枠は頭よりかなり広い）。そこで筆者が画像にグリッドを重ねて各パーツを測り、枠を数値でチャットに渡しました（画像サイズに対する千分率）。
The boxes miss the parts: the forearm boxes leave out most of the forearm and the hand, and the head box is much wider than the head. The elbow is the small gold ring below the shoulder pad; the big gold cuff is the wrist and goes with the forearm. Replace the plan with exactly these boxes (thousandths of the picture: left, top, right, bottom): head 283, 44, 713, 464; torso 361, 430, 640, 737; left_upper_arm 288, 439, 418, 605; left_forearm 151, 542, 352, 767; right_upper_arm 582, 439, 712, 605; right_forearm 648, 542, 849, 767; left_leg 303, 674, 469, 913; right_leg 527, 674, 695, 913.
ステップ 2：分割。隠れた部分は描き足される
ボタンを押すと画像が分割に送られます。今回は 1 回あたり約 2 分でした。隣り合うパーツが関節で重なるように、隠れている部分を描き足すよう指定されます。今回なら、肩パッドの下の肩、胴体の下に隠れた脚の付け根、ヘルメットのリングの下の首です。戻ってきたパーツは、パーツごとに 1 本のボーンを持つ最初のリグに組まれます。結果は元の絵と見比べ、動かして確認してください。
ここで見せている最終的な分割は 1 ドル未満でした。それ以前の分割、プラン作成、アニメの依頼は別料金です。ボタンには見積もりが出て、最終的な料金は戻ってきたパーツ数で決まります。
ステップ 3：チャットでアニメを付ける
Now rig it and make two animations. Put each shoulder joint in the centre of its gold shoulder pad, each elbow at the small gold ring, each hip at the top of the leg under the body, and the neck at the gold collar under the helmet. idle: a calm 2-second loop, the body bobs gently, the head tilts a little and the arms sway slightly. win: a 1.6-second celebration, both arms swing up so the hands are above the shoulders and wave, bending at the elbows, the head tilts side to side and the robot does a small hop, ending in the rest pose so it loops.
ボーンの配置と 2 本のアニメはここで出来ました。首・ひじ・腰は正しく付きましたが、肩はだめでした。原因は依頼文そのものです。肩パッドは関節ではありません。 ボーンをパッドの中心に置くと、win で腕と一緒にパッドが外へ振られ、その下に隙間が開きます。そこでもう 1 行。
The shoulder joints are still outside the body: each arm bone starts in the middle of the gold pad, so in win the arm turns from the wrong place and an empty gap opens under the arm. Fix the shoulders. 1) Move each shoulder joint, keeping everything in place, inside the torso outline at its top corner, where the pad meets the body: x -102, y 524 for left_upper_arm and x 101, y 524 for right_upper_arm. 2) Then move each whole arm 8 px closer to the body: left_upper_arm 8 px right, right_upper_arm 8 px left, the forearms follow. 3) In win raise the upper arms less, about 55° from rest instead of 94°, and bend the forearms about 35° more so the hands still reach the height of the helmet. Check the top of win: the pads stay on the torso corners and no background shows between the pad and the body.
ひじと手を振る動きは、あと数行の短い指示で整えました（前腕を上腕より手前に描いてひじのリングで関節を隠す、曲げを小さくして手をヘルメットの横に収める、上げる角度を下げる）。もっと細かいことは、アニメのある瞬間を選んでマウスでボーンを回せば済みます。マウスでの修正は無料です。
この例で直したこと
ロボットは最初に試した絵ではありません。先にアライグマの盗賊を試し、分割はそれぞれ違う形で失敗しました。1 つ目は顔がゆがみ、頭の横に余計なほおが出ました。2 つ目は直線のふちを持つ四角いパーツになりました。そこで筆者がグリッドで各パーツを測ってぴったりの枠を渡すと、静止ポーズはきれいになりました。
ところが動かすとだめでした。腕をひじで分け、枠が肩とひじでぴったり終わっていたので、パーツが枠のふちに沿って直線で切れて戻ってきました。win で手を上げると、その直線のふちと胴体に残った腕のかけらが見えます。腕を丸ごと余白付きで切ると改善しましたが、ふち全体の毛並みと胸の前を横切る腕のせいで、肩に継ぎ目が残りました。そこで絵を替えました。
効いたこと：
- 公式 Spine サンプルのような絵。 はっきりした輪郭、丸い関節、体から離した手足。
- 枠はパーツ全体を関節と余白ごと含める。
- 手足は胴体の後ろに描く。 手足と体の境目が胴体の下に隠れます。
- ボーンは関節から始める。 肩なら体の輪郭の内側です。
書き出す前に、パーツを見て全部のアニメを再生してください。パーツがおかしければ分割前のバージョンに戻し、チャットでプランの枠を一覧にしてもらうか直してもらって、もう一度分割します。分割はやり直すたびに料金がかかります。
制限
- 隠れた部分は AI が描きます。 絵の細部が変わることがあるので、パーツと動きを確認してください。
- きれいに切れる絵とそうでない絵があります。 輪郭がはっきりして手足が体から離れていれば簡単です。長い毛や体の前を横切る腕は、関節をよく見る必要があります。
- 絵全体を一度に分割します。 1 パーツだけやり直すには、戻して絵全体をもう一度分割します。失敗した分割は無料ですが、プランの依頼は課金されます。
- 背景は無地か透明。 何もない背景は捨てられ、描かれた背景は一番下の背景パーツとして残ります。
- 長辺は短辺の 3 倍まで。 試したのは手描き風の絵で、ドット絵での分割はまだ試していません。
- Web アプリのみ。 ターミナルのチャットでは分割できません。
書き出しと次の一歩
書き出しは標準の Spine 4.2 JSON とアトラス、ページ画像です。Spine 4.2 の Import Data で書き出した images フォルダごと取り込むことも、そのままゲーム（Phaser 4、PixiJS 8、Unity）に読み込むこともできます。Spine ランタイムでゲームを出すには、スケルトンを誰が作ったかに関係なく、組み込み時点で Esoteric Software の Spine ライセンスが必要です。
レイヤー分けした PSD がすでにあるなら、分割は不要です。そこから始められます（モンスターの戦闘アニメ一式の例）。
手元のキャラ絵 1 枚で試してみたい方は、Riggy に登録すると、すぐにサンプルのプロジェクトで触れます。