Pixel Animation Studio

使い方

1. 16×16 / 32×32 / 64×64 / 128×128 / CustomからCanvasサイズを選ぶか、PNGから新しいプロジェクトを開始します。
2. 鉛筆・消しゴム・塗りつぶし・スポイトを使って最初のフレームを描きます。必要に応じてGrid、Zoom、Fit、Panを使います。
3. フレームを追加または複製し、少しずつポーズを変えます。Onion SkinをONにすると直前のフレームを薄く確認できます。
4. 各フレームの表示時間を20〜5000msで設定します。同じ時間に揃える場合は「すべてに適用」を使います。
5. 必要なら矩形選択でピクセル範囲を移動・コピー・切り取り・貼り付けし、矢印キーで位置を調整します。
6. プレビューでPlay / Pause / Restart / Loopを使い、動きとタイミングを確認します。
7. 書き出し画面で現在フレームPNG、Animated GIF、Horizontal / Grid Sprite Sheet PNGから形式を選びます。
8. ファイル名と書き出し条件を確認して保存します。IndexedDB自動保存が利用できる場合は、次回起動時に続きから再開できます。

対応範囲

• Canvas: 16×16 / 32×32 / 64×64 / 128×128、または最大128×128のCustomサイズ。
• フレーム: 1〜128フレーム。表示時間は20〜5000ms、10ms刻み。
• 描画: 鉛筆、消しゴム、塗りつぶし、スポイト、矩形選択。鉛筆 / 消しゴムは1 / 2 / 4 px。
• 読み込み: PNGのみ。1枚で新規開始、同じサイズの複数PNGをフレーム追加。既存Canvasとサイズが違うPNGは自動縮小・クロップしません。
• PNG出力: 現在フレームを1× / 2× / 4× / 8×、透明背景維持、Nearest Neighborで拡大。
• GIF出力: 全フレームの順番と個別表示時間を反映、透明背景、無限ループ。必要な場合だけ256色へ減色。
• Sprite Sheet: 全フレームをHorizontalまたは列数指定のGridへ配置し、PNGとして保存。
• 自動保存: IndexedDBが利用できる場合にプロジェクト状態を端末内へ保存。ページ再読み込み後も作業を再開できます。
• 実行時通信: 外部API、外部フォント、実行時CDN、Analytics / Telemetryを使わず、CSPはconnect-src 'none'。

制限・注意点

• v1.0.0のCanvasは最大128×128、1プロジェクトは最大128フレームです。
• 読み込みはPNGのみで、GIF / WebP / JPEG / Aseprite / Sprite Sheetの読み込みには対応していません。
• GIFは最大256色で、半透明を保持できません。部分的なAlphaはGIF出力時に透明または不透明へ変換されます。
• Layers、Lasso、Paletteファイル、Animation Tag、Projectファイル入出力、Animated WebP、Sprite metadata JSONはv1.0.0にはありません。
• 自動保存はIndexedDBに依存し、ブラウザのサイトデータを削除すると保存済みプロジェクトが消える場合があります。
• Undo / Redo履歴はページ再読み込み後には復元されません。
• 128×128でフレーム数が多いプロジェクトは、特にGIF生成時に端末メモリを多く使用する場合があります。