アニメーションスプライトシート 完全ガイド

このガイドでは「アニメーションスプライトシート」ツールの4ステップを、オプションひとつずつ詳しく解説します。初めての方は、まずクイックスタートで全体の流れをつかむことをおすすめします。

ステップ1 — アップロードと切り抜きの調整

画像を上げると、元画像・背景除去済みの切り抜き・グリーンスクリーンの3つが並んで表示されます。切り抜きが完璧でない場合は「キャラクターディテール保護」スライダーを調整してください — キャラクターの一部が消えたら上げ、背景の残りがあれば下げます。「編集」ボタンでマジックワンド(似た色の領域を一括削除)、復元ブラシ(消えた部分を復元)、消しゴム(残りカスを手動削除)の3ツールが使えます。

ステップ2 — プロンプトと生成オプション

モーションプリセット6種(待機・歩行・斬撃・ジャンプ・詠唱・被弾)は実績のあるプロンプトを自動入力します。自分で書く場合は動きを具体的に記述し、「green screen background」を残してください。解像度(480pは無料、720p/1080pは有料プラン)、アスペクト比、余白(大きな動きがフレーム外に切れないように)、位置(攻撃方向にスペースを確保)を設定できます。スプライトに音声は不要なので「オーディオ生成」はオフにするとクレジットの節約になります。

ステップ3 — フレーム抽出とキーフレーム戦略

抽出フレーム数(8〜全部)を決めて「抽出・分析」を押します。選択戦略は2つ — 「特徴的」はポーズ差の大きいフレームを優先(攻撃のような緩急のある動きに)、「均等」は時間間隔で均等に選択(歩行のような一定のループに)。下のグラフはフレームごとのモーション強度を示し、サムネイルをクリックして手動で追加・削除もできます。ループが跳ねる場合は、始点と終点のポーズが似たフレームを選ぶのがコツです。

ステップ4 — グリーン除去と透過処理

「選択フレームの背景除去」は選択したフレームだけを透過PNGにキーイングします。緑が残る場合は「グリーン除去強度」を上げ、キャラクターの輪郭が削れる場合は下げてください。1フレームだけ問題があるなら、フレームエディタを開いてそのフレームだけワンドや消しゴムで整えられます。

レイアウト調整と書き出し

列数(横の配置数)、フレーム間隔、フレーム幅(128/256/512/オリジナル — 大きいサイズは有料プラン)を決め、「余白トリミング」をオンにするとキャラクター周りの空白が切り詰められます。「スプライトシート生成」後、PNG・フレームZIP・メタデータJSON(フレームサイズ、列×行、間隔)をダウンロードできます。JSONはUnityやGodotのスライス設定にそのまま使えます。

クリック移動テスト

書き出す前に「クリック移動テスト」で結果をゲームのように確認しましょう。タイルをクリックするとキャラクターが移動し、左右も自動で反転します — 歩行ループが自然かどうかをこの画面ですぐ判断できます。