リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
マップCanvas描画のオフスクリーン地形キャッシュ化によるフレームレート向上
1. 目的:
これまでの高速化はAPCuキャッシュ・DB保存間引き・Ajax差分応答・プリフェッチなどサーバー/通信側が中心だった。残る体感速度のボトルネックはクライアント側のCanvas描画で、256×256タイルのワールドマップやサブマップを毎フレーム全タイル再計算・再描画しており、天候演出やアニメーションのある戦闘/移動中にスマホでコマ落ちしやすい。地形レイヤーの再計算を必要な時だけに限定し、通常フレームはオフスクリーンキャッシュのblitのみにすることで描画負荷を下げ、移動・戦闘演出を含む全体の体感速度を底上げする。
2. 具体的な仕様:
- マップ描画用JS(map/canvas描画部)に、ビューポートと同サイズのオフスクリーン用canvas(document.createElement('canvas')、DOMに追加しない)を1枚用意し、地形タイル・既訪問マスク・地名アイコンなど「プレイヤー移動やアニメーションだけでは変化しない静的レイヤー」をここに描画してキャッシュする。
- キャッシュキーとして「カメラの左上タイル座標」「現在の天候」「時間帯(昼/夕/夜)」「バイオーム/サブマップID」を保持し、いずれかが変化した場合のみオフスクリーンレイヤーを再描画する。プレイヤーがタイル境界をまたがない小さな移動アニメーション中はキャッシュを再利用する。
- メインの描画ループ(requestAnimationFrame)では、まずオフスクリーンキャッシュをdrawImageで一括転写し、その上にプレイヤー/NPC/モンスターのスプライト、天候パーティクル、HUDラベルなど毎フレーム変化する要素だけを重ね描きする。
- 戦闘画面・サブマップ・ミニマップにも同様のパターンを適用できるよう、地形描画関数とオーバーレイ描画関数を分離するリファクタリングを行う。
- 低負荷モード判定は追加せず、既存の描画結果(見た目・色・アイコン配置)は変更しないことを最優先とする。
3. 既存機能との整合:
- サーバー側API・DBスキーマ・保存データ形式の変更は一切なし。
- 既存のCanvas描画関数のシグネチャや呼び出し箇所は極力維持し、内部実装のみをキャッシュ経由に置き換える。
- 天候・時間帯・バイオーム別演出、ミニマップ、地名ラベル、プリフェッチ済み画像の利用方法はそのまま流用し、見た目の後方互換を保つ。
- 既存のfastTap/予測描画/差分Ajaxの仕組みとは独立した層で動作するため、既存の移動高速化ロジックと競合しない。
これまでの高速化はAPCuキャッシュ・DB保存間引き・Ajax差分応答・プリフェッチなどサーバー/通信側が中心だった。残る体感速度のボトルネックはクライアント側のCanvas描画で、256×256タイルのワールドマップやサブマップを毎フレーム全タイル再計算・再描画しており、天候演出やアニメーションのある戦闘/移動中にスマホでコマ落ちしやすい。地形レイヤーの再計算を必要な時だけに限定し、通常フレームはオフスクリーンキャッシュのblitのみにすることで描画負荷を下げ、移動・戦闘演出を含む全体の体感速度を底上げする。
2. 具体的な仕様:
- マップ描画用JS(map/canvas描画部)に、ビューポートと同サイズのオフスクリーン用canvas(document.createElement('canvas')、DOMに追加しない)を1枚用意し、地形タイル・既訪問マスク・地名アイコンなど「プレイヤー移動やアニメーションだけでは変化しない静的レイヤー」をここに描画してキャッシュする。
- キャッシュキーとして「カメラの左上タイル座標」「現在の天候」「時間帯(昼/夕/夜)」「バイオーム/サブマップID」を保持し、いずれかが変化した場合のみオフスクリーンレイヤーを再描画する。プレイヤーがタイル境界をまたがない小さな移動アニメーション中はキャッシュを再利用する。
- メインの描画ループ(requestAnimationFrame)では、まずオフスクリーンキャッシュをdrawImageで一括転写し、その上にプレイヤー/NPC/モンスターのスプライト、天候パーティクル、HUDラベルなど毎フレーム変化する要素だけを重ね描きする。
- 戦闘画面・サブマップ・ミニマップにも同様のパターンを適用できるよう、地形描画関数とオーバーレイ描画関数を分離するリファクタリングを行う。
- 低負荷モード判定は追加せず、既存の描画結果(見た目・色・アイコン配置)は変更しないことを最優先とする。
3. 既存機能との整合:
- サーバー側API・DBスキーマ・保存データ形式の変更は一切なし。
- 既存のCanvas描画関数のシグネチャや呼び出し箇所は極力維持し、内部実装のみをキャッシュ経由に置き換える。
- 天候・時間帯・バイオーム別演出、ミニマップ、地名ラベル、プリフェッチ済み画像の利用方法はそのまま流用し、見た目の後方互換を保つ。
- 既存のfastTap/予測描画/差分Ajaxの仕組みとは独立した層で動作するため、既存の移動高速化ロジックと競合しない。
💬 返信 (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