Jump to content

Drag Selection


Telash
 Share

Recommended Posts

Hey guys,

If i wanted to say, select multiple sprites by dragging over them (such as with a tablet or a phone, or even with a mouse) how would I go about that? I have been investigating the object inputs for a few hours now and I don't seem to be getting anywhere.

I thought something like this might work, alas it doesn't, it seems to work like a normal onClick even and dosn't allow me the drag over the other items in the group.
 

	update: function () {		this.physics.collide(BasicGame.diceSet, BasicGame.diceSet);		this.physics.collide(BasicGame.diceSet, this.floor);				BasicGame.diceSet.forEach ( function (dice) {					if(dice.input.pointerOver()) {				dice.kill();			}				})			}


Regards,
Telash

Link to comment
Share on other sites

Hey Rich,

No, I'm looking to select them by dragging over the top of the blocks in question. In this case I have a 3 x 3 grid of 9 blocks and I want to select a straight line of 3 using a touch screen (tablet / phone) I'm pretty sure Phaser can do this as i've seen other games using Phaser do similar things (unless it's a custom solution?)

Thanks in advance :)

Link to comment
Share on other sites

	update: function () {		this.physics.collide(BasicGame.diceSet, BasicGame.diceSet);		this.physics.collide(BasicGame.diceSet, this.floor);				BasicGame.diceSet.forEach ( function (dice) {					if(dice.input.pointerOver()) {				dice.kill();			}				})			}

 

Something like that would work if you saved a reference to which dice were being touched instead of killing them.

So instead of dice.kill(), have an arrary to store selected dice and use this.selected.push(dice).

 

You may also want to have a check for the pointer being down as well, not just over, and you will need to clear the selection array at an appropriate time (like a new touch event, or when the selection is handled by the game mechanics)

Link to comment
Share on other sites

Something like that would work if you saved a reference to which dice were being touched instead of killing them.

So instead of dice.kill(), have an arrary to store selected dice and use this.selected.push(dice).

 

You may also want to have a check for the pointer being down as well, not just over, and you will need to clear the selection array at an appropriate time (like a new touch event, or when the selection is handled by the game mechanics)

Hey XekeDeath,

 

Thanks for your help :)

I attempted to use pointerDown in an earlier attempt and this resulted in only the first of the group being selected, for some reason while the cursor remained down none of the other objects registered it. (infact that was the version i thought i had copied / pasted into the above post... my bad haha)

Regards,

Telash

 

 

Edit: I have tried a few different things, I get the best results with (this .kill is just for testing purposes):

 

	update: function () {		this.physics.collide(BasicGame.diceSet, BasicGame.diceSet);		this.physics.collide(BasicGame.diceSet, this.floor);				if(this.input.activePointer.isDown) {					BasicGame.diceSet.forEach ( function (dice) {							if(dice.input.pointerOver()) {									dice.kill();				}						})				}			},

It allows me to use click and drag over the sprites I want, however I am unsure how it will hold up against multi touching.

Link to comment
Share on other sites

It seem's when I use 'dice.input.pointerOver()' on a mobile / tablet (touch device) I have issues with the pointerOver returning true on all the 'blocks' i have ever touched, so when I attempt to clear the screen for an invalid selection, the next selection includes all previously selected blocks.

Is there a way to clear the pointer data?

 

 

Edit: I was able to solve it with the following line of code:
 

dice.input._pointerData[1].isOver = false;

This allowed me to undo invalid selections and let the user retry without having false 'over' data left on the oject
 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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