スプライトシート作成ツールの使い方は？

1. 連番画像やアニメーションフレームをまとめて追加します。 2. 最大幅、パディング、CSS/JSONの座標データ形式を調整し、プレビューで確認します。 3. PNGスプライトシートと座標データを保存し、ゲームエンジンやCSSへ組み込みます。

スプライトシート作成ツールを使うメリットは？

「スプライトシート作成」「連番画像結合」の検索意図に合わせ、ゲーム素材の前処理を短縮します。. 最大幅とパディングを調整し、Unity、Godot、RPGツクール、CSSスプライト向けに配置できます。. CSSまたはJSONの座標データも同時に出力できます。. 未公開素材をアップロードせず、ブラウザ内でスプライト化できます。.

スプライトシート作成ツールは無料ですか？

はい、完全無料でご利用いただけます。ユーザー登録も不要です。ツールの処理はブラウザ内で完結し、入力内容やアップロードしたファイルはサーバーへ送信されません。サイト改善用の第一者集計では、Cookie、利用者ID、セッションIDを使わず、正規ページパスと固定イベントIDの日別件数だけを保存します。

スプライトシート作成ツール

📦

画像をここにドロップ

PNG・JPG・SVG など

設定

パディング (px)

画像間の隙間

最大幅 (px)

これを超えると改行します

データ形式

CSS JSON

スプライトシート作成ツールで出来る事

スプライトシート作成は、連番画像や2Dアニメーションフレームを1枚のPNGへ結合する無料ツールです。キャラクターの歩行、攻撃、エフェクト、UIアニメーションなど、複数の画像をゲームエンジンで扱いやすいスプライトシートやテクスチャアトラスにまとめられます。

最大幅とパディングを調整できるため、Unity、Godot、RPGツクール、CSSスプライトなどの読み込み仕様に合わせた出力が可能です。横幅を超える場合は自動で次の行へ折り返され、プレビューで配置と余白を確認できます。未公開ゲーム素材やクライアント素材も、外部サーバーへ送らずブラウザ内で処理できます。

CSS・JSON座標データの出力 画像としてのスプライトシートだけではなく、各フレームの `x` / `y` / `w` / `h` を持つJSON、または `background-position` 付きのCSSも出力できます。WebゲームやCSSスプライトではCSS形式、ゲームエンジンや自作ローダーではJSON形式を選ぶと、後続の実装へつなげやすくなります。

関連ツール フレーム画像のサイズをそろえる場合は [画像リサイズ](/image/image-resizer/)、不要な余白を切る場合は [画像切り抜き](/image/image-crop-tool/) が便利です。完成した連番フレームをアニメーション画像にしたい場合は [連番画像からAPNG・WebP作成](/image/image-sequence-to-apng-webp/)、軽量化したい場合は [画像をWebPに変換](/image/image-to-webp/) や [PNG→WebP変換](/image/png-to-webp/) も併用できます。

すべての処理はブラウザ内で完結し、入力内容やファイルはサーバーへ送信されません。登録不要・無料で、PCでもスマートフォンでもすぐに使えます。