リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
マップ・サブマップ地形タイル画像のスプライトシート統合によるマップ移動の描画高速化
1. 目的:
ワールドマップ(256×256タイル)やサブマップ(村・洞窟・神殿)の描画では、バイオーム別・座標別に多数の個別PNG/WebPタイル画像を都度リクエスト・drawImageしているため、移動のたびに新しいタイル種別が視界に入るとブラウザが個別HTTPリクエストを発行し、初回表示や高速移動時にわずかな描画遅延・ちらつきが発生しやすい。アイテムアイコンは既にスプライトシート化済みだが、地形タイル画像は未対応のため、同様の手法をマップ描画にも適用してリクエスト数と復号コストを削減し、移動の体感速度をさらに向上させる。
2. 具体的な仕様:
- サーバー側に `api/tile_spritesheet.php` を追加し、バイオーム・地形種別(草原/砂漠/雪原/沼地/海岸/火山/河川/大洋/村/洞窟/神殿の各タイルセット)ごとに1枚のスプライトシートPNGを生成する。生成結果はディスクキャッシュ(既存のWebPディスクキャッシュ機構と同様のディレクトリ運用)に保存し、manifestバージョンをキーにして再利用する。
- 併せて各タイルの `{tile_id: {sx, sy, sw, sh}}` を表す座標マッピングJSONを1つのAPIレスポンスとして返却する(`api/tile_spritesheet_map.php` またはシート生成時に同梱)。
- フロントエンドのマップ描画JS (`js/map.js` 相当) に、スプライトシート1枚をロード後、Canvas描画時に個別画像URLではなく `drawImage(sheetImage, sx, sy, sw, sh, dx, dy, tileSize, tileSize)` を使う描画パスを追加する。
- スプライトシートまたは座標マップの取得に失敗した場合は、既存の個別タイル画像読み込み処理(現行の `rpgsf_image_url` によるURL生成)へ自動フォールバックし、描画自体が失敗しないようにする。
- config.php に `tile_spritesheet` のON/OFFフラグ(デフォルトtrue)を追加し、環境によって無効化できるようにする。
- 天候・時間帯の演出オーバーレイ(雨・雪・霧・夕暮れ・夜)は従来通り別レイヤーで描画し、スプライトシート化の対象は地形タイル本体のみとする。
3. 既存機能との整合(壊さない点):
- 個別PNG/WebP画像やAPI (`api/webp_image.php`) は引き続き提供し、スプライトシート未生成・読み込み失敗時はそのままフォールバックするため、既存の描画結果・画像URL体系を破壊しない。
- Service Workerのキャッシュ対象にスプライトシートURLを追加するだけで、既存キャッシュ戦略(キャッシュファースト)をそのまま踏襲できる。
- ミニマップ・図鑑・戦闘背景など他画面の画像表示ロジックには影響を与えず、ワールドマップ/サブマップ描画コンポーネントのみを対象にする。
- state_json やAjax API (`move` 等) のレスポンス形式・DB保存構造には変更を加えない。
ワールドマップ(256×256タイル)やサブマップ(村・洞窟・神殿)の描画では、バイオーム別・座標別に多数の個別PNG/WebPタイル画像を都度リクエスト・drawImageしているため、移動のたびに新しいタイル種別が視界に入るとブラウザが個別HTTPリクエストを発行し、初回表示や高速移動時にわずかな描画遅延・ちらつきが発生しやすい。アイテムアイコンは既にスプライトシート化済みだが、地形タイル画像は未対応のため、同様の手法をマップ描画にも適用してリクエスト数と復号コストを削減し、移動の体感速度をさらに向上させる。
2. 具体的な仕様:
- サーバー側に `api/tile_spritesheet.php` を追加し、バイオーム・地形種別(草原/砂漠/雪原/沼地/海岸/火山/河川/大洋/村/洞窟/神殿の各タイルセット)ごとに1枚のスプライトシートPNGを生成する。生成結果はディスクキャッシュ(既存のWebPディスクキャッシュ機構と同様のディレクトリ運用)に保存し、manifestバージョンをキーにして再利用する。
- 併せて各タイルの `{tile_id: {sx, sy, sw, sh}}` を表す座標マッピングJSONを1つのAPIレスポンスとして返却する(`api/tile_spritesheet_map.php` またはシート生成時に同梱)。
- フロントエンドのマップ描画JS (`js/map.js` 相当) に、スプライトシート1枚をロード後、Canvas描画時に個別画像URLではなく `drawImage(sheetImage, sx, sy, sw, sh, dx, dy, tileSize, tileSize)` を使う描画パスを追加する。
- スプライトシートまたは座標マップの取得に失敗した場合は、既存の個別タイル画像読み込み処理(現行の `rpgsf_image_url` によるURL生成)へ自動フォールバックし、描画自体が失敗しないようにする。
- config.php に `tile_spritesheet` のON/OFFフラグ(デフォルトtrue)を追加し、環境によって無効化できるようにする。
- 天候・時間帯の演出オーバーレイ(雨・雪・霧・夕暮れ・夜)は従来通り別レイヤーで描画し、スプライトシート化の対象は地形タイル本体のみとする。
3. 既存機能との整合(壊さない点):
- 個別PNG/WebP画像やAPI (`api/webp_image.php`) は引き続き提供し、スプライトシート未生成・読み込み失敗時はそのままフォールバックするため、既存の描画結果・画像URL体系を破壊しない。
- Service Workerのキャッシュ対象にスプライトシートURLを追加するだけで、既存キャッシュ戦略(キャッシュファースト)をそのまま踏襲できる。
- ミニマップ・図鑑・戦闘背景など他画面の画像表示ロジックには影響を与えず、ワールドマップ/サブマップ描画コンポーネントのみを対象にする。
- state_json やAjax API (`move` 等) のレスポンス形式・DB保存構造には変更を加えない。
💬 返信 (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