ドット絵の忍者の走りモーション
透明な背景から6フレームを見つけ、ピクセルをくっきり保ったまま200%で再生しています。
スプライトシートをGIFに変換：ドロップするだけでアニメーションに
スプライトシートをドロップするだけで、すぐに動き出します。フレームは背景またはグリッドで見つけ、行ごとに別のアニメーションとして再生し、縁までなめらかなGIFやAPNGで保存できます。スプライトシートをGIFに変換するこの無料ツールはブラウザーで動くので、何もアップロードされません。
スプライトシートをGIFに無料・ブラウザーで動作
スプライトシートをドロップしてアニメーションに
PNG、JPG、WebP、GIFに対応。処理はすべてブラウザー内で行います。
- 無料、ブラウザーで完結
- フレームを自動で検出
- 1行ずつでもシート全体でも
- GIFとAPNG
スプライトシートをGIFに変換した作例
作例のために描いた8枚のシートです。どれもこのページでスプライトシートをGIFに変換したもので、開くとすべての設定を試せます。
カエルの待機とジャンプ
2行のシートです。2行目をジャンプのアニメーションとして再生しています。
マゼンタ背景のドラゴン
定番のマゼンタの背景は、GIFでは透明になります。
揺らめくたき火
夜空のような紺色を背景色にして炎を往復再生。光の縁がなめらかに保たれます。
まばたきするフクロウ
逆再生し、目を開いたところで少し止めて、本物のまばたきのように見せています。
宝箱
最後のフレームで1秒以上止まってから、ループが最初に戻ります。
はじける魔法
ゲームの中と同じように、エフェクトとエフェクトの間に短い間を置いています。
風車
空色の背景からフレームを見つけ、その背景をGIFにそのまま残しています。
スプライトシートをGIFに変換する方法
3ステップで完了し、何もアップロードされません。
PNG、WebP、JPG、GIFのシートをドロップ、貼り付け、または選択します。フレームは透明や単色の背景から見つけるか、列と行のグリッドで分けます。
再生する行を選び、使うフレームにチェックを入れて、フレームレート、往復再生、逆再生、最後のフレームでの停止、ループ回数を設定します。
アニメーションをGIFで保存するか、柔らかな縁をすべて保つAPNGで保存します。ドット絵はピクセルをくっきり保ったまま2倍・3倍・4倍に拡大できます。
このスプライトアニメーションツールの強み
ドット絵の走りモーションからゲームのエフェクトまで、特に得意な6つのことです。
- スプライトシート
フレームを自動で検出
マゼンタを含む透明や単色の背景からフレームを見つけるか、列と行、セルのサイズ、オフセット、間隔を指定したグリッドで分けます。
1行に1つのアニメーション
待機、歩き、ジャンプの行があるシートも1行ずつ再生できます。シート上のフレームをクリックすれば、行を切り替えたり、そのフレームを外したりできます。
しっくりくるタイミング
1秒あたり1〜50フレームで、往復再生や逆再生、最後のフレームでの停止、ループ回数を自由に設定できます。
GIFとAPNG
GIFはどこでも開けます。APNGは透明をそのまま保つので、光や柔らかな縁もなめらかです。背景色を指定すれば、GIFの縁もきれいに仕上がります。
くっきりしたドット絵
ピクセルをくっきり保ったままフレームを2倍・3倍・4倍に拡大し、どのスプライトも同じ地面のラインに立たせられます。
無料でプライベート
スプライトシートをGIFに変換する処理は、すべてブラウザーの中で行います。アップロードもアカウント登録も不要で、ウォーターマークも入らず、ページを読み込んだあとはオフラインでも使えます。
ガイド：スプライトシートをGIFに変換して、なめらかに動かすコツ
どんなシートからでも、なめらかなアニメーションを作るための5つのヒントです。
背景で分けるか、グリッドで分けるか
透明や単色の背景に描かれたスプライトには「背景で分ける」を使います。正確なグリッドで描かれたシートなら、「グリッドで分ける」で各フレームがセルの中に収まり、位置がずれません。
行を選ぶ
シートの各行は、それぞれ別のアニメーションとして一覧に並びます。行を選んでから、フレームをクリックするとループから外せます。
ちょうどいい速さを見つける
歩きや走りのモーションは、たいてい1秒あたり8〜12フレームで自然に見えます。エフェクトや炎は12〜15フレームがよく合います。往復再生にすると、最初に飛んで戻るループもなめらかになります。
GIFで縁をなめらかに
GIFの透明色は1色です。GIFを置く場所に合わせた背景色を指定するか、APNGで保存すれば、柔らかな縁をすべて保てます。
共有に合ったサイズ
ドット絵を2〜4倍に拡大すると、チャットや投稿でも見やすくなります。サイズ、フレーム数、1ループの長さはアニメーションの下に表示されます。
スプライトシートをGIFに変換するツールはこんな方に
スプライトシートをGIFにする、よくある理由です。
ゲーム開発者
ゲームエンジンに組み込む前にアニメーションのタイミングを確かめ、プレビューをチームと共有できます。
ドット絵クリエイター
動くスプライトを拡大したくっきりGIFにして、SNSやポートフォリオに投稿できます。
MOD制作者・ファン
ゲームから抜き出したスプライトやMODのシートをGIFにして、Wiki、掲示板、チャットで使えます。
Web・アプリデザイナー
読み込み中のアイコン、ステッカー、小さなアニメーションをGIFやAPNGで作れます。
スプライトシートをGIFに変換：よくある質問
スプライトシートのアニメーション化、ファイル、プライバシーについての回答です。
シートを開き、すべてのフレームが枠で囲まれているか確認してから、行と速度を選んでGIFをダウンロードします。
はい。すべてブラウザーで動作し、アカウント登録は不要で、ウォーターマークも入りません。
いいえ。シートの読み込みもアニメーション化もお使いの端末で行われ、サーバーには何も送られません。
はい。各行がそれぞれ一覧に並ぶので、1つを選ぶか、シート上のフレームをクリックしてその行を再生します。
どちらも動く画像です。GIFはどこでも開けます。APNGは透明をそのまま保つので光や柔らかな縁もなめらかで、最新のブラウザーで再生できます。
グリッドで描かれたシートには「グリッドで分ける」を使うと、各フレームが同じ位置に収まります。または「セル内の位置」を「下」のままにすれば、どのスプライトも同じラインに立ちます。
はい。1回だけ再生するエフェクトなら「ループ回数」を「1回」に、または「2回」「3回」「5回」に設定します。「無限」なら終わりなくループします。
はい。「GIFをスプライトシートに」で、GIFの全フレームをJSONアトラスつきの1枚のシートに並べられます。