How to drag sprite from a scaled or rotated group

[treshaque]

Hi everybody,

 

Here's my problem. I have a group, which I scale or rotate. Now if I drag a sprite in it, the sprite moves totally wrong. Its shift is scaled and rotated too!

var gr = game.add.group() ;var sp = gr.create( 100, 100, 'face' ) ;gr.scale.x = -2 ;sp.enableInput = true ;sp.input.enableDrag( true ) ; 

Say, if the group is flipped by group.scale.x = -1, the sprite motion will be mirrored: the sprite and the cursor go different directions. Looks more like a bug of dragging. I'd appreciate any practical advice or workarounds. I have a big tree of nested groups, do I need to implement a multistage cast of the input coordinates?

 

Thank you.

[treshaque]

At the moment I use the following:

function transformParentToChild( x, y, group ){    x -= group.x ; y -= group.y ;    var sin = Math.sin( group.rotation ), cos = Math.cos( group.rotation ) ;    var x_ = x * cos + y * sin, y_ = y * cos - x * sin ;    return [ x_ / group.scale.x, y_ / group.scale.y ] ;}function transformScreenToGroup( x, y, group ){    if ( group.parent ){        var mid = transformScreenToGropup( x, y, group.parent ) ;        x = mid[ 0 ] ; y = mid[ 1 ] ;    }    return transformParentToChild( x, y, group ) ;}...

sprite.events.onDragStart.add( function(){ env.draggee = sprite ; }, this ) ;

sprite.events.onDragStop.add( function(){ env.draggee = null ; }, this ) ;

...

var pos = transformScreenToGroup( game.input.x, game.input.y, env.draggee.parent ) ;

env.draggee.x = pos[ 0 ] ;

env.draggee.y = pos[ 1 ] ;

...

 

Have I missed the standard way to transform world/screen coordinates to/from group?

[lokhmakov]

I already ask this question. Nobody answered

[David]

I'm currently trying to hack around this one as well.  I feel like it's there in the source somewhere, but I just haven't found it yet.

Any takers for this one yet?

[alex_h]

You want to look at the 'getLocalPosition' method of the Input class.

    /**    * This will return the local coordinates of the specified displayObject based on the given Pointer.    * @method Phaser.Input#getLocalPosition    * @param {Phaser.Sprite|Phaser.Image} displayObject - The DisplayObject to get the local coordinates for.    * @param {Phaser.Pointer} pointer - The Pointer to use in the check against the displayObject.    * @return {Phaser.Point} A point containing the coordinates of the Pointer position relative to the DisplayObject.    */    getLocalPosition: function (displayObject, pointer, output) {.......

You can access the global Input instance as the property called 'input' of your main game or current state instance.

[David]

You want to look at the 'getLocalPosition' method of the Input class.

    /**    * This will return the local coordinates of the specified displayObject based on the given Pointer.    * @method Phaser.Input#getLocalPosition    * @param {Phaser.Sprite|Phaser.Image} displayObject - The DisplayObject to get the local coordinates for.    * @param {Phaser.Pointer} pointer - The Pointer to use in the check against the displayObject.    * @return {Phaser.Point} A point containing the coordinates of the Pointer position relative to the DisplayObject.    */    getLocalPosition: function (displayObject, pointer, output) {.......

You can access the global Input instance as the property called 'input' of your main game or current state instance.

 

How did I miss this method.  This solves a TON of things for me!  Thanks!

[WitheringTreant]

How do you actually disable the current draghandler and use a custom method with this instead?

[markacola]

I'm not sure if i'm to late to this but i use the function in the following gist to achieve dragging in a scaled parent: https://gist.github.com/markacola/3899cc02c8c4846bdb864b8d9189cb80