複数の解像度への具体的な対応法

今回で三回目の複数解像度への対応の話。
実例(cocos2dxによるもの)とともに対応法を2つあげたいと思う。
(ちなみに方法名は僕が勝手につけたので正式名ではありません。)

1.はみ出してもいいよ法

 はみ出してもいいよ法とは、あらかじめはみ出しても良い部分を作っておきResolutionPolicyでNO_BORDERを選ぶことによって、サイズが合わない場合のみはみ出しても良い部分がカットされるという方法である。
実例)ブレイブフロンティア、ドランシアなど
f:id:charisuke:20150419220804p:plain
f:id:charisuke:20150419220821p:plain

利点
  1. 実装がシンプル
  2. ゆがみがない
  3. レイアウトのずれがない
欠点

特定の機種間での対応しかできない(iPhone5,6系とiPhone4系間など)

  1. 使えないスペースができてしまう
  2. バナー広告が使いにくいかも

2.DesignResolutionのアスペクト比をいじる法

 前回の設定ではDesignResolutionSizeは750x1334で固定だったが、それを画面サイズによって変えることで画面内におさめる方法。ResolutionPolicyはSHOW_ALLかEXACT_FIT。画像などのゆがみは発生しないまま画面内に全てを表示することができる。(背景などははみ出す)
実例)ドラクエスーパーライト、FFレコードキーパーなど(おそらく)

利点
  1. 見た目がとてもきれい
  2. ゆがみがない
欠点
  1. アスペクト比は変わるが画像のサイズの比は変わらないため、画像を配置する際に気をつけないとはみ出たり、ずれたり、重なってしまう
  2. 画面サイズによって見た目が異なる
  3. ずれないようにするにはプログラムを組む際にコツが必要


こんな風に画面を作っているつもりでも
f:id:charisuke:20150419230732p:plain




他のサイズで見るとこんな風になってたり。。。
f:id:charisuke:20150419230734p:plain



上の例は極端な場合だが、プレイ画面が小さくなってしまうことは事実である。
プログラムを組む際に細心の注意を払い、場合によっては画像のリサイズをしたり、リソースを分けたりしなければならない。基本的に絶対位置ではなく相対位置で画面をレイアウトする必要がある。また、異なるアスペクト比でどのような画面になってるかを細かくチェックする必要がある。

3,まとめ

とりあえず今のところ分かった方法はこれくらい。他に分かり次第追加したい。

どの端末でも全く同じ画面というのは不可能である。作りたいものに合わせて取捨選択していく必要がある。できるだけ違和感がなく実装も楽な方法を考えていきたい。