本文へスキップ

Kwik App Design Book: 8 Kwik ユニバーサルプロジェクトとは


Created Friday 19 December 2014

Kwikの新規プロジェクトを作成するときに選択可能なユニバーサルプロジェクトとは、旧型のiPad(1024x768)の画面サイズと最新のiPad Air (2048x1536)の両方の画面サイズに対応したプロジェクトとなります。iPad Air 2 、iPad Air、iPad mini 3、iPad mini 2は、すべて2048x1536です。高解像度の画像と低解像度の2種類の画像ファイルがパブリッシュ時に出力されることになります。アプリがデバイスで再生されるときに、デバイスの画面サイズにあったほうの画像が使用されます。画面サイズにあった画像がアプリにロードされることにより、グラフィクスのメモリ消費が最適化され、解像度にあった画面表示が行われることとなります。New UniveralまたはUniversalを選択することで、iOSとAndroidの両方のアイコンとスプラッシュ画像が必要となります。


プロジェクト属性の編集を実行すると、以下の設定画面が表示されます。一番下のScaleの項目において、ストレッチ、均等、レターボックスといったオプションが利用可能です。これらは、異なる画面サイズを持つデバイスでアプリが実行されたときの画面表示の最適化の方法となります。例えば、 iPhone5は 1136x640の画面サイズとなっており、縦横比16:9ですが、iPadは4:3です。方法としては以下の3種類となります。

  • ストレッチ 同じ画像をiPadとiPhone5で使用するためには、縦横比を維持せずにストレッチさせて合わせる
  • 均等 縦横比を維持して均等に引き延ばす(これによって画像の上下または左右の端がデバイスの画面よりはみ出ることにより、表示されなくなります)
  • レターボックス デバイスの画面サイズに収まるように、画像を表示させる(これによって、画面の上下または左右の端に黒縁の部分が表示されます)


レターボックス、均等、ストレッチの画像。黒色の部分がデバイスの画面で、オレンジ色の破線が実際の画像となります。 http://docs.coronalabs.com/daily/guide/basics/configSettings/index.html

Kwikが出力する画像サイズは、以下となります。デバイスの縦サイズ(PixelHeight)を判定を行います。旧iPadの1024のとき,
または、1024より小さいときに、 @2の画像がロードされます。付帯条件として、PiexelHeightの割合が、0.5、または0.4の敷居値の判定も行われています。


16:9のiPhoneと4:3のiPadでにおいて、均等(zoomEven)で表示する際に、背景画像の縦と横に余分なエリアを用意しておく必要があります。その背景画像サイズはどうすれば良いかということについてですが、iPadの2048x1536のKwikのプロジェクトを選択していた場合は、2850 x 1800のサイズの画像を背景画像としてレイヤーに用いてください。これによって、均等(zoomEven)のプロジェクト設定であった場合でも、背景画像が比率を保って、全画面に表示されることになります。http://battleofbrothers.com/sirchris/designing-backgrounds-for-multiple-aspect-ratios-and-coronas-config-lua

デバイスのターゲットをiPad(4:3)または、iPhone(16:9)のどちらかに絞り、そのサイズに最適化してもよいでしょう。ターゲット以外のデバイスでは、画面の端に黒帯がでる(レターボックス), 若干画像の端が切れたり(均等)、画像の比率が維持されず引き延ばされたようになる(ストレッチ)されてしまうという影響はでますが、ターゲット以外ですので、影響は小さいのではないでしょうか。iPadとiPhoneではアプリの内容や使用状況が異なっているために、コンテンツの内容やアプリも違ったものとなっているという考え方もあるでしょう。

※New Universalとは現在の2048x1536のiPadが登場したときに、追加されました。それまでは、Universal(1024x768)でした。New Universalは、画像のサイズが4倍になり、高解像度となっています。そこまでの高解像が必要なければ、Univesalでも十分かも知れません。Universalで作成したものとNew Universalで作成したものを、最新のiPadで比較してみましょう。

※複数の異なる解像度の画像を用意することなく、一つの画像をフォトショップで用意して、そこでアプリ開発ができることはKwikの利点かと思います。