Drag Events (or events in general)

[ragnarok]

Quite new with Phaser (or JS in general), but in opposite to other frameworks it really klicks in my head. A big "Thank you" to the developers!

 

Now form my Problem:

 

For my "Level editor" I use polygons to declare "Areas". For debugging (and editing purposes) the points/vertexes of the polygon are are shown by a small dragable sprites(the lines are simply drawn in the debug-function), called "pointers" in the following code.

Area.prototype.addPointers=function(){  var sprite;  this.pointers=game.add.group();  for(var j=0,len=this.boundary.points.length-1;j<=len;j++){    sprite=this.pointers.create(this.boundary.points[j].x,this.boundary.points[j].y,'dot');    sprite.inputEnabled =true;    sprite.input.enableDrag(true);    sprite.area=this;    sprite.polygonId=j;  }    this.pointers.create(this.centerX,this.centerY,'dot');  sprite.inputEnabled =true;  sprite.input.enableDrag(true);}

I want to change the polygon data upon dragging. Kinda like adding the following to the :

sprite.onDrag=function() { this.area.boundary[this.polygonID].x=this.x; this.area.boundary[this.polygonID].y=this.y;}

However I don't see how to add such an event handler. The Sourcecode of Phaser 1.1.3 say's I could set an event differently but I don't see how (might be a leftover from an earlier version).

Line 17104: * Make this Sprite draggable by the mouse. You can also optionally set mouseStartDragCallback and mouseStopDragCallback

Is it possible to set up an event handler this way? Is there an example how to do this or an example on events in general?

 

On an only slightly related point: is it possible to turn the m ousepointer into a cursor over draggable sprites, kinda like css' 'cursor:pointer'?

 

Thank you!

[ragnarok]

OK, kinda found what I was looking for it under sprite.events.onDragStop. But the following gives me errors:

 

sprite.events.onDragStop(function(){ console.log(arguments);},this); // basically from the docs, this gives me instantly an error "Property 'onDragStop' of object #<Object> is not a function"

 

So I tried the following:

sprite.events.onDragStop=function(){ console.log(arguments);}; //this seems acceptable, but when the Event is fired I get the error= Object... has no method 'dispatch'

 

 

[ragnarok]

I did find something to improvise upon, but this is iterative and will get me quickly into a coding mess (besides being costly because I have to check each group and every sprite):

function update(){ //Phaser's standard function for screen-updates    for(var i=0;i<areas.length;i++){       areas[i].pointers.forEach(function(item) {        if(item.input.isDragged) { ... }        }}

Anybody got a clue or an example for the sprite event handler?

[rich]

The events are all Phaser.Signals - you subscribe to a signal like so:

sprite.events.onDragStop.add(doSomething, this);function doSomething(...) { // your function, the parameters sent to it will vary based on the event dispatched}

There are quite a few ways of listening for events. onDragStop.addOnce would ensure the function only ever gets called once, then never again. Have a look at the Signal docs for more details.

[ragnarok]

I tried something very similiar and it gave me an error. The obvious difference was that I used an anonymous function, but trying it again it works:

function create() {  var sprite=game.add.sprite(0, 0, 'cat');  sprite.inputEnabled=true;  sprite.input.enableDrag();  sprite.events.onDragStop.add(function(){console.log(arguments);}, this);}

Thinking about it again, it maybe just boils down to the JS-specific question: What is 'this' actually? I'll investigate further.

 

Thanks for your help!

[rich]

It's the context in which the function is called. I would avoid using an inline anonymous function for an event to be honest.

[ragnarok]

I knew about the context-sensitivity of "this", but forgot to check what "this" meant in this case. In my case it was the Window-object, instead of 'game'. Thank you very much!

 

I mostly use inline anonymous functions for a "first look" (What arguments do I get from this call?) and work from there, but just out of curiosity: Any particular reason against them? Are they harder to debug, more prone to throw errors, or something else?

 

 

(Edit: "this" was "window")

Edited December 30, 2013 by ragnarok

[rich]

It's purely personal, but I just find it easier to keep my code clean and separated if I don't inline functions. Can also then tend to re-use similar functions in lots of places rather than being bound to a specific objects creation.

[ragnarok]

Usually my code isn't that reusable, but I aim to get better, so I might give it a try. Thanks for the help.

 

I'll make a small example for this, just in case someone else has problems with it  (or at least as a reminder for "this" :-) ). Can I send you this via e-mail?

 

(For some of the next parts I'll probably try to create some custom events/signals, but this might come in later).