What is the best approach to let a Phaser.Sprite do discrete movements?

It should continue moving along all possible values, but at the end of a move it must end up on a certain position which will have the following property: position.x % SOME_FIXED_VALUE = 0 and position.y % SOME_FIXED_VALUE = 0


1 Answer 1


There are many ways to skin this cat, but the easiest may be to create a doppelganger sprite, constrained to the discrete coordinate space. That is, make your actual sprite invisible, and set a second sprite that follows the main sprite with discrete movement.

  • Make your main sprite invisible: set Phaser.Sprite.visible to false
  • Create a second sprite
  • Make the second sprite follow the main sprite in one of your update functions:
  • From simple integer division, we know that round(x / y) * y % y == 0, so set the sprite's coordinates accordingly. Use whatever rounding function is appropriate.


sprite.x = Math.round(x / SOME_FIXED_VALUE) * SOME_FIXED_VALUE
sprite.y = Math.round(y / SOME_FIXED_VALUE) * SOME_FIXED_VALUE




I've kept the main sprite visible so you can see what's going on, as you move the main sprite with the mouse. Sprites from http://opengameart.org/content/squares

I consider this approach easiest as you don't have to hack away at any physics routines or override anything, and it plays well with any existing physics code you may use.

  • \$\begingroup\$ thanks, it's a good starting point but maybe I was not so clear. The sprite can move along continue values as long as I say for example 'move up'. When I say 'ok now stop' it should continue moving while the property coordinates % S_F_V == 0 is not verified and then it must stops. What i actually do: link \$\endgroup\$ Feb 26, 2015 at 23:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .