cocos2dアプリをiPhone5の解像度に対応させる

iPhone 5が登場して約一ヶ月、
そろそろMorveもiPhone 5の縦長ディスプレイに対応させたい!

ということで、
cocos2dアプリの観点でiPhone5の解像度に対応させる方法をまとめます。
#とはいっても、cocos2d独自の内容はほとんどないです。

ちなみに、cocos2dに限らず、
iOSアプリをiPhone5に対応させる方法については、下記のエントリが参考になります。


Xcodeのアップデート

iPhone 5対応には、Xcode 4.5が必須となります。
Mac App Storeからアップデートしましょう。


cocos2dのアップデート(任意)

cocos2d-iphone v2.1-beta2では、
iPhone 5 Retinaディスプレイ用のテンプレートが追加されています。

Beta版でもいいからテンプレートを使用したい!
という方はcocos2dをアップデートしましょう。

ちなみに、既存アプリをcocos2d 2.0から2.1にアップデートしたい場合は、
cocos2dの各ディレクトリと一部リソースファイルの置き換えだけでオッケーのようです。


スプラッシュ画像(1136px)の作成

新たな解像度(640px x 1136px)のスプラッシュ画像を
Default-568h@2x.pngというファイル名で作成しましょう。

このスプラッシュ画像の存在が、iPhone 5解像度で表示されるトリガとなります。
逆に、スプラッシュ画像を作成しないと、上下に黒いスペースが表示されたままとなってしまいます。
必ず最初にスプラッシュ画像を作成しましょう。

ちなみに、cocos2d v2.1-beta2には
ResourcesディレクトリにデフォルトのDefault-568h@2x.pngが用意されています。
面倒な場合は暫定的にこちらを使ってもいいかも。


レイアウトの調整

この時点でアプリをいったん起動してみます。
レイアウトの崩れがなければオールオッケー。
ディスプレイサイズに依存するレイアウト方法の場合は、
該当箇所にてディスプレイサイズを判定して調整する必要があります。

例えば、下記のようなソースコードで判定できます。

CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568) {
    // iPhone 5(4-inchスクリーン)用のレイアウト
} else {
    // 従来のiPhone (3.5-inchスクリーン)用のレイアウト
}

(参考)

  1. 2013年 3月 26日

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。