スマホゲーム(仮)【PART5】~画面の向きとアスペクト比を固定する~

LINEで送る
Pocket

 

見出し2

前回の設定でAndroid端末での起動を確認できましたが、ボタンの表示がおかしかったり、画面の縦横を変えると表示範囲が変わったりしていました。今回は、どの機種・画面解像度でも同じようにゲームがプレイできるよう設定していきます。

 

目次

画面の向きを固定する

大抵のスマホゲームは、縦持ちか横持ちかのどちらかだけに対応している場合が多いと思います。両方に対応しようと思うと作業量も膨大に増えますし、何も設定しないと縦持ちだと画面が見切れる、横持ちだと見えちゃいけない場所まで見えちゃう、なんて問題も起こりえます。ですので、まずは縦か横かどちらか一方だけに対応させるようにします。どちらにするかはゲームの企画次第ですが。

対応方法は非常に簡単です。

左上の「File」→「Build Settings…」から「Player Settings…」を選択。

インスペクタービューで項目を設定します。

画面固定

「Resolution and Presentation」の「Allowed Orientations for Auto Rotation」に4つのチェック項目があります。ホームボタンの位置で考えると分かりやすいと思います。

「Portrait」…普通の縦(ホームボタンが下)

「Portrait Upside Down」…逆向きの縦(ホームボタンが上)

「Landscape Right」…右向きの横(ホームボタンが右)

「Landscape Left」…逆向きの横(ホームボタンが左)

となります。例えば横持ちだけにしたいという時は「Landscape Right」と「Landscape Left」だけにチェックを入れておけば、縦向きにはならずに、どちらの横向きにも出来るようになります。

その項目の上にある「Default Orientation」では起動時のスマホの向きを設定することが出来ます。デフォルトの「Auto Rotation」は画面の向きを自動で変更します。ここも4つのチェック項目同様に、どの向きにしたいかを設定することができます。

 

 

解像度を設定してUIのサイズを合わせる

前回Android端末で動作確認した際、ボタンのUIがものすごく小さく表示されていましたので、UIの表示位置とサイズがどの機種でも同じ比率になるよう設定していきます。

まず「Game Object」→「UI」から「Panel」を選択。すると「Panel」と、その親として「Canvas」が作成されます。この「Canvas」のインスペクタービューから「Canvas Scaler」を設定します。

UI設定1

「UI Scale Mode」を[Scale With Screen Size]に変更 。

「Reference Resolution」の値を入力できるようになるので、X・Yそれぞれに好きな解像度を入れる。

最新のスマホの画面解像度シェアを調べてみて、普及している中でも解像度の低いモノをベースにしてみようと思います。iPhone、iPadの解像度は無視して調べると、720×1280が多いので、この解像度に合わせます。横持ちならX:1280、Y720となります。(アスペクト比16:9)

 

その後、「Panel」の「Anchor Presets」を真ん中にし、「Width」「Height」をCanvasと同じ値にします。

UI設定2 UI設定3

これで、あとは「Panel」の子になるように他のUIを置けば、Panel内にUIが収まりつつ、解像度に合わせてサイズが調整されます。

 

カメラのアスペクト比を固定する

この状態で一度確認をしてみると、ボタンの表示は設定した通りに表示されました。しかし、アスペクト比が16:9のスマホでは問題ないですが、16:9ではないタブレットだと縦に長く画面が映し出されてしまい、バランスがおかしくなっています。これを何とかするために、次はゲーム画面を映しているカメラの設定をしていきます。

スマホの画面(16:9)
アスペクト比3

タブレットの画面(16:9ではない)
アスペクト比1

全ての機種でアスペクト比16:9で表示され、余白の部分は黒く塗りつぶすよう設定します。

設定するにあたって、こちらのブログを参考にさせていただきました。

 

ここにあるスクリプトを参考にして、そのスクリプトを「Main Camera」にぶち込んでやったら、このようになりました。

アスペクト比4

今回のゲームのメインターゲットはスマホでのプレイがメインになると考えているので、タブレットでの対応はこれでいいかなと思います。(表示されているオブジェクトがぼんやりして見えるのは、カメラにImageEffectをつけて遊んでいたためです。今回の処理とは関係ないです。)

 

ひとまずこれで、ゲームを作る上で確認するべきことは概ね解決しました。次はいよいよアイデア出し…といきたいところですが、このタイミングで広告を載せる調べと準備と、Unity5.5もリリースされているのでアップデートもやっておこうと思います。次回はその辺の話になります。
ではでは。

 

スポンサーリンク

スポンサーリンク

LINEで送る
Pocket