[Cocos2d-x] カメラを使って2D画面のスクロールを行う方法

2Dアクションゲームや見下ろし型のマップRPGなどでは、プレイヤーを画面の中心に表示して、プレイヤーの移動に応じて表示する場面の方をスクロールさせる処理がよく使われます。

Cocos2d-x（Cocos2d-js）では、このようなスクロール処理を CCCamera（cc.Camera） を利用することで簡単に実装することができます。

今回は、左右に動かせるスプライトに追従するカメラのサンプルプログラムを紹介します。

開発言語は javascript で、Cocos2d-xのバージョンは 3.15.1 です。カメラはブラウザでは動かないため、ネイティブ環境（AndroidやiOS）で動作確認を行います。

スプライトに追従するカメラのサンプル

以下は、プロジェクト作成時に作られる app.js を変更したプログラムです。

// 範囲を指定してランダムな整数を生成するメソッド
var G_getRandomInt = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

var HelloWorldLayer = cc.Layer.extend({
    ctor: function() {

        this._super();

        // カメラが中心に捉えるスプライト
        var player = new cc.Sprite(res.player);
        player.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);
        this.addChild(player);

        // ラベル作成
        var labelFontSize = 100;
        for (var i = 0; i < 10; i++) {

            var label = new cc.LabelTTF("ただのラベル" + i, "Arial", labelFontSize);
            label.x = i * cc.winSize.width;
            label.y = G_getRandomInt(labelFontSize, cc.winSize.height - labelFontSize);
            this.addChild(label);

            label = new cc.LabelTTF("1111111111", "Arial", labelFontSize);
            label.x = i * cc.winSize.width;
            label.y = G_getRandomInt(labelFontSize, cc.winSize.height - labelFontSize);
            this.addChild(label);
        }

        // タップ処理
        var self = this;
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            onTouchBegan: function(touch, event) {
                return true;
            },
            onTouchMoved: function(touch, event) {

                // 横方向のタップ位置の変位を速度とする
                player.x += touch.getDelta().x;

                // カメラの位置設定
                cc.Camera.getDefaultCamera().setPosition3D(cc.math.vec3(player.x, player.y, 553));

                // カメラが見る中心座標を設定
                cc.Camera.getDefaultCamera().lookAt(cc.math.vec3(player.x, player.y, 0));
            }
        }, this);
    },
});

var HelloWorldScene = cc.Scene.extend({
    onEnter: function() {
        this._super();
        this.addChild(new HelloWorldLayer());
    }
});

スプライトの画像は適当なものを用意してください。

画面をタップして左右にスライドさせるとプレイヤーとカメラが移動します。適当にラベルを横方向に並べて、カメラが移動していることがわかるようにしています。

実際に実機で動作させてみると、

この状態から、画面をタップして右にスライドすると、

プレイヤーは中心位置から動かず、ラベルが画面右から現れます。

このサンプルではただのラベルですが、これらを衝突判定のあるオブジェクトなどに変更すれば、画面に収まらない大きなマップを作成することができます。

カメラの設定を行うプログラム

今回のプログラムで要となるのが、上記でハイライトされた2つの処理です。

// カメラの位置設定
cc.Camera.getDefaultCamera().setPosition3D(cc.math.vec3(player.x, player.y, 553));

// カメラが見る中心座標を設定
cc.Camera.getDefaultCamera().lookAt(cc.math.vec3(player.x, player.y, 0));

カメラは3D空間上で配置されますので、位置の指定も3次元座標で指定します。Cocos2d-xでは、3次元座標を扱うために vec3 という形式を使います。

cc.math.vec3(x座標,y座標,z座標);

カメラの位置を cc.Camera のメソッド setPosition3D で指定し、カメラが中心に捉える座標をメソッド lookAt で指定します。

今回は2Dのスクロールを行うため、z座標を定数としています。

以上が、Cocos2d-xでカメラを使用した2D画面スクロールの基礎的な実装です。さらに複雑なカメラワークなどについては、別の記事で紹介できればと思います。

カメラのクラスに関する詳しい実装は以下のドキュメントをご覧ください。

Cocos2d-x: Camera Class Reference

Cocos2d-xによる3D処理全般のドキュメントはこちら。

3D Graphics | Cocos2d-x