GIFからスプライトシートへのオンライン変換

GIF画像をゲームエンジン用のメタデータ付きフレームグリッドに変換します。JSON、CSS、またはXMLを透明なPNGシートとともにエクスポートします。

GIFからスプライトシートを作成する方法(オンライン)

GIF画像をアップロードし、グリッドレイアウトとパディングを選択したら、シートとそのメタデータをまとめて1つのパッケージとしてダウンロードします。

ステップ1

GIFをアップロード

GIF画像を読み込むと、フレームはデバイス上でデコードされます。

ステップ2

レイアウトを設定

シートのグリッド、列数、パディングを選択してください。

ステップ3

シートをダウンロード

PNG画像に加えて、JSON、CSS、またはXMLのメタデータを保存します。

ゲームエンジン用の無料オンラインGIFからスプライトシートへのジェネレーター

GIFからスプライトシートへの変換ツールは、アニメーションを取り込み、そのフレームを単一のグリッド画像にパックします。これは、ゲームやWebインターフェースでモーションを保存する標準的な方法です。エンジンは、数十個の個別のファイルを読み込む代わりに、1枚のシートを読み込んで座標間を移動します。当社の無料オンライン変換ツールは、ブラウザ上でこのシートを作成するため、ソースファイルをサーバーにアップロードすることなく、GIFをゲームで使用可能なアセットに変換できます。

この手法は、メタデータ付きフレームパッキングです。各GIFフレームは、エッジのにじみを防ぐためにわずかなパディングを加えたグリッドセルに配置され、ツールはすべてのフレームの位置とサイズを記録します。このマップは、PhaserやPixi用のJSON、Webスプライト用のCSS、Unity、Godotなどのエンジン用のXML TextureAtlasとしてエクスポートできます。PNGでは透明度が保持されるため、切り抜かれた文字やアイコンのエッジはきれいに保たれます。パッキングはデバイス上で実行されるため、元のGIFがコンピュータから外部に持ち出されることはありません。

スプライトシートは、実際のパフォーマンス問題を解決します。GIFからアニメーション化されたキャラクターの歩行サイクル、爆発、UIスピナーなどは、40枚の画像リクエストではなく1枚の画像リクエストで済むため、読み込み時間が大幅に短縮され、キャッシュも改善されます。ゲーム開発者はこのようにしてアセットアトラスを作成し、Webデザイナーはアイコンセットをパッケージ化し、アニメーターはシートを必要とするエンジン向けにフレームシーケンスを準備します。アニメーションが既にループとして存在し、制作用に再構成するだけで済む場合、GIFからの変換が最も迅速な導入方法です。

このオンラインツールの最大の特長は、フォーマットの柔軟性です。GIFをアップロードし、レイアウトを選択するだけで、エンジンが必要とするメタデータを含むシートをダウンロードできます。デスクトップのパッキングソフトウェアも、手動での座標計算も、サーバーの待機列も不要です。このツールは、グリッド制御、パディング、透明度、マルチフォーマットエクスポートをライブプレビュー付きの1つのパネルに統合しており、GIFをスプライトシートとして配信する最速の方法です。無料、プライベート、そしてあらゆるデバイスで数秒で利用できます。

使い始めるのは簡単です。ツールを開き、GIFをドロップして、プレビューでシートが作成される間にグリッドとパディングを選択するだけです。インストールもアカウントもアップロードも不要です。パッキングはブラウザ上でローカルに行われるからです。ゲーム開発、Webアイコンセットのパッキング、エンジンアトラスの準備など、どのような用途でも、このコンバーターを使えばループをすぐに使えるスプライトシートに変換できます。ソースコードを手元に置いておけば、ターゲットとするエンジンごとに異なるレイアウトで再パッキングできます。シートが思い通りに仕上がったら、PNGとメタデータを保存し、追加の変換手順なしでエンジンに直接インポートできます。

グリッドパッキング

すべてのフレームを、ゲームエンジンやウェブアニメーションエンジンで使用できるように、整然としたグリッドシートにまとめます。

マルチフォーマット

Phaser、Pixi、またはUnityと互換性を持たせるために、メタデータをJSON、CSS、またはXML TextureAtlasとしてエクスポートします。

パディングコントロール

セル間に隙間を設けることで、線形フィルタリングによって隣接するセルがフレーム内に入り込むのを防ぎます。

キープアルファ

このシートはアルファチャンネルを保持したままPNG形式でエクスポートされるため、透明なスプライトも表示時にきれいに保たれます。

エンジン準備完了

出力は変換なしでGodot、Unity、またはFriday Night Funkinのパイプラインに直接送られます。

プライベートローカル

パッケージ化はブラウザ内でローカルに実行されるため、GIF画像はサーバーに送信されることはありません。

よくある質問

よくある質問

GIF画像をアップロードすると、ツールが各フレームをグリッド画像として抽出します。レイアウトとパディングを選択したら、PNGシートと、お使いのエンジン用のJSON、CSS、またはXML形式のメタデータをダウンロードしてください。

PhaserやPixiにはJSON、Webスプライトの背景にはCSS、Unity、Godot、またはFriday Night FunkinスタイルのワークフローにはXML TextureAtlasを使用してください。変換を避けるため、エンジンやパイプラインが既に想定しているフォーマットを選択してください。

はい。シートはアルファチャンネルを保持したままPNG形式でエクスポートされるため、透明なフレームや切り抜かれたキャラクターは、ゲームやアプリでエンジンが表示する際に、きれいなエッジを維持します。

わずかな隙間を設けることで、線形フィルタリングを使用するレンダラーが、隣接するフレームの色が描画中のフレームの端に滲み出るのを防ぐことができます。1~2ピクセルのパディングで、この現象を回避できます。

はい。列数が決まっているグリッド、水平方向の単一のストリップ、または垂直方向のストリップを選択できます。このツールはフレームを順番に配置するため、アニメーションをステップ実行したときに正しく再生されます。

かなりの量になります。モバイルGPUは通常、テクスチャの解像度を1辺あたり2000~4000ピクセル程度に制限しているため、64ピクセルのフレームには数千個のセルが収まります。古いデバイス向けには、非常に長いアニメーションを数枚のシートに分割してください。

いいえ。シートとメタデータはロゴもスタンプもアカウントも不要でダウンロードできます。GIFはいくつでも変換でき、サーバーにアップロードされるデータは一切ありません。

はい。このツールは最新のモバイルブラウザであればどれでも動作するので、デスクトップと同様にローカルでのプライバシー保護(アップロード不要)を確保した上で、スマートフォンやタブレットからスプライトシートを生成できます。

このツールは、小さなフレームを均一なセルの中央に配置するため、フレームのサイズが均一なシートが最も整然としたレイアウトになります。パディングと均一なグリッドにより、サイズの異なるフレームが重なったりずれたりするのを防ぎます。レイアウトは自動的に処理されます。

はい。完全に無料でご利用いただけます。隠れた制限、ウォーターマーク、登録は一切不要です。GIFはブラウザ内でローカルに処理されるため、圧縮中にデバイスから外部に送信されることはありません。