Moving sprite around arc

[Vishal Gupta]

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,
                tw = game.add.tween({a:1}).to({a:"+1"}, cnf.moveSpeed*1000, "Linear",false,0,-1),
                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,
                    x = radius*Math.sin(a),
                    y = radius*Math.cos(a);
                    this.ball.position.set(x,y);

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

 

[drhayes]

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.

[Vishal Gupta]

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