容器のサイズを測ってスケールを選択する
ウィンドウがプレイ可能領域であると想定するのではなく、ゲーム コンテナの寸法を使用します。 ResizeObserver は、ビューポートのサイズ変更ではなく周囲のレイアウトによって引き起こされる変更を含め、その要素が変更されたときにレポートできます。ゲームを狭いアスペクト比でレターボックス、クロップ、またはリフローするかどうかを決定し、円を楕円に引き伸ばす代わりに選択肢を表示します。
固定仮想プレイフィールドの場合、その幅と高さに適合する 1 つのスケール係数を計算し、残りのスペースを中央に配置します。ヒット テストの前に、同じ変換の逆変換を通じてポインター座標を変換します。リフロー ゲームの場合は、コントロールが以前のサイズの位置を使用し続けないように、レイアウト アンカーと衝突シェイプを一緒に更新します。
シミュレーション ループから外してサイズ変更を続ける
ゲーム ワールドを安定した単位で保存し、キャンバスの背景解像度、CSS サイズ、デバイスのピクセル比をレンダリングの問題として扱います。サイズが変更された場合は、描画面を更新して再描画します。ゲーム ルールで要求されない限り、レベルをリセットしたり、オブジェクトの状態を再計算したりしないでください。この分離により、ツールバーのサイズ変更が再起動のように見えるのを防ぎます。
ゲームがアクティブなときに、狭いビューポートと広いビューポート、デスクトップのサイズ変更と向きの変更をテストします。文字の折り返し、タッチ対象位置、座標変換の確認を行います。 MDN の ResizeObserver ガイドでは、要素の寸法の観察について説明しており、コールバック内で観察されるサイズを変更するとループが発生する可能性があると警告しています。
ブラウザーゲームのレスポンシブレイアウトについての質問
キャンバスのサイズが変更された場合、ゲームワールドのサイズも変更する必要がありますか?
通常は、シミュレーションの座標を安定させて、プレゼンテーションやレイアウトを調整します。デザインでプレイフィールドを意図的に変更する場合は、そのルール、オブジェクト、および入力マッピングを一緒に更新します。
ウィンドウのサイズ変更だけではなく ResizeObserver を使用するのはなぜですか?
ゲームコンテナは、ウィンドウのサイズを変更しなくても、周囲のレイアウトによってサイズが変更される可能性があります。 ResizeObserver は要素の寸法変更を直接報告します。
関連情報
古い情報を見つけましたか？ 訂正を連絡