Google+ もご覧ください
ユーザーアイコン

cocos2d javascript bindingsでマルチプラットフォーム開発

第七回 画面の向き、4-inchディスプレイ対応するには

Seasons

第七回 画面の向き、4-inchディスプレイ対応するには

今回はcocos2d jsbのお作法から一旦離れて、画面に関する重要な設定について解説します。

画面方向の切り替え

これまでXcodeの新規プロジェクトで生成されたプログラムをそのまま利用してきたため、画面方向は横でしたが縦画面にすることももちろん可能です。今回その方法について解説します。

新規プロジェクトを作成

まずは新規プロジェクトを作成してみましょう。この記事では名前をJSBOrientationとしました。生成されたプロジェクトのフォルダ構成を確認してみてください。次の赤枠で囲ったファイル群が見つかると思います。

ファイル構成
ファイル構成

そのファイル群の中のRootViewController.mmが今回修正するファイルとなります。このRootViewController.mmは、画面回転管理を行うビューコントローラーで、これまでは全く触れてきませんでした。

横から縦へ変更

RootViewController.mmをXcodeで開き、次のように2箇所修正してみてください。赤線が変更箇所です。

修正箇所
修正箇所

変更した後、ビルド&実行してみましょう。次のように画面が縦の状態で起動すれば成功です。

実行結果
実行結果

今回修正した箇所は主流であるiOS 5以降で画面方向の設定するためのメソッドとなります。

iOS 7ではさらに簡単になっていますが、現時点ではiOS 7のみをターゲットにした製作は少ないため、これらの箇所を必ず修正しなければならないと覚えておきましょう。

画面サイズ情報を取得

さて、せっかく縦画面で起動するようになったので、実際に画面サイズの情報を取得してみましょう。 Xcodeでhello.jsを開き、ソースコードを1行追加してみましょう。

var GameCreator = function() {
  self.getPlayScene = function() {
    /* 省略 */
    scene.addChild(layer);
    // ====== 追加 ====== //
    cc.log("W:H = " + winSize.width + ":" + winSize.height );
    return scene;
  };
  :
};

新規プロジェクトではすでにCCDirectorオブジェクトのインスタンスを取得しており、getWinSize()メソッドでウィンドウサイズのオブジェクトを取得し、winSizeに格納しています。そのため、そのプロパティであるwidth/heightから画面サイズ情報を取得することができます。

director = cc.Director.getInstance();
winSize = director.getWinSize();

このオブジェクトは、グローバルスコープで宣言されているためプログラムのどこからでもアクセスすることが出来ます。

変更したプログラムを実行してみましょう。Xcodeのコンソールに次のように表示されるはずです。

Cocos2d: JS: W:H = 640:960

iPhone 5の解像度に対応させる

4-inchのiPhoneシミュレーターでプログラムを実行していた方は、もう既におわかりかと思いますが、画面の上下に黒い帯が表示されていたと思います。この状態はiPhone 5/5s/5c、iPod touch 5th genの4-inchディスプレイの画面サイズに未対応の状態を指します。最近ではこの状態でAppleの審査は通過できなくなっているため、4-inchディスプレイに対応しておく必要があります。

とはいっても、その方法は、非常に簡単です。今回用意した640x1136のサイズの画像をダウンロードして、Resourcesフォルダに保存してください。

その後プロジェクトに画像ファイルを追加し、Launch ImagesのRetina 4-inchの画像に設定します。設定は、フォルダのアイコンをクリックすることでファイル選択画面が出てくるので、追加した画像ファイルを選択してください。

Xcode設定箇所
Xcode設定箇所

設定
設定

設定が完了したら、4-inchシミュレーターに切り替えて、もう一度実行してみてください。上下の黒い帯はなくなり、Xcodeのコンソールに次のように表示されるはずです。

Cocos2d: JS: W:H = 640:1136

つまり、4-inchディスプレイ対応とは4-inchディスプレイ用の起動画像を追加、設定するだけの作業となります。対応後は960px→1136pxまでサイズが大きくなるためそのサイズにあわせて画面レイアウトを構築する必要があります。

次回予告

すでに気づいている方がいるかもしれませんが、実行中に表示されるテキストが画面比率に対して小さく表示されています。iOSデバイスにはRetina Displayを持つデバイスとそうでないものがあり、それぞれのディスプレイにあわせた画像を適切に扱う必要があります。

実は現在表示されているこれらテキスト含め、画面解像度に合わせて正しく処理されていません。この部分の修正方法について、次回はじっくり解説していきたいと思います。

今回のサンプルプロジェクトは、こちらからダウンロードできます。

Cocos2d jsb

記事をリクエストする

関連記事

コメント