cocos2d-xのHeloo Worldの表示の違いについて考えてみた

先日、Twitterやcocos2dのグループに投稿しましたらページビューが一気に上がりまして小躍りしていました。

こんなに行くとは思いもよらなかったので、SNSの威力を身に染みて感じました。

さて、タイトルの件ですがこっそりと会社のSC-04D(Galaxy Nexus)に入れてみますと、下記のように表示されました。

fpsがT-01Cの2倍です

また、T-01C(REGZA phone)ではこのように表示されます。

残念なfpsを叩き出すT-01C

上下に並べるとわかりやすいですが、文字と画像の表示サイズが異なります。

読み込んでいるaplファイルは同一の物を使用しています。

では、何故このようなことが起きるのかを見ていきたいと思います。

まず、Hello Worldと記載されているラベルの部分はこのように書かれていました。

CCLabelTTF* pLabel = CCLabelTTF::labelWithString("Hello World", "Arial", 24);
// ask director the window size
CCSize size = CCDirector::sharedDirector()->getWinSize();
// position the label on the center of the screen
pLabel->setPosition( ccp(size.width / 2, size.height - 50) );

次に、中央に表示されている画像はこのように書かれていました。

CCSprite* pSprite = CCSprite::spriteWithFile("HelloWorld.png");
// position the sprite on the center of the screen
pSprite->setPosition( ccp(size.width/2, size.height/2) );

Androidで考慮するべきdpiの概念が全くされていないですね…。
位置に関してはセンタリングのみですので、この書き方でいいでしょうが、サイズに関しましてはdpiのことを考慮に入れるべきなのではないかと思いました。
実際、T-01CとSC-04Dとでは見た目の大きさが異なっていますので、このままゲームを作っていきますと端末毎にゲームの表示される大きさが異なるようになっていって寂しいことになっていきそうです。
というかよろしくないです。

2Dゲームならアスペクト比が一定になるように描画をしていくようにして作成していく方が作りやすそうではあります。
ただし、使われない画面スペースも出てきますので、その辺りの塩梅をどのようにするかは考え中です。

うーん、Android対応は難しいですね。
ぐぬぬ。

【追記】
dpiの値に関してですが、

• T-01C=1.5
• SC-04D=2

だったと思います。

hdpiとxhdpiの差が生まれていますね…。

そういえば、解像度に合わせての画像の種類はどう切り分けるのでしょうかね？

Resourcesフォルダを見ても切り替えられるようにディレクトリが振り分けられていないです。

これはもしかして、コード側で切り替えになるんでしょうかね？

もう少しこの辺りは追っていきます。

Androidでcocos2d-xをやり始めた その2

前回はcocos2d-xをビルドしてAndroidアプリとして動かすところまで行いました。
今回は実際にコーディングを行うC++のクラス類の読み込みのところから行っていきます。
何故このようなことをすると言いますと、JavaもC/C++も一緒にビルドが行えるらしいのです。
なんと便利。
いちいちコマンドを打たなくても一緒にビルドが出来るのなら楽をしたいじゃないですか。

というわけで、ちみちみと設定を行っていきます。
参考にしたURLは前回記載したURLと同じですので、そちらを参考にしてください


まず、cocos2d-xとして作成してEclipse内に作ったプロジェクトを右クリックして、「New→Others→C/C++→COnvert to a C/C++ Project(Adds C/C++ Nature)」を選択します。

この箇所をクリック

そうしますと、次にこのようなダイアログが表示されます。

この時に「Project type」の「Makefile project」は「Other Toolchain」を選択してFinishボタンを押します。

このように選択すればOK

次にC/C++プロジェクトのビルド設定を行って行きます。

プロジェクトを選択し、「Properties→C/C++ Build→Builder Settingsタブ」を選択し、「Use default build command」のチェックを外します。

それから、Build commandに

bash ${workspace_loc:/プロジェクト名}/build_native.sh NDK_DEBUG=1 V=1

と記入します。
私の場合、「MegTest」で作っていますので、

bash ${workspace_loc:/MegTest}/build_native.sh NDK_DEBUG=1 V=1 

と記入します。
記入が終わりましたら、Applyを選択し、OKを選択します。

このように記入します。

そして、プロジェクトをビルドして、ログに出力されればビルドに成功しています。

ログがずらずらと。

気になったのは、こちらとログの種類が異なっているんですよね…。

うーん、バージョンの問題なんですかね…。

とりあえず、放置しておきます。

ファイルを開くとわかりますが、WarningやErrorが大量に入っています。

これらを取り除く作業を行います。

プロジェクトの「Properties→C/C++ General→Paths and Symbols」を開きます。

その中のIncludesタブ内のGNU++を選択します。

そして、AndroidNDK内にある今回選択したプロジェクトターゲットのパスとcocos2d-xのパスを追加します。

/Applications/android-ndk-r8/platforms/android-8/arch-arm/usr/include
/Applications/cocos2d-1.0.1-x-0.12.0/cocos2dx/include

パスを追加したらApplyを選択して、OKを選択します。
前回と同じ注意なのですが、パスはそれぞれの環境に合うように通してください。 


まだまだエラーが出ているので設定を弄り倒したいと思います。
まず、「#include "AppDelegate.h"」の箇所でエラーが出ています。
これもパスの問題らしいので、それを修正していきます。
プロジェクトの「Properties→C/C++ General→Paths and Symbols」を開きます。
その中のSource locationタブのLink Folderを選択します。
そうすると、新しくダイアログが表示されます。
そのダイアログのLink to a folder in the file systemにチェックを入れて、Browseで「cocos2d-x/プロジェクト名/Classes」のフォルダを選択します。

このように設定します。
最初の物をキャプチャし忘れたので、エラーになっています…。
最初はエラーにならないです。

そしてこのダイアログのOKボタンを押すと小さなダイアログは消えます。
次の元々表示されていたダイアログがありますので、いつも通りApplyを選択して、OKを選択します。
そうしますと「#include "AppDelegate.h"」の箇所でエラーが出なくなりました。
ただ、EclipseでのC++のヘッダファイル読み込みはあまりよろしくないために、エラーが吐かれているらしいです。
なんてこったい。


というわけで、コード解析の設定を弄ります。
「Properties→C/C++ General→CodeAnalysis」を選択します。
ワークスペース全体に対して設定を行いたいのなら、「Use workspace settings」にチェックを入れて、Configure Workspace Settingsを選択します。

ワークスペース全体に対して設定を行うため、このような表示になる。

Syntax and Sematinc Errorsのチェックを外せばエラーが出なくなります。

ちょっと怖いですが、とりあえずこれで進めようかなと思います。

設定に関しては、プロジェクト毎にも設定できますので他の物に対して影響を出したくない場合は、プロジェクト毎に設定を行うのが良いでしょう。

この状態でEclipseでビルドを行いましてアプリを端末に入れましたところ、アプリの変更点(Hello WorldをMegTestに変えた程度です)が反映されていました。
これでコマンドを打たなくてもビルドが行えるようですので良かったです。

まだ、続きがあるのですがそちらは後日に書ければ良いなと思っています。

Androidでcocos2d-xをやり始めた

さて、巷では「cocos2d！cocos2d！」と騒がれています。

しかし、この話は専らiPhoneアプリのお話です。

私もAndroidでcocos2d使いたい！

けど、cocos2d for Androidは死んでいるみたいな噂話もあるからどうしよう…。

そんな私に朗報です。

Androidでも使えるcocos2dがあります。

その名もcocos2d-x。

cocos2d-xはクロスプラットフォームで行えるのでとっても便利です。

そして、こまめにアップデートやメンテナンスもされていて素敵です。

これを使うしかないな！ということで使いたいとなって環境構築のお話です。

書いていく言語はC/C++なのがネックですが、頑張ります。

ちなみに参考にしたのはこちらです。

Facebook内のcocos2d Developers Japanというグループで紹介されていた記事

そして我らが@yoichinejiさんがブログに書かれていた記事

この二つを読み解いて、少しずつ環境構築を行っていきましょう。

注意！
私は開発に関わるものは基本的に/Applications内に入れるようにしています。
そのため、サンプルで上げているパスが/Applications始まりになっていますが、パスは各自の環境に合わせて修正をしてください！

1.cocos2d-xをインストールする

まず、Androidでcocos2d-xを使うとなると、AndroidのSDK環境だけではなくNDKの環境が必要となります。

C/C++で書いていきますからね。

AndroidのNDK環境の環境構築に関しては、先達の素晴らしい方々がブログに記事を残していますので、そちらを参考にしてください。

cocos2d-xの箇所から書いていきたいと思います。

まず、cocos2d-xのダウンロードページから、zipファイルを落としてきます。

私は現時点で、最新の安定板としてcocos2d-1.0.1-x-0.12.0.zipを落としてきました。

落としてきたzipファイルを任意の箇所に展開します。

そして、コマンドでcocos2d-xのフォルダに移動します。

$ cd /Applications/cocos2d-1.0.1-x-0.12.0 

この中にcreate-android-project.shというファイルがあります。

このファイルを編集しなければならないのですが、このように編集します。

CotEditor好きなんです

ここで重要になるのは、

• NDK_ROOT_LOCAL="/Applications/android-ndk-r8"
• ANDROID_SDK_ROOT_LOCAL="/Applications/android-sdk-macosx"

というものです。

これは各自の環境に合わせてパスを指定してください。

よくAndroidSDKですと、「/Applications/android-sdk-macosx/tools」まで指定することがありますが、今回は必要ないです。

何故かと言いますと、cocos2d-x側で補完してくれます。

この箇所は注意してください。

これでできる！と思ったのでcreate-android-project.shを実行しましたところ、多いにエラーが吐かれました。

しかも,

「AndroidSDKのtools/androidがないよ！」

と怒られていました。

確認したところありました。

うーんうーんと唸りながら色々見ていますと、create-android-project.sh内にNDK_ROOTなるものがあります。

なんだろう？と思いながら、.bash_profileファイルにAndroidNDKのパスをNDK_ROOTに設定しまして、create-android-project.shを実行しましたところ動きました。

よくわからないです。

2.cocos2d-xをビルドしてみる

1の段階で少し触れましたが実際にどのようにビルドを行うのかを書いていきます。

まず、前述した通りにコマンドでcocos2d-xのフォルダに移動します。

次に、create-android-project.shを実行します。

実行コマンドは下記の通りです。

$ ./create-android-project.sh

実行しますとこのようにターミナルに表示されます。

Input package path. For example: org.cocos2dx.exampleと出ていますので、使用するパッケージ名を入力していきます。

ただ、ここで注意したいのはNDKを利用しますので途中でパッケージ名を変えますと、Java側だけではなく、C/C++側に記載したパッケージ名の変更も発生します。
SDKからNDKのメソッドを呼び出すには、NDK側で呼び出されるメソッド名がパッケージ名から始まるのです。
例えば「jp.co.megmegfive.startGame」といったメソッド名にしないと呼べなかったと思います。
そのため、パッケージ名を変更するとなるとリファクタリングの量が多くなってしまいます。

一気にリファクタリングができるかあやふやですが、後々のことを考えますとこの段階でパッケージ名を決定させておくと後々楽になるのではないかとおもいます。

一度NDK周りでこのパッケージ名の変更でとんでもなくはまったことがありますからね…。

あんな思いはしたくないです。

閑話休題。

ずらずらと出てきました！

パッケージ名を入力しますとターゲットの一覧が表示されます。

これはAndroidSDKでインストールしている内容ですので、それぞれが違うと思います。

表示されたidを入力します

input target idとありますので、リストで表示されたidを入力します。

idとプロジェクト名を入力しました。

ターゲットを入力しますと、input your project name:と表示されますので、任意のプロジェクト名を入力して下さい。

ずらずらっとまた出ました。

プロジェクト名を入力して、上記のような画像が表示されたらビルドの成功です！

ここまで辿り着くまでがとても長かったです。

3.Eclipseに読み込む

ビルドが通りましたので、今度はEclipseに読み込んでapkファイルを作成していきます。

先ほどビルドしたものは、cocos2d-x直下に記載したプロジェクト名でフォルダが作成されています。

フォルダの中はこのような構成になっています。

シンプル

これでEclipseに読み込めばOKというとそうではありません。

最初にやってしまいましたが、このままandroidフォルダでプロジェクトを作成しましてもエラーがあるためビルドが通りませんでした。

よくよくみますとlibs/armeabiフォルダがありません。

NDKの場合ですと、この中にある.soファイルを読み取ってAndroidSDKと連携を取っていきます。

では、どうやって.soファイルを作るかと言いますと、まず、コマンドでプロジェクトのandroidフォルダに移動します。

次に、

./build_native.sh

というコマンドを実行します。

このコマンドを実行しますと、nativeのビルドが実行されていきます。

ものすごくログは長いです。

この前に大量のログがあるので一部割愛しています。

注目すべきは最後の7行目からです。

.soファイルの生成に成功したようです。

よかったよかった。

さて、本題のEclipseへの読み込みです。

右クリックをして、

New→Android Projectを選択。

ダイアログが表示されますので、先ほど書きましたプロジェクト名を入力します。

それからCreate project from existing sourceを選択しまして、

cocos2d-xのフォルダ/プロジェクト名/android
をLocationとして選択します。

こんな感じで入力します

次にNextを選びまして、2で選んだビルドターゲットを同じものを選びます。
異なるビルドターゲットを選んで齟齬が起きるんじゃないかと思ってこうしています。
実際はわからないですが、揃えられるのなら揃えていた方が安全な気はします。

私はAPI Level8のものを選んだので、それにしています。

そしてダイアログのFinishボタンを押しますとEclipseにプロジェクトが生成されます。

これでEclipseへの読み込みは完了です。

4.Eclipseからアプリをインストール

ここから先は通常のAndroid アプリと同じです。

新規作成したプロジェクトですので、念のためProject→Cleanを選びます。

これでクリーンビルドは完了です。

次に、プロジェクトを選択してRun As→Android Applicationを選択します。

そうしますと、先ほどビルドを行ったapkファイルが端末にインストールされます。

T-01Cだからfpsが残念すぎる…。

この画面が表示されましたら、無事に環境が整ったということです！

これでcocos2d-xで開発ができますね！

5.まとめ

家でおおいにターゲット一覧が出なくてハマった理由の解消法としまして、

• AndroidSDKを置いているディレクトリ名を変更した(android-sdk-mac_x86からandroid-sdk-macにしました)
• パス指定の修正

2番目は凡ミスとしましても、1番目はなんでダメだったんでしょうかね？

よくわからなかったです…。

さて、cocos2d-xやcocos2dもほとんどわかっていないので、これからも情報発信はしていきますが、かなり遅くなると思います。

C/C++もさっぱりわかっていないので、さらに時間がかかりそうではあります。

それでも少しずつやっていこうかと思っていますので、よろしくお願いします。

とりあえず、どなたかに簡単に開発の基礎を教えていただければ嬉しいです！

そのためにもcocos2dのあのイベントには参加しなければ…！