リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
アイテム・装備アイコンのスプライトシート統合によるショップ/ふくろ/装備画面の高速化
1. 目的:
ショップ、ふくろ、装備欄、ステータス画面では武器・防具・道具ごとに個別のドット絵アイコン画像(PNG/WebP)を都度リクエストしており、アイテム種類数が多いほどHTTPリクエスト数が増え、特にモバイル回線や初回アクセス時の表示が遅くなっている。既存の画像高速化施策(WebPオンデマンド配信、Service Workerキャッシュ)はファイル単体の配信最適化であり、リクエスト数自体を削減する施策は未実施のため、今回はスプライトシート化でリクエスト数を1本化し体感速度を上げる。
2. 具体的な仕様:
- サーバー側: assetsディレクトリ配下のアイテム/装備/道具アイコンPNG群を、初回アクセス時またはビルド時にGD拡張(imagecreatetruecolor等)で1枚の正方形スプライトシートPNGに合成する関数 rpgsf_build_item_sprite_sheet() をlib.phpに追加。生成結果はstorage/cache/配下にファイル保存し、manifestバージョンをファイル名に含めてキャッシュバスティングする。各アイコンのシート内座標(x, y, w, h)はJSON配列としてAPCu/リクエストキャッシュ(rpgsf_cached_assets流用)に保持する。
- API: 新規に api/item_sprite_map.php を追加し、アイテムID→シート内座標のJSONと、シートPNGのURL(rpgsf_asset_url経由)を返す。ショップ/ふくろ/装備/ステータス画面の初期表示Ajax(既存のシナリオ状態取得API)にこのマップ情報を含めて配信し、追加リクエストを増やさない。
- フロント側: ショップ・ふくろ・装備・ステータス画面のアイコン表示をimgタグ個別読み込みからCanvas drawImage(sprite_sheet_image, sx, sy, sw, sh, dx, dy, dw, dh)方式、またはCSSのbackground-image一括指定+background-positionでの表示に切り替える。スプライトシート画像はページ内で1回だけロードし、以降は同じImageオブジェクトを使い回す。
- フォールバック: GD拡張が無効、またはスプライトシート生成に失敗した場合は、既存のrpgsf_image_url()による個別画像表示にそのままフォールバックし、表示自体は壊れない。
- キャッシュ: 生成したスプライトシートPNGはService Workerのキャッシュファースト対象に追加し、manifestバージョン更新時のみ再生成・再キャッシュする。
3. 既存機能との整合:
- 既存のrpgsf_image_url()やWebP変換ロジックはそのまず残し、スプライトシートが利用できない環境では従来通り個別画像を表示するため後方互換。
- ショップ購入、ふくろ内アイテム使用、装備変更、ステータス表示のロジックには一切手を加えず、アイコン表示部分のみを差し替える。
- モンスター画像やマップ・背景画像など既存のWebPオンデマンド配信対象は対象外とし、今回はアイテム/装備/道具アイコンに限定してスコープを絞ることで1サイクルで実装可能な規模に収める。
ショップ、ふくろ、装備欄、ステータス画面では武器・防具・道具ごとに個別のドット絵アイコン画像(PNG/WebP)を都度リクエストしており、アイテム種類数が多いほどHTTPリクエスト数が増え、特にモバイル回線や初回アクセス時の表示が遅くなっている。既存の画像高速化施策(WebPオンデマンド配信、Service Workerキャッシュ)はファイル単体の配信最適化であり、リクエスト数自体を削減する施策は未実施のため、今回はスプライトシート化でリクエスト数を1本化し体感速度を上げる。
2. 具体的な仕様:
- サーバー側: assetsディレクトリ配下のアイテム/装備/道具アイコンPNG群を、初回アクセス時またはビルド時にGD拡張(imagecreatetruecolor等)で1枚の正方形スプライトシートPNGに合成する関数 rpgsf_build_item_sprite_sheet() をlib.phpに追加。生成結果はstorage/cache/配下にファイル保存し、manifestバージョンをファイル名に含めてキャッシュバスティングする。各アイコンのシート内座標(x, y, w, h)はJSON配列としてAPCu/リクエストキャッシュ(rpgsf_cached_assets流用)に保持する。
- API: 新規に api/item_sprite_map.php を追加し、アイテムID→シート内座標のJSONと、シートPNGのURL(rpgsf_asset_url経由)を返す。ショップ/ふくろ/装備/ステータス画面の初期表示Ajax(既存のシナリオ状態取得API)にこのマップ情報を含めて配信し、追加リクエストを増やさない。
- フロント側: ショップ・ふくろ・装備・ステータス画面のアイコン表示をimgタグ個別読み込みからCanvas drawImage(sprite_sheet_image, sx, sy, sw, sh, dx, dy, dw, dh)方式、またはCSSのbackground-image一括指定+background-positionでの表示に切り替える。スプライトシート画像はページ内で1回だけロードし、以降は同じImageオブジェクトを使い回す。
- フォールバック: GD拡張が無効、またはスプライトシート生成に失敗した場合は、既存のrpgsf_image_url()による個別画像表示にそのままフォールバックし、表示自体は壊れない。
- キャッシュ: 生成したスプライトシートPNGはService Workerのキャッシュファースト対象に追加し、manifestバージョン更新時のみ再生成・再キャッシュする。
3. 既存機能との整合:
- 既存のrpgsf_image_url()やWebP変換ロジックはそのまず残し、スプライトシートが利用できない環境では従来通り個別画像を表示するため後方互換。
- ショップ購入、ふくろ内アイテム使用、装備変更、ステータス表示のロジックには一切手を加えず、アイコン表示部分のみを差し替える。
- モンスター画像やマップ・背景画像など既存のWebPオンデマンド配信対象は対象外とし、今回はアイテム/装備/道具アイコンに限定してスコープを絞ることで1サイクルで実装可能な規模に収める。
💬 返信 (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