読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

Cocos2d-JSはLite版からはじめよう

Cocos2d-JS

 Lite版は、ブラウザゲームの開発に特化したCocos2d-JSです。AndroidiOSなど他のプラットフォームで動かすための機能は含まれていませんが、そのぶんコンパクトで、APIの全体像やゲームの作り方を習得するのに最適と言えます。

 ゲーム自体はブラウザで効率よく開発して、面白いものができてからFullバージョンに移って、iOSAndroid用の広告とか入れて公開すればいいのです。まあもちろん、そこでいろいろ細かい問題が起きたりするわけですが、Cocos2d-JSならたぶん何とかなります。

 Lite版は基本的にhtmlファイル一個とjsファイル一個だけなので、だれでも簡単に理解できます(あとはpngの画像や設定用のjsonファイルなど)。

 jsファイルは、ダウンロードページで細かくカスタマイズして、必要なAPIだけ入れることができます。

f:id:funige:20150318202730p:plain

 最低限のAPIだけが入った「Lite版」(Lite版のLite版ですね)は非圧縮で700KBぐらい、「Full版」(Lite版のFull版)はええと……圧縮しても1.8MBぐらいあります。でもこれ物理エンジンが2つも(Box2DとChipmunk)入っていたり、使いそうもないAPIがたくさん入っているので、もしサーバーでゲームを公開するなら、カスタマイズして要らないAPIを削った方がいいでしょう。後で差し替えるのは簡単なので、最初は何も考えずに全部入りの非圧縮のjsファイルを使えばいいと思います。

 ダウンロードしたファイルを解凍してまずやるべきことは、ブラウザにHelloWorld.htmlを表示することです。Webサーバーは何でもいいのですが、ここではv2時代と同じpythonを使ってみます。

$  python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [09/Jan/2014 11:21:09] "GET / HTTP/1.1" 200 -

 このWebサーバーを起動した状態で、ブラウザを使って localhost:8000/HelloWorld.html にアクセスすれば、v2時代からのユーザーにはお馴染みの画面が表示されるはずです。

f:id:funige:20150318220203p:plain

 HelloWorld.htmlを見ると、この画面を表示しているソースコードが確認できます。

    ...
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    <script type="text/javascript">
          window.onload = function(){
              cc.game.onStart = function(){
                  //load resources
                  cc.LoaderScene.preload(["HelloWorld.png"], function () {
                      var MyScene = cc.Scene.extend({
                          onEnter:function () {
                              this._super();
                              var size = cc.director.getWinSize();
                              var sprite = cc.Sprite.create("HelloWorld.png");
                              sprite.setPosition(size.width / 2, size.height / 2);
                              sprite.setScale(0.8);
                              this.addChild(sprite, 0);

                              var label = cc.LabelTTF.create("Hello World", "Arial", 40);
                              label.setPosition(size.width / 2, size.height / 2);
                              this.addChild(label, 1);
                          }
                      });
                      cc.director.runScene(new MyScene());
                  }, this);
              };
              cc.game.run("gameCanvas");
          };
    </script>
    ...

 htmlの中にjavaScriptのコードを書き足すのもアレなので、javaScriptを分離しておきましょう。HelloWorld.htmlと同じフォルダに、srcとresというディレクトリを作って、MySceneを定義している部分をsrc/MyScene.jsに移動します。

// src/MyScene.js

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var size = cc.director.getWinSize();
        var sprite = cc.Sprite.create("HelloWorld.png");
        sprite.setPosition(size.width / 2, size.height / 2);
        sprite.setScale(0.8);
        this.addChild(sprite, 0);

        // 文字列は適当に変更してみよう
        var label = cc.LabelTTF.create("(・ω・)うむ", "Arial", 40);
        label.setPosition(size.width / 2, size.height / 2);
        this.addChild(label, 1);
    }
});

 ファイルを増やしたときは、HelloWorld.htmlと同じフォルダにあるproject.jsonにファイル名を登録しないといけません。

// project.json

{
    "debugMode"     : 1,
    "frameRate"     : 60,
    "id"            : "gameCanvas",
    "renderMode"    : 1,
    "jsList"        : ["src/MyScene.js"]  // 追加 
}

 HelloWorld.htmlの方は行数が減って、これだけになります。

    ...
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    <script type="text/javascript">
          window.onload = function(){
              cc.game.onStart = function(){
                  //load resources
                  cc.LoaderScene.preload(["HelloWorld.png"], function () {
                      cc.director.runScene(new MyScene());
                  }, this);
              };
              cc.game.run("gameCanvas");
          };
    </script>
    ....

 あと、画像データも適当なフォルダにまとめた方がいいでしょう。
 cc.LoaderScene.preloadで読み込んでいるファイル(HelloWrold.png)をresフォルダに移動して、画像データ名のリストはsrc/resource.jsに分離すれば、v2やFull版とだいたい同じスタート地点になります。

 詳細は動いてるコードで確認して下さい。
http://deteruyo.appspot.com/2/test/HelloWorld.html

広告を非表示にする