Moving sprite around arc

Recommended Posts

Hi All,

i have to move a sprite on an arc, I have start angle and end angle now i have to move the sprite on arc in loop with reverse effect. i am using tween to do this like on onUpdateCallback i set the position of sprite with radius*Math.sin() and radius*Math.cos() but its not working perfectly. so is there any way by which i can find the value between start and end angle either in increasing order or in decreasing order so that i can make my sprite animate.

This is the code currently i am using

var diff = this.endAngle-this.startAngle,
delta = 2*diff/(60*cnf.moveSpeed),
n = 0,
fullCircle = (cnf.path.pathArcEnd - cnf.path.pathArcStart)%360 == 0;

if(!fullCircle)
tw.yoyo(true);
var angle = this.startAngle > this.endAngle ? this.endAngle : this.startAngle;
var a = angle - delta*n,
this.ball.position.set(x,y);

tw.onUpdateCallback(function(a,b,c){
var a = angle + delta*n,
this.ball.position.set(x,y);
n = c.inReverse ? n-1 : n+1;
},this);
tw.start();

Share on other sites

Your tween declaration seems wrong in a couple of ways:

``tw = game.add.tween({a:1}).to({a:"+1"}, cnf.moveSpeed*1000, "Linear",false,0,-1),``

The object you pass in to "game.add.tween" is the object that gets tweened. You're creating an object, trying to tween it to "+1" (which won't do what I think you want it to), and then throwing away any reference to that object and calculating the tween values yourself. It seems like you went through a lot of trouble to make a timer, almost.

Try this:

``````var angle = startAngle;
var ball = this.ball;
var angleObject = {
get angle(): { return angle; },
set angle(newValue): {
var x = Math.cos(newValue) * radius;
var y = Math.sin(newValue) * radius;
ball.position.set(x, y);
}
};
game.add.tween(angleObject).to({ angle: endAngle }, cnf.moveSpeed * 1000, 'Linear', true, 0, -1, true);
``````

This code makes the tween do all the work. It also uses the JS getter/setter syntax (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) which means you don't need an onUpdateCallback. If you have to support IE8 you can't use getters/setters... but I don't think Phaser supports IE8 anyway.

Share on other sites

1 hour ago, drhayes said:

Your tween declaration seems wrong in a couple of ways:

```
`tw = game.add.tween({a:1}).to({a:"+1"}, cnf.moveSpeed*1000, "Linear",false,0,-1),````

The object you pass in to "game.add.tween" is the object that gets tweened. You're creating an object, trying to tween it to "+1" (which won't do what I think you want it to), and then throwing away any reference to that object and calculating the tween values yourself. It seems like you went through a lot of trouble to make a timer, almost.

Try this:

```
```var angle = startAngle;
var ball = this.ball;
var angleObject = {
get angle(): { return angle; },
set angle(newValue): {
var x = Math.cos(newValue) * radius;
var y = Math.sin(newValue) * radius;
ball.position.set(x, y);
}
};
game.add.tween(angleObject).to({ angle: endAngle }, cnf.moveSpeed * 1000, 'Linear', true, 0, -1, true);
``````

This code makes the tween do all the work. It also uses the JS getter/setter syntax (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) which means you don't need an onUpdateCallback. If you have to support IE8 you can't use getters/setters... but I don't think Phaser supports IE8 anyway.

Thanks drhayes, I will try and let you know