リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
マップ移動APIのタイル差分配信によるビューポート更新の高速化
1. 目的
256×256タイルのワールドマップはプレイヤー中心のビューポートをCanvasに毎回描画しているが、現状は移動のたびにビューポート全体のタイル配列(地形・イベント・訪問状態など)をAjaxレスポンスで丸ごと再送・再パースしていると見られる。1タイル移動しても実際に変化するのはビューポートの端の数行/数列のみのため、この重複データ転送とJSON parse/Canvas再描画コストを削減し、特に低速回線やスマホでの移動レスポンスをさらに軽くする。
2. 具体的な仕様
- クライアント(map.js相当)は現在表示中のビューポート原点座標(vx, vy)と直近取得済みタイルのキャッシュをメモリに保持する。
- 移動Ajaxリクエスト(既存のmove系エンドポイント)のパラメータに、クライアントが保持している現在のビューポート原点 last_vx / last_vy を追加送信する。
- サーバー側は移動後の新しいビューポート原点(new_vx, new_vy)を計算し、last_vx/last_vyとの差分(dx, dy)が1タイル分程度で連続移動と判定できる場合、新規に視界に入る行または列のタイルデータ(地形ID・訪問フラグ・イベント有無等の最小限の配列)のみをレスポンスに含める。差分レスポンスには is_delta:true, dx, dy, new_tiles(新規タイル配列)を含める。
- サブマップ切り替え直後、seed不一致、last_vx/last_vy未送信、差分計算不能(ページ再読込やジャンプ移動)などの場合は、従来通り is_delta:false としてビューポート全体のタイル配列を返し、後方互換を維持する。
- クライアントは is_delta:true を受け取った場合、既存のオフスクリーン地形キャッシュCanvasを dx,dy 分だけ平行移動描画(drawImageでのスクロール)し、新規タイル分だけ追加で描画する。is_delta:false の場合は従来通り全描画にフォールバックする。
- 差分判定・生成ロジックは既存のワールドマップ/サブマップタイル生成関数の出力から必要範囲だけスライスする形で実装し、新規のマップ生成ロジックは追加しない。
3. 既存機能との整合
- 既存のAjaxレスポンス形式にオプションフィールド(is_delta, dx, dy, new_tiles)を追加するだけで、is_delta を送らない/古いクライアントは従来通りフル配列を受け取れるため後方互換を維持する。
- 既存の訪問済みタイル(ミニマップ)のビットパック圧縮、予測描画、移動多重送信防止、セッションバッファ経由の保存処理とは独立した変更であり、これらの仕組みはそのまま利用できる。
- サブマップ入退場やシナリオロード直後など差分計算できないケースは必ずフル配列にフォールバックするため、表示崩れのリスクを避ける。
256×256タイルのワールドマップはプレイヤー中心のビューポートをCanvasに毎回描画しているが、現状は移動のたびにビューポート全体のタイル配列(地形・イベント・訪問状態など)をAjaxレスポンスで丸ごと再送・再パースしていると見られる。1タイル移動しても実際に変化するのはビューポートの端の数行/数列のみのため、この重複データ転送とJSON parse/Canvas再描画コストを削減し、特に低速回線やスマホでの移動レスポンスをさらに軽くする。
2. 具体的な仕様
- クライアント(map.js相当)は現在表示中のビューポート原点座標(vx, vy)と直近取得済みタイルのキャッシュをメモリに保持する。
- 移動Ajaxリクエスト(既存のmove系エンドポイント)のパラメータに、クライアントが保持している現在のビューポート原点 last_vx / last_vy を追加送信する。
- サーバー側は移動後の新しいビューポート原点(new_vx, new_vy)を計算し、last_vx/last_vyとの差分(dx, dy)が1タイル分程度で連続移動と判定できる場合、新規に視界に入る行または列のタイルデータ(地形ID・訪問フラグ・イベント有無等の最小限の配列)のみをレスポンスに含める。差分レスポンスには is_delta:true, dx, dy, new_tiles(新規タイル配列)を含める。
- サブマップ切り替え直後、seed不一致、last_vx/last_vy未送信、差分計算不能(ページ再読込やジャンプ移動)などの場合は、従来通り is_delta:false としてビューポート全体のタイル配列を返し、後方互換を維持する。
- クライアントは is_delta:true を受け取った場合、既存のオフスクリーン地形キャッシュCanvasを dx,dy 分だけ平行移動描画(drawImageでのスクロール)し、新規タイル分だけ追加で描画する。is_delta:false の場合は従来通り全描画にフォールバックする。
- 差分判定・生成ロジックは既存のワールドマップ/サブマップタイル生成関数の出力から必要範囲だけスライスする形で実装し、新規のマップ生成ロジックは追加しない。
3. 既存機能との整合
- 既存のAjaxレスポンス形式にオプションフィールド(is_delta, dx, dy, new_tiles)を追加するだけで、is_delta を送らない/古いクライアントは従来通りフル配列を受け取れるため後方互換を維持する。
- 既存の訪問済みタイル(ミニマップ)のビットパック圧縮、予測描画、移動多重送信防止、セッションバッファ経由の保存処理とは独立した変更であり、これらの仕組みはそのまま利用できる。
- サブマップ入退場やシナリオロード直後など差分計算できないケースは必ずフル配列にフォールバックするため、表示崩れのリスクを避ける。
💬 返信 (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