スプライトシート作成
Sprite Sheet Packer
多数の画像を1枚のアトラスに詰め、対応するCSSかJSONの座標表を一緒に書き出します。
アトラス1枚と、それを使えるものにする座標です。フレームの対応表がないスプライトシートは、ただのアイコンの写真だからです。パッカーは充填率を報告します。そのアトラスに持つ値打ちがあるのかを教えてくれる数字が、それです。
まとめたいアイコンを置いてください
アトラス1枚と、それを使えるようにするフレームマップを作ります。
使い方
アイコンを置きます
ファイル名がそのままスプライトの名前になり、CSSのクラス名やJSONのキーになります。
隙間は最低2ピクセル空けます
シートを拡大縮小して描いたり、バイリニアで補間したりしたときに、隣のスプライトがにじみ込むのを止めるのがそれです。アイコンの端に出る、誰にも説明できないあの線です。
対応表の形式を選びます
JavaScriptが要らないのはCSSだけです。JSONはTexturePackerのhash形式に従うので、よく使われるゲームエンジンならそのまま読めます。
素材が@2xならピクセル比を設定します
対応表の数値をすべて割るので、CSSがデバイスピクセルではなくCSSピクセルを記述するようになります。
よくある質問
充填率とは何のことですか
アトラスのうち、空白ではなくスプライトである割合です。半分を切るあたりからは、形の大きく違うスプライトを詰め込もうとして負けており、大量の透明部分をダウンロードさせていることになります。2枚に分けるほうが、たいてい勝ちます。
HTTP/2でもスプライトシートを使うべきですか
ウェブでは、たいてい使わないほうがいいです。アトラスを正当化していたリクエストの費用はほぼ消えましたし、SVGスプライトや個別ファイルのほうが手入れしやすくなります。canvasやWebGLのゲームでは今も正解です。テクスチャのバインド1回は、50回に勝ちます。
アトラスの大きさが2の累乗でないのはなぜですか
場所を食いますし、いまのGPUの多くは必要としないからです。ミップマップを作るときや古いテクスチャ経路を相手にするときは、無駄になる面積を受け入れたうえで設定を入れてください。
ここから渡せます
画像の分割
Image Splitter
1枚の画像をN×Mの格子か一定の高さで切り分け、断片をzipにまとめます。
ドット絵エディタ
Pixel Art Editor
ドットの格子に鉛筆・塗りつぶし・消しゴム・スポイト・パレット・左右対称で描き、写真を減色して読み込み、整数倍のPNGかSVGで書き出します。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
JPEG圧縮
JPEG Compressor
指定した画質でJPEGを再エンコードし、前後の容量と差分をその場で見せます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
画像リサイズ
Image Resizer
ピクセル・パーセント・長辺の目標値で大きさを変え、縦横比の固定と一括処理のプリセットを備えます。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。