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

フニゲの開発日記

Electronとか...

cc.ScrollViewでページング

Cocos2d-JS

 ゲームのステージ選択でよく使う、ページ単位で横スクロールするビューです。

 昔使ってた物を書き直したのですが、このへんはv2の時とあんまり変わってないですね。もうちょっと簡単に書けそうな気がするけど、まあ動けばいいのです。
 onTouchEndedでスクロール位置を見て、適当な位置にスクロールするアニメーションをセットします。

var SlideView = cc.ScrollView.extend({
    ctor:function (size, numPages) {
        var container = new cc.LayerColor(
            cc.color.WHITE, numPages * size.width, size.height);

        this._super(size, container);
        this.setBounceable(false);
        this.setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL);
        this.numPages = numPages;

        cc.eventManager.addListener(slideListener, this);
        container.setPosition(0, 0); // 最初はいちばん左のページを表示する
    },

    getOffset:function () {
        return -this.getContentOffset().x;
    },

    getPage:function () {
        return Math.round(this.getOffset() / this.getViewSize().width);
    },

    moveToPage:function (page) {
        this.scheduleOnce(function () {
            var x = -page * this.getViewSize().width;
            this.stopAllActions();
            this.getContainer().runAction(cc.moveTo(0.1, cc.p(x, 0)));
        }, 0.01);
    },
});

var slideListener = cc.EventListener.create({
    event: cc.EventListener.TOUCH_ONE_BY_ONE,
    swallowTouches: true,

    onTouchBegan: function (touch, event) {
        var slideView = event.getCurrentTarget();
        slideView.page0 = slideView.getPage();
        slideView.offset0 = slideView.getOffset();
        return true;
    },

    onTouchEnded: function (touch, event) {
        var slideView = event.getCurrentTarget();
        var offset = slideView.getOffset();
        var page = slideView.getPage();

        if (page == slideView.page0) {
            var d = 50 // 50ピクセル以上ドラッグしたら左右のページへ移動するように

            if (slideView.page0 > 0) {
                if (offset - slideView.offset0 < -d) {
                    slideView.moveToPage(slideView.page0 - 1);
                    return;
                }
            }
            if (slideView.page0 < slideView.numPages - 1) {
                if (offset - slideView.offset0 > d) {
                    slideView.moveToPage(slideView.page0 + 1);
                    return;
                }
            }
        }
        slideView.moveToPage(page);
    },
});

 cc.ScrollViewのsetBounceableは、バウンスのアニメーションと自前のアニメーションが干渉してうまく動かなかったので、とりあえずfalseにしています。

 SlideViewの使い方は以下のようになります。サイズとページ数を指定して初期化したあとgetContainerでコンテナを取得して、各ページの内容を貼り付けています。

var GameLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var size = cc.size(700, 400);
        var slideView = new SlideView(size, 3); // 3枚をページング
        slideView.setPosition(50, 25);
        this.addChild(slideView);

        var container = slideView.getContainer();

        // 各ページの内容は適当に……
        var page0 = new SlidePage(size, 0);
        page0.setPosition(0, 0);
        container.addChild(page0);

        var page1 = new SlidePage(size, 1);
        page1.setPosition(size.width, 0);
        container.addChild(page1);

        var page2 = new SlidePage(size, 2);
        page2.setPosition(size.width * 2, 0);
        container.addChild(page2);
    },
});

var SlidePage = cc.Layer.extend({
    ctor:function (size, page) {
        this._super();

        var label = new cc.LabelTTF("PAGE " + page, "Arial", 24);
        label.setPosition(size.width/2, size.height-50);
        label.setColor(cc.color.BLACK);
        this.addChild(label);
    }
});

サンプル

広告を非表示にする