縦向きのレイアウトでゲームの主要な決定をサポートしましょう

見やすいプレイ領域を確保する

スマートフォンの画面を、実際に遊ぶ領域、常に表示する情報、一時的な案内の3つに分けて考えます。中央はまずゲームの主な操作のために確保し、スコア、残機、一時停止に関する情報は、危険や目標を隠さずひと目で確認できる位置に置きます。縦方向に進むプラットフォームゲームなら、キャラクターの上に次の着地点が見えるようにします。言葉のパズルなら、ヒントと操作中の文字列に十分な幅を確保し、重ねて表示するUIで圧迫しないようにします。

推測される端末の解像度ではなく、ビューポートの幅を使用します。 MDN は、ビューポート メタ要素がモバイル ブラウザーにページ レイアウトにデバイス幅を使用するように指示する方法を説明しています。プレイフィールドを個別に確認してください。正しく設定されたページには、固定サイズを想定したキャンバスまたはパネルが含まれている可能性があります。

ゲームの適応方法を選択する

画面に応じて世界の配置を変えるか、カメラが動きを追うか、余った空間を余白にするかを決めます。列数が変わってもルールが成り立つなら再配置が使えます。画面より大きな世界にはカメラ追従が向いています。縦横比を固定する必要がある場合は、周囲に帯を設けるレターボックス方式で設計どおりのプレイ領域を保ちます。画面を埋めるためだけにキャラクターを引き伸ばしたり、目標の位置を変えたりしないでください。

操作部を画面端に固定する前に、システムUIやノッチを確認します。Appleのレイアウトガイドはセーフエリアを説明し、重要な内容が端末の切り欠きなどに隠れないよう案内しています。Androidでスマートフォンとタブレットの両方を対象にするなら、各画面比率を別々に試してください。縦向き専用ゲームでも、端末を回転させたときの配置を明確に決め、画面が半分切れた状態にならないようにします。

1 つのラウンドを完了して確認する

幅の狭いスマートフォンと広い端末で、チュートリアル、動きの多い場面、終了画面を確認します。どの場面でも、目標、目前の危険、現在の状態を同時に把握できるかを確かめてください。ステージを増やす前に、表示の欠けや情報の優先順位を直します。

⁨縦向きモバイルゲームの設計⁩についての質問