リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
戦闘突入前の敵・背景画像バックグラウンドプリロードによる遭遇時カクつき解消
1. 目的
マップ移動中はランダムエンカウントでいつ戦闘に切り替わるか分からないが、現状は戦闘開始Ajaxのレスポンスを受け取ってから初めてモンスター画像・戦闘背景画像のImage()生成・デコードが始まるため、初回表示時に一瞬の白画面/カクつきが発生しやすい。マップ移動〜戦闘遷移までの体感速度をさらに底上げする。
2. 具体的な仕様
- マップ画面(play.php相当)のサーバーサイドで、現在プレイ中のシナリオ・現在地(フィールド/ダンジョン/ボス/バイオーム/天候/時間帯)から『このエリアで出現しうるモンスター画像パス一覧』と『対応する戦闘背景画像パス一覧』を、既存の敵テーブル・生成器データから抽出し、JSON配列としてマップ画面のJSにインライン埋め込みする(サーバー側は読み取りのみで新規Ajaxエンドポイント不要、既存のシナリオ/敵データ構造をそのまま再利用)。
- マップ画面のJS側で、DOM読み込み完了後にrequestIdleCallback(未対応ブラウザはsetTimeoutで代替)を使い、優先度を下げた形で対象画像URL(既存のrpgsf_image_url()経由のWebP変換URL含む)ごとにnew Image()を生成してsrcを設定し、対応ブラウザでは`img.decode()`を呼んでGPUデコードまで先に完了させる。
- 一度に大量のリクエストを送らないよう、同時実行数を3〜4件程度に制限したキュー処理とし、1画面あたりの先読み枚数は上限20枚程度に絞る。すでにブラウザキャッシュ/Service Workerキャッシュにある画像は即座に完了するため負荷は小さい。
- 戦闘開始Ajaxのレスポンスを受け取った通常の描画処理は一切変更しない。プリロードは『先に読み込んでキャッシュに乗せておくだけ』のfire-and-forgetな追加処理であり、戦闘描画ロジック自体はプリロードの成否に依存しないフォールバック(従来通りその場でImage()生成)を維持する。
- マップ移動でエリア(フィールド種別・バイオーム・訪問先サブマップ)が切り替わったタイミングで、プリロード対象リストも差分更新し、新エリアの敵画像のみ追加で先読みする(全消去して再取得はしない)。
3. 既存機能との整合
- 新規APIエンドポイントを追加せず、既存のマップ・戦闘・アセット取得処理(WebP変換、Service Workerキャッシュ、IndexedDBタイルキャッシュ)にも一切変更を加えない。プリロードはあくまで既存の画像URL群に対してブラウザ標準のImage先読みを追加するだけの後方互換な追加機能。
- プリロード処理でエラー(画像404やdecode失敗)が発生しても握りつぶし、既存の戦闘描画・マップ移動には影響を与えない。
- PC/スマホ双方で動作し、requestIdleCallback非対応環境でも setTimeout フォールバックで同様に動作する。
マップ移動中はランダムエンカウントでいつ戦闘に切り替わるか分からないが、現状は戦闘開始Ajaxのレスポンスを受け取ってから初めてモンスター画像・戦闘背景画像のImage()生成・デコードが始まるため、初回表示時に一瞬の白画面/カクつきが発生しやすい。マップ移動〜戦闘遷移までの体感速度をさらに底上げする。
2. 具体的な仕様
- マップ画面(play.php相当)のサーバーサイドで、現在プレイ中のシナリオ・現在地(フィールド/ダンジョン/ボス/バイオーム/天候/時間帯)から『このエリアで出現しうるモンスター画像パス一覧』と『対応する戦闘背景画像パス一覧』を、既存の敵テーブル・生成器データから抽出し、JSON配列としてマップ画面のJSにインライン埋め込みする(サーバー側は読み取りのみで新規Ajaxエンドポイント不要、既存のシナリオ/敵データ構造をそのまま再利用)。
- マップ画面のJS側で、DOM読み込み完了後にrequestIdleCallback(未対応ブラウザはsetTimeoutで代替)を使い、優先度を下げた形で対象画像URL(既存のrpgsf_image_url()経由のWebP変換URL含む)ごとにnew Image()を生成してsrcを設定し、対応ブラウザでは`img.decode()`を呼んでGPUデコードまで先に完了させる。
- 一度に大量のリクエストを送らないよう、同時実行数を3〜4件程度に制限したキュー処理とし、1画面あたりの先読み枚数は上限20枚程度に絞る。すでにブラウザキャッシュ/Service Workerキャッシュにある画像は即座に完了するため負荷は小さい。
- 戦闘開始Ajaxのレスポンスを受け取った通常の描画処理は一切変更しない。プリロードは『先に読み込んでキャッシュに乗せておくだけ』のfire-and-forgetな追加処理であり、戦闘描画ロジック自体はプリロードの成否に依存しないフォールバック(従来通りその場でImage()生成)を維持する。
- マップ移動でエリア(フィールド種別・バイオーム・訪問先サブマップ)が切り替わったタイミングで、プリロード対象リストも差分更新し、新エリアの敵画像のみ追加で先読みする(全消去して再取得はしない)。
3. 既存機能との整合
- 新規APIエンドポイントを追加せず、既存のマップ・戦闘・アセット取得処理(WebP変換、Service Workerキャッシュ、IndexedDBタイルキャッシュ)にも一切変更を加えない。プリロードはあくまで既存の画像URL群に対してブラウザ標準のImage先読みを追加するだけの後方互換な追加機能。
- プリロード処理でエラー(画像404やdecode失敗)が発生しても握りつぶし、既存の戦闘描画・マップ移動には影響を与えない。
- PC/スマホ双方で動作し、requestIdleCallback非対応環境でも setTimeout フォールバックで同様に動作する。
💬 返信 (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