2017年11月21日火曜日

iPhoneX時代の画面設計

iPhoneXが発売され、いわゆるアスペクト比2:1の端末が増えてきました
AndroidでもGaraxy S8、LG G8などが2:1に近いアスペクト比となっており、GoogleもAndroidアプリ開発者に対し、アスペクト比2:1以上の画面に対応することを促しています

例えば横スクロールのアクションゲームで、タブレット端末でよくある4:3の端末と
2:1の両対応を単純にしようとするとこのような画面になってしまいます
これだとステージの先、見えている敵キャラが違うためゲームの難易度に大きな違いが生じてしまいます
4:3のアスペクト比を基本にして、それよりも横長なら両端黒帯ってのは簡単な対応ですが、それは避けたいところですので、いくつか対応案を考えてみました
1つ目は2:1の横幅を基本として天井(空)の拡縮で対応する横幅固定の下寄せ
こんな感じ
見た目にかなり差が出ますが、見えているステージの範囲は同じになるので難易度に違いは出なくなるかと
2つ目は横スクロールでも天井がある場合や、シューティングの場合ステージの縦幅を変えるのは都合が悪い時に対応する横幅固定の真ん中寄せ
横幅は2:1を基本にして上下の地面と天井部分を拡縮します
ものによっては地面と天井の比率を変えてもよいかと思います

3つ目は2:1端末が増えてきたとはいえ、主流はまだまだ16:9のワイドなので、それを基本として調整するバランス型
横幅は16:9のワイドを基本にして、2:1端末では影響が出にくい自キャラの後ろ部分を拡縮してやります
4:3では上部分を拡縮して対応

以上3つの手法を紹介しましたが、やり方はまだまだあると思います
要はメインとなるステージの縦と横幅で変えられないところ、アスペクト比が変えられるのかというところを決めて、基本とする端末のアスペクト比からサイズ差を吸収する調整枠を決定するという流れになるかと思います

0 件のコメント:

コメントを投稿