ドット絵アニメーション作成 · フレーム・オニオンスキン
ブラウザで1フレームずつ描いてアニメーションを作ります。フレーム・タグ・時間は分割やパックに使うStudioのタイムラインにそのまま入り、ピクセル作業画面は前後のフレームをオニオンスキンで見せながら塗らせてくれます。歩きモーションを1か所で描き、再生し、書き出せます。
ドット絵アニメーションは、フレームごとに決まったミリ秒だけ表示する短いループです。歩きは6〜8フレームを約100msずつ（2歩で0.6〜0.8秒）にすると扱いやすく、待機は2〜4フレームを150〜300msずつ長めに見せると、震えずに呼吸しているように見えます。ピクセル作業画面では、Alt+Nで現在のフレームを複製して次のポーズを描き、F3でオニオンスキン、フレームごとに時間（既定100ms）を設定し、Enterでループ再生します。.asepriteで保存するか、タグごとにGIF・APNG・エンジン用ファイルで書き出します。
- .aseprite検証済み· Aseprite 1.3.18
- Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
- Palette files測定確認· read back
- Frame PNG · .nerulio通常ファイル
フレーム数、タイミング、そしてフレームごとの時間が大切な理由
歩きの1サイクルは2歩です。1歩ごとに同じキーポーズを通ります。接地（両足が地面につき脚が最も開く）、沈み込み（体重が乗り体が最も低い）、交差（片脚がもう片方を追い越す）、伸び上がり（体が最も高い）です。1歩4ポーズなら8フレーム、沈み込みを省けば6フレームです。まず接地のポーズを描いてオニオンスキンで確かめ、それから中割りを足します。
タイミングは全体のフレームレートではなく、1フレームあたりのミリ秒です。100msのフレーム8枚は800msのサイクルで、1歩は400msです。待機は両端のポーズを長めに止めると読みやすくなります。吸う・吐くポーズに300ms、中割りに150msといった具合です。Nerulioはフレームごとに時間を持つので、止めのためにフレームを複製する必要はありません。
書き出し先によって時間の持ち方が変わります。GIFは遅延を1/100秒単位で数えるため125msは13（130ms）になり、書き出し時に知らせます。APNGはミリ秒をそのまま保存します。アニメごとに1つの速度で再生するエンジン向けには、Nerulioのエンジン書き出しが1000 ÷ 平均時間をFPSとし、フレームごとの倍率も書きます。
- キーポーズ
- 動きを決める絵。歩きなら接地・沈み込み・交差・伸び上がり。
- 中割り
- 2つのキーポーズの間に入れて動きをなめらかにするフレーム。
- オニオンスキン
- 描いているフレームの下に前後のフレームを薄く表示する機能。
- 止め
- ポーズが伝わるよう、前後より長く表示するフレーム。
- タグ
- 方向と繰り返し回数を持つ、名前付きのフレーム範囲（walk、idle）。
例：歩きと待機のタイミング
タイムラインに入れた時間と、それぞれの書き出しでの扱いです。
walk 8フレーム × 100 ms = 1サイクル800 ms → 1歩400 ms
walk 6フレーム × 100 ms = 1サイクル600 ms → 1歩300 ms（速めの歩き）
idle 4フレーム 300,150,300,150 = 1呼吸900 ms
idleのエンジンFPS = 1000 / 平均(300,150,300,150) = 1000 / 225 = 4.44
倍率 300/225 = 1.33、150/225 = 0.67
GIF 150 ms → 15/100秒（正確） 125 ms → 13/100秒 = 130 ms（丸め）
APNG 125 ms → 125/1000秒（正確）
歩幅 接地した足が1歩（400 ms）で16 px後ろへ → キャラを毎秒40 px移動最後の行は歩きが滑らないための検算です。接地している足が後ろへ動く速さと、ゲーム内でキャラが前へ進む速さを一致させます。移動速度が違うなら、移動速度だけでなくフレームの時間か歩幅を直してください。
できること
- 現在のフレームをコピーした新規フレーム（Alt+N）や空のフレーム（Alt+Shift+N）、フレーム削除（Alt+C）、カンマとピリオドで移動、Enterで再生・停止。タグには方向（順・逆・ピンポン）と繰り返し回数があります。
- オニオンスキン（F3）は描いているフレームの下に前後のフレームを表示し（赤・青の色付けも選択可）、表示枚数と不透明度はタイムラインで設定。プレビューウィンドウ（F7）は描いている間も整数倍でタグを再生し続けます。
- フレームごとにミリ秒単位の時間を持つので、止めのポーズと速い振りを1つのアニメに入れられます。512×512・100フレームのスプライトで、100msのフレームが時間どおりに再生されました（2秒で20フレーム）。
- 読み込んだシートの1フレームを塗ると、そのフレームだけが自分のピクセルを持ち、ほかのフレームと元のシートはそのまま。変更は1回の取り消しで戻ります。
- フレームはスプライト作業画面が読めるものなら何でも：ピクセルから分割するシート、連番PNG、遅延つきのGIF・APNG、レイヤー・タグ・時間を持つ.aseprite。
使い方
- GIF・連番フレーム・.asepriteをこのページにドロップすると、フレームとして読み込まれてピクセル作業画面が開きます。シート1枚は、まずスプライト作業画面で分割位置を確認して適用します。
- タイムラインでフレームを選び、F3でオニオンスキンをオンにして、前後のフレームを見ながらポーズを描き直します。
- Alt+Nで中割りを足し、フレームごとの時間を入力して、タイムラインのタグ行をドラッグしてアニメーション名を付けます。
- EnterかF7のプレビューウィンドウでループを確認し、.asepriteで保存するか、パック＆書き出しでアニメーションごとにGIF・APNGを書き出します。
書き出す前にループを確認する
- Enterで少なくとも5回ループを見ます。つなぎ目で跳ねたり止まったりするなら、たいてい最後のフレームが最初と同じです。
- 交差のフレームでオニオンスキン（F3）をオンにします。前後の接地フレームが左右対称に並ぶはずです。
- プレビューウィンドウ（F7）を1倍か2倍で開きます。拡大時にちょうどよいタイミングは、実寸では遅く感じることがよくあります。
- GIFを書き出したら書き出しの注意を読みます。1/100秒に丸めたフレームがすべて表示されます。
アニメーション作業で使うタイムライン操作
スプライト作業画面と同じタイムラインを、ピクセル作業画面から操作します。
| 操作 | キー | 結果 |
|---|---|---|
| 新規フレーム（コピー） | Alt+N | 現在のフレームを直後に複製し、描き直せる状態に |
| 空のフレーム | Alt+Shift+N | 新しいポーズ用の空フレームを追加 |
| フレーム削除 | Alt+C | 選んだフレームを1回の取り消しで戻せる形で削除 |
| オニオンスキン | F3 | 現在のフレームの下に前後を表示。枚数・不透明度・色付けを調整 |
| 再生 / プレビューウィンドウ | Enter / F7 | フレームごとの時間で再生、プレビューは整数倍でくっきり |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 1サイクルに1回カクつく | 最後のフレームが最初のコピーで、同じポーズが2回続く | カンマとピリオドでつなぎ目をまたぐと、同じフレームが連続している | 重複した最後のフレームを削除（Alt+C） |
| ゲーム内でキャラが滑る・ムーンウォークする | 1サイクルの歩幅とゲーム内の移動速度が合っていない | 接地した足が1歩で何ピクセル動くか測り、1歩の時間で割る | 移動速度を歩幅に合わせる（400msで16px = 毎秒40px）か、フレームの時間を調整 |
| GIFがプレビューより速い・遅い | GIFは遅延を1/100秒で保存するため半端なミリ秒は丸められ、最短20msになる | 書き出しの注意に丸めたフレームが出る | 10msの倍数にするか、ミリ秒を保つAPNGで書き出す |
| Nerulioでは合うのにエンジンではタイミングが違う | エンジンにタグごとのFPSだけを渡し、フレームごとの時間を捨てている | 止めのフレームの長さをエンジンとタイムラインで比べる | フレームごとの倍率を書くパック＆書き出しのエンジン用バンドルを使う。Godotのフレーム時間を参照 |
| オニオンスキンに何も出ない | オフになっている、不透明度が低すぎる、または範囲の最初のフレームにいる | タイムラインのオニオンスキンのボタンと設定を確認 | F3を押して不透明度を上げ、前後にフレームがある位置へ移動 |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Aseprite | 止めのフレームで1枚の絵を使い回すリンクセルや、デスクトップアプリでのタグ・オニオンスキンが欲しいとき。オニオンスキンとフレームの時間は公式ドキュメントに説明があります。 |
| ほかで描いたフレームをまとめる | ポーズがすでにPNGであるなら、スプライトアニメーターでアニメーションを組み、時間を設定します。 |
| 既存のシートを確認するだけ | 編集せずにループを見たいならスプライトアニメーションのプレビュー。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 検証済み Aseprite 1.3.18実際のAsepriteコマンドラインで、インデックスモード・レイヤー2枚・不透明度160の乗算・編集不可のロックレイヤーのまま開き直し、フレームのピクセルも一致しました。 |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 測定確認 read back各形式を書き出して読み戻し、一致を確認。Asepriteが書いた.gpl・.pal・.hex・.actと実際のAdobe .ase（16色）も読み込めました。 |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 検証済み Godot 4.7.2 · Unity 6000.5描いたスプライトはパック＆書き出しでまとめます。そのエンジン用ファイルは実在のCC0アセットで各エンジンに読み込んで確認済み（49回中47回合格。失敗2回はPhaser 3プリセットで避けられるPhaser 3.90のバグ）。 |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 通常ファイルどのツールでも使える通常ファイルで、エンジンでの検証は主張しません。 |
検証の根拠
整理のベンチマーク（元の1倍画像が分かっているCC0ケース69件）：サイズを正確に当てたのは81 %（±1px：90 %）、背景を残すとピクセルの74.0 %が完全一致。最も良い競合ツールはサイズ30 %（perfectPixel）、完全一致ピクセル44.6 %（unfake.js）。Asepriteで作った×4ニアレスト拡大は100 %、×3.78バイリニアは99.7 %一致で戻り、どちらもサイズは自動で判定。1pxのアウトラインとドロップシャドウはAsepriteの結果とピクセル単位で一致（1846px・705px）。ここで書いた.asepriteはAseprite 1.3.18でインデックスモード・レイヤー・合成モード・ロックのまま開きます。
制限
- カンマとピリオドは最初と最後のフレームで止まり、折り返しません。続けて見るにはEnterかタグ内ループを使います。
- リンクセルはないため、2回使うポーズはピクセルが2組保存されます。
- 中割りの自動生成はなく、すべてのフレームを描きます。
- ピクセル作業画面にないもの（Asepriteにはある）：レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮（反転と90°のみ）、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ（四角・丸の1〜16px）、タイル状の連続描画、LuaスクリプトとCLI。
- 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
- 整理：JPEGは近い色で戻りますが（背景を残すと84 %がΔE 0.02以内）、完全一致はまれ（12 %）。模擬的な生成画像でサイズが完全一致したのは20 %（±1px：80 %）、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
- インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の（見た目により近い）色になりました。Lospec検索が唯一の通信で、事前に確認します。
バージョンと出典
Nerulio：新しいフレームの既定の時間は100msです（src/studio/sprite/playback.js）。512×512で100フレームのスプライトで、100msのフレームが時間どおりに再生されました（ヘッドレスChromium、2秒で20フレーム）。GIFの書き出しは1/100秒に丸めて最短20msとし、その旨を表示します。APNGの書き出しはミリ秒をそのまま書きます（src/game/export/anim.js）。GIFのタイミングはGIF89aの仕様に基づきます。
参照した公式ドキュメント
よくある質問
フレーム数に上限はありますか？
決まった上限はなく、メモリ次第です。ブラウザテストでは512×512で100フレームのスプライトを塗り、フレーム切り替えは16ms、取り消しは90〜140msでした。
カンマとピリオドのキーは最後から最初に戻りますか？
このバージョンでは戻らず、最初と最後のフレームで止まります。スプライト作業画面も同じです。続けて見るにはEnterで再生するか、タグ内ループを使ってください。
アニメーションをGIFで書き出せますか？
はい。パック＆書き出しから、アニメーションごとにGIFか元と一致するAPNGを、フレームごとの遅延つきで書き出せます。書き出したファイルは1フレームずつデコードし直して確認済み。GIFは透明がオン・オフだけなので、やわらかい縁はAPNGにしてください。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。