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

レイアウトの仕組み

生成ツールは予測しやすい単一のレイアウト、均等なグリッドを使います。列数を指定すると、行数は 切り上げ(画像数 / 列数) になります。各セルは同じ正方形サイズ（選んだタイルサイズ）なので、各画像はアスペクト比を保ってセルに収まるよう拡大縮小され、中央に配置されます。サイズの異なる画像もすべて同じ大きさのセルに収まり、これはbackground-positionを使うCSSスプライトがまさに期待する形です。

出力されるCSSの形

各画像はファイル名を冠したクラス（.spr-<名前>）になり、タイルサイズに合わせて自分のセルへオフセットされます。列4、タイルサイズ128 px、余白なしの場合、シートは次のようになります。

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

オフセットは2方向に動きます。スプライトは各行を左から右へ埋め、次の行へ折り返します。PNGはCSSの隣に spritesheet.png として保存してください（またはパスに合わせて url(...) を編集してください）。

余白とにじみ

端どうしを隙間なく詰めたスプライトは、ブラウザがシートを拡大縮小するとき（非整数のピクセル比、CSS変換）に互いへにじむことがあります。隣のピクセルが漏れ込まないよう、セル間に2〜4ピクセルの余白を加えてください。

高精細（Retina）ディスプレイ

自動の2xエクスポートはありませんが、より鮮明なシートは簡単に作れます。各スプライトがより多くのピクセルを持つよう大きめのタイルサイズを選び（例: 128 pxの代わりに256 px）、CSS上では半分のサイズで表示します。これで別の工程なしに高精細ディスプレイでも鮮明なスプライトが得られます。

スプライトシートと代替手段

• スプライトシート: CSSでの古典的なアイコンセット、HTML5ゲームのフレーム、多数の小さな画像を1ファイルにまとめると有利なページ。
• SVGスプライト（symbol）: 現代的なUIアイコンに向き、劣化なく拡大縮小でき、CSSの fill を受け付け、background-position に悩まずに済みます。
• アイコンフォント: 制限はありますが、ごく小さな単色アイコンには今も使われます。
• HTTP/2やHTTP/3での個別ファイル: 多重化により、リクエスト数の重要性は以前ほどではなくなりました。