Jump to content

Tween on a circle


Recommended Posts

So, I'm trying to create a pinging type effect in my game, basically I want a circle to show up in location, and get bigger.  My issue is that as the circle gets bigger, so does the lineWidth of the circle (though, the actual line width value in phaser is remaining the same.

    circle = this.game.add.graphics(100,100);
    circle.lineStyle(2, 0xffff00);  
    var ping = circle.drawCircle(0, 0, 10);
    ping.anchor.set(0.5, 0.5);
    var circleTween = this.game.add.tween(ping)
        .to({height: 300, width: 300}, 1000, Phaser.Easing.Linear.None, true, 0, 0);

Any thoughts as to how to keep the lineWidth an actual 2 pixels, rather than growing relative to the size of the circle?

Link to comment
Share on other sites

var circleTween=this.game.add.tween(ping.scale).to({x: 3, y: 3}, 1000,Phaser.Easing.Linear.None, true, 0, 0);

If you tween the scale instead of the width/height, the line width will remain the same. here is a related topic with a similar effect:


Link to comment
Share on other sites

Using scale seems to be causing the same issue.  It's exaggerated by the fact that I'm trying to go from a 10px circle to a 300px circle.  If I start with a bigger circle it's not so noticeable, and combining that with the alpha tween gives me the effect I'm really looking for, but I'm still curious if there's a way to do this without the line of the circle growing during the tween?

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

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.


  • Recently Browsing   0 members

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