cheshirepuss42 Posted June 25, 2014 Share Posted June 25, 2014 I'm trying to make a game where you have a collection of letters that you drag from one spot to another to make a word.The problem is that when i create a letter-sprite and a container-sprite (where the word is made), I don't know how to trigger the event that the letter was dropped on the container. If I have that I can find out the way to add the letter to the word and make it work, but this event evades me. Any suggestions? A visual example of something similar being done in jqueryui is here: http://jqueryui.com/droppable/#defaultAn even more complete example of what I'm trying to achieve is here: http://jqueryui.com/sortable/#connect-listsOf course i want this effect within phaser, not jqueryui. Link to comment Share on other sites More sharing options...
lewster32 Posted June 25, 2014 Share Posted June 25, 2014 This example is almost exactly what you need - the only difference is you'd need to sort the right-hand list so there're no gaps: http://examples.phaser.io/_site/view_full.html?d=input&f=drop+limitation.js&t=drop%20limitation Link to comment Share on other sites More sharing options...
cheshirepuss42 Posted June 25, 2014 Author Share Posted June 25, 2014 Ok, thanks, I can make that work. I hoped for some event from a sprite that something was dropped on it, but this will work too. Link to comment Share on other sites More sharing options...
lewster32 Posted June 25, 2014 Share Posted June 25, 2014 Not as such, but what you can do is do an overlap test when the sprite is dropped to check if it's on top of another sprite. Link to comment Share on other sites More sharing options...
phaserdragoon Posted June 25, 2014 Share Posted June 25, 2014 I needed to do something like that too. Here's the way I handled it. Node is a class extending Phaser.Sprite. In the example, the squares are both draggable and droppable containers.MyGame.Play.prototype = { create : function () { // ... other code node = new MyGame.Node(this.game, x, y, properties); this.game.add.existing(node); this.squaresGroup.add(node); node.input.enableDrag(false, true, false, 255, null, null); node.events.onDragStop.add(this.handleSquareDrop, this); node.events.onDragStart.add(this.handleSquareDrag, this); // ... more code }, handleSquareDrag : function (square, pointer) { square.alpha = 0.75; }, handleSquareDrop : function (square, pointer) { square.alpha = 1; this.squaresGroup.cursor = square; do { other = this.squaresGroup.next(); if (Phaser.Rectangle.containsPoint(other.getBounds(), pointer.position)) { // found the container at the location which we dropped // do stuff with it // ... // swap their positions this.game.add.tween(other).to({x:square.prop.x, y:square.prop.y}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(square).to({x:other.prop.x, y:other.prop.y}, 250, Phaser.Easing.Linear.None, true); swapped = true; } } while (this.squaresGroup.cursor !== square && other !== square); if (!swapped) { // dropped outside container bounds, send it back this.game.add.tween(square).to({x:square.prop.x, y:square.prop.y}, 500, Phaser.Easing.Linear.None, true); } }, // ... other code}Hope that helps. Link to comment Share on other sites More sharing options...
Recommended Posts