スプライトシート + JSON
フレームの配置情報を記したJSONと、各フレームを並べたPNG画像です。
AIスプライトシート作成ツール
画像や動画からゲーム用スプライトシートを作る
AnimGenはキャラクターアニメーション向けのスプライトシート作成ツールです。元画像から動きを生成するか、対応動画を読み込み、使うフレームを選んで、JSON付きPNGシートやエンジン向けファイルを書き出せます。
実際の書き出し結果
アップロード前に実際の16フレームシートを確認
自社素材から作ったこの4 × 4のPNGは、4.00秒の元動画から選んだ1.292秒の区間を抽出したものです。各セルは384 × 384ピクセル、再生目安は12 fps。対応するJSONフレーム情報も実例ページで確認できます。
- 透明な16フレーム
- 4 × 4の配置
- 1536 × 1536のPNG
- 1フレーム384 × 384
制作フロー
確認した動きからシートを作る
生成、区間編集、フレーム抽出、ファイル作成をそれぞれ確認できる工程に分けます。必要な動きだけを最終的なシートに収められます。
- 1
元素材を選ぶ
新しい動きが必要ならキャラクター原画をアップロードします。既存のMP4、WebM、MOV動画も読み込めます。
- 2
動きを生成または読み込む
画像から動画プレビューを作るか、対応するアニメーション動画をワークスペースで直接開きます。
- 3
切り出してフレームを選ぶ
使う区間を指定して1フレームずつ確認し、動きを表すフレーム数を選びます。
- 4
ファイルを書き出す
JSON付きスプライトシート、個別のPNGフレーム、またはエンジン向け素材パックをダウンロードします。
手元の素材から始める
1つのツールで、画像と動画の2つの入口
書き出しの流れは共通です。最初の手順だけ、キャラクターに新しい動きが必要か、既に動画があるかで変わります。
フレームと配置を調整
シートに入れる動きを自分で選ぶ
まず動きを確認し、次に区間、フレーム数、サイズ、処理方法、ファイル形式を選びます。生成設定と書き出し設定は別々に扱えます。
- 開始点と終了点を指定し、不要な導入や終了動作を除きます。
- 選択範囲を1フレームずつ確認し、繰り返す動きはループ再生で確かめます。
- 書き出しジョブを始める前にフレーム数とサイズを選びます。
- 元動画の背景が適している場合に限り、色の抜き取りやマッティングを利用します。
選択したフレームスプライト配置 · PNG + JSON
書き出し形式
ゲーム制作に合うファイルを使う
同じ書き出しで複数形式を選べます。制作プロジェクトに追加する前に、ダウンロードしたファイルと透過部分の輪郭を確認してください。
PNG連番ZIP
ツールやエンジンで画像を個別に使いたい場合は、各フレームのPNGをZIPにまとめて取得できます。
エンジン向けパック
Unity、Godot 4、Unreal Paper2D、Cocos Creator向けのスプライト素材と取り込み情報です。
スプライトシート作成の質問
AIスプライトシート生成ツールですか？
AnimGenは原画から動きのプレビューを生成できます。ただし、確認工程は省きません。使う区間と書き出し設定を選んだ後に最終的なシートを作ります。
自分の動画からシートを作れますか？
はい。現在のWeb制作フローはMP4、WebM、MOVの読み込みに対応します。ただし、ファイル内部の映像形式をブラウザーが再生できる必要があります。
JSONフレーム情報も含まれますか？
はい。スプライトシートの書き出しにはPNGと配置を示すJSONが含まれます。個別PNGやエンジン向けパックも選べます。
背景を透過したスプライトを書き出せますか？
適した元動画なら、書き出し時に任意の色抜きやマッティングを利用できます。結果は素材によって変わるため、制作で使う前に細部、影、ぼけ、輪郭を確認してください。