読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

Cocos2d-xへ...

原稿


2014/02/15修正。v2.2.2対応。


 Cocos2d-html5にもようやく慣れたところですが、そろそろブラウザの外の世界へ出発する時が来たようです。
 本書後半では、これまで学んできたことを使って、モバイルゲームを開発する手順を説明します。AndroidiOSの開発環境を整えるのは初心者にはちょっと大変かも知れません。正直な話、本書の通りにやってもうまくいかないこともあると思うんですけど、今は役に立つWebサイトもたくさんありますから、たぶん何とかなるはずです。

Cocos2d-xのインストール

 まずCocos2d-xのインストールからはじめましょう。Cocos2d-xは、Cocos2d-html5と同じダウンロードページで配布されていましたね。特に問題がなければ、Cocos2d-html5と同じバージョンのzipファイルをダウンロードしてください。


 本書では、v2.2.2をダウンロードして、解凍したフォルダを‾/cocos2d-xに置きました。

$ cp -r ‾Downloads/Cocos2d-x-v2.2.2 ‾/cocos2d-x

create-project.py

 次は新しいプロジェクトの作成です。Cocos2d-html5のときはどこにプロジェクトを置いても動くようにcocos2d.jsを修正したりしたんですけど、今回はフレームワークの決めた場所にプロジェクトを置くことにします。その方が解説も短くできますし、トラブルも少なくなると思うからです。
 新しいプロジェクトを作成するときは、‾/cocos2d-x/tools/project-creator/にあるcreate_project.pyというpythonスクリプトを使います。
 新規作成するプロジェクトには、「プロジェクト名」と「パッケージ名」の二つが必要です。以下のサンプルでは第1章で作ったSampleゲームを使って手順を説明しますので、プロジェクト名はSampleでいいでしょう。パッケージ名は「com.funige.Sample」にしました。パッケージ名には「他の開発者が絶対に使わない名前」を選ぶ決まりですので、自分で試すときは必ず違う名前をつけるようにしてください。

$ cd ‾/cocos2d-x/tools/project-creator
$ ./create_project.py -project Sample -package com.funige.Sample -language javascript

proj.ios		: Done!
proj.android		: Done!
proj.win32		: Done!
New project has been created in this path: /Users/funige/cocos2d-x/projects/Sample
Have Fun!

 スクリプトが正常終了すると、‾/cocos2d-x/projects/Sample フォルダが作成されます。このフォルダが新しいプロジェクトです。‾/cocos2d-xの下にプロジェクトが作られるのはどうも気に入らないのですが、まあcocos2d-xはどんどんバージョンアップされますから、フレームワークとそのフレームワークを使ったプロジェクトを同じディレクトリに置いて管理するのは合理的と言えば合理的ですね。 バージョンがずれて動かなくなる問題を未然に防ぐことができます。
 フォルダの中身を確認しましょう。

f:id:funige:20140214200923p:plain

 Resourcesの下になんだか懐かしい匂いのするファイルとフォルダがあるでしょう。外国を旅していて、日本語で書かれたラーメン屋の看板を見つけた気分です。ここにこれまで書いたソースコードとかリソースとか置けばいいみたいです。
 ファイルを単純にコピーすると、ちょっと修正したいときにCocos2d-x用とCocos2d-html5用の2つのファイルを更新する羽目になってしまいます。こういうときは、2つのフォルダの内容が常に同じになるように、シンボリックリンクを使うべきです。

$ cd ‾/cocos2d-x/projects/Sample/Resources
$ rm -rf src res
$ ln -s ‾/apps/Sample/src src
$ ln -s ‾/apps/Sample/res res

 ‾/cocos2d-x/projects/Sample/­cocos2d-jsb.jsがアプリの起点になります。Cocos2d-­html5の設定ファイルと比べると、とてもシンプルだと感じるでしょう。コメントを除くと、これだけです。

require("jsb.js");

var appFiles = [
  'src/resource.js',
  'src/myApp.js'
];

cc.dumpConfig();

for( var i=0; i < appFiles.length; i++) {
  require( appFiles[i] );
}

var director = cc.Director.getInstance();
director.setDisplayStats(true);
director.setAnimationInterval(1.0 / 60);

var myScene = new MyScene(); 
director.runWithScene(myScene);

 Cocos2d-html5ではjsファイルを追加するたびにcocos2d.jsのappFilesを修正する必要がありました。cocos2d-jsb.jsにも同じ名前のappFilesという配列がありますから、ここにファイルを追加すればいいのでしょう。

var appFiles = [
  'src/resource.js',
  //'src/myApp.js'
  'src/sample.js',
  'src/result.js',
];

最初に表示されるシーンは、どう見ても下の方にあるmySceneですね。これも忘れずに修正しておきます。

//var myScene = new MyScene();
var myScene = new SampleScene();

解像度の調整

 iOSの開発環境が揃っている人なら、もうこれだけでXCodeを起動して、iPhoneiPadにゲームを転送して表示できるはずです。

f:id:funige:20131207140258p:plain

 でも、よく見るとちょっとおかしいのがわかるでしょうか。ゲーム画面がなんだか狭いですね。解像度が合っていません。スマートフォンのディスプレイはバラバラで、きちんと対応しようとするとなかなか大変なのですが、Cocos2dでは簡単に解像度を調整する「おまかせモード」があります。cocos2d-jsb.jsを修正して下さい。

// cocos2d-jsb.js 42行目あたり

// この行を挿入
cc.EGLView.getInstance().setDesignResolutionSize(800, 450, cc.RESOLUTION_POLICY.SHOW_ALL);

// あとは同じでいいのですが
// 画面左下のデバッグ表示もついでに消しておきましょう
var director = cc.Director.getInstance();
director.setDisplayStats(false); // true -> falseに変更

 このモードでは画面のアスペクトが違う場合は、上下や左右の端に黒い帯が表示されて、ゲーム画面全体が表示されるように適当に拡大縮小してくれます。何も考える必要がありません。

f:id:funige:20131207140326p:plain

広告を非表示にする