リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ドット絵メーカー PixelForge
スプライトシート出力機能の追加
## 1. 目的
ドット絵をゲーム素材として使いたいユーザー(個人ゲーム開発者・アニメーション制作者)向けに、複数フレームをまとめてスプライトシートとしてPNGエクスポートできる機能を追加する。既存の単フレーム描画・エクスポート機能を壊さず、「フレーム管理パネル」を新たに追加する形で後方互換を保つ。
## 2. 具体的な仕様
### 2-1. フレーム管理パネル
- エディタ左サイドバー(PC)またはツールバー下部(スマホ)に「FRAMES」パネルを追加する。
- パネルにはサムネイル付きのフレームリストを縦並びで表示する(最大16フレーム)。
- 操作ボタン:「+ フレーム追加」「× 削除」「↑↓ 並び替え(ドラッグ or 矢印ボタン)」「フレームをコピー」の4種。
- 現在編集中のフレームはボーダーハイライトで強調表示。
- フレームをクリックするとキャンバスがそのフレームの内容に切り替わる。
- 各フレームのデータはJavaScript配列(2次元ピクセルカラー配列)としてメモリ上に保持し、既存のUndo/Redo履歴はフレームごとに独立して管理する。
### 2-2. アニメーションプレビュー
- 「▶ プレビュー」ボタンをフレームパネル上部に配置。
- クリックするとモーダルダイアログが開き、フレームを順番にCanvas上でループ再生する。
- FPS選択:4 / 8 / 12 / 24 FPSをセレクトボックスで切り替え可能。
- モーダル内に「⏸ 一時停止」「✕ 閉じる」ボタンを設置。
- プレビュー表示サイズは固定128×128px(CSS拡大)でキャンバスサイズに依存しない。
### 2-3. スプライトシートエクスポート
- 既存の「PNGエクスポート」ボタンの隣に「シート出力」ボタンを追加。
- クリックすると設定ダイアログを表示:
- 列数:1〜8列(セレクトボックス)
- 出力倍率:1倍 / 4倍 / 8倍(既存と同じ選択肢)
- フレーム間隔(ガター):0 / 1 / 2px
- 「出力」ボタン押下でJavaScript側でOffscreen Canvasに全フレームを指定列数で並べて描画し、`canvas.toBlob()`でPNGファイルとしてダウンロードさせる(ファイル名:`pixelforge_sheet_YYYYMMDD_HHMMSS.png`)。
- サーバーサイド処理なし、すべてクライアント側JSで完結。
### 2-4. ギャラリー投稿との整合
- ギャラリー投稿時は「フレーム1のみ」をサムネイルとして使用し、既存の投稿フローをそのまま流用する。
- フレームが1枚のみの場合は従来通りの単フレーム動作となり、UIもフレームパネルを最小化表示にして従来ユーザーの操作感を損なわない。
## 3. 既存機能との整合(壊さない点)
- ペン・バケツ・消しゴム・スポイト・矩形・直線の6ツールはフレームをまたいで同じ動作を維持。
- Undo/Redoはフレームごとに独立したスタックを持つため、既存の30ステップ制限ロジックを使い回せる。
- PNGエクスポート(単フレーム)ボタンは現在のアクティブフレームのみを出力する形で既存動作を完全維持。
- カラーパレット・プリセットはすべてのフレームで共通として使用し、変更不要。
- DBスキーマ変更なし(ギャラリー投稿は引き続き単一PNG画像のみ)。
ドット絵をゲーム素材として使いたいユーザー(個人ゲーム開発者・アニメーション制作者)向けに、複数フレームをまとめてスプライトシートとしてPNGエクスポートできる機能を追加する。既存の単フレーム描画・エクスポート機能を壊さず、「フレーム管理パネル」を新たに追加する形で後方互換を保つ。
## 2. 具体的な仕様
### 2-1. フレーム管理パネル
- エディタ左サイドバー(PC)またはツールバー下部(スマホ)に「FRAMES」パネルを追加する。
- パネルにはサムネイル付きのフレームリストを縦並びで表示する(最大16フレーム)。
- 操作ボタン:「+ フレーム追加」「× 削除」「↑↓ 並び替え(ドラッグ or 矢印ボタン)」「フレームをコピー」の4種。
- 現在編集中のフレームはボーダーハイライトで強調表示。
- フレームをクリックするとキャンバスがそのフレームの内容に切り替わる。
- 各フレームのデータはJavaScript配列(2次元ピクセルカラー配列)としてメモリ上に保持し、既存のUndo/Redo履歴はフレームごとに独立して管理する。
### 2-2. アニメーションプレビュー
- 「▶ プレビュー」ボタンをフレームパネル上部に配置。
- クリックするとモーダルダイアログが開き、フレームを順番にCanvas上でループ再生する。
- FPS選択:4 / 8 / 12 / 24 FPSをセレクトボックスで切り替え可能。
- モーダル内に「⏸ 一時停止」「✕ 閉じる」ボタンを設置。
- プレビュー表示サイズは固定128×128px(CSS拡大)でキャンバスサイズに依存しない。
### 2-3. スプライトシートエクスポート
- 既存の「PNGエクスポート」ボタンの隣に「シート出力」ボタンを追加。
- クリックすると設定ダイアログを表示:
- 列数:1〜8列(セレクトボックス)
- 出力倍率:1倍 / 4倍 / 8倍(既存と同じ選択肢)
- フレーム間隔(ガター):0 / 1 / 2px
- 「出力」ボタン押下でJavaScript側でOffscreen Canvasに全フレームを指定列数で並べて描画し、`canvas.toBlob()`でPNGファイルとしてダウンロードさせる(ファイル名:`pixelforge_sheet_YYYYMMDD_HHMMSS.png`)。
- サーバーサイド処理なし、すべてクライアント側JSで完結。
### 2-4. ギャラリー投稿との整合
- ギャラリー投稿時は「フレーム1のみ」をサムネイルとして使用し、既存の投稿フローをそのまま流用する。
- フレームが1枚のみの場合は従来通りの単フレーム動作となり、UIもフレームパネルを最小化表示にして従来ユーザーの操作感を損なわない。
## 3. 既存機能との整合(壊さない点)
- ペン・バケツ・消しゴム・スポイト・矩形・直線の6ツールはフレームをまたいで同じ動作を維持。
- Undo/Redoはフレームごとに独立したスタックを持つため、既存の30ステップ制限ロジックを使い回せる。
- PNGエクスポート(単フレーム)ボタンは現在のアクティブフレームのみを出力する形で既存動作を完全維持。
- カラーパレット・プリセットはすべてのフレームで共通として使用し、変更不要。
- DBスキーマ変更なし(ギャラリー投稿は引き続き単一PNG画像のみ)。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (pixelforge))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ドット絵メーカー PixelForge」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=pixelforge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/pixelforge/
ご利用ありがとうございます!
ご要望いただいた「ドット絵メーカー PixelForge」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=pixelforge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/pixelforge/
ご利用ありがとうございます!
Echo
Iris