スマホゲームアプリを創る際に気をつけるべきポイント！複数アスペクト比率端末に対応する必要性について
目次
- はじめに
- 世の中にはどんな端末が存在しているか
- 簡単なレイアウトを考えてみる
- 実際にUnityでレイアウト設定してみよう！
- じゃあアンカーポイントをうまく設定すればなんでも解決するのか？
- +α レイアウトを考える際の更に厄介な問題！『ノッチ』について
- おわりに
はじめに
はじめまして！
アールフォースでクライアントエンジニアをやっております、藤田と申します。
弊社は近年Unityで開発を行うことが多いですが、それはiOS, Androidのマルチプラットフォームのスマホゲーム開発が容易に行えることが理由の１つにあげられます。
そんなスマホゲーム開発を行う際に、最初から意識できているかできてないかで大違いになる
複数アスペクト比率端末に対応する
という必要性について今回の記事ではお話させて頂きます。
コンシューマーや、PC向けに単一解像度でゲームを制作することしか考えてこなかった方にとっては中々興味深い話ではないかと思いますので、是非楽しんでいって頂ければ幸いです！
世の中にはどんな端末が存在しているか
まずは話を簡単にするために、端末提供元がAppleだけであるiOS端末について見て行ってみましょう！
今現在Appleからリリースされている端末の中から、アスペクト比が異なるものをいくつか羅列してみます。 (昨年、iPadは独自のiPadOSというものが搭載されるようになりましたが、ここではまとめてiOSとして扱わせてください)
| 端末名 | 画面サイズ*1 | アスペクト比 | アスペクト比の横÷縦 |
|---|---|---|---|
| iPhone5 | 640 x 1136 | 40:71(≒9:16) | 0.5633 |
| iPhone6 | 750 x 1334 | 9:16 | 0.5622 |
| iPhone6Plus | 1080 x 1920 | 9:16 | 0.5622 |
| iPhoneX | 1125 x 2436 | 375:812(≒9:19.5) | 0.4618 |
| iPhone11 | 828 x 1792 | 207:448(≒9:19.5) | 0.4618 |
| iPad系 | --- | 概ね3:4 | 0.75 |
主にアスペクト比に注目していただきたいのですが、基本的なサイズであるフルHDと比較して３種類のパターンに分けて考えることができますね。
- 16:9のフルHDサイズグループ
- 19.5:9の(16:9と比較して)縦長グループ
- 4:3の(16:9と比較して)横長グループ
それでは早速、まずは16:9端末であるiPhone6の縦持ち画面を基準に、 非常に簡単なレイアウトを考えてみましょう！
簡単なレイアウトを考えてみる
まず、画面のヘッダーとして戻るボタン
フッターとして進むボタン
中央にキャラクター画像(弊社マスコットキャラクターのファンくんです)
を表示しているだけの簡単なデザインを見て行ってみましょう。
このとっても簡単なデザインを、例えば何も考えずにiPad端末でも表示した場合、
実装によって次のどちらかのパターンになってしまうでしょう。
失敗パターン1
座標がそのまま固定されたままになってしまい、上下左右に余白ができてしまうパターン
失敗パターン2
画像が引き伸ばされて表示されてしまうパターン
しかし、本来なってほしいデザインは次の通りのはずです。
期待されるパターン
最初のiPhone比率のスクショと同じように
ファンくんは中央。他のボタンは同じように端に等倍で表示されていますね。
このようにスマホゲームを創るときは
複数のアスペクト比においてレイアウトが適切になるように考える必要があります。
これ、全部プログラムで制御しないといけないの？？
と思われた方もいらっしゃるかもしれませんが、そんなことはございません。
例えばUnityであれば、Unity標準であるUGUIというUIシステムに、こういった問題を簡単に解決してくれる機能があります。
ほんのすこしだけ見てみましょう。
実際にUnityでレイアウト設定してみよう！
まずは何も設定していない場合と、設定してみた場合でどのような違いが起きるのか
gif動画を見てみてください。
いずれも、1920 x 1080のフルHDレイアウトから、2048 x 1536のiPadレイアウトに変更してみたものです。
ちょっと画面外との区切りが分かり辛かったので、背景色を変えています。
何も設定していないもの
設定してみたもの
後者は良い感じですが、前者は画面中央寄りなままになってしまっているのでイケてないですね。
何をやったかというと、UGUIに属するコンポーネントには必ずついているRectTransformというクラスの中の、アンカーポイントというものを設定しました。
デフォルトだと、アンカーポイントは次のように真ん中に設定されています。
(左上に表示している戻るボタンのInspector上の表示です)
これを左上になるように設定することで、2枚目のgifのように
アスペクト比を変更しても自動で左上にくっついてくれるようになります。
このようにしておくことで、たとえどんなアスペクト比に変更したとしても
左上にくっついてくれます。アンカーポイント便利ですね〜。
今回の例はRectTransformとアンカーポイントの力としては触りも触りの部分です。 このアンカーポイントを制御する仕組みは今日のゲームエンジンであれば大体同じようについているはずですので、Unityに限らず一度しっかり身につけておくときっと役に立ちますので、是非勉強してみてくださいね。
じゃあアンカーポイントをうまく設定すれば
なんでも解決するのか？
というと、そんなことはありません。 例えばこんなデザインを考えてみましょう。
一番最初のレイアウトから、バランスを変に崩さない程度にファン君を拡大して上に若干詰めてみました。
これを単純にiPadのレイアウトに移行するとこうなってしまいます。
iPadで表示してみた
あまりにも下側に余白ができてしまいましたね。
これでは流石にバランスが悪くなってしまいます。
16:9のiPhoneだけで表示するなら良かったかもしれないレイアウトでしたが、
他のアスペクト比の端末のことを考えた場合、そもそもやってはいけないデザインだったということがわかります。
少し極端な例ですが、1つのアスペクト比で良い感じに表示されてるからおっけー！
と考えてしまうと、他のアスペクト比で表示した時にカバーしきれないということがわかったかと思います。
さて、ここまでの話はたったの2通りの端末にしか、それもiPhone端末にしか触れておりません。
実際にはいろんなアスペクト比のAndroid端末も発売されており、
スマホゲームを創る際には、その全てに対して適切に表示されるようなレイアウトロジックとデザインを考え、実装を行う必要があるのです。
+α レイアウトを考える際の更に厄介な問題！
『ノッチ』について
ここまでの項目では、とりあえず２種類のアスペクト比におけるレイアウト崩れの可能性に触れてみました。
しかし、現在のスマホにおいては更に考えなければならないことがあります。
皆さんもiPhoneX系端末を見たことがある、もしくは実際に使っているという人も多いかと思いますが、それより前の端末と比較して大きな違いがあることに気づいているでしょう。
そう、ノッチと呼ばれる部分のことです
左からEssentialPhone, Huawei P20, iPhoneX
Android端末においては、ノッチは正しくはDisplay Cutout(切り欠き)と呼ばれます。
iPhoneXが世にリリースされた後、世の中で求められているフルディスプレイに対する現状の最適解はこれだ！とばかりに、2018年頃から爆発的に広まったデザインです。
現在ではGoogleさんが、切り欠きは多くても２つまでにしてくださいねというお触れを
出してくださっているので、上に１つ。あるいは上下に１つずつ。というデザインが多いです。
ノッチの両サイド部分にも画面が表示されていることがわかると思いますが、
例えばこの部分にボタンが表示されてしまっていたとしたら、押しづらい、もしくはそもそも押せないボタンになってしまいますよね。
そうはならないように、例えばAppleはこのようなレイアウトガイドを公開してくれています。
UIを表示しても問題ない領域はセーフエリアと呼ばれます。
このセーフエリア領域外にはUIが表示されないようなUIロジックを考えることが、現在では非常に重要になっています。
アールフォースでも独自の仕組みを創って対応しているのですが、それはまたの機会でお話させて頂ければ幸いです。めっちゃ長くなりますけど！
おわりに
いかがでしたでしょうか？
スマホゲームアプリを創る際には、ただゲームの面白さを追求すればいいというわけではなく、考えなければいけない厄介な問題があるということを知って頂けたのではないでしょうか。
最近では折りたたみ端末とか、アスペクト比3:1の端末とか出てきて頭が痛くなったりもしますが、そういったものが出たとしても問題ないであろうUIロジックを考えることも、
スマホゲームを創る上での醍醐味のひとつです。
他にもスマホゲームアプリを創る際に考えなければいけないことはたくさんありますので、今回のような形でご紹介していきたいです。
ここまでお読み頂きありがとうございました〜！
