[Cocos2d-js] 画像の一部を切り取ってスプライトで表示する

Cocos2d-x（Cocos2d-js）で、一枚の画像全体ではなく、その画像の一部のみをスプライト（cc.Sprite）の画像として使用したいという場合のプログラムの書き方についてです。

動作確認は V3.16 で行っています。

スプライト作成時に切り取る範囲を指定

スプライト作成時に切り取る範囲を指定する場合は、コンストラクタの第2引数に cc.rect を渡します。

例えば、以下のように書くと、スプライトの画像（res.image）の左上を原点として幅96px、高さ64pxの部分を切り取ります。

var image = new cc.Sprite(res.image, cc.rect(0, 0, 96, 64));

スプライト作成後に切り取る範囲を指定

スプライトを作成した後でも、メソッド setTextureRect によって切り取る範囲を変更できます。

image.setTextureRect(cc.rect(96, 64, 128, 128));

このように書くと、画像の左上から右に96px、下に64px移動した位置を原点として幅128px、高さ128pxの部分を切り取ります。

サンプルプログラム

キーボードの左右キーで、画像を切り取る範囲を変更できるサンプルです。

以下の画像の一部を切り取ってスプライトに使用しています。

このプログラムのソースコード（app.js）は以下の通りです。

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

        this._super();

        var portionSize = 64;

        // 画像の一部を切り取ってスプライトの画像にする
        var image = new cc.Sprite(res.image, cc.rect(0, 0, portionSize, portionSize));

        image.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);
        image.setScale(3);
        this.addChild(image);

        var i = 0;
        var max = image.texture.pixelsWidth / portionSize - 1;

        // キーボードからの入力を処理
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyPressed: function(keyCode, event) {
                
                if (keyCode == cc.KEY.left) {

                    cc.log("左");

                    i--;
                    if (i < 0) {
                        i = max;
                    }
                }

                if (keyCode == cc.KEY.right) {

                    cc.log("右");

                    i++;
                    if (i > max) {
                        i = 0;
                    }
                }

                // 画像の切り取り範囲を変更
                image.setTextureRect(cc.rect(portionSize * i, 0, portionSize, portionSize));
            },
            onKeyReleased: function(keyCode, event) {}
        }, this);

        return true;
    }
});

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

以上、画像の一部を切り取ってスプライトで表示する方法でした。