How Drag sprite around circle

[eduar.londono]

How drag sprite around circle?

Thanks!

 

 

[jmp909]

I always forget my trigonometry, so I'm glad to accept this challenge... this should get you started

http://phaser.io/sandbox/CpErwgAd/play

[jmp909]

in fact, since you're request was actually to drag the sprite, I've made a version where you need to actually hold the mouse down on it to move it

http://phaser.io/sandbox/hftdIYxX/play

 

the only improvement I'd like to make, but am not currently sure about, is to only move the sprite when the pointer is actually over it.

 

j

[jmp909]

here's another version that only drags the sprite when over it's hit area (i have given it a bigger hit area in a group)

http://phaser.io/sandbox/gHNNubSp/play

 

thanks to Skeptron for fixing my mouse issue.. seems like mouseMoveCallback is not currently documented in 2.4.4  but was in 2.3

[chongdashu]

Nice work yet again, jmp909. Perhaps another thing to add to examples!

[fedora]

jmp909 --

 

Is it possible to use your example -- but instead of mouse drag you move by using cursor keys -- I was unable to figure it out -- 

 

Any assistance would be appreciated.

[jmp909]

here's one way to do it using Sin/Cos

http://phaser.io/sandbox/gXbgAMnK/play

 

and another using phaser's point rotation function (with a distance constraint... http://phaser.io/docs/2.4.4/Phaser.Point.html#rotate)

http://phaser.io/sandbox/wDpGcNHm/play

 

I've taken 0 angle as the top of the circle, but that's not the normal way angles are measured so i've shifted the value accordingly

 

 

I'll leave you a challenge... add acceleration/deceleration to the movement....

[fedora]

jmp909

 

Thanks. That worked perfectly.  But I guess you knew it would   (fyi I used your first suggestion)

 

I know I can alter speeds of the left/right keys by adding:

 

    if(leftKey.isDown) {        angle+=speed+4        moved=true    }

I know this is not what you asked -- so I will do some digging to see what I can come up with as aoptions.

[jdnichollsc]

Hi @jmp909

Can you help me? What happen with the angles using pivots? Because the Angle 0 is incorrect, check please http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010

I want to move the rotate control in top middle like Fabric.js.

Thanks in advance, Nicholls 

[jdnichollsc]

Done! 

[Azumi]

I have battled this problem myself recently and came up with this (working!) solution:

 

function angle(cx, cy, ex, ey) {
    var dy = ey - cy;
    var dx = ex - cx;
    return Math.atan2(dy, dx);
}

function update() {
    var r = 44;

    var bulltargetAngle = angle(
        circleCenter.x, circleCenter.y,
            this.game.input.activePointer.x, this.game.input.activePointer.y);


    bullet.y = player.y + Math.sin(bulltargetAngle) * r;
    bullet.x = player.x + Math.cos(bulltargetAngle) * r;
}

In the above code a sprite named "bullet" rotates around the circle pattern following mouse pointer.