ノラプログラマーの技術メモ

ネットで調べても出てこなかった情報を載せていきたい技術系ブログ。

Cocos2d-JSをPhoneGap Buildしてスマホアプリを作ってみた

久しぶりにcocos2d-JSのサイトを見ていたらlite版が出ていた。フルバージョンと違ってライト版は機能が制限されている分、シンプルで扱いやすいとのこと。

確かにライト版はソースが1Mbyteなのに対してフルバージョン版は300Mbyteくらい。

「でも結局はjava scriptだからコンパイル環境がなー」とか思ってたところ、「あれこれphonegap buildなら楽勝じゃね?」と思いつき実際にやってみた。

結果、androidiphoneのアプリがワンソースコードで出来てしまった。こりゃスゴイ。

環境

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をダブルクリックして開いてみるとこんな感じの画面が出る。

f:id:kawai_norimitsu:20150317195501p:plain

2.phonegap buildに登録する

phonegap buildに登録する。プロジェクトが1個しか扱えないけど無料のものがあるのでそれにする。登録できたらログインする。

cocos2d-js-v3.3フォルダをフォルダごとzipで圧縮する。そのままphonegap buildにzipファイルをアップロード。

一応はこれでビルドが掛かる。iOSアプリのビルドには証明書ファイル(p12)とプロビジョニングファイルが必要。

上のQRコードを読み取るとビルドされたアプリを実機スマホにインストールすることができる。

f:id:kawai_norimitsu:20150317200642p:plain

でもなんか画面からはみ出してるんですけど・・・。しかもアンドロイドもiPhoneも両方。

f:id:kawai_norimitsu:20150317201647p:plain

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にアップロードしてみる。スマホにインストールしてみるとうまく表示できてる。画面を回転させても大丈夫。

f:id:kawai_norimitsu:20150317203309p:plain

4.phonegapで設定できるようにする

このままでもいいんだけど、スプラッシュ画面とかアイコンとかつけたり、phonegapプラグインを使えるようにもしてみたい。

ということで、phonegapコマンドラインから適当なプロジェクトを作る。具体的な手順はこのページを参考にすべし。

プロジェクトを作ったら、フォルダ内にあるwwwフォルダを開く。その中にあるconfig.xmlファイルとresフォルダをcocos2d-jsフォルダにコピーする。こんな感じになっているはず。

f:id:kawai_norimitsu:20150317203819p:plain

いつもの手順でcocos2d-jsフォルダごとzip圧縮して、phonegap buildにアップロード。設定画面で次のアラートが出ていればOK。

f:id:kawai_norimitsu:20150317204107p:plain

スマホアプリの細かな設定は、config.xmlファイルを編集する。ここまでのサンプルファイルをgit hubにアップロードしておきました。

以上、お疲れ様でした!