JSでWebゲームが作れるCocos2d-JS(ver3.2)でHelloworldまで作ってみる。
実行環境
version | |
---|---|
OS | OSX-Yosemite 10.10.1 |
Shell | zsh 5.0.5 (x86_64-apple-darwin14.0) |
Cocos2d-JS | 3.2 |
--
環境構築
ダウンロード
公式サイトからFullバージョンをダウンロード
http://www.cocos2d-x.org/download
任意の場所に解凍しておく。今回はホームディレクトリ(~/)。
とりあえず動かしてみる。
解凍したディレクトリ直下にてpythonのSimpleHTTPServerを起動。
[masato@mba-18] $ cd ~/cocos2d-js-v3.2
[masato@mba-18] $ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
ブラウザで 'http://localhost:8000/js-tests/' にアクセスすればサンプルが表示される。
セットアップ
README.md に記載されている通り、./setup.py
を実行。
途中で各種パス(NDK_ROOT,ANDROID_SDK_ROOT,ANT_ROOT)を聞かれるが、何も入れていないのでとりあえずすべてEnterでスキップする。
[masato@mba-18] $ ./setup.py
Setting up cocos2d-x...
...
A backup file "~/.bash_profile.backup" is created for "~/.bash_profile".
Please execute command: "source ~/.bash_profile" to make added system variables take effect
.bash_profileを書き換えているようだ。
差分を見るとPATHを追加している模様。
[masato@mba-18] $ diff ~/.bash_profile.backup ~/.bash_profile
1a2,5
>
> # Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x
> export COCOS_CONSOLE_ROOT=~/cocos2d-js-v3.2/tools/cocos2d-console/bin
> export PATH=$COCOS_CONSOLE_ROOT:$PATH
[masato@mba-18] $
zshを使っているので、.bash_profileを再読み込みしても反映されない。自分でexportコマンドを打つ。
[masato@mba-18] $ which cocos
cocos not found
[masato@mba-18] $ export COCOS_CONSOLE_ROOT=/Users/masato/cocos2d-js-v3.2/tools/cocos2d-console/bin
[masato@mba-18] $ export PATH=$COCOS_CONSOLE_ROOT:$PATH
[masato@mba-18] $ which cocos
/Users/masato/cocos2d-js-v3.2/tools/cocos2d-console/bin/cocos
[masato@mba-18] $
cocosコマンドが使えるようになった。
HelloWorldの作成
ゲームの雛形を作成する。今回は~/dev/Cocos2dJS以下に作成。
[masato@mba-18] $ cocos new HelloWorld -l js -d ~/dev/Cocos2dJS
Running command: new
> Copy template into ~/dev/Cocos2dJS/HelloWorld
> Copying cocos2d-html5 files...
> Copying files from cocos root directory...
> Copying files from template directory...
> Copying directory from cocos root directory...
> Copying cocos2d-x files...
> Rename project name from 'HelloJavascript' to 'HelloWorld'
> Replace the project name from 'HelloJavascript' to 'HelloWorld'
> Replace the project package name from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.HelloWorld'
> Replace the mac bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.HelloWorld'
> Replace the ios bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.HelloWorld'
/dev/Cocos2dJS
以下にHelloWorld
ディレクトリができた。
このディレクトリがゲームの雛形になる。
動かしてみる。
作成されたディレクトリで cocos run
コマンドを打つとブラウザが立ち上がってゲームが起動する。
[masato@mba-18] $ cd ~/dev/Cocos2dJS/HelloWorld
[masato@mba-18] $ cocos run -p web
構成
完成したHelloWorldのディレクトリ構成はこんなかんじ。
[masato@mba-18] $ tree -L 2 ~/dev/Cocos2dJS/HelloWorld
~/dev/Cocos2dJS/HelloWorld
├── CMakeLists.txt
├── frameworks
│ ├── cocos2d-html5
│ ├── js-bindings
│ └── runtime-src
├── index.html
├── main.js
├── project.json
├── res
│ ├── CloseNormal.png
│ ├── CloseSelected.png
│ ├── HelloWorld.png
│ └── favicon.ico
├── src
│ ├── app.js
│ └── resource.js
└── tools
├── bindings-generator
└── tojs
9 directories, 10 files
index.html で main.js を読み込んでいる。
...
25 <script src="main.js"></script>
...
main.js で HelloWorldSceneを読み込んでる。
55 cc.LoaderScene.preload(g_resources, function () {
56 cc.director.runScene(new HelloWorldScene());
57 }, this);
HelloWorldSceneはsrc/app.jsで宣言されてる。
71 var HelloWorldScene = cc.Scene.extend({
72 onEnter:function () {
73 this._super();
74 var layer = new HelloWorldLayer();
75 this.addChild(layer);
76 }
app.jsで表示されている内容を制御している模様。
ちょっと変えてみる。
app.jsの中でHelloWorldのLabelTTFを作ってる。ここを変えてみる。
diff --git a/src/app.js b/src/app.js
index 8df4e42..835c2fc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -35,7 +35,7 @@ var HelloWorldLayer = cc.Layer.extend({
// 3. add your codes below...
// add a label shows "Hello World"
// create and initialize a label
- var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
+ var helloLabel = new cc.LabelTTF("Hello Cocos2d-JS", "Arial", 38);
// position the label on the center of the screen
helloLabel.x = size.width / 2;
helloLabel.y = 0;
変わった!