レイアウト方針を選ぶ
レスポンシブなゲームでは、プレイフィールドを再配置する、固定サイズの仮想領域を余白付きで表示する、または端末を回転するよう明確に案内する方法があります。ゲームの仕組みに合わせて選びましょう。横に広いレーンを走るゲームには横幅が必要ですが、縦に積み上げるゲームは縦向きのまま読みやすいかもしれません。シーン全体を引き伸ばして合わせるとオブジェクトの比率が変わり、ヒット領域もずれるため避けます。
ビューポートの向きに応じたレイアウトにはCSSメディアクエリーを使います。スクリプトで向きを知る必要がある場合に限ってScreenOrientationの変更を監視し、非推奨のwindow.orientationchangeイベントには依存しません。画面の向きをロックするのは、明確な要件と代替手段がある場合に限り、未検証のレイアウトを避ける近道にしないでください。
座標変換を組み直す
回転後にゲームコンテナを測定し、表示変換を計算し直します。次の操作を受け付ける前に、ポインター座標からワールド座標への変換を更新してください。ドラッグ中なら、新しい変換の下で続けるか、適切にキャンセルします。古いポインター座標と新しいcanvasサイズを混ぜると、オブジェクトが画面を飛び越えてしまうことがあります。
ゲーム開始前、ドラッグ中、メニューを開いた状態で回転をテストします。サイズ変更で新しいセッションが始まらず、操作部に引き続きアクセスできることを確認します。MDNはScreenOrientationの変更イベントとロックを説明しています。必要な場合に利用し、端末がロックを許可するかも確認してください。
ブラウザーゲームの画面回転についての質問
ブラウザーゲームで横向きを強制すべきですか？
明確な理由と分かりやすい代替手段がある場合に限ります。画面をロックするより、レスポンシブなレイアウトや端末を回転する案内が適切なこともあります。
画面を回転すると、必ずリサイズイベントが発生しますか？
ビューポートと向きの変化に対する動作はブラウザーや端末によって異なります。実装が依存するイベントをテストし、変更後に実際のゲームコンテナを測り直してください。
関連情報
古い情報を見つけましたか？ 訂正を連絡