Cocos2d-xのアプリをブラウザアプリとして公開する方法

2017年3月13日

Cocos2d-x(Cocos2d-js)で開発したアプリをデバッグするときは、よく以下のコマンドを使ってブラウザ上で動かします。

cocos run -p web

このコマンドで動くアプリやゲームを、Web上で公開して自分以外のユーザーに使ってもらう場合は、必要なファイルをサーバーにアップロードする必要があります。

今回は、新規作成したCocos2d-xのプロジェクトをブラウザ上で動かすための手順について紹介します。

以下の方法で、Cocos2d-xで作ったアプリをブラウザゲームやFlashのようにWebページ内に埋め込むことができます

動作確認を行ったCocos2d-xのバージョンは 3.13.1 です。

サンプルプロジェクトの準備

以下のコマンドでCocos2d-xのプロジェクトを新しく作成したとします。(すでに動かしたいプロジェクトがある場合、この準備はスキップできます)

cocos new -l js

この例では、言語にjsjavascript)を指定したとします。

このコマンドによって MyJSGame という名前のプロジェクトが作成されます。

ターミナルの出力は以下のようになります。

Cocos2d-xの新規プロジェクトを作成

ブラウザアプリとして動かすためのファイルを残す

新規作成したプロジェクトの中身を見てみると、以下のようになっていると思います。

cocosのプロジェクトの初期ファイル

Cocosのプロジェクトフォルダ内には、iOSやmac、Android、Windowsなどで動作させるためのライブラリが入っています。ブラウザアプリとして動作させる場合、これらのファイルは不要です。

以下のファイルが、ブラウザアプリとして動かすために必要なディレクトリ及びファイルです。

  • frameworks/cocos2d-html5/
  • res/
  • src/
  • main.js
  • index.html
  • project.json

これ以外のディレクトリやファイルは削除してしまって構いません。必要なファイルのみを残したプロジェクト内は以下のようになります。

ブラウザアプリ用のファイルのみを残した状態

必要なファイルをサーバーにアップロード

これらのファイルを同じディレクトリに配置してサーバーにアップロードすると、ブラウザアプリとして動作します。

実際にアップロードしたURLにアクセスした例です。

ブラウザアプリとして動作させたCocos2d-xのアプリ

スマホのブラウザでも問題なく動作します。

スマホのブラウザで動作するCocos2dxのアプリ

ページを編集する

ブラウザアプリが動作するページと同じページに説明文などを書きたい場合があると思います。

これを行うには、index.html を編集します。

デフォルトでは、アプリ画面が全画面に表示されるようになっており、HTMLファイルに文章を描いてもアプリの画面に隠れてしまいます。

これを防ぐために、アプリの動作を行なっているタグ(id属性がCocos2dGameContainerの要素)についたCSSを変更します。

元々のCSSは以下のようになっています。

#Cocos2dGameContainer {
  position: absolute;
  margin: 0;
  overflow: hidden;
  left: 0px;
  top: 0px;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

これを以下のように書き換えます。

#Cocos2dGameContainer {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

そして、HTMLのbodyタグ内に説明文を書き加えます。

<body>
<script src="res/loading.js"></script>

<h1>タイトルです!</h1>
<p>アプリの説明文などを書きます。</p>

<canvas id="gameCanvas" width="480" height="720"></canvas>
<script>
    (function () {
        var nav = window.navigator;
        var ua = nav.userAgent.toLowerCase();
        var uaResult = /android (\d+(?:\.\d+)+)/i.exec(ua) || /android (\d+(?:\.\d+)+)/i.exec(nav.platform);
        if (uaResult) {
            var browserCheck = ua.match(/(qzone|micromessenger|qq)(mobile)?(browser)?\/?([\d.]+)/i);
            if (browserCheck) {
                var browserVersion = parseFloat(browserCheck[4] || 0);
                if (browserVersion < 6.2) {
                    var gameCanvas = document.getElementById("gameCanvas");
                    var ctx = gameCanvas.getContext('2d');
                    ctx.fillStyle = '#000000';
                    ctx.fillRect(0, 0, 1, 1);
                }
            }
        }
    })();
</script>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>

これで、以下のようにページ内に文章などを表示することができます。

埋め込んだCocosブラウザアプリの動作ページに説明文を表示した例

デフォルトでは暗い色ですが、CSSの他の部分を変更すれば、色やフォントも変更できます。

以上が、Cocos2d-xで作成したアプリをブラウザアプリとして配信・動作させる方法です。

おまけ

実際に当サイトで配信している脳トレアプリをブラウザアプリにした例です。

脳トレアプリ 計算力トレーニング Web版

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です