スプライトシート生成

連番フレームを1枚に合成し、CSS/JSONのフレーム定義を同梱。

ツール概要

Webやゲームで使いやすいスプライトシートを生成し、座標定義(JSON/CSS)も一括出力します。

使い方

  1. 同一寸法のフレームをドロップ。
  2. 行・列、パディング、順序(row-major/column-major)を設定。
  3. 出力形式(PNG/WebP)や圧縮率を選び、CSS/JSONと保存。
  4. フレーム名の接頭辞や採番ルールを設定(任意)。

活用例

  • CSSアニメーション用のアイコンスプライト。
  • 2Dゲームの歩行/攻撃などの連番を一枚化。
  • LottieやAPNGの代替として軽量なループ表現。

ポイント・知識

  • スプライト化でHTTPリクエスト削減。
  • 透明余白を詰めるとファイルサイズが縮小。
  • アニメ速度はCSS steps()やJSタイマーで制御。

関連ツール