リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
DQ3風「世界地図・フロアマップ」全体表示モーダルの追加
## 1. 目的
現在の2Dタイルマップはプレイ中に小さく表示されており、マップ全体の地形・NPC位置・宝箱・ショップ・敵出現エリアを俯瞰する手段がない。DQ3の「ルーラ地図」「フロアマップ」のように、ボタン一発でマップ全体を確認できるモーダルを追加し、探索の見通しを良くしてプレイヤーの没入感と利便性を高める。
## 2. 具体的な仕様
### 2-1. 表示トリガー
- プレイ画面(play.php)のマップ上部またはHUD内に「マップ確認 🗺」ボタンを追加する。
- スマホではフローティングボタン(右下固定)にし、PC では HUD ボタン列に並べる。
### 2-2. モーダル内容(Canvas描画)
- 既存の `rpgsf_assets()['terrain']` の地形データと `scenario['map']['rows']` を使い、モーダル内の `<canvas id="full-map-canvas">` にタイルを描画する。
- タイル1枚を 12×12px(通常の縮小版)で描画し、最大 16×16 タイルのマップなら 192×192px 程度に収まるようにする。
- 地形色はCSSクラスと対応した固定パレットをJSに持たせる(外部API不要):草=`#5a8a3c`、森=`#2d5a1b`、山=`#8b7355`、水=`#3a6fa8`、砂=`#c8a84b`、遺跡=`#6b5e7a`、毒沼=`#4a6b3a`、城床=`#7a6b8b`。
- 以下のオーバーレイを描画する:
- 🟡 プレイヤー現在位置(黄色の点滅ドット)
- 🔴 未討伐ボスの出現エリア(赤い半透明タイル)
- 💬 NPC位置(水色の小さなドット)
- 📦 未開封宝箱位置(金色の小さなドット)
- 🏪 ショップ位置(白い小さなドット)
- ⭕ 収集済みオーブ(緑)・未収集オーブ(灰)の位置(ふしぎなオーブトラッカーと連動)
- 描画データは PHP 側で `state_json` と `scenario_json` から JSON として `play.php` に埋め込む(`window.RPGSF_MAP_DATA` として)。
### 2-3. 凡例表示
- モーダル下部に凡例を横並びで表示する:プレイヤー / NPC / 宝箱 / ショップ / ボス / オーブ。
### 2-4. アニメーション
- プレイヤー位置ドットは `setInterval` で 600ms ごとに表示/非表示を切り替えて点滅させる。
- モーダルはフェードイン(CSS `transition: opacity 0.2s`)で表示する。
### 2-5. 閉じる操作
- モーダル右上の「✕」ボタン、またはモーダル背景クリックで閉じる。
- ESC キーでも閉じる(PC向け)。
## 3. 実装範囲
- **PHP変更**: `pages/play.php` に `window.RPGSF_MAP_DATA = <?= json_encode([...]) ?>;` を追加。含める内容:`map_rows`(地形配列)、`player_pos`(x/y)、`npcs`(座標配列)、`chests`(座標・opened状態)、`shop_pos`、`boss_pos`、`orbs`(座標・collected状態)。これらは既存の `$state` と `$scenario` から取得できる。
- **HTML変更**: `pages/play.php` に `<div id="full-map-modal">` モーダルHTMLと `<canvas id="full-map-canvas">` を追加。既存モーダル(ステータス画面・道具袋など)と同じ構造にする。
- **JS変更**: 既存のインラインJSブロックに `openFullMap()` / `closeFullMap()` 関数と Canvas 描画ロジックを追加(既存の戦闘JS・移動JSとは名前空間を分けて干渉しない)。
- **CSS変更**: 既存のSFC風スタイルに合わせて `#full-map-modal` のスタイルを追加(既存モーダルと同じダークオーバーレイ)。
## 4. 既存機能との整合
- 既存のタイルマップ描画・移動ロジックには一切手を加えない(読み取り専用の表示モーダルを追加するだけ)。
- `rpgsf_assets()` の地形定義はそのまま参照するだけで変更なし。
- ふしぎなオーブトラッカーの `state['orbs']` データをそのまま再利用するので、オーブ進捗との整合が自動的に保たれる。
- DB・スキーマの変更は不要。
- スマホではフローティングボタン+モーダルのスクロール対応で操作できる。
現在の2Dタイルマップはプレイ中に小さく表示されており、マップ全体の地形・NPC位置・宝箱・ショップ・敵出現エリアを俯瞰する手段がない。DQ3の「ルーラ地図」「フロアマップ」のように、ボタン一発でマップ全体を確認できるモーダルを追加し、探索の見通しを良くしてプレイヤーの没入感と利便性を高める。
## 2. 具体的な仕様
### 2-1. 表示トリガー
- プレイ画面(play.php)のマップ上部またはHUD内に「マップ確認 🗺」ボタンを追加する。
- スマホではフローティングボタン(右下固定)にし、PC では HUD ボタン列に並べる。
### 2-2. モーダル内容(Canvas描画)
- 既存の `rpgsf_assets()['terrain']` の地形データと `scenario['map']['rows']` を使い、モーダル内の `<canvas id="full-map-canvas">` にタイルを描画する。
- タイル1枚を 12×12px(通常の縮小版)で描画し、最大 16×16 タイルのマップなら 192×192px 程度に収まるようにする。
- 地形色はCSSクラスと対応した固定パレットをJSに持たせる(外部API不要):草=`#5a8a3c`、森=`#2d5a1b`、山=`#8b7355`、水=`#3a6fa8`、砂=`#c8a84b`、遺跡=`#6b5e7a`、毒沼=`#4a6b3a`、城床=`#7a6b8b`。
- 以下のオーバーレイを描画する:
- 🟡 プレイヤー現在位置(黄色の点滅ドット)
- 🔴 未討伐ボスの出現エリア(赤い半透明タイル)
- 💬 NPC位置(水色の小さなドット)
- 📦 未開封宝箱位置(金色の小さなドット)
- 🏪 ショップ位置(白い小さなドット)
- ⭕ 収集済みオーブ(緑)・未収集オーブ(灰)の位置(ふしぎなオーブトラッカーと連動)
- 描画データは PHP 側で `state_json` と `scenario_json` から JSON として `play.php` に埋め込む(`window.RPGSF_MAP_DATA` として)。
### 2-3. 凡例表示
- モーダル下部に凡例を横並びで表示する:プレイヤー / NPC / 宝箱 / ショップ / ボス / オーブ。
### 2-4. アニメーション
- プレイヤー位置ドットは `setInterval` で 600ms ごとに表示/非表示を切り替えて点滅させる。
- モーダルはフェードイン(CSS `transition: opacity 0.2s`)で表示する。
### 2-5. 閉じる操作
- モーダル右上の「✕」ボタン、またはモーダル背景クリックで閉じる。
- ESC キーでも閉じる(PC向け)。
## 3. 実装範囲
- **PHP変更**: `pages/play.php` に `window.RPGSF_MAP_DATA = <?= json_encode([...]) ?>;` を追加。含める内容:`map_rows`(地形配列)、`player_pos`(x/y)、`npcs`(座標配列)、`chests`(座標・opened状態)、`shop_pos`、`boss_pos`、`orbs`(座標・collected状態)。これらは既存の `$state` と `$scenario` から取得できる。
- **HTML変更**: `pages/play.php` に `<div id="full-map-modal">` モーダルHTMLと `<canvas id="full-map-canvas">` を追加。既存モーダル(ステータス画面・道具袋など)と同じ構造にする。
- **JS変更**: 既存のインラインJSブロックに `openFullMap()` / `closeFullMap()` 関数と Canvas 描画ロジックを追加(既存の戦闘JS・移動JSとは名前空間を分けて干渉しない)。
- **CSS変更**: 既存のSFC風スタイルに合わせて `#full-map-modal` のスタイルを追加(既存モーダルと同じダークオーバーレイ)。
## 4. 既存機能との整合
- 既存のタイルマップ描画・移動ロジックには一切手を加えない(読み取り専用の表示モーダルを追加するだけ)。
- `rpgsf_assets()` の地形定義はそのまま参照するだけで変更なし。
- ふしぎなオーブトラッカーの `state['orbs']` データをそのまま再利用するので、オーブ進捗との整合が自動的に保たれる。
- DB・スキーマの変更は不要。
- スマホではフローティングボタン+モーダルのスクロール対応で操作できる。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (rpg-story-forge))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「RPGストーリーフォージ AI風ドット絵冒険」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=rpg-story-forge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/rpg-story-forge/
ご利用ありがとうございます!
ご要望いただいた「RPGストーリーフォージ AI風ドット絵冒険」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=rpg-story-forge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/rpg-story-forge/
ご利用ありがとうございます!
Echo
Iris