Cocos2d-JSをPhoneGap Buildしてスマホアプリを作ってみた
久しぶりにcocos2d-JSのサイトを見ていたらlite版が出ていた。フルバージョンと違ってライト版は機能が制限されている分、シンプルで扱いやすいとのこと。
確かにライト版はソースが1Mbyteなのに対してフルバージョン版は300Mbyteくらい。
「でも結局はjava scriptだからコンパイル環境がなー」とか思ってたところ、「あれこれphonegap buildなら楽勝じゃね?」と思いつき実際にやってみた。
結果、androidとiphoneのアプリがワンソースコードで出来てしまった。こりゃスゴイ。
環境
phonegap build
phonegap v3.4.0
cocos2d-JS lite v3.3 (cocos2d-html5)
手順
1.cocos2d-js liteをダウンロードする
cocos2dのサイトからcocos2d-JS Lite版をダウンロード・展開しておく。
cocos2d-js-v3.3フォルダを開いて、HelloWorld.htmlのファイル名をindex.htmlに変更する。index.htmlをダブルクリックして開いてみるとこんな感じの画面が出る。
2.phonegap buildに登録する
phonegap buildに登録する。プロジェクトが1個しか扱えないけど無料のものがあるのでそれにする。登録できたらログインする。
cocos2d-js-v3.3フォルダをフォルダごとzipで圧縮する。そのままphonegap buildにzipファイルをアップロード。
一応はこれでビルドが掛かる。iOSアプリのビルドには証明書ファイル(p12)とプロビジョニングファイルが必要。
上のQRコードを読み取るとビルドされたアプリを実機スマホにインストールすることができる。
でもなんか画面からはみ出してるんですけど・・・。しかもアンドロイドもiPhoneも両方。
3.アプリのビューを可変にする
デフォルトではマルチビューに対応してないっぽいので、スマホの画面サイズに応じてビューの大きさを変えるように修正する。
index.htmlファイルを開いて、「cc.game.onStart = function()」がある行の下にcc.view.~の3行を追加する。
<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> <script type="text/javascript" src="cocos2d-js-v3.3.js" charset="UTF-8"></script> </head> <body> <canvas id="gameCanvas"></canvas> <script type="text/javascript"> window.onload = function(){ cc.game.onStart = function(){ cc.view.adjustViewPort(true); // ← 追加 cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); // ← 追加 cc.view.resizeWithBrowserSize(true); // ← 追加 //load resources cc.LoaderScene.preload(["HelloWorld.png"], function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2, size.height / 2); sprite.setScale(0.8); this.addChild(sprite, 0); var label = cc.LabelTTF.create("Hello World", "Arial", 40); label.setPosition(size.width / 2, size.height / 2); this.addChild(label, 1); } }); cc.director.runScene(new MyScene()); }, this); }; cc.game.run("gameCanvas"); }; </script> </body> </html>
あとは、canvasタグを次のように修正する。
<canvas id="gameCanvas" width="800" height="450"> ↓↓↓ <canvas id="gameCanvas">
これで再びフォルダごとzip圧縮してphonegap buildにアップロードしてみる。スマホにインストールしてみるとうまく表示できてる。画面を回転させても大丈夫。
4.phonegapで設定できるようにする
このままでもいいんだけど、スプラッシュ画面とかアイコンとかつけたり、phonegapプラグインを使えるようにもしてみたい。
ということで、phonegapコマンドラインから適当なプロジェクトを作る。具体的な手順はこのページを参考にすべし。
プロジェクトを作ったら、フォルダ内にあるwwwフォルダを開く。その中にあるconfig.xmlファイルとresフォルダをcocos2d-jsフォルダにコピーする。こんな感じになっているはず。
いつもの手順でcocos2d-jsフォルダごとzip圧縮して、phonegap buildにアップロード。設定画面で次のアラートが出ていればOK。
スマホアプリの細かな設定は、config.xmlファイルを編集する。ここまでのサンプルファイルをgit hubにアップロードしておきました。
以上、お疲れ様でした!