1 つのアニメを、1 枚のシートに

GIF をスプライトシートに変換:PNG グリッドで書き出し

GIF をスプライトシートにオンラインで変換。フレームを PNG のグリッドに並べて列数や間隔を調整し、各フレームの座標とタイミングを JSON で書き出せます。ログインもクレジットも不要です。

グリッドを自由に設定透過 PNG で出力フレームデータ付き
GIF→スプライトシート変換
サンプルフレーム:ジャンプするロボット · フレーム 101
サンプルフレーム:ジャンプするロボット · フレーム 402
サンプルフレーム:ジャンプするロボット · フレーム 703

アニメーションを、1 コマずつ

GIF を開くかサンプルを試して、すべてのフレームを確認しましょう。

アニメーション GIF · 20 MB・200 フレームまで
GIF の処理は端末内で完結します。アカウントもクレジットも不要です。

実際に試してみよう

アニメーション GIF を、整ったスプライトシートに

12 の異なるフレームからなる、ロボットのジャンプサイクルで試してみましょう。実際の GIF サンプルを使って、フレームの選択やグリッドの設定で書き出されるシートがどう変わるかを確認できます。

読み込み

既存のアニメーションから始める

GIF をワークスペースに読み込みます。その完全なフレームが、シートの元になるセルになります。

選択

含めるポーズを選ぶ

ジャンプサイクル全体を残すことも、フレームを絞ってコンパクトなシートにすることもできます。

配置

均一なグリッドに並べる

列数、フレーム幅、間隔を設定し、書き出す前に更新された PNG グリッドをプレビューします。

robot-jump.gif

オリジナルの 12 フレームのサンプル · ワークスペースで GIF を開けます

シーケンスを確認

GIF のフレームを 1 枚のスプライトシートに

動く画像 1 つから、整理されたフレームのセットへ。ワークスペースでグリッドを調整して、プロジェクトに合わせましょう。

  • GIF を、元の順番どおりの完全なフレームにデコードします。
  • アニメーションに必要なフレームを選びます。
  • 内蔵の再生プレビューで、シーケンスを確認できます。
サンプルアニメーションのフレーム 1
01
サンプルアニメーションのフレーム 2
02
サンプルアニメーションのフレーム 3
03
サンプルアニメーションのフレーム 4
04
サンプルアニメーションのフレーム 5
05
サンプルアニメーションのフレーム 6
06
サンプルアニメーションのフレーム 7
07
サンプルアニメーションのフレーム 8
08
サンプルアニメーションのフレーム 9
09
サンプルアニメーションのフレーム 10
10
サンプルアニメーションのフレーム 11
11
サンプルアニメーションのフレーム 12
12

出力を自由に調整

スプライトシートの列数・サイズ・間隔を設定

選んだフレームを 1 枚の PNG にまとめます。フレーム幅を設定しても縦横比は保たれ、セル同士の間隔もプロジェクトに合わせて追加できます。

  • 列数を変えて、グリッドの形を変更できます。
  • フレーム幅を調整して、出力サイズを決めます。
  • 各セルの位置、サイズ、ディレイを JSON で書き出します。

かんたん 3 ステップ

GIF をスプライトシートに変換する方法

元のファイルから使える仕上がりまで、かんたん 3 ステップ。

01

GIF を読み込む

アニメーションファイルを開きます。完全なフレームが、ブラウザ内でそのまま再構成されます。

02

フレームを並べる

含めるフレームを選び、列数、フレーム幅、間隔を調整します。

03

シートを書き出す

選んだフレームの PNG スプライトシートと、JSON の座標データをダウンロードします。

次の制作に役立つ

ゲームや Web 制作のためのスプライトシート作成

01

ゲームのアニメーション素材

一連の動きを均一なセルに並べ、座標を書き出して、自分の制作パイプラインで使えます。

02

Web アニメーションの試作

PNG シートとフレームのタイミングを、CSS や canvas アニメーションの素材として使えます。

03

アニメーションのコンタクトシート

フレームの選択とレイアウトを調整しながら、動き全体をひと目で確認できます。

PNG スプライトシートと JSON をダウンロード

PNG には並べたフレームが、別ファイルの JSON にはその座標とタイミングが入っています。これらのファイルを、ゲームや Web アニメーションの制作フローにつなげましょう。このツールは既存の GIF フレームを並べるもので、新しいポーズは生成しません。

GIF→スプライトシート変換:よくある質問

GIF をスプライトシートに変換する無料ツールとして使えますか?

はい。ここでいうスプライトシートは、アニメーションのフレームをグリッド状に並べた 1 枚の画像のことです。このスプライトシート作成ツールは、GIF にすでにあるフレームを PNG にまとめ、必要に応じて座標とタイミングの JSON も書き出せるので、自分のアニメーション制作に使えます。ログインもクレジットも不要です。

GIF ファイルはサーバーにアップロードされますか?

いいえ。GIF のデコード、プレビュー、ダウンロードはすべてブラウザ内で行われます。これらのツールは AI API を使わず、ログインもクレジットも不要です。

小さな差分画像ではなく、完全なフレームとして書き出せますか?

はい。デコーダーが GIF の各フレームの差分を、位置、透明度、破棄方法(disposal)の指定に従って合成してから、完全なフレームとして書き出します。

読み込める GIF に上限はありますか?

20 MB まで、200 フレームまでの GIF を開けます。メモリの使用量を抑えるため、デコード後のフレームは合計 3,600 万画素までという上限もあります。大きなスプライトシートは 3,200 万画素までです。

アニメーションのタイミングは保持されますか?

フレームデータには、各フレームの表示時間(ディレイ)がミリ秒単位で記録されます。PNG やスプライトシートは静止画なので、アニメーションツールで再生を再現する際はこのタイミングデータを使ってください。

AI で新しいスプライトを生成しますか?

いいえ。GIF にある既存のフレームを並べるだけです。新しいポーズの生成、背景の削除、フレームの補間は行いません。

GIF→スプライトシート変換

手持ちの GIF からスプライトシートを作ろう

GIF をスプライトシートにオンラインで変換。フレームを PNG のグリッドに並べて列数や間隔を調整し、各フレームの座標とタイミングを JSON で書き出せます。ログインもクレジットも不要です。

ワークスペースに戻る