ドット絵の猫の歩きモーション
GIFをスプライトシートにして、6フレームを横一列に並べました。多くのゲームエンジンがそのまま読み込める並べ方です。
GIFスプライトシート変換：全フレームを1枚のPNGに
アニメーションGIFをドロップするだけで、全フレームを1枚のスプライトシートPNGに並べ、JSONアトラスとCSSアニメーションも作れます。この無料のGIFスプライトシート変換ツールは、アニメーションWebP・PNGや短い動画にも対応し、すべてブラウザーで完結します。
GIFをスプライトシートに無料・ブラウザーで動作
GIFをここにドロップ
アニメーションGIF・WebP・PNG、または短いMP4・WebM動画。処理はすべてブラウザー内で行います。
- 無料、ブラウザーで完結
- GIF・WebP・PNG・動画
- 行・列・余白を自由に
- PNG・JSONアトラス・CSS
GIFスプライトシート変換の作例
この作例のために作った8つのアニメーションを、このページでGIFをスプライトシートに変換しました。開くと、すべての設定を試せます。
羽ばたく青い鳥
4フレームを2のべき乗サイズ（1024 × 1024）のシートに。このサイズを求めるゲームエンジン向けです。
揺らめくたいまつ
6フレームを半分のサイズにした小さなシート。タイルで組み立てるゲームにぴったりです。
読み込み中のスピナー
8フレームを正方形のシートに並べ、そのままCSSの読み込みアニメーションに使えます。
ふわふわ浮かぶおばけ
4フレームを縦一列に。シートを上から下へ再生するゲームエンジン向けです。
鼓動するハートのアイコン
4フレームに4pxの余白をつけ、どのフレームも端まできれいに保ちました。
手を振るロボット
4フレームを横一列に並べ、フレームの間に4pxの間隔を空けました。
ロケットの噴射炎
揺らめく炎の4フレームを、正方形に近いシートに並べました。
GIFをスプライトシートに変換する方法
3ステップでGIFスプライトシートが完成。何もアップロードされません。
アニメーションGIF・WebP・PNG、または短いMP4・WebM動画をドロップ、貼り付け、または選択します。どのフレームもお使いの端末の中で読み込みます。
全フレームか一部の範囲を残し、数枚おきに間引いたり、同じフレームの繰り返しを除いたりしてから、列数、余白、間隔、フレームのサイズを設定します。
スプライトシートPNG、各フレームの表示時間を記録したJSONアトラス、CSSアニメーション、またはフレームごとのPNGをまとめたZIPを保存できます。
このスプライトシート変換ツールの強み
ドット絵の歩きモーションからWebの読み込みアニメーションまで、GIFをスプライトシートに変換するときに得意な6つのことです。
- アニメーション
GIF・WebP・PNG・短い動画
アニメーションGIF、アニメーションWebP・PNG、または短いMP4・WebM動画を開けます。フレームはビューアーで表示されるとおりに読み込むので、重ねて描かれたGIFのフレームも1枚ずつ完全な絵で取り出せます。
必要なフレームだけを
範囲を指定し、2枚や3枚おきに間引き、同じフレームの繰り返しを除けます。間引いたフレームの表示時間は前のフレームに加わるので、アニメーションの速さはそのままです。
どのゲームエンジンにも合うレイアウト
正方形に近く、横一列、縦一列、または好きな列数に並べ、余白、間隔、2のべき乗サイズも指定できるので、どのGIFスプライトシートもお使いのエンジンにぴったり合います。
JSONアトラスとCSSアニメーション
JSONアトラスには、PhaserやPixiJSが読み込める形式で各フレームの位置と表示時間が記録されます。CSSファイルを使えば、どのWebページでもシートを再生できます。
フレームのサイズとドット絵
フレームを4分の1や半分に縮めて小さなシートにしたり、ドット絵をピクセルをくっきり保ったまま2倍や4倍に拡大したりできます。シートのサイズはダウンロード前に表示されます。
無料でプライベート
すべてブラウザーの中で動作します。アップロードもアカウント登録も不要で、ウォーターマークも入らず、ページを読み込んだあとはオフラインでも使えます。
ガイド：GIFをスプライトシートにきれいに変換するコツ
GIFをスプライトシートに変換して、きれいなシートを作るための5つのヒントです。
エンジンが読み込むレイアウトを選ぶ
「横一列」は多くのアニメーションツールやCSSに合います。「正方形に近く」なら大きなアニメーションもテクスチャサイズの上限内に収まり、「縦一列」はシートを上から下へ読むゲームエンジンに合います。
フレームを絞り込む
「開始フレーム」と「終了フレーム」で1ループ分だけを残し、「間引き」で長いアニメーションを半分にします。「同じフレームの繰り返しを除く」をオンにすると、GIFが同じフレームを重ねて作っている静止部分を取り除けます。
余白と間隔
ゲームでフレームを拡大・縮小するなら、1〜4pxの余白をつけると、隣のフレームが端に映り込まずきれいに表示されます。「間隔」はセルの間にすき間を空け、編集しやすくします。
シートのサイズを確認する
サイズはシートの下に表示されます。スマホ向けには、フレームのサイズを小さくするか列を増やせば、各辺を4,096px以内に収められます。ゲームエンジンが求めるなら「サイズを2のべき乗に」をオンにします。
アトラスやCSSを使う
PNGとJSONアトラスをゲームエンジンに読み込めば、各フレームを名前と表示時間で扱えます。Webサイトでは、CSSファイルを読み込み、要素にそのクラスを指定します。
GIFのスプライトシート化はこんな方に
GIFをスプライトシートに変換するよくある理由です。
ゲーム開発者
アニメーションGIFや動画クリップを、名前つきのフレームを持つ1枚のテクスチャとしてゲームエンジンに取り込めます。
Webデザイナー
重いGIFを、1枚のPNGと短いCSSアニメーションに置き換えられます。
UI・アプリ制作者
読み込み中のスピナーやアイコンのアニメーションを、アプリや画面用のシートにできます。
アニメーター・MOD制作者
アニメーションの全フレームを1枚のシートに集め、編集、共有、MOD制作に使えます。
GIFスプライトシート変換のよくある質問
アニメーションのスプライトシート化、ファイル、プライバシーについての回答です。
GIFを開き、フレームと列数を選んで、スプライトシートPNGをダウンロードします。必要ならJSONアトラスやCSSも保存できます。
はい。すべてブラウザーで動作し、アカウント登録は不要で、ウォーターマークも入りません。
いいえ。アニメーションの読み込みもシートづくりもお使いの端末で行われ、サーバーには何も送られません。
はい。アニメーションWebP・PNGはChrome、Edge、Safariで開け、短いMP4・WebM動画は1秒あたり12フレームで読み込みます。
各フレームの表示時間はJSONアトラスとCSSに記録されます。間引いたフレームの時間は前のフレームに加わるので、1ループの長さは元のGIFと同じです。
アニメーションには「横一列」が最も一般的です。「正方形に近く」なら長いアニメーションもコンパクトにまとまり、「縦一列」はシートを上から下へ読むゲームエンジンに合います。
JSON Hash形式は、Phaser、PixiJSをはじめ多くのゲームエンジンやツールで読み込めます。各フレームの名前、シート上の位置、表示時間が記録されています。
はい。「フレーム（ZIP）」で、残したフレームをそれぞれPNGとして、順番どおりの名前と番号つきで保存できます。