みどりのピクセルアトリエ

pygame で使う画像素材を、Scratch のコスチュームエディタのような操作で作れるブラウザアプリです。 サーバーを使わず、すべてブラウザ内で動きます。

できること

• 描く: ブラシ / 消しゴム / 塗りつぶし / 線 / 四角 / 円 / 範囲選択 / スポイト。アンチエイリアスなしのピクセル描画
• 後から直せる図形: 線・四角・円は、確定する（Enter・別のツールに切り替え）まで、ドラッグで移動・端点で変形・色や太さの変更ができます
• レイヤー: 追加 / 複製 / 並べ替え / 表示切替 / ロック / 不透明度
• 変形: 左右・上下反転、90°回転、キャンバスサイズ変更
• スプライトとコスチューム: 複数のスプライトと、複数のコスチューム（アニメーションのコマ）
• スプライトシート: 列数・すき間・fps の設定、アニメーションのプレビュー、シート画像からの切り出し
• テンプレート: 「まっさら（サイズ・コマ数だけ決めた入れ物）」「お手本（ハート・コイン・スライム・歩くキャラ・タイル）」「pygame ゲーム用の素材セット」から始められます
• 書き出し: PNG、シート PNG、素材セット（各 PNG + シート + pygame で動かせるサンプルコード .py の ZIP）
• 保存: ブラウザ（IndexedDB）への自動保存と、プロジェクトの ZIP ファイル保存/読み込み

ショートカット

開発

pnpm install
pnpm dev        # 開発サーバー
pnpm test       # 単体テスト（Vitest）
pnpm coverage   # カバレッジ（domain / lib で 80% 以上）
pnpm e2e        # E2E テスト（Playwright。初回は `pnpm exec playwright install chromium`）
pnpm lint
pnpm build

main ブランチへの push で GitHub Pages にデプロイされます（リポジトリの Settings → Pages で Source を「GitHub Actions」にしてください）。

設計メモ

• UI は React + Radix UI（アクセシブルな部品）+ lucide（アイコン）で、スタイルは src/styles/ のデザイントークン（ライト/ダーク対応）にまとめています。フォントは Google Fonts の BIZ UDPゴシックです。
• テンプレートは src/templates/ にコードとして持ち（ドット絵は文字の並び）、選ぶたびに新しい ID のプロジェクトを組み立てて読み込みます。スプライト名・コスチューム名は書き出しファイル名になるため ASCII にしています。
• ピクセルの正データは BitmapStore（型付き配列）が持ち、Canvas は表示専用です。Zustand には revision だけを持たせます。
• コスチュームは layers[] を持ち、既定ではアンチエイリアスなし（ピクセルアート向け）です。
• Undo/Redo は、変更した矩形だけを記録する差分パッチ方式で、上限は手数ではなくバイト数です。
• プロジェクトデータには schemaVersion があり、読み込み時に「移行 → zod による検証」を行います。
• 自動保存は IndexedDB、localStorage には表示設定だけを置きます。ブラウザのデータ削除で消えることがあるため、大切な作品は「保存（ZIP）」でファイルに残してください。
• 書き出すファイル名は ASCII の安全な名前にします（pygame から読み込みやすいため）。日本語の名前は sprite1 のような連番になります。

ライセンス

MIT