Help us understand the problem. What is going on with this article?

Cocos2d-JS(HTML5)Lite版の使い方まとめ

More than 3 years have passed since last update.

Cocos2d-JS Lite版とは

スマホアプリ用ゲームの開発によく使われるCocos2d-x。これをJavaScriptで書けるようにしたのがCocos2d-JS(Cocos2d-HTML5)。そこから更にWebアプリに特化したのがLite版。

もちろん、PhoneGap BuildとかMonacaとか使えば普通にLite版でもスマホアプリが作れてしまう(正確にはハイブリッドアプリだけど)。

Cocos2d-JS Lite版の使い方

Cocos2d-JS liteはCocos2dエンジンである、ひとつのJavaScriptファイルを読み込むだけなのでとてもシンプル構造だ。

ただシンプル過ぎて拡張しにくい。HTMLファイルにコード直書きだし、シーンにそのまま画像やら文字列やら表示させてるし…。

なので自分なりの使い方を解説してみる。

1. Lite版のLite版をダウンロードする

Cocos2d-JS Lite Versionのダウンロードする。Lite版にはFullバージョンとliteバージョンがありますが、今回はliteバージョンのversion3.3です。
ダウンロードできたらZIPファイルを展開しておく。

フォルダを開いて「HelloWorld.html」をダブルクリックすると、次の画面が表示される。
cocos2d-js

2. ファイル構造を変更する

  • 「HelloWorld.html」のファイル名を「index.html」に変更する。
  • resフォルダを作り、「HelloWorld.png」をresフォルダ内に移動する。
  • srcフォルダを作り、新しく「resource.js」というファイルを作る。
  • 「resource.js」の中身は次のように書く。
resource.js
var res = {
    HelloWorld_png : "res/HelloWorld.png",
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}
  • 引き続き、srcフォルダの中に新しく「myScene.js」というファイルを作る。
  • 「myScene.js」の中身は次のように書く。レイヤーを作り、シーンがレイヤーを読み込むようにした。
myScene.js
var MyLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var size = cc.director.getWinSize();
        var sprite = cc.Sprite.create(res.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);

        return true;
    },
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
    }
});
  • 「index.html」の中身を次のように修正する。
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello Cocos2d-JS</title> 
    <script type="text/javascript" src="cocos2d-js-v3.3-lite.js" charset="UTF-8"></script>
    <script type="text/javascript" src="src/resource.js" charset="UTF-8"></script>
    <script type="text/javascript" src="src/myScene.js" charset="UTF-8"></script>
</head>
<body>   
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    <script type="text/javascript">
          window.onload = function(){
              cc.game.onStart = function(){
                  //load resources
                  cc.LoaderScene.preload(g_resources, function () {
                      cc.director.runScene(new MyScene());
                  }, this);
              };
              cc.game.run("gameCanvas");
          };
    </script>
</body>
</html>
  • 「index.html」ファイルをダブルクリックして起動してみる。エラーなく最初の通りに表示されれば完成!

面倒なのでローカルサーバーは使ってない。cc.logが表示されないのはローカルサーバーを使っていないから。またローカルサーバーを使わないので「project.json」ファイルも使わない。

3. リソースを追加して画像を表示する

cocos2d-html5

  • 今回、この画像ファイル(cocos.png)を追加してみる。
  • 「cocos.png」をresフォルダに入れる。
  • 「resource.js」を次のように修正する。
resource.js
var res = {
    HelloWorld_png : "res/HelloWorld.png",
    Cocos_png : "res/cocos.png",
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}
  • 「myScene.js」を次のように修正する
myScene.js
var MyLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        var size = cc.director.getWinSize();

        var sprite = cc.Sprite.create(res.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);

        var spriteB = cc.Sprite.create(res.Cocos_png);
        spriteB.setPosition(size.width / 4, size.height / 4);
        this.addChild(spriteB);

        return true;
    },
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
    }
});
  • 「index.html」ファイルをダブルクリックして起動してみる。画像が表示されていればOK! cocos2d-js-lite

4. シーンを追加して画面を遷移する

  • srcフォルダ内に新しく「nextScene.js」ファイルを作る。
  • 「nextScene.js」を次のように修正する。
nextScene.js
var NextLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        var size = cc.director.getWinSize();

        var label = cc.LabelTTF.create("This is Next Scene!!", "Arial", 40);
        label.setPosition(size.width / 2, size.height / 2);
        this.addChild(label, 1);

        return true;
    },
});

var NextScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new NextLayer();
        this.addChild(layer);
    }
});
  • 「index.html」に次の行を追加する。
    <script type="text/javascript" src="src/nextScene.js" charset="UTF-8"></script>

  • 「myScene.js」を次のように修正する。タップイベントリスナーを登録している。

myScene.js
var MyLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        var size = cc.director.getWinSize();

        var sprite = cc.Sprite.create(res.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);

        var spriteB = cc.Sprite.create(res.Cocos_png);
        spriteB.setPosition(size.width / 4, size.height / 4);
        this.addChild(spriteB);

        // タップイベントリスナーを登録する
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: this.onTouchBegan,
            onTouchMoved: this.onTouchMoved,
            onTouchEnded: this.onTouchEnded
        }, this);

        return true;
    },

    onTouchBegan:function(touch, event) {
        return true;
    },

    onTouchMoved:function(touch, event) {
    },

    onTouchEnded:function(touch, event) {
        // 次のシーンに切り替える
        cc.director.runScene(new NextScene());
    },
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
    }
});
  • 「index.html」ファイルをダブルクリックして起動してみる。画面をタップ(クリック)して次の画面が表示されていればOK! cocos2d-js-lite

5. 画面サイズを調整する

  • lite版は標準では画面サイズが大きくてはみ出てしまうので変更する必要がある。
  • 「index.html」ファイルを次のように修正する。
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello Cocos2d-JS</title> 
    <script type="text/javascript" src="cocos2d-js-v3.3-lite.js" charset="UTF-8"></script>
    <script type="text/javascript" src="src/resource.js" charset="UTF-8"></script>
    <script type="text/javascript" src="src/myScene.js" charset="UTF-8"></script>
    <script type="text/javascript" src="src/nextScene.js" charset="UTF-8"></script>
</head>
<body>   
    <canvas id="gameCanvas"></canvas>
    <script type="text/javascript">
          window.onload = function(){
              cc.game.onStart = function(){
                  // ----- 画面にあわせてリサイズする
                  cc.view.adjustViewPort(true);
                  cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
                  cc.view.resizeWithBrowserSize(true);

                  //load resources
                  cc.LoaderScene.preload(g_resources, function () {
                      cc.director.runScene(new MyScene());
                  }, this);
              };
              cc.game.run("gameCanvas");
          };
    </script>
</body>
</html>
  • アプリ化して実機で確認するとキチンと表示されている。横向きにしても問題なしだ。 cocos2d-html5-lite

6. Cocos2d-JS(HTML5)でゲームを作る

そんなわけでLite版でスマホアプリ向けゲームを作ってみた。アハ体験みたいなゲームでとてもシンプルだけど、アニメーションやら何やらよく使うであろうコードが書かれているはず。

まずは遊んでみて欲しい。Let'sアハ体験はこちらからどうぞ。

cocos2d-js-lite-game

ゲームのロジックが分かったら、GitHubにソース一式をまるごと置いておいたのでコードを読んでみると参考になるかも。

GitHubサンプルをダウンロード

最後にcocos2d-js(html5)をPhoneGap Buildを使ってアプリ化する方法を参考にして是非Cocos2d-html5でアプリを作ってみて欲しい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした