drag and drop sprite

[nduhu]

i confuse thinking about it, i want to able drag sprite and if i drop to the another sprite will call the function? can you help me?

 

 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

function preload() {

game.load.image('ilkke', 'assets/sprites/atari800xl.png');
game.load.image('lala', 'assets/sprites/atari800xl.png');
}

var sprite;

var sprite2;

function create() {

game.stage.backgroundColor = '#2d2d2d';

game.physics.startSystem(Phaser.Physics.ARCADE);

game.physics.arcade.gravity.y = 100;

sprite = game.add.sprite(100, 96, 'ilkke');
sprite2 = game.add.sprite(700, 96, 'lala');
game.physics.arcade.enable(sprite);

sprite.body.collideWorldBounds = true;
sprite.body.velocity.x = 200;
sprite.body.bounce.set(0.9);

// Also enable sprite for drag
sprite.inputEnabled = true;
sprite.input.enableDrag();

sprite.events.onDragStart.add(startDrag, this);
sprite.events.onDragStop.add(stopDrag, this);

game.add.text(32, 32, 'Drag and release the sprite', { font: '16px Arial', fill: '#ffffff' });

}

function startDrag() {

// You can't have a sprite being moved by physics AND input, so we disable the physics while being dragged
sprite.body.moves = false;

}

function stopDrag() {

// And re-enable it upon release
sprite.body.moves = true;

}

[lewster32]

Within the stopDrag function add the following:

game.physics.arcade.overlap(sprite, sprite2, function() {  // ... do something here});

[nduhu]

it works, thankyou so much.....

[lewster32]

No problem - remember that overlap can be called anywhere you need to check, not just within the update loop!

[nduhu]

can you help me again.. i have another problem, i make some sprites with array. and the problem is..when i move sprite by drag the sprite, i want sprite move to the beginning position,if sprite drop in incorrect positition, but i confuse to do that, because i dont know indentity from sprite i move, and i dont know too position sprite.x and sprite.y in the beginning because i random it,can you solved my problem,pleasee? 

[lewster32]

I think I understand what you mean - all the sprites have a 'home' position which they will go back to if they are not dragged to a specific place? All you need do is record that position within the sprite then, if when released the sprite does not overlap, return it to that position; something like this:

var sprites = [];var currentSprite;for (var s = 0; s < 10; s++) {  // create our sprite using the placeholder 'currentSprite' var so we can do more with it  currentSprite = game.add.sprite(game.rnd.integerInRange(0, game.width), game.rnd.integerInRange(0, game.height), 'draggable');  // clone the current position of the sprite into a new Phaser.Point so we remember where it started  currentSprite.originalPosition = currentSprite.position.clone();  // set it to be draggable  currentSprite.inputEnabled = true;  currentSprite.input.enableDrag();  currentSprite.events.onDragStart.add(startDrag, this);  currentSprite.events.onDragStop.add(stopDrag, this);  // finally add this sprite to the sprites array  sprites.push(currentSprite);}function startDrag(currentSprite) {  // adding a parameter to 'startDrag' and 'stopDrag' allows us to determine which sprite is being dragged  currentSprite.body.moves = false;}function stopDrag(currentSprite) {  currentSprite.body.moves = true;  // overlap provides a boolean return value to determine if an overlap has occurred - we'll use this to snap the sprite back in the event it doesn't overlap  if (!game.physics.arcade.overlap(currentSprite, sprite2, function() {    // ... an overlap occurred, so do something here   })) {    // ... no overlap occurred so snap the sprite back to the original position by copying the values to the current position    currentSprite.position.copyFrom(currentSprite.originalPosition);  }}

[jdnichollsc]

Drag and Drop example with your help => http://codepen.io/jdnichollsc/pen/WbZgwM

 

Thanks!