グリッドで見ると問題なさそうなシートでも、動かすと飛んだり、滑ったり、カクついたりします。調整のたびにエンジンを開いて確認するのは時間がかかります。このプレビューアは指定した FPS でシートを再生し、ドット等倍ズーム、フレーム間の間隔を確かめるオニオンスキン、待機モーション向けのピンポン再生、複数のアニメーションや方向が入ったシート向けの行ごとの再生に対応しています。
アニメーションプレビューアの使い方
- スプライトシート（グリッドは自動検出）、複数のフレーム PNG、またはアニメ GIF をドロップします。
- 必要なら行数と列数を修正します。複数行のシートでは、1行を選んで1つのアニメーションや方向だけを再生できます。
- FPS を設定します。多くのエンジンで入力を求められる、1フレームあたりのミリ秒も表示されます。
- 矢印キーでコマ送りし、オニオンスキンで前のフレームを表示し、ピンポン再生も試してみましょう。
- ドット等倍の拡大でズームし、背景を切り替えてダーク、ライト、グリーン上でスプライトを確認します。
- 同じ速度、ピンポン、背景で GIF を書き出します。
得られるもの
- 1–60 fps のライブプレビュー。コマ送りとキーボードショートカット付き。
- 1×–8× のアニメ GIF。透過または単色背景で、開発ブログやストアページにそのまま使えます。
対応エンジン
- ここでちょうどよく見えた FPS を、Godot（SpriteFrames の速度）、Unity（Sample Rate）、GameMaker（スプライト速度）、Phaser（frameRate）のアニメーション速度に使いましょう。
- 行ごとの再生は、多くのエンジンでの 4方向・8方向シートの持ち方（1方向につき1行）と同じです。
ゲーム制作で使って得たコツ
- 歩きループはたいてい 8〜12 fps、走りは 12〜16 fps、待機は 4〜8 fps が自然に見えます。
- オニオンスキンでは前のフレームが青で表示されます。2フレーム間で手足が大きく飛ぶなら、中割りを1枚足しましょう。
- キャラが滑って見えるなら、フレームの基準点が揃っていません。スプライトシート分割ツールで下揃えにして切り直してください。
- 明るい背景でも確認しましょう。黒背景では問題ない暗いアウトラインも、暗いゲームマップでは消えてしまうことがあります。
活用例
- エンジンに取り込む前にアニメーションのタイミングを確認する。
- アーティストやアセットパックから受け取ったシートをチェックする。
- シートを GIF にして SNS 投稿や企画資料に使う。
- 8方向キャラの各方向を1行ずつ並べて比較する。
よくある質問
キーボードで再生を操作するには？
Space で再生と一時停止。左右の矢印キーで1フレーム送って一時停止します。
オニオンスキンとは？
現在のフレームの下に前のフレームを薄く（青みがかって）表示する機能です。各パーツがフレーム間でどれだけ動いたかがわかり、飛びを見つけられます。
シートの1行だけ再生できますか？
はい。シートに複数行ある場合は、行を選ぶとそのアニメーションや方向だけを再生できます。「すべて」を選ぶと全フレームを順に再生します。
GIF や個別フレームにも対応していますか？
はい。アニメ GIF をドロップすればフレームを再生でき、複数の PNG をドロップすればファイル名の自然順で再生します。
シートはアップロードされますか？
いいえ。プレビューはすべてブラウザ内で動作します。
ほかのビューアだとアニメがぼやけるのはなぜですか？
多くのビューアはスムージングをかけて拡大します。ここではドット絵ゲームの正しい設定と同じニアレストネイバーで拡大するので、ここで見えるものがプレイヤーに見えるものです。