Go to Qiita Advent Calendar 2024 Top
LoginSignup
27
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kawai_norimitsu(徳光 河合)

Cocos2d-JS（HTML5）Lite版の使い方まとめ

Last updated at Posted at 2015-03-19

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」ファイルをダブルクリックして起動してみる。画像が表示されていればＯＫ！
    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」ファイルをダブルクリックして起動してみる。画面をタップ（クリック）して次の画面が表示されていればＯＫ！
    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でアプリを作ってみて欲しい。

27
23
0

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
Sign upLogin
27
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?