Sprite Sheet Generator
📦
画像をここにドロップ
PNG・JPG・SVG など
設定
画像間の隙間
これを超えると改行します
生成結果
スプライトシート作成ツールで出来る事 About Sprite Sheet Generator
スプライトシート作成は、連番画像や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でもスマートフォンでもすぐに使えます。 Sprite Sheet Maker combines sequential PNGs and animation frames into a single sprite sheet or texture atlas. It is useful for walk cycles, attack animations, effects, UI animation, and any 2D game asset that needs to be imported as one image.
Adjust max width and padding to match Unity, Godot, Phaser, RPG Maker, or CSS sprite requirements. Frames wrap to the next row when the configured width is exceeded, so you can preview spacing before exporting PNG and keep unreleased game assets or client artwork local in your browser instead of uploading them. Unity and Godot projects can use the exported PNG as a texture atlas and pair it with JSON coordinates in custom import scripts, while Phaser and web projects can use the CSS or JSON output depending on the loader you prefer.
**CSS and JSON Coordinate Data** Along with the PNG sprite sheet, the tool can export either JSON frame coordinates (`x`, `y`, `w`, `h`) or CSS rules with `background-position`. Use CSS for web sprite workflows and JSON for game engines, custom loaders, or build scripts. The generated CSS class names are based on source file names, and the JSON keys keep the original file names, which makes it easier to map animation frames back to your asset folder.
**Related Tools** Resize source frames with [Image Resizer](/en/image/image-resizer/), crop extra margins with [Image Crop Tool](/en/image/image-crop-tool/), make APNG/WebP animations from frame sequences with [Image Sequence to APNG/WebP](/en/image/image-sequence-to-apng-webp/), or reduce exported assets with [Image to WebP](/en/image/image-to-webp/).
Everything runs locally in your browser, so your text, numbers, or files are not uploaded to a server. No account is required, and the tool is free to use on desktop or mobile.
スプライトシート作成ツールの使い方 How to use Sprite Sheet Generator
- 連番画像やアニメーションフレームをまとめて追加します。
- 最大幅、パディング、CSS/JSONの座標データ形式を調整し、プレビューで確認します。
- PNGスプライトシートと座標データを保存し、ゲームエンジンやCSSへ組み込みます。
- Add sequential images or animation frames.
- Adjust max width, padding, and CSS/JSON coordinate format while checking the preview.
- Export a PNG sprite sheet and coordinate data for a game engine or CSS sprite workflow.
スプライトシート作成ツールを使うメリット Benefits of Sprite Sheet Generator
- 「スプライトシート 作成」「連番画像 結合」の検索意図に合わせ、ゲーム素材の前処理を短縮します。
- 最大幅とパディングを調整し、Unity、Godot、RPGツクール、CSSスプライト向けに配置できます。
- CSSまたはJSONの座標データも同時に出力できます。
- 未公開素材をアップロードせず、ブラウザ内でスプライト化できます。
- Speeds up sprite sheet and animation-frame packing workflows for searched game-dev tasks.
- Supports max-width and padding layout tuning for Unity, Godot, Phaser, RPG Maker, and CSS sprite use cases.
- Exports CSS or JSON coordinate data along with the PNG sheet.
- Keeps unreleased art local by processing frames in the browser.
他のカテゴリ Other Categories
PDF Tools 
Text Tools 
Audio Tools 
Video Tools 
Calculators 
Business Documents 
Design Tools 
Other Image Tools の人気ツール TOP 10 Popular Image Tools Tools TOP 10
Image Tools のすべてのツール (65件) All Image Tools Tools (65)
該当するツールが見つかりませんでした No matching tools found