Create and move sprite onInputDown

[Castellvi]

Hello, I'm starting a project in Phaser and here is what I'm trying to do:

 

When I tap on a sprite, I create a new one over that (like a copy) and I want to be able to drag it (the new one) as soon as it appears, for example: if you are playing a tower defense and you have a menu with towers you want to drag te towers from the menu to the screen. Here is my code right now:

 

The menu sprite is created like this:

create: function() {            this.unitMenu = game.add.sprite(this.posX, this.posY, 'unit', 0, this.grpUI);    this.unitMenu.inputEnabled = true;    this.unitMenu.events.onInputDown.add(this.dragUnit, this); },

dragUnit: function() {    var unitDrag = game.add.sprite(this.posX, this.posY, 'unit', 0, this.grpUI);    unitDrag.inputEnabled = true;    unitDrag.input.enableDrag(true);},

 

 

When I do this, the second sprite is successfuly created, and is also dragable, but I need to click/tap on it again to be able to drag it, and I want to drag it as soon as it appears.

 

I guess I should, in some way, force to stop the 'onInputDown' event of the 'unitMenu', and start the 'onInputDown' of the 'unitDrag' sprite. I've been searching in the phaser documentation adn examples,  and I haven't found nothing suitable for this case.

 

Thank you.

[lewster32]

It looks like startDrag will do what you want, but you need to leave a short delay for it to fire correctly. Here's an example - though there's probably a better way of doing this! http://jsfiddle.net/lewster32/um9522dc/

[Castellvi]

Thank you lewster! It works perfectly now!

[Castellvi]

Hello again. I've ben working more on the project and sadly this solution didn't work so well.

 

Firstly, if you drag the sprite very fast and it crosses over some dragable sprites on screen, it may drop the current drag and drag another one. And sometimes it will just drop for no reason due to a fast drag.

And secondly, i added an 'onInputUp' on this sprite as I want to check where the sprite is dropped, but this event doesn't trigger when you drop an sprite just created.

 

Here's how I create the sprite:

var unitDrag = game.add.sprite(this.game.input.x, this.game.input.y, objectToDrag, 0, this.grpCoalisions);unitDrag.scale.setTo(this.intScale);unitDrag.anchor.setTo(0.5, 0.5);unitDrag.inputEnabled = true;unitDrag.input.enableDrag(true, true);        unitDrag.events.onInputUp.add(function() {    this.dropUnitat(unitDrag);}, this);this.game.time.events.add(120, function() {    unitDrag.input.startDrag(this.game.input.activePointer);}, this);

lewster in your example there was an " If (this.game.input.activePointer.isDown) ", but my function will never be triggered if there's no activePointer so I considered that this if was not necessary, am I right?

 

Thanks

[lewster32]

There are simple alternatives I guess:

• Allow the actual icon to be dragged, and create a new draggable icon beneath it when you do. You can change the scale, frame etc of the dragged sprite when you pick it up if your menu icons look different from what's dragged off them.
• Create an invisible draggable sprite on top of the menu item, which becomes visible upon dragging, and a new one is created on top of the menu item when the previous one is dropped.

The activePointer check is just to ensure that the current pointer is still being held and to continue with the drag operation, otherwise bail out and destroy the newly created draggable. It's not a very efficient way to do it but it demonstrates a simplistic implementation.

[Castellvi]

Thank you again lewster. I thought about some workarounds too that could work to do what I need, but I was wondering if there was a "right" way to do it.

 

Anyways, I think I'll move the actual sprite and create a new one as you suggested