LoginSignup
2

More than 5 years have passed since last update.

Cocos2d-JSでhelloworld

Posted at

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

Download_Cocos2d-x_Cocos2d-html5_Cocos_Studio___Cocos2d-x.png

任意の場所に解凍しておく。今回はホームディレクトリ(~/)。

とりあえず動かしてみる。

解凍したディレクトリ直下にて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

Cocos2d-html5_Hello_World_test.png

構成

完成した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 を読み込んでいる。

index.htmlL25
...
25 <script src="main.js"></script>
...

main.js で HelloWorldSceneを読み込んでる。

main.jsL55
 55     cc.LoaderScene.preload(g_resources, function () {
 56         cc.director.runScene(new HelloWorldScene());
 57     }, this);

HelloWorldSceneはsrc/app.jsで宣言されてる。

src/app.jsL71
 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;

Cocos2d-html5_Hello_World_test.png
 

変わった!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2