リクエスト詳細
🐛 バグ報告
対応完了
対象アプリ: ドット絵メーカー PixelForge
スプライトシート出力でフレーム数が1のとき canvas.toBlob 等が未定義エラーになる/シート列数がフレーム数を超えるとブランク列が含まれたまま出力される
## 1. 不具合の内容
`pages/editor.php` および `assets/editor.js` のスプライトシート出力処理(`btnSheet` ボタン起点)には以下の2つの問題が存在します。
### 問題A: フレーム数=1 のときシートモーダルが機能しない可能性
`sheetModal` の描画ループは `frames` 配列を列×行で並べますが、フレームが1枚しかない状態でスプライトシート出力を実行すると、列数デフォルト値(例: 4列)に対してフレームが1枚しかなく、残り3セルが空のまま `null` グリッドを描画しようとする。`drawGridToContext` は `targetGrid[r][c]` を参照するため、`undefined` アクセスとなり **TypeError** が発生し出力処理全体がクラッシュする。
### 問題B: 列数 > フレーム数 のとき余白セルを描画しようとして同様にクラッシュ
例: フレーム3枚・列数4を指定した場合、4列目のセル(`frames[3]` = undefined)の `.grid` を参照しようとして `Cannot read properties of undefined (reading 'grid')` が発生する。
## 2. 根拠・発生しそうな条件
- `editor.js` の `createFrame` / `frames` 配列管理コードを見ると、初期状態は `frames = [createFrame()]`(1フレームのみ)
- スプライトシートは「最大16フレーム」対応だが、フレームを増やさずに `btnSheet` を押すユーザーは多い(1フレームで描いてPNG出力の代わりにシート出力を使うケース)
- シート描画ループで `frames[i]` が `undefined` のとき `.grid` 参照でTypeError → `canvas.toBlob` 等に到達できず、モーダルに何も表示されないかコンソールエラーで止まる
- スマホでは開発者ツールを開かないためエラーに気づかず「ボタンを押しても何も起きない」と認識される
## 3. 期待動作
- フレーム数が列数に満たない場合、余りのセルは透明(空)として描画し、正常にシートPNGを出力する
- フレーム数=1 でも列数=1として自動調整するか、余剰セルをスキップして出力できる
## 4. 修正方針
`assets/editor.js` のスプライトシート描画ループ内で、`frames[i]` が存在するかを必ずガードする。
```js
// 修正前(想定コード)
for (var i = 0; i < totalCells; i++) {
var f = frames[i]; // ← frames[i] が undefined になりうる
drawGridToContext(shCtx, f.grid, ...);
}
// 修正後
for (var i = 0; i < totalCells; i++) {
var f = frames[i];
if (!f) continue; // ← フレームが存在しないセルはスキップ
drawGridToContext(shCtx, f.grid, ...);
}
```
あわせて、シートモーダルを開く際に「現在のフレーム数を上限として列数のデフォルト/最大値をクランプ」する処理を追加する。
```js
// シートモーダルを開くとき
var maxCols = Math.min(frames.length, 16);
colsInput.max = maxCols;
if (parseInt(colsInput.value) > maxCols) colsInput.value = maxCols;
```
これにより既存の全描画・エクスポート・フレーム管理機能には一切影響しない。
`pages/editor.php` および `assets/editor.js` のスプライトシート出力処理(`btnSheet` ボタン起点)には以下の2つの問題が存在します。
### 問題A: フレーム数=1 のときシートモーダルが機能しない可能性
`sheetModal` の描画ループは `frames` 配列を列×行で並べますが、フレームが1枚しかない状態でスプライトシート出力を実行すると、列数デフォルト値(例: 4列)に対してフレームが1枚しかなく、残り3セルが空のまま `null` グリッドを描画しようとする。`drawGridToContext` は `targetGrid[r][c]` を参照するため、`undefined` アクセスとなり **TypeError** が発生し出力処理全体がクラッシュする。
### 問題B: 列数 > フレーム数 のとき余白セルを描画しようとして同様にクラッシュ
例: フレーム3枚・列数4を指定した場合、4列目のセル(`frames[3]` = undefined)の `.grid` を参照しようとして `Cannot read properties of undefined (reading 'grid')` が発生する。
## 2. 根拠・発生しそうな条件
- `editor.js` の `createFrame` / `frames` 配列管理コードを見ると、初期状態は `frames = [createFrame()]`(1フレームのみ)
- スプライトシートは「最大16フレーム」対応だが、フレームを増やさずに `btnSheet` を押すユーザーは多い(1フレームで描いてPNG出力の代わりにシート出力を使うケース)
- シート描画ループで `frames[i]` が `undefined` のとき `.grid` 参照でTypeError → `canvas.toBlob` 等に到達できず、モーダルに何も表示されないかコンソールエラーで止まる
- スマホでは開発者ツールを開かないためエラーに気づかず「ボタンを押しても何も起きない」と認識される
## 3. 期待動作
- フレーム数が列数に満たない場合、余りのセルは透明(空)として描画し、正常にシートPNGを出力する
- フレーム数=1 でも列数=1として自動調整するか、余剰セルをスキップして出力できる
## 4. 修正方針
`assets/editor.js` のスプライトシート描画ループ内で、`frames[i]` が存在するかを必ずガードする。
```js
// 修正前(想定コード)
for (var i = 0; i < totalCells; i++) {
var f = frames[i]; // ← frames[i] が undefined になりうる
drawGridToContext(shCtx, f.grid, ...);
}
// 修正後
for (var i = 0; i < totalCells; i++) {
var f = frames[i];
if (!f) continue; // ← フレームが存在しないセルはスキップ
drawGridToContext(shCtx, f.grid, ...);
}
```
あわせて、シートモーダルを開く際に「現在のフレーム数を上限として列数のデフォルト/最大値をクランプ」する処理を追加する。
```js
// シートモーダルを開くとき
var maxCols = Math.min(frames.length, 16);
colsInput.max = maxCols;
if (parseInt(colsInput.value) > maxCols) colsInput.value = maxCols;
```
これにより既存の全描画・エクスポート・フレーム管理機能には一切影響しない。
💬 返信 (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