スプライトシートをアニメーションGIFに変換する方法
スプライトシートは、アニメーションのフレームをグリッド状に配置した1枚の画像です。ゲーム開発者やUIデザイナーが、キャラクターのアニメーション、エフェクト、画面遷移をまとめて管理するために使います。スプライトシートをGIFに戻せば、コード環境なしでアニメーションをプレビューしたり、SNSで共有したり、クライアントに作品を見せたりできます。処理はすべてブラウザ内で行われ、ファイルがサーバーにアップロードされることはありません。
グリッドは自動で検出されます
スプライトシートをアップロードすると、画像の投影を走査して行数と列数を自動で算出し、そのまま入力欄に反映します。検出できない場合(フレーム間に隙間がまったくない場合など)は、適当な値を当てずに手動入力を促すメッセージが表示されます。もちろん手動での修正もいつでも可能です。一般的なレイアウトは4×4(16フレーム)、2×4(8フレーム)、CSSアニメーション用の単一行ストリップです。フレーム間に枠線が見える場合は、「余白」に数ピクセルを入力してカットできます。
再生速度の設定
FPSスライダーで速度を設定します。範囲は1〜50 FPSで、横に1フレームあたりのミリ秒が同時に表示されます。1フレーム100ms(10 FPS)はほとんどのWeb用途に適した標準的な速さです。動きをなめらかにしたい場合は20 FPS以上に、呼吸や待機などのゆっくりしたループには2〜5 FPSが向いています。スプライトシートにはフレームのタイミング情報が含まれないため、全フレーム共通の遅延になります。
透明部分の扱い
スプライトシートの透明部分は既定で保持され、出力されたGIFの背景も透明のままです。透過に対応しない用途(一部のチャットアプリでは透明が黒く表示されます)には、「背景」で単色を指定すると、各フレームに背景色を敷いたうえで合成されます。なおGIFは透明・不透明の2値しか扱えないため、柔らかな影やアンチエイリアスのエッジは平坦になります。これはGIF形式の制限であり、変換の不具合ではありません。
GIFが最適とは限らない場合
GIFは最も扱いやすい形式ですが、常に最適とは限りません。DiscordやSlackに投稿する前にファイルを小さくしたい場合はGIF圧縮ツールを、動画やより小さなファイルが必要な場合はGIFからMP4やGIFからWebPをお使いください。逆にアニメーションをグリッドに戻したい場合はGIFからスプライトシートが使えます。
