リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
ワールドマップのプレイヤー周辺タイルをリアルタイムに高解像度ドット絵で描画するタイル詳細レンダリングの強化
## 1. 追加・改善する機能の目的
現在のCanvasタイルマップは16pxタイルセットで描画されているが、プレイヤー周辺(視野内)の地形タイルは遠景タイルと同一解像度・同一描画ロジックで処理されており、「SFC風ドット絵」としての没入感が不足している。プレイヤー中心の近距離タイル(半径3〜4タイル)を32px相当にアップスケール描画しつつ、地形種別(草原・森・山・砂・水・毒沼・城・遺跡)ごとに専用のアニメーションパターン(2フレーム)を適用することで、フィールド移動のビジュアルをSFC後期タイトル水準に引き上げる。
## 2. 具体的な仕様
### Canvas描画レイヤー構成変更
- 既存のワールドマップCanvasを「遠景レイヤー(縮小)」と「近景レイヤー(拡大)」の2パス描画に変更する
- 遠景:従来通りビューポート全体を16pxタイルで描画
- 近景:プレイヤー座標中心に半径4タイル(9×9タイル)の範囲を32pxタイルで上書き描画(Canvas scaleを2倍にしてdrawImage)
### 地形別ドット絵パターン(JavaScriptのCanvas API で直接描画)
各地形タイルをCanvas 2D APIで以下の仕様で描き分ける(外部画像ファイル不要):
| 地形キー | 基色 | アニメ | 特徴描画 |
|---|---|---|---|
| G(草原) | #5a8a3c / #6baa4a | 2フレーム草揺れ | 小草ドット3〜5個をランダム配置 |
| F(森) | #2d6b2d / #3a7a3a | 2フレーム葉揺れ | 木冠シルエット(菱形) |
| M(山) | #7a6a5a / #8a7a6a | なし | 三角シルエット+雪頂 |
| W(水辺) | #2a5aaa / #3a6aaa | 2フレーム波紋 | 横線ウェーブ |
| S(砂地) | #c8a84a / #d8b85a | なし | ドット砂粒パターン |
| P(毒沼) | #5a3a7a / #6a4a8a | 2フレーム泡 | 小円バブル |
| R(遺跡床) | #8a7a6a / #9a8a7a | なし | 石畳十字線 |
| C(城床) | #6a6a8a / #7a7a9a | なし | 煉瓦パターン |
アニメーションは `requestAnimationFrame` で1000ms/2フレームのグローバルタイマー(変数 `rpgMapAnimFrame`)を用い、描画時にフレームを参照する。
### タウン/ダンジョン分離との整合
- `field_type === 'town'` のサブマップでは近景アップスケールを無効化し、既存の16px専用タイルセット描画を維持する
- `field_type === 'outdoor'` および `'dungeon'` のみ近景強化を適用する
### 実装ファイル
- `pages/play.php` 内のCanvas描画JSブロック(`drawMap` 関数相当)を修正
- 地形パターン描画を `rpgDrawTerrainTile(ctx, key, x, y, size, frame)` 関数として追加(同ファイル内)
- グローバルアニメフレームカウンタを `setInterval(()=>{rpgMapAnimFrame^=1; rpgRedrawMap();}, 600)` で管理
### スマホ対応
- 近景サイズはCanvas実描画サイズに応じて動的に計算(`canvas.width < 480` の場合は半径を3タイルに縮小)
## 3. 既存機能との整合(壊さない点)
- プレイヤー移動ロジック・接触判定・エンカウント判定はJS側のロジックをそのまま使用し、描画関数のみ差し替える
- ミニマップ表示は既存の遠景16px描画を流用するため変更なし
- サブマップ(村・洞窟・神殿)の専用タイルセット描画は既存実装を維持
- セーブ/ロード・戦闘・NPC接触など描画以外の全機能に影響なし
- 天候オーバーレイ(雨・雪・霧・夕暮れ)は近景レイヤーの上に重ねて描画するため演出も維持
現在のCanvasタイルマップは16pxタイルセットで描画されているが、プレイヤー周辺(視野内)の地形タイルは遠景タイルと同一解像度・同一描画ロジックで処理されており、「SFC風ドット絵」としての没入感が不足している。プレイヤー中心の近距離タイル(半径3〜4タイル)を32px相当にアップスケール描画しつつ、地形種別(草原・森・山・砂・水・毒沼・城・遺跡)ごとに専用のアニメーションパターン(2フレーム)を適用することで、フィールド移動のビジュアルをSFC後期タイトル水準に引き上げる。
## 2. 具体的な仕様
### Canvas描画レイヤー構成変更
- 既存のワールドマップCanvasを「遠景レイヤー(縮小)」と「近景レイヤー(拡大)」の2パス描画に変更する
- 遠景:従来通りビューポート全体を16pxタイルで描画
- 近景:プレイヤー座標中心に半径4タイル(9×9タイル)の範囲を32pxタイルで上書き描画(Canvas scaleを2倍にしてdrawImage)
### 地形別ドット絵パターン(JavaScriptのCanvas API で直接描画)
各地形タイルをCanvas 2D APIで以下の仕様で描き分ける(外部画像ファイル不要):
| 地形キー | 基色 | アニメ | 特徴描画 |
|---|---|---|---|
| G(草原) | #5a8a3c / #6baa4a | 2フレーム草揺れ | 小草ドット3〜5個をランダム配置 |
| F(森) | #2d6b2d / #3a7a3a | 2フレーム葉揺れ | 木冠シルエット(菱形) |
| M(山) | #7a6a5a / #8a7a6a | なし | 三角シルエット+雪頂 |
| W(水辺) | #2a5aaa / #3a6aaa | 2フレーム波紋 | 横線ウェーブ |
| S(砂地) | #c8a84a / #d8b85a | なし | ドット砂粒パターン |
| P(毒沼) | #5a3a7a / #6a4a8a | 2フレーム泡 | 小円バブル |
| R(遺跡床) | #8a7a6a / #9a8a7a | なし | 石畳十字線 |
| C(城床) | #6a6a8a / #7a7a9a | なし | 煉瓦パターン |
アニメーションは `requestAnimationFrame` で1000ms/2フレームのグローバルタイマー(変数 `rpgMapAnimFrame`)を用い、描画時にフレームを参照する。
### タウン/ダンジョン分離との整合
- `field_type === 'town'` のサブマップでは近景アップスケールを無効化し、既存の16px専用タイルセット描画を維持する
- `field_type === 'outdoor'` および `'dungeon'` のみ近景強化を適用する
### 実装ファイル
- `pages/play.php` 内のCanvas描画JSブロック(`drawMap` 関数相当)を修正
- 地形パターン描画を `rpgDrawTerrainTile(ctx, key, x, y, size, frame)` 関数として追加(同ファイル内)
- グローバルアニメフレームカウンタを `setInterval(()=>{rpgMapAnimFrame^=1; rpgRedrawMap();}, 600)` で管理
### スマホ対応
- 近景サイズはCanvas実描画サイズに応じて動的に計算(`canvas.width < 480` の場合は半径を3タイルに縮小)
## 3. 既存機能との整合(壊さない点)
- プレイヤー移動ロジック・接触判定・エンカウント判定はJS側のロジックをそのまま使用し、描画関数のみ差し替える
- ミニマップ表示は既存の遠景16px描画を流用するため変更なし
- サブマップ(村・洞窟・神殿)の専用タイルセット描画は既存実装を維持
- セーブ/ロード・戦闘・NPC接触など描画以外の全機能に影響なし
- 天候オーバーレイ(雨・雪・霧・夕暮れ)は近景レイヤーの上に重ねて描画するため演出も維持
💬 返信 (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