スプライトシート生成
複数の画像を、CSS、SCSS、JSON座標付きの1つのスプライトシートにまとめる
👇 下へスクロールして簡単な手順を見る
ここにスプライトをドロップ
または任意の場所をクリックしてファイルを選択
PNGJPGWEBPGIF
生成済み CSS
画像をアップロードしてコードを生成
CSSクラスとJSON座標がここに表示されます
次を使い始める前に スプライトシート生成
ブラウザー内で、余白設定とCSS、SCSS、JSON座標出力を使い、複数の画像をスプライトシートへ配置します。
最適な用途
- 個別のゲームフレームやUIアイコンを1つのPNGアトラスにまとめる
- シートとともにCSS、SCSS、JSON座標を生成
- ブラウザー内で、単純な棚詰め配置のシートを直接作成
開始前に知っておくこと
- 画像は行単位で配置され、汎用のビンパッキング最適化ではありません
- 余白と倍率の選択が、最終シート寸法に影響します
- すべての画像をデコードする間、大量処理はブラウザーのメモリを使います
スプライトシート生成の使い方
1画像を追加
- • 「画像を追加」を押すか、スプライト画像をドラッグ＆ドロップ
- • PNG、JPG、JPEG、WebPに対応
- • 使用 自動最適化 自動最適化用
2キャンバスを設定
- • キャンバス： 寸法を設定（カスタム／最大モード）
- • リサイズ： 割合スライダーでスプライトを拡大縮小
- • 間隔： スプライト間の余白を調整
3コードを生成
- • 形式： CSS、SCSS、JSONから出力を選択
- • 命名： スプライトの命名パターンを設定
- • 並べ替え： サイズまたは名前で並べ替え
4素材をダウンロード
- • 「PNGをダウンロード」でスプライトシート画像を保存
- • 「コードをダウンロード」でCSS／JSON座標を保存
- • 「消去」で新しいスプライトからやり直す
主な機能：
余白設定付きの行配置
配置前にスプライトをリサイズ
CSS、SCSS、JSON出力
ブラウザー内で動作、アップロードなし
スプライトシート生成のよくある質問
スプライトシート生成は何をしますか？
個別の画像ファイルを1枚のアトラス画像へまとめます。関連スプライトをまとめると素材を配布しやすくなり、生成した座標はCSSやゲームのコードへ、シート内の各スプライトの場所を伝えます。
書き出せるコード形式は？
PNGスプライトシートと一緒にCSS、SCSS、JSONの座標データを生成できます。JSONにはフレームの位置と寸法が含まれるため、ゲームエンジンやアプリが必要とする素材形式に合わせて変換できます。
画像はサーバーにアップロードされますか？
いいえ。ブラウザー内で画像をデコードして配置します。元ファイルや生成シートは、ImageMintのアップロードサーバーに送りません。
スプライトアトラスで余白が重要なのはなぜですか？
余白は隣のスプライトとの間に空間を残します。分離が不十分だと、テクスチャフィルターや拡大縮小した描画が近くのスプライトを読み、端に色がにじみます。
関連するスプライトの作業手順
既存のアトラスを個別フレームに戻すには、こちらを使います： スプライトシートスライサー 。この スプライトアトラスのパッキングガイド 余白と縁のにじみを説明します。エンジン別の続きは Unityインポートガイド および Godot取り込みガイド.