シートからアニメーションへ
スプライトシートは、アニメーションのすべてのフレームをグリッド状に並べた 1 枚の画像です。列と行の数、または 1 フレームの大きさを指定すると、シートを左から右、上から下へフレームに切り分けて再生します。
グリッドはシートを開いたときに推測されます。正方形のフレームが並んだ帯、または絵を切ってしまわない 16、32、64 ピクセルなどの一般的なサイズです。何も描かれていないセルは飛ばすので、最後の行が半分しか埋まっていなくてもアニメーションがちらつきません。
スプライトシートを GIF に変換
スプライトシートをドロップして動きを確認し、アニメーション GIF として保存できます。GIF をドロップすれば、スプライトシートや各フレームが得られます。何もデバイスの外に出ません。
お使いのデバイス上で作成します。画像がアップロードされることはありません。
- アップロードなし
- どちらの向きにも変換
- ライブプレビュー
仕組み
スプライトシートを GIF にする方法
ステップ 1: シートを追加
スプライトシートを選択、ドロップ、または貼り付けます。アニメーション GIF も使えます。フレームに分解されます。
ステップ 2: フレームを確認
グリッドは自動で推測され、アニメーションの再生が始まります。行と列を直し、速度を設定し、不要なフレームはクリックして外します。
ステップ 3: ダウンロード
アニメーション GIF、PNG のスプライトシート、または各フレームを個別の PNG にした ZIP で保存できます。
スプライトシートを GIF に変換
公開する前にアニメーションを確認
設定しながら再生
グリッド、速度、方向を変えると、再生中のアニメーションにすぐ反映されます。
グリッドを検出
よく使われるフレームサイズや帯状の並びを認識し、シート末尾の空のセルは飛ばします。
フレームを選ぶ
帯の中のフレームをクリックして外し、順方向、逆方向、往復で再生できます。
GIF、シート、フレーム
共有にはくっきり拡大した GIF、エンジンには整ったシート、そのほかにはばらのフレームを。
詳しく見る
スプライトシート、GIF、フレーム
速度、方向、フレーム
- 速度：ほとんどのゲームアニメーションには毎秒 8 〜 12 フレームが合います。24 はなめらか、6 はあえてカクカクさせたいときに。
- 方向：順方向、逆方向、または往復 (ピンポン) で再生できます。往復なら半分のフレームで待機や呼吸のループを作れます。
- フレーム：帯の中のフレームをクリックすると外れます。行ごとに複数のアニメーションが入ったシートも、この方法でひとつに絞れます。
- GIF のサイズ：2× 〜 8× でくっきりした縁のまま拡大するので、32 ピクセルのスプライトもチャットやストアページで見やすくなります。
GIF からシートへ
アニメーション GIF は、ビューアーで表示されるとおりの完全なフレームとして、元のタイミングのまま読み取られます。1 行、1 列、または正方形に近いグリッドのスプライトシートとして、あるいは連番の PNG ファイルとして保存できます。
GIF が扱えるのは最大 256 色で、半透明は使えません。ドット絵には十分ですが、塗りの絵や写真のようなフレームでは PNG のシートならすべての色が保たれます。
スプライトシートを GIF に変換
よくある質問
ファイルはどこかにアップロードされますか？
いいえ。シートや GIF はブラウザー内、あなたのデバイス上で読み取られ、変換されます。Moriqa にも他の誰にも何も送信されません。
スプライトシートを GIF にするには？
シートを追加し、行と列がグリッドに合っていることを確認して、速度を毎秒フレーム数で設定し、「GIF をダウンロード」を選びます。プレビューで再生されているものがそのまま保存されます。
GIF をスプライトシートにするには？
GIF を追加し、「保存形式」で「スプライトシート」を選びます。1 行、1 列、グリッドのいずれかを選んで PNG をダウンロードします。各フレームを個別の PNG にしたい場合は「フレーム」を選びます。
アニメーションがばらばらに切れて見えます。何が原因ですか？
グリッドがシートに合っていません。「フレームサイズ」に切り替えて 1 フレームの幅と高さを入力するか、列と行の数を直して、帯の各セルに 1 フレームがまるごと表示されるようにしてください。
なぜ GIF を拡大するのですか？
小さなドット絵は、ウェブサイトやチャットアプリで拡大されるとぼやけます。4× や 8× で保存すると各ピクセルがくっきりした正方形として繰り返されるので、どこで表示されても鮮明です。
シートの背景は透明である必要がありますか？
いいえ、どんな画像でも使えます。背景が透明だとグリッドをより確実に推測でき、空のセルを飛ばせます。
あとでアニメーションを編集できますか？
はい。Moriqa のドット絵エディターでは、「ファイル」メニューの「スプライトシートを読み込む…」でシートをアニメーションとして開き、フレームごとに描き直して、Godot、Unity、GameMaker 向けに再び書き出せます。
自分でアニメーションを描いてみませんか？
Moriqa のドット絵エディターを開いて、スプライトをフレームごとに描いてアニメーションにできます。ブラウザーで無料です。