how to show a part of a ranking list

[h5developer]

hello,everyone.

 

I want to make a ranking list, and show only a part. When I drag in this area, it will move up and down.

this ranking list should in an area, the part out of the area should be hidden.

 

I've tried to make this ranking list a group, and set the height. I thought the items out of this height wouldn't show, but

it seems to be of no effect.

 

what can I do? thanks for any advice!

[lewster32]

You'll probably want to use a mask: http://examples.phaser.io/_site/view_full.html?d=sprites&f=mask.js&t=mask&phaser_version=v2.2.0

[h5developer]

thank you ! you pointed out the key !

 

I'm sorry to have bothered you, as I haven't read all these examples.

[h5developer]

I've realized the effect of showing a part of my list. But Phaser can't seem to drag a group natively.

To achieve this effect, I wrote a lot of codes:

 

in a state:

create: function() {

        this.rank_list = this.add.group();

        this.rank_list.x = 85;

        this.rank_list.y = 200;

        var mask = this.add.graphics(85, 200);

        mask.beginFill(0xffffff);

        mask.drawRect(0, 0, 520, 350);

        this.rank_list.mask = mask;

        this.rank_item = new Array();

        this.items_mount = 6;

        this.rank_list.height = 100 * this.items_mount;

        for(var i = 0; i < this.items_mount; i++){

            this.rank_item = this.add.group(this.rank_list);

            this.rank_item.y = 100 * i;

            this.rank_item.create(0, 0, 'bg_block_list');

            this.rank_item.create(410, 5, 'heart_send');

            this.rank_item.create(275, 15, 'user_info_icon_bg');

        }

        this.input.onDown.add(this.startDrag, this);

        this.input.onUp.add(this.finishDrag, this);

        this.lastPosY = 0;

        this.deltaPosY = 0;

        this.drag = false;

},

update: function() {

        if(this.drag){

            console.log("nowy = " + this.input.activePointer.position.y, "lasty = " + this.lastPosY);

            this.deltaPosY = this.input.activePointer.position.y - this.lastPosY;

            this.rank_list.y += this.deltaPosY;

            this.lastPosY = this.input.activePointer.position.y;

        }

},

startDrag: function(para_pointer) {

    if(para_pointer.position.x > 85 && para_pointer.position.x < 605

    && para_pointer.position.y > 200 && para_pointer.position.y < 550) {

        this.lastPosY = para_pointer.position.y;

        this.drag = true;

    }

},

finishDrag: function() {

    this.drag = false;

    if(this.rank_list.y > 200) {

        this.add.tween(this.rank_list).to({y : 200}, 500, null, true, 0);

    }

    if(this.rank_list.y < (550 - this.rank_list.height)) {

        this.add.tween(this.rank_list).to({y : (550 - this.rank_list.height)}, 500, null, true, 0);

    }

}

 

I set variables to store last position and delta position and change group.y according to the delta position  when updating.

While drag end, check the group.y and tween to specified position.

 

There are lots of similar lists in my project, I just want to know, is there an easier way?

[h5developer]

I add a move callback instead of update, and package them in a global object. so I can reuse them in my project.

 

The global object is below;

 

var custom_drag = {

    area : {x1 : 0, y1 : 0, x2 : 1080, y2 : 680},

    direction : "x" ,

    lastPos : {x : 0, y : 0},

    deltaPos : {x : 0, y : 0},

    canDrag : false,

    dragObj : null,

    mask: null,

    

    initial: function(x1,y1,x2,y2,direction,object) {

        this.area.x1 = x1;

        this.area.y1 = y1;

        this.area.x2 = x2;

        this.area.y2 = y2;

        this.direction = direction;

        this.dragObj = object;

        this.dragObj.x = x1;

        this.dragObj.y = y1;

        this.mask = game.add.graphics(x1, y1);

        this.mask.beginFill(0xffffff);

        this.mask.drawRect(0, 0, x2-x1, y2-y1);

        this.dragObj.mask = this.mask;

    },

    dragCallback: function(para_pointer) {

        if(this.canDrag){

            if(this.direction == "y") {

                this.deltaPos.y = para_pointer.position.y - this.lastPos.y;

                this.dragObj.y += this.deltaPos.y;

                this.lastPos.y = para_pointer.position.y;

            }

            if(this.direction == "x") {

                this.deltaPos.x = para_pointer.position.x - this.lastPos.x;

                this.dragObj.x += this.deltaPos.x;

                this.lastPos.x = para_pointer.position.x;

            }

        }

    },

    startDrag: function(para_pointer) {

        if(para_pointer.position.x > this.area.x1 && para_pointer.position.x < this.area.x2

        && para_pointer.position.y > this.area.y1 && para_pointer.position.y < this.area.y2) {

            if(this.direction == "y") {

                this.lastPos.y = para_pointer.position.y;

                this.canDrag = true;

            }

            if(this.direction == "x") {

                this.lastPos.x = para_pointer.position.x;

                this.canDrag = true;

            }

        }

    },

    finishDrag: function() {

        this.canDrag = false;

        if(this.direction == "y" ) {

            if(this.dragObj.y > this.area.y1) {

                game.add.tween(this.dragObj).to({y : this.area.y1}, 500, null, true, 0);

            }

            if(this.dragObj.y < (this.area.y2 - this.dragObj.height)) {

                game.add.tween(this.dragObj).to({y : (this.area.y2 - this.dragObj.height)}, 

                                                500, null, true, 0);

            }

        }

        if(this.direction == "x" ) {

            if(this.dragObj.x > this.area.x1) {

                game.add.tween(this.dragObj).to({x : this.area.x1}, 500, null, true, 0);

            }

            if(this.dragObj.x < (this.area.x2 - this.dragObj.width)) {

                game.add.tween(this.dragObj).to({x : (this.area.x2 - this.dragObj.width)}, 

                                                500, null, true, 0);

            }

        }

    }

};