Can't get sprites to move! (using Phaser as a front-end only)

[IdahoEv]

Short version:  When I try to enable physics and set position and velocity, my sprites don't move at all.  I'm not sure what I'm doing wrong.

 

I'm working on a multiplayer game with a browser-based front-end.  All the collision and physics modeling is happening on the server, not in the client.  The server sends periodic updates (~10 Hz) to the client. Those updates contain the current location, velocity, orientation, and angular velocity of all the game elements - players, etc.

 

What I'd like is to use Phaser's physics engine to smoothly animate the sprites between server updates, by setting the position & velocity when I get an update from the back end, and letting Phaser's physics handle the rest.

 

I've gotten drawing to work by not using physics at all, and just drawing the sprite in place whenever an update is received from the server.  For example (simplified code with just one tank sprite, leaving out asset loading, key handling, etc.):

var GameWindow = (function () {  var my = {},    game,    tank_state = {},    key_handler, default_height = 600, default_width = 600,    sprite;  function create() {    game.stage.backgroundColor = "90fa60";    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'tank');    sprite.anchor.setTo('0.5', '0.5');  }  function update() {    //console.log("Phaser update")  }  my.init = function(kh) {    key_handler = kh;    tank_state = { position: { x: 0, y: 0},             speed: 0,             orientation: Math.PI / 2.0           }     game = new Phaser.Game(default_width, default_height, Phaser.AUTO, 'gameField',         { preload: preload,           create: create,          update: update });  }  // This gets called every time I get an update from the server with new   // sprite location and velocity  my.update_tank_state = function(new_tank_state) {    console.log("UTS")    tank_state = new_tank_state;    sprite.x = game.world.centerX + (scale*tank_state.position.x);    sprite.y = game.world.centerY + (scale*tank_state.position.y);        sprite.angle = tank_state.rotation * 360 / (2 * Math.PI) + 90;  }  return my;}());

Obviously that's not smooth enough for good gameplay, if the server only sends updates every 100ms.  

 

When I turn on arcade physics and attempt to set velocities, etc., the sprite doesn't move at all.  I change the create() and update_tank_state() functions as follows, and the sprite just sits at the origin, unmoving. 

 

 function create() {    game.stage.backgroundColor = "90fa60";    game.physics.startSystem(Phaser.Physics.ARCADE);    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'tank');    game.physics.arcade.enable(sprite);    sprite.anchor.setTo('0.5', '0.5');  }  // This gets called every time I get an update from the server with new   // sprite location and velocity  my.update_tank_state = function(new_tank_state) {    tank_state = new_tank_state;    sprite.body.x = game.world.centerX + (scale*tank_state.position.x);    sprite.body.y = game.world.centerY + (scale*tank_state.position.y);        sprite.body.velocity.x = Math.cos(tank_state.orientation) * tank_state.speed;    sprite.body.velocity.y = Math.sin(tank_state.orientation) * tank_state.speed;  }

What am I doing wrong?  Any help greatly appreciated!

 

If I left anything out, the full code currently lives at https://github.com/IdahoEv/simple_tank.  The javascript files are in priv/static/, the snippets in this post are a subset of this file: https://github.com/IdahoEv/simple_tank/blob/055614ce3823e27725a2abb6efffb3a3d137c727/priv/static/game_window.js

 

[IdahoEv]

I've got it fixed now.  I had the computations updating my sprite's position and velocity wrong; it's important to use reset() to set x and y, then use velocityFromRotation to compute the velocity.  Updating X and Y directly doesn't give the results one would like.  Here's the current code, which seems to be working fine:

 my.update_tank_state = function(tank_state) {    tank.body.reset( game.world.centerX + (scale*tank_state.position.x),                     game.world.centerY + (scale*tank_state.position.y)                     );        tank.body.rotation = tank_state.rotation;    tank.body.angularVelocity = tank_state.angular_velocity * -180 / Math.PI ;    game.physics.arcade.velocityFromRotation(        tank.rotation,         tank_state.speed * scale,        tank.body.velocity     );  }