スプライトシートジェネレーター
画像をスプライトシートに結合、ドラッグで並べ替え、グリッドレイアウト、パディング、スケールモード。PNG/WebP/JPGとJSONアトラスデータでエクスポート、ゲームエンジンやCSSスプライトに最適。
スプライトシートとは何ですか？なぜ使うのですか？
スプライトシートは、グリッドに配置された複数の小さな画像（スプライト）を含む単一の画像ファイルです。HTTPリクエストを削減し、ページ読み込みパフォーマンスを向上させ、ドローコールをバッチ処理してゲームレンダリングをより効率的にします。
どの画像形式がサポートされていますか？
PNG、JPG、GIF、SVG、WebP画像をアップロードできます。ツールはバッチアップロードとクリップボードからの貼り付け（Ctrl+V）をサポートし、迅速なワークフローを実現します。
どのエクスポート形式が利用できますか？
スプライトシートをPNG（透明度あり）、WebP（ファイルサイズが小さい現代的な形式）、またはJPG（透明度なしの写真に最適）としてエクスポートできます。ターゲットプラットフォームの要件に応じて選択してください。
スプライトシートで画像を並べ替えるには？
画像サムネイルをドラッグアンドドロップして、スプライトシートでの位置を並べ替えます。Ctrl+Vを使用してクリップボードから直接画像を貼り付けることもできます。
JSONアトラスデータとは何ですか？どのエンジンがサポートしていますか？
JSONアトラスデータは、各スプライトの位置、サイズ、フレーム情報を含みます。Phaser、PixiJS、Unity、Cocos2dなどの人気のあるゲームエンジンと互換性があり、自動スプライト抽出が可能です。
異なるスケールモードには何がありますか？
フィットモードはアスペクト比を維持して画像をスケーリングします。フィルモードは全体を覆い、はみ出しを切り取り。ストレッチモードは縦横比を無視して引き伸ばし。
ツールは透明度をサポートしていますか？
はい、PNGとWebPのエクスポートは元の画像の透明度を保持します。スプライトシートのカスタム背景色を設定することもでき、透明度をサポートしないJPGエクスポートに役立ちます。
パディングはスプライトシートにどのように影響しますか？
パディングは、シート内の個々のスプライト間にスペースを追加し、テクスチャがサンプリングされる際の視覚的な bleeding を防ぎます。これは、線形フィルタリングを使用するゲームエンジンや、スプライトに透明なエッジがある場合に特に重要です。
CSSにスプライトシートを使用できますか？
はい、スプライトシートはCSSイメージスプライトに最適です。JSONアトラスデータを使用してCSS background-positionルールを生成でき、HTTPリクエストを削減し、アイコンセットやUI要素のページ読み込みパフォーマンスを向上させます。
スプライトシート寸法のベストプラクティスは何ですか？
最適なGPUテクスチャ処理のために、寸法を2の累乗（256x256、512x512、1024x1024）に保ちます。ほとんどのゲームエンジンは、より良いパフォーマンスと互換性のためにこれらの寸数を好みます。
スプライトシートはゲームパフォーマンスをどのように向上させますか？
スプライトシートは、複数のスプライトを単一のテクスチャにバッチ処理することでドローコールを削減します。これにより、GPU状態の変更が最小限になり、メモリオバーヘッドが削減され、より効率的なレンダリングが可能になります。
スプライトシートとテクスチャアトラスの違いは何ですか？
スプライトシートは通常、フレームを均一なグリッドに配置しますが、テクスチャアトラスはbin packingなどのアルゴリズムを使用して不規則な形状のスプライトをより効率的にパックできます。
スプライトシートジェネレーターの使い方
ブラウザ上で複数の画像を 1 枚のスプライトシートにまとめられます。ドラッグでフレームを並べ替え、グリッドや余白を細かく調整し、ゲームエンジンや CSS スプライト向けの JSON アトラス付き PNG/WebP/JPG を書き出せます。処理はすべてローカルで行われます。
- 画像を追加し、+ と − ボタンでグリッドの Columns（列数）と Rows（行数）を設定します。
- Padding (px) を設定してスプライト間に余白を作り、テクスチャの滲みを防ぎます。
- Sprite Size を Auto のままにすれば最大フレームに合わせられ、固定サイズを入力すれば全セルが揃います。
- Scale Mode で Fit、Fill、Stretch を選び、各画像のセル内での収まり方を制御します。
- Background を Transparent・White・Black・Custom から選び、Format を PNG・WebP・JPG に設定し、Filename でファイル名を決めます。
- サムネイルをドラッグしてフレームを並べ替えるとアトラス座標が自動更新されます。あとは JSON アトラス付きでシートを書き出しましょう。
余白は 2 px 以上確保しましょう。エンジンでテクスチャを拡大縮小・フィルタリングしたときに、隣接スプライトの滲みを防げます。
関連ツール
- Chmod 計算機 無料オンラインchmod計算機でチェックボックス付きLinuxファイル権限を視覚化・計算。数値(755, 644)とシンボリック表記(rwxr-xr-x)を即座に変換。setuid、setgid、sticky bit等の特殊権限に対応。
- ASCIIコード表 10進数、16進数、8進数、2進数コード、HTMLエンティティ、文字説明を含む完全なASCII文字エンコーディングリファレンス。即座に検索・フィルタリング。
- HTTPリクエストテスター ブラウザで直接REST APIをテスト。カスタムヘッダー、ボディ、クエリパラメータでGET、POST、PUT、DELETEリクエストを送信。レスポンスのステータス、ヘッダー、JSONボディを即座に確認。
- .htaccessジェネレーター Apache .htaccessルールを生成します。リダイレクト、リライト、セキュリティヘッダー、キャッシュなど。
- Robots.txtジェネレーター 無料オンラインrobots.txtジェネレーター。robots.txtファイルを作成・カスタマイズして検索エンジンのクロールを制御、クローラーアクセスを管理、サイトのSEOを最適化します。
- サイトマップジェネレーター 無料オンラインXMLサイトマップジェネレーター。URL追加、優先度・頻度設定、SEOに優れたサイトマップを即座に作成。
- GIFフレーム分割 GIFアニメーションから個別フレームをPNGまたはスプライトシートとして抽出・ダウンロード。プレビューとZIPエクスポート対応の無料オンラインツール。
- GIF逆再生 GIFアニメーションの再生順序を無料で逆転。アップロード、プレビュー、即座にダウンロード。