Jump to content

using tweens to create a movement along a circular path


mcuz
 Share

Recommended Posts

I have been looking at using tweens for having a sprite move in a circle.  

I have been successful by using easing.circular on y axis while using easing.linear on x axis but since it is easing

the sprite speeds up on parts of the path and then slows down on others.  Is their anyway to use easing such that i can

have a sprite follow a circular path at a constant speed.

 

I can do this using physics and writing my own trig code, just wondering if tweening offers another way (or is there another

method in phaser that I just don't know about???)

 

any replies much obliged

 

mcuz

Link to comment
Share on other sites

You should use sineIn and sineOut. Here is how I make sprite following the circle with createjs in my own code (not Phaser), but should give you the idea how to achieve it in Phaser too:

var centerX = 300;var centerY = 300;var r = 200;this.block.x = centerX + r;this.block.y = centerY;createjs.Tween.get (this.block, {loop: true })	.to ({x: centerX}, 500, createjs.Ease.sineIn)	.to ({x: centerX - r}, 500, createjs.Ease.sineOut)	.to ({x: centerX}, 500, createjs.Ease.sineIn)	.to ({x: centerX + r}, 500, createjs.Ease.sineOut);createjs.Tween.get (this.block, {loop: true })	.to ({y: centerY - r}, 500, createjs.Ease.sineOut)	.to ({y: centerY}, 500, createjs.Ease.sineIn)	.to ({y: centerY + r}, 500, createjs.Ease.sineOut)	.to ({y: centerY}, 500, createjs.Ease.sineIn);
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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