リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
ワールドマップ上の昼夜・天候サイクルによる動的バイオーム色変化とプレイヤー足跡トレイルのCanvas演出強化
## 1. 目的
現在のワールドマップはバイオーム別タイル描画・天候オーバーレイが実装済みだが、プレイ中に時間が経過しても画面の色調や演出が変化しない静的な表示にとどまっている。昼夜・天候の変化をCanvasリアルタイムで反映することで、広大な96×96マップの探索に臨場感と継続プレイ意欲をもたらす。また、プレイヤーが通過したタイルに薄い足跡トレイルを描画し、「どこを歩いたか」を直感的に把握できるようにする。
## 2. 具体的な仕様
### A. 昼夜・天候の動的色変化
- PHPの `$env_weather` / `$env_time` をJavaScript変数 `RPGSF_ENV` としてplay.phpのインライン `<script>` で渡す(既存の `env_badge_icon` / `env_badge_label` 変数を再利用)。
- ワールドマップCanvasの描画ループ(既存のrequestAnimationFrameループ)に、`RPGSF_ENV` に基づくグローバルCanvasオーバーレイを追加する。
- `night`:`rgba(0,0,40,0.38)` の半透明矩形を全Canvas上に重ねる
- `dusk`:`rgba(80,30,0,0.22)` のオレンジがかった矩形
- `day`:オーバーレイなし
- `rain`:Canvas上部から下方向に流れる半透明の縦線(幅1px、長さ12px、α0.18)をランダム座標で毎フレーム40本描画
- `snow`:直径2pxの白い円をランダム座標で毎フレーム30個描画(y座標を毎フレーム+0.5ずつ進める配列管理)
- `fog`:`rgba(180,180,200,0.15)` の矩形全面オーバーレイ
- オーバーレイはタイル描画の後・プレイヤースプライト描画の前のレイヤーに挿入することで、キャラは霧の上に表示される。
### B. プレイヤー足跡トレイル
- JavaScriptの移動処理内で、プレイヤーが移動するたびに `footprints` 配列(最大200件)に `{x, y, alpha: 1.0}` を追加する。
- 毎フレームの描画ループで `footprints` の各エントリを処理:
- タイル中央に半径3pxの円を `rgba(255,255,180, entry.alpha * 0.5)` で描画
- `entry.alpha -= 0.005` でフェードアウト。alpha ≤ 0 になったエントリを配列から除去
- サブマップへの出入り時(既存のサブマップ切替処理フック)に `footprints` 配列をクリアする。
- ミニマップにも足跡を反映:訪問済みタイルの色を既存より10%明るくする(既存ミニマップの `fillStyle` に `lighten` 処理を追加)。
### C. 夜間の松明エフェクト強化
- 既存の「夜の松明風マップオーバーレイ」に加え、`env_time === 'night'` のとき、プレイヤー位置を中心に放射状グラデーション(`createRadialGradient`)で視野円を描画する。
- 内円半径: タイルサイズ×3、α0
- 外円半径: タイルサイズ×6、`rgba(0,0,40,0.55)`
- これにより夜は周囲が暗く、たいまつで照らしている演出になる。
## 3. 既存機能との整合
- 天候・時間帯はPHP側で既に `$env_weather` / `$env_time` として確定しており、変更なし。
- 既存のCanvasビューポート描画ループ・タイル描画・プレイヤースプライト描画の順序を変えず、オーバーレイをその間に挿入するだけ。
- サブマップ内でも同じオーバーレイが適用されるが、サブマップは短時間滞在のため問題なし。
- スマホ対応:Canvas全体に対する処理のため解像度・レイアウト非依存。
- セーブ/ロード・戦闘・ショップ等の既存フローには影響なし。
## 4. 実装規模
- play.phpのインライン `<script>` ブロック内のCanvas描画関数に約80〜120行追加。PHPの変更は `RPGSF_ENV` 変数の出力1行のみ。
現在のワールドマップはバイオーム別タイル描画・天候オーバーレイが実装済みだが、プレイ中に時間が経過しても画面の色調や演出が変化しない静的な表示にとどまっている。昼夜・天候の変化をCanvasリアルタイムで反映することで、広大な96×96マップの探索に臨場感と継続プレイ意欲をもたらす。また、プレイヤーが通過したタイルに薄い足跡トレイルを描画し、「どこを歩いたか」を直感的に把握できるようにする。
## 2. 具体的な仕様
### A. 昼夜・天候の動的色変化
- PHPの `$env_weather` / `$env_time` をJavaScript変数 `RPGSF_ENV` としてplay.phpのインライン `<script>` で渡す(既存の `env_badge_icon` / `env_badge_label` 変数を再利用)。
- ワールドマップCanvasの描画ループ(既存のrequestAnimationFrameループ)に、`RPGSF_ENV` に基づくグローバルCanvasオーバーレイを追加する。
- `night`:`rgba(0,0,40,0.38)` の半透明矩形を全Canvas上に重ねる
- `dusk`:`rgba(80,30,0,0.22)` のオレンジがかった矩形
- `day`:オーバーレイなし
- `rain`:Canvas上部から下方向に流れる半透明の縦線(幅1px、長さ12px、α0.18)をランダム座標で毎フレーム40本描画
- `snow`:直径2pxの白い円をランダム座標で毎フレーム30個描画(y座標を毎フレーム+0.5ずつ進める配列管理)
- `fog`:`rgba(180,180,200,0.15)` の矩形全面オーバーレイ
- オーバーレイはタイル描画の後・プレイヤースプライト描画の前のレイヤーに挿入することで、キャラは霧の上に表示される。
### B. プレイヤー足跡トレイル
- JavaScriptの移動処理内で、プレイヤーが移動するたびに `footprints` 配列(最大200件)に `{x, y, alpha: 1.0}` を追加する。
- 毎フレームの描画ループで `footprints` の各エントリを処理:
- タイル中央に半径3pxの円を `rgba(255,255,180, entry.alpha * 0.5)` で描画
- `entry.alpha -= 0.005` でフェードアウト。alpha ≤ 0 になったエントリを配列から除去
- サブマップへの出入り時(既存のサブマップ切替処理フック)に `footprints` 配列をクリアする。
- ミニマップにも足跡を反映:訪問済みタイルの色を既存より10%明るくする(既存ミニマップの `fillStyle` に `lighten` 処理を追加)。
### C. 夜間の松明エフェクト強化
- 既存の「夜の松明風マップオーバーレイ」に加え、`env_time === 'night'` のとき、プレイヤー位置を中心に放射状グラデーション(`createRadialGradient`)で視野円を描画する。
- 内円半径: タイルサイズ×3、α0
- 外円半径: タイルサイズ×6、`rgba(0,0,40,0.55)`
- これにより夜は周囲が暗く、たいまつで照らしている演出になる。
## 3. 既存機能との整合
- 天候・時間帯はPHP側で既に `$env_weather` / `$env_time` として確定しており、変更なし。
- 既存のCanvasビューポート描画ループ・タイル描画・プレイヤースプライト描画の順序を変えず、オーバーレイをその間に挿入するだけ。
- サブマップ内でも同じオーバーレイが適用されるが、サブマップは短時間滞在のため問題なし。
- スマホ対応:Canvas全体に対する処理のため解像度・レイアウト非依存。
- セーブ/ロード・戦闘・ショップ等の既存フローには影響なし。
## 4. 実装規模
- play.phpのインライン `<script>` ブロック内のCanvas描画関数に約80〜120行追加。PHPの変更は `RPGSF_ENV` 変数の出力1行のみ。
💬 返信 (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