Jump to content

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,
                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();

 

Link to post
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.

Link to post
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 :)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...