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

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

![スクリーンショット 2017-06-21 22.41.32.png](https://qiita-image-store.s3.amazonaws.com/0/42829/c15c0e66-1de4-e8c2-241c-2dc05892ccbf.png)



## ツールのインストール
ブラウザのゲームのため、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 を作成します。

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

# npm パッケージファイルの作成
起動時に、Express フレームワークの HTTPサーバーが動作する様に、scripts を設定します。

~~~file: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にアクセス」をクリックすると、ゲームで遊べます。

![スクリーンショット 2017-06-21 22.42.40.png](https://qiita-image-store.s3.amazonaws.com/0/42829/32002808-f7e5-001d-053c-6046d3ceb46f.png)


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

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

以上です。


![cocos2dx_portrait.png](https://qiita-image-store.s3.amazonaws.com/0/42829/2ba8b4ac-f52b-b78b-7bfc-a18d0ea2c18a.png)