Drag Selection

[Telash]

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

[rich]

Do you want to drag a selection around them? Like a rectangle - like in Windows / OSX when you select multiple icons on the desktop for example.

[Telash]

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

[XekeDeath]

	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)

[Telash]

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.

[Telash]

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