スプライトシートジェネレーター

複数の画像を1つのスプライトシートに結合し、CSSコードを自動生成。

共有:

画像をここにドラッグ＆ドロップ

またはクリックして複数ファイルをアップロード

このツールを使う理由

フロントエンド最適化のための高効率ユーティリティ

Reduce HTTP requests and speed up loading.

1

自動座標生成

計算は当ツールにお任せ。統合されたスプライトシート内のすべての画像の正確なXおよびY座標を即座に取得。

2

スマートグリッドパッキングアルゴリズム

エンジンがさまざまなサイズの画像をインテリジェントに配置し、空きスペースを最小化して最終ファイルサイズを削減。

3

コピー＆ペースト対応CSSクラス

background-positionとdimensionプロパティを含む各アセットの個別クラスを持つクリーンなCSSブロックを生成。

4

カスタマイズ可能なレイアウトモード

垂直ストリップ、水平ストリップ、または最も効率的な「グリッド」モードをプロジェクトのニーズに応じて選択。

5

パディングとスペーシング制御

「ピクセルブリーディング」——隣接アイコンの一部がUIに誤って表示される現象——を防ぐカスタムスペーシングを追加。

6

ローカルメモリ処理

UIアセットはあなたの財産。すべてのパッキングとコード生成はブラウザ内で行われ、データがデバイスから出ることはありません。

高速アセットガイド：ジェネレーターの使い方

Create sprites in minimal steps.

1

小さなアセットを収集

結合したいすべての小さなアイコン、ボタン、アニメーションフレームを集めます。PNGなどの高品質フォーマットを推奨。

2

ツールにバッチアップロード

すべてのファイルを一度に選択してアップロード。ツールがパッキングのビジュアルプレビューを即座に作成します。

3

最適化を設定

Retinaスクリーンでのエッジ表示が気になる場合は「パディング」を調整するか、サイドメニュー用に「垂直」レイアウトを選択します。

4

スプライトプレビューを確認

生成されたシートを確認。すべてのアイテムが見え、グリッドが無駄なスペースなくタイトであることを確かめます。

5

アトラス画像をダウンロード

「スプライトシートをダウンロード」をクリックして、統合された画像ファイルをプロジェクトのアセットフォルダーに保存します。

スプライトシートマスタリー：ゲームアセット作成の秘密

HTTP/2でもスプライトシートはまだ有効ですか？
はい！HTTP/2は複数リクエストをよりうまく処理しますが、スプライトシートはメタデータと圧縮オーバーヘッドの総量を削減するため、依然として高速です。
異なるサイズの画像がある場合は？
当スマートグリッドアルゴリズムはまさにこのために設計されています！あらゆる形状とサイズの画像を可能な限りコンパクトな矩形に配置します。
スプライトシートにはJPGとPNGのどちらを使うべきですか？
PNGを強く推奨します。アイコンの「シャープなエッジ」をよりよく処理し、ほとんどのWeb UIで不可欠な透明度をサポートします。
含められる画像数に制限はありますか？
技術的にはありません。ただし、ファイルの寸法が過度に大きくならないよう、シートあたり50-100画像程度を推奨します。
「ピクセルブリーディング」とは何ですか？
サブピクセルレンダリングでシート内の隣接画像の一部が見えてしまう現象です。当ツールで1-2ピクセルの「パディング」を追加して防止できます。
SVGに対応していますか？
当ツールはラスタースプライト（PNG/JPG）用です。SVGの場合は、モダンブラウザで異なる方法で処理される「SVGスプライト」アプローチを使用してください。
スプライトシートを後から更新するには？
元のアイコンと新しいアイコンを再アップロードするだけです。当ツールが新しいシートと新しいCSSを数秒で提供します。
ゲーム開発者も無料で使えますか？
はい！Webサイトでもモバイルゲームでも、当ジェネレーターは100%無料で商用制限はありません。
ブラウザはスプライトシートをキャッシュできますか？
はい！これが最大の利点の1つです。ブラウザは1つのファイルをキャッシュするだけで、サイトのすべてのページのすべてのアイコンを即座に利用可能にします。
独自のアイコンデータは安全ですか？
完全に安全です。ファイルはブラウザ内でローカルに処理されるため、デザインがアップロード、保存、閲覧されることは一切ありません。