Cocos2dは、オープンソースのゲームフレームワークで、同梱されているCocos2d-JS は、HTML5 + JavaScript のブラウザゲームを開発することができます。そこで、Cocos2d-JS のゲームを Bluemix アプリとして動作させる事を試みたメモです。

ツールのインストール

ブラウザのゲームのため、HTTPサーバー必要です。 Bluemix CFランタイムには、Nginx や Apache HTTPd は標準適用されていないので、Express フレームワークの HTTPサーバーを利用します。

次のリンクを参考に、MacOS に ndenv をインストールしておきます。

Node.js のバージョン管理ツール Ndenv をインストールしてみたよ https://anton072.github.io/blog/2017/02/26/installed-ndenv/

ndenv install v6.11.0

バージョンを設定します。

ndenv global v6.11.0

次に、express コード・ジェネレータをインストールします。

http://expressjs.com/ja/starter/generator.html

HTTPサーバーの構築

次のコマンドで、Express フレームワークのコードを生成します。これで、HTMLやJavaScript を配置するディレクトリができます。

express MoonWarriors

Cocos2d-JSのセットアップ

Cocos2d-js をクローンする

cd MoonWarriors
git clone https://github.com/cocos2d/cocos2d-js

Cocos2d-js に含まれる MoonWarriors を Express の公開用ディレクトリに、移動する

mv cocos2d-js/samples/js-moonwarriors public

公開用ディレクトリの frameworks の下に、cocos2d-html5 をクローンする

cd public
mkdir frameworks
cd frameworks
git clone https://github.com/cocos2d/cocos2d-html5

publicのディレクトリに、リダイレクトのためのindex.htmlを作成します。

cd ../public
atom index.html

ファイルの中身は、以下の１行で、Bluemix の付与したURLのルートにアクセスすると、先ほどクローンしたjs-moonwarriorsへリダイレクトします。

<meta http-equiv="refresh" content="0;URL=js-moonwarriors/index.html">

マニフェストファイル

MoonWarriror 下のディレクトリに、以下の内容の manifest.yml を作成します。

manifest.yml

applications:
- path: .
  memory: 128M
  instances: 1
  random-route: true
  domain: mybluemix.net
  name: MoonWarriors
  disk_quota: 1024M

npm パッケージファイルの作成

起動時に、Express フレームワークの HTTPサーバーが動作する様に、scripts を設定します。

package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

ローカル環境で実行

次のコマンドで、前提のファイルをインストールします。

npm install

そして、HTTPサーバーをスタートさせ、アプリをスタートさせます。

npm start

これで、http://localhost:3000/ へアクセスするとブラウザの中でゲームが動作します。

Bluemix CFアプリとして実行

Bluemix へ push する前に、npm パッケージを削除しておきます。

rm -fr node_modules

Bluemix にコードをプッシュします。

imac:MoonWarriors maho$ ls -l
atotal 24
-rw-r--r--   1 maho  staff  1257  6 21 18:33 app.js
drwxr-xr-x   3 maho  staff   102  6 21 18:33 bin
-rw-r--r--   1 maho  staff   141  6 21 21:22 manifest.yml
-rw-r--r--   1 maho  staff   325  6 21 18:33 package.json
drwxr-xr-x   5 maho  staff   170  6 21 21:22 public
drwxr-xr-x   4 maho  staff   136  6 21 18:33 routes
drwxr-xr-x   5 maho  staff   170  6 21 18:33 views
imac:MoonWarriors maho$ rm -fr node_modules/
imac:MoonWarriors maho$ bx cf push

<中略>

要求された状態: started
インスタンス: 1/1
使用法: 128M x 1 インスタンス
URL: moonwarriors-primaeval-depolariser.mybluemix.net, moonwarriors-inexpugnable-nonrevelation.mybluemix.net, moonwarriors-unrecorded-degree.mybluemix.net, moonwarriors-metalled-acknowledgment.mybluemix.net, moonwarriors-sthenic-pseudoscopy.mybluemix.net, moonwarriors-papery-nonvitality.mybluemix.net
最後アップロード日時: Wed Jun 21 13:32:10 UTC 2017
スタック: unknown
ビルドパック: SDK for Node.js(TM) (ibm-node.js-6.10.2, buildpack-v3.12-20170505-0656)

     状態   次の日時から             CPU    メモリー            ディスク           詳細
#0   実行   2017-06-21 10:33:04 PM   0.1%   128M の中の 40.3M   1G の中の 110.9M

これで完了です。　次の画面の「アプリURLにアクセス」をクリックすると、ゲームで遊べます。

このアプリは、次のURLで動作しています。
https://moonwarriors-primaeval-depolariser.mybluemix.net/

ソースコードは、https://github.com/takara9/MoonWorriors です。

以上です。

Cocos2d-JS のゲーム MoonWarriors を Bluemix で動かしてみた