Jump to content

drag sprite onto other sprite


cheshirepuss42
 Share

Recommended Posts

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/#default

An even more complete example of what I'm trying to achieve is here: http://jqueryui.com/sortable/#connect-lists

Of course i want this effect within phaser, not jqueryui.

Link to comment
Share on other sites

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

 Share

  • Recently Browsing   0 members

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