無料で利用でき、アカウントは不要です。1回に1つのGIFから作成でき、PNGに新たな透かしは追加しません。元のアニメーションに写っている透かしは、その画像の一部として残ります。
GIFをスプライトシートに変換
GIFの全フレームを1枚のPNGにまとめます。配置、間隔、拡大縮小率を選び、完成後にプレビューしてダウンロードできます。
GIFをスプライトシートに変換し、全フレームを1枚のPNGに
保存済みのGIFから、アニメーションの全フレームを並べたPNGを作成できます。このスプライトシート作成ツールでは、グリッド・横一列・縦一列の配置を選び、フレーム間隔と拡大縮小率を調整します。出力は静止画像なので、使うソフト側で各コマを切り出して利用してください。
元の動きを素材として再利用したいときは、使いたいコマが入ったGIFを1つ用意します。スプライトシート（sprite sheet、spritesheet）は、複数の画像を等しい大きさのセルにまとめたものです。元の並び順を保ち、GIF内に保存されている同じ絵のフレームも省略しません。
GIFからスプライトシートを作成する手順
1
GIFを1つ選んでアップロード
端末に保存した25 MB以下のGIFを選択します。選ぶとアップロードが始まるので、完了を待ってから作成してください。
2
配置とフレームの大きさを設定
グリッド・横一列・縦一列から選びます。グリッドの列数は自動、または指定列数に切り替えられます。必要に応じて、間隔と拡大縮小率のスライダーも動かしてください。
3
作成結果を確認してPNGをダウンロード
「スプライトシートを作成」を押すと、サーバーで変換が始まります。完成後にプレビューを確認し、PNGをダウンロードします。アップロード済みの同じGIFを、設定を変えて再変換することもできます。
グリッド・横一列・縦一列の使い分け
配置によって、完成するPNGの縦横の形が変わります。使用先の切り出し方法と、読み込める画像サイズに合わせて選びましょう。
| 配置 | 向いている使い方 | 確認する点 |
|---|---|---|
| グリッド | 複数行にまとめてフレームを一覧にする。 | 自動で列数を決めるか、1〜240列を指定できます。 |
| 横一列 | 横長のスプライトストリップとして使う。 | フレーム数が多いと、PNGの横幅が大きくなります。 |
| 縦一列 | フレームを縦方向に並べて使う。 | 読み込み先が扱える画像の高さを確認してください。 |
グリッドでは左から右へ、次に上の行から下の行へ並びます。どの配置でもフレームの順序は同じで、配置の変更によってコマが削除されることはありません。
使う場所に合わせてスプライトシートを調整
列数を自動で決めるか、指定するか
自動配置では、フレーム数と縦横のサイズをもとにグリッドを組みます。1行あたりのコマ数が決まっている場合は、指定列数を選んでください。
たとえば64 × 64ピクセルのフレームが8枚あり、3列・間隔2 px・倍率100%で並べると、196 × 196ピクセルのPNGになります。最後の1セルは空きとなり、透明のまま残ります。
フレーム同士の間隔
間隔は0〜32ピクセルで指定できます。初期値は0で、隣のセルと隙間なく接する配置です。値を増やすと、セルの間に透明な余白が入ります。
画像の外周には余白を追加しません。別のソフトで切り出すときは同じ間隔を指定し、隣のコマの一部まで選択しないようにしてください。
フレームの拡大縮小は50%〜200%
倍率のスライダーは各フレームの幅と高さを変えます。50%〜200%の整数値を選択でき、100%では元の寸法を使います。
拡大縮小には最近傍法を使い、ピクセルの境界をぼかさずに処理します。ただし縮小で細部が失われる場合があり、拡大しても元の画像にない情報は増えません。
GIFをスプライトシートにすると何が変わる？
GIFは、毎回すべての画面を保存せず、変化した部分だけを持つことがあります。この変換では表示状態を合成してから、完全なフレームを同じ大きさのセルに配置します。元の透明ピクセルは透明のまま、不透明な背景は画像の一部として残ります。
GIFに保存されている各フレームを1回ずつ並べ、同じ絵のコマも残します。PNGにアニメーション再生や各コマの表示時間は含まれません。変換前に不要な縁を取り除きたい場合は、GIF切り抜きツールで編集したGIFを用意してください。
スプライトシートをアニメーションに使うには
このツールはGIFからスプライトシートを生成します。完成したPNGを画像編集ソフトやゲームエンジンに読み込み、セルのサイズと間隔を使用先で設定してください。読み込めるテクスチャの上限も確認が必要です。エンジン専用のプロジェクトやアトラスファイルは出力しません。
CSSのbackground-imageで使う場合は、MDNの画像スプライトガイドも参考になります。そのまま動画プレーヤーで再生するファイルが必要なら、GIF動画変換を利用してください。
GIFと出力するスプライトシートの上限
| 確認項目 | 上限 |
|---|---|
| 入力ファイル | GIFを1つ、25 MBまで |
| 元GIFのフレーム数 | 240フレームまで |
| 元フレームの合計ピクセル数 | 6000万まで：幅 × 高さ × フレーム数 |
| PNGの縦横サイズ | 幅・高さそれぞれ8192ピクセルまで |
| PNGの総ピクセル数 | 6000万まで：出力の幅 × 出力の高さ |
すべての条件を同時に満たす必要があります。ファイル容量が小さくても、展開後のピクセル数が多いGIFは処理できない場合があります。出力が上限を超えるときは、グリッドへの変更、列数の調整、フレームの縮小を試してください。
GIFからのスプライトシート作成でよくある質問
PNGはフレームを並べた静止画像です。GIFの表示時間やループ設定は含まれません。画像を切り出した後、使用するソフトでアニメーションの速度やタイミングを設定してください。
元GIFの透明度を保ち、間隔や使われていないセルも透明にします。不透明な背景を自動で削除する機能ではありません。別の背景に重ねる場合は、プレビューで輪郭を確認してください。
グリッドは同じ大きさのセルを行単位で並べるためです。最後の行を埋めるだけのフレームがない場合、残った位置は透明になります。追加のフレームではないので、再生対象に含めないでください。
GIFに保存されたすべてのコマを保ち、重複を削除しないためです。同じ画像が複数回入っていることもあります。内容があるセルの数は、元GIFに保存されたフレーム数に対応します。
このページでは全フレームを1枚のPNGにまとめます。連番付きの画像をZIPでまとめて取得したい場合は、GIFフレーム抽出を使ってください。各コマを個別に編集する用途に向いています。
等間隔のグリッドを切り出せる環境で、素材画像として利用できます。セルの大きさ、間隔、再生方法は使用先で設定します。ダウンロードされるのはPNGだけなので、エンジンやコード側で必要な読み込み設定を確認してください。
GIFとPNGでは画像データの保存方法が異なり、出力時にすべてのフレームを完全な形で1つのキャンバスに並べるためです。透明な間隔や空セルも画像の寸法を増やします。倍率を下げれば寸法は小さくなりますが、ファイル容量の削減は保証できません。