# ゲームモデルを保ちながら表示を調整する > シミュレーション状態を画面サイズに結び付けることなく、ゲーム サーフェスをそのコンテナに適応させ、変更するビューポート間でレイアウトをテストします。 - URL: https://oneshotgems.ai/ja/topics/responsive-game-layouts - カテゴリ: ゲーム開発者向け - 種類: ガイド - 更新日: 2026年10月5日 スマートフォンを回転したり、ブラウザーのバーが表示されたり、パネルが開いたりすると、ブラウザーゲームを表示するページのサイズが変わることがあります。ゲームのシミュレーション座標と、表示するcanvasのサイズを分けてください。そうすれば、表示領域が変わるたびにオブジェクトの位置や物理演算、当たり判定が意図せず変わることなく、レイアウトを調整できます。 ## 容器のサイズを測ってスケールを選択する ウィンドウがプレイ可能領域であると想定するのではなく、ゲーム コンテナの寸法を使用します。 ResizeObserver は、ビューポートのサイズ変更ではなく周囲のレイアウトによって引き起こされる変更を含め、その要素が変更されたときにレポートできます。ゲームを狭いアスペクト比でレターボックス、クロップ、またはリフローするかどうかを決定し、円を楕円に引き伸ばす代わりに選択肢を表示します。 固定仮想プレイフィールドの場合、その幅と高さに適合する 1 つのスケール係数を計算し、残りのスペースを中央に配置します。ヒット テストの前に、同じ変換の逆変換を通じてポインター座標を変換します。リフロー ゲームの場合は、コントロールが以前のサイズの位置を使用し続けないように、レイアウト アンカーと衝突シェイプを一緒に更新します。 ## シミュレーション ループから外してサイズ変更を続ける ゲーム ワールドを安定した単位で保存し、キャンバスの背景解像度、CSS サイズ、デバイスのピクセル比をレンダリングの問題として扱います。サイズが変更された場合は、描画面を更新して再描画します。ゲーム ルールで要求されない限り、レベルをリセットしたり、オブジェクトの状態を再計算したりしないでください。この分離により、ツールバーのサイズ変更が再起動のように見えるのを防ぎます。 ゲームがアクティブなときに、狭いビューポートと広いビューポート、デスクトップのサイズ変更と向きの変更をテストします。文字の折り返し、タッチ対象位置、座標変換の確認を行います。 MDN の ResizeObserver ガイドでは、要素の寸法の観察について説明しており、コールバック内で観察されるサイズを変更するとループが発生する可能性があると警告しています。 ## よくある質問 **キャンバスのサイズが変更された場合、ゲームワールドのサイズも変更する必要がありますか?** 通常は、シミュレーションの座標を安定させて、プレゼンテーションやレイアウトを調整します。デザインでプレイフィールドを意図的に変更する場合は、そのルール、オブジェクト、および入力マッピングを一緒に更新します。 **ウィンドウのサイズ変更だけではなく ResizeObserver を使用するのはなぜですか?** ゲームコンテナは、ウィンドウのサイズを変更しなくても、周囲のレイアウトによってサイズが変更される可能性があります。 ResizeObserver は要素の寸法変更を直接報告します。 ## 気になることを、もっと - [ブラウザーゲームの画面回転に対応する](https://oneshotgems.ai/ja/topics/game-orientation-changes): 方向をゲームの再開として扱わずに、レイアウトと入力マッピングを再計算することで、デバイスが回転してもプレイを読みやすい状態に保ちます。 - [ブラウザ ゲームのタッチ ターゲットのサイズ](https://oneshotgems.ai/ja/topics/game-touch-targets): ビジュアルアートワークをインタラクティブな境界から分離し、タッチデバイス上でサイズ、間隔、重なりをチェックすることで、ゲームコントロールを押しやすくします。 - [キャンバス上のポインター位置をゲーム座標に変換する](https://oneshotgems.ai/ja/topics/hit-testing-canvas-coordinates): ポインター位置をゲームのワールド座標に変換し、スケーリング後も表示されるターゲットとクリック可能なヒット領域が位置合わせされたままになるようにします。 ## 関連情報 - [MDN: リサイズオブザーバー](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) - [MDN: アスペクト比](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) --- 正規ページ: https://oneshotgems.ai/ja/topics/responsive-game-layouts