Jump to content

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


Recommended Posts

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


Link to comment
Share on other sites

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     );  }
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...