Jump to content

How Drag sprite around circle


Recommended Posts

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



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.



Link to comment
Share on other sites

  • 1 month later...

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



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



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.... :)

Link to comment
Share on other sites



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.

Link to comment
Share on other sites

  • 9 months later...

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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