I'm looking to make 2D game that is very similar in movement to Pokemon Red or Blue (player must move a full tile in any direction, the ground moves smoothly beneath the player as they walk). I've got my hands on Tiled in order to make my maps, and I've got a player sprite that I can display over the map, but I can't seem to find a way to restrict the player to moving the way I want.

I feel like there should be some parameter for Arcade physics to make the movement the way I want, but I'm not finding it. Abandoning Arcade physics and manually changing the X/Y of the player with a loop kinda works, but can be very slow and laggy, making me think I'd need to look into the Time and Tween parts of Phaser to actually implement it correctly.

So did I miss something with Arcade Physics to do this? Or do I need a really good tutorial on Tween to manually code this myself?


1 Answer 1


The player should have a position, that can be any number, and a target position. When the current position is equal to the target position, check the input, and set the new target position accordingly.

When the target position doesn't equal the current position (e.g. the player just started moving) move the current position closer to it.

Make sure the interpolation between the tiles is quick or else the player will get really frustrated with the controls.

  • \$\begingroup\$ When I tried that approach it worked OK on my 10x10 map, but was too laggy when I moved to a 100x100 map. I'm missing something to make that approach not lag, which I think would be the Time/Tween functionality. \$\endgroup\$ Commented Jan 3, 2017 at 17:51
  • \$\begingroup\$ @Dr.Cyanide The maps size shouldn't matter with this approach, are you sure your game doesn't lag with that map size by default? \$\endgroup\$
    – Bálint
    Commented Jan 3, 2017 at 17:53
  • \$\begingroup\$ I'd have to double check, but I believe it was laggier when I had more of the map showing than when less of the map was showing (I've got a function that resizes the game when the window is resized, comparing between full screen, half screen, and quarter screen). That would make me think it's less of a map file problem and more a problem with the update function trying to do too much at once. The computer I'm developing this on has an old Intel Atom processor, making it a good benchmark for other low-end devices. \$\endgroup\$ Commented Jan 3, 2017 at 18:06
  • \$\begingroup\$ @Dr.Cyanide If you have a processor that old, then it might not even support webgl, which would explain the performance drop when you change your map size. JavaScript is not fast. It could also be caused by the texture size \$\endgroup\$
    – Bálint
    Commented Jan 3, 2017 at 18:10
  • \$\begingroup\$ It does not support WebGL, thus Phaser falls back on Canvas. I'm a bit of a noob with web programming (and web performance), but would you expect the same lag to be present using Phaser's built in Arcade Physics to move the player if it was a problem with my processor just being too old? \$\endgroup\$ Commented Jan 3, 2017 at 18:18

You must log in to answer this question.

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