ドット絵アニメーション作成 · フレーム・オニオンスキン
ブラウザで1フレームずつ描いてアニメーションを作ります。フレーム・タグ・時間は分割やパックに使うStudioのタイムラインにそのまま入り、ピクセル作業画面は前後のフレームをオニオンスキンで見せながら塗らせてくれます。歩きモーションを1か所で描き、再生し、書き出せます。
- .aseprite検証済み· Aseprite 1.3.18
- Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
- Palette files測定確認· read back
- Frame PNG · .nerulio通常ファイル
できること
- 現在のフレームをコピーした新規フレーム（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を書き出します。
アニメーション作業で使うタイムライン操作
スプライト作業画面と同じタイムラインを、ピクセル作業画面から操作します。
| 操作 | キー | 結果 |
|---|---|---|
| 新規フレーム（コピー） | Alt+N | 現在のフレームを直後に複製し、描き直せる状態に |
| 空のフレーム | Alt+Shift+N | 新しいポーズ用の空フレームを追加 |
| フレーム削除 | Alt+C | 選んだフレームを1回の取り消しで戻せる形で削除 |
| オニオンスキン | F3 | 現在のフレームの下に前後を表示。枚数・不透明度・色付けを調整 |
| 再生 / プレビューウィンドウ | Enter / F7 | フレームごとの時間で再生、プレビューは整数倍でくっきり |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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でインデックスモード・レイヤー・合成モード・ロックのまま開きます。
制限
- ピクセル作業画面にないもの（Asepriteにはある）：レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮（反転と90°のみ）、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ（四角・丸の1〜16px）、タイル状の連続描画、LuaスクリプトとCLI。
- 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
- 整理：JPEGは近い色で戻りますが（背景を残すと84 %がΔE 0.02以内）、完全一致はまれ（12 %）。模擬的な生成画像でサイズが完全一致したのは20 %（±1px：80 %）、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
- インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の（見た目により近い）色になりました。Lospec検索が唯一の通信で、事前に確認します。
よくある質問
フレーム数に上限はありますか？
決まった上限はなく、メモリ次第です。ブラウザテストでは512×512で100フレームのスプライトを塗り、フレーム切り替えは16ms、取り消しは90〜140msでした。
カンマとピリオドのキーは最後から最初に戻りますか？
このバージョンでは戻らず、最初と最後のフレームで止まります。スプライト作業画面も同じです。続けて見るにはEnterで再生するか、タグ内ループを使ってください。
アニメーションをGIFで書き出せますか？
はい。パック＆書き出しから、アニメーションごとにGIFか元と一致するAPNGを、フレームごとの遅延つきで書き出せます。書き出したファイルは1フレームずつデコードし直して確認済み。GIFは透明がオン・オフだけなので、やわらかい縁はAPNGにしてください。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。