Jump to content

how to show a part of a ranking list


h5developer
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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);

            }

        }

    }

};

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...