Jump to content

sprite in a circular motion(change direction)


kemz
 Share

Recommended Posts

 

 

I created a sprite which move in a circular motion . I want to change the direction of the sprite if the mouse button(touch) is clicked, but it's  not working(when the mouse is click, the direction does not change).Below is my code. Any help pls. thanks in advance.

create: function() {    this.stage.backgroundColor = '#FFFFFF';    x = this.world.centerX;    y = this.world.centerY;    this.direction = 1;    this.speedDelta = 0.002;    this.radius = 114;    this.physics.startSystem(Phaser.Physics.ARCADE);    //adding player    this.player = this.add.sprite(x, y, 'player');    this.player.anchor.setTo(0.5, 0.5);    this.game.physics.arcade.enable(this.player);    this.input.onDown.add(this.changeDirection, this);  },  update: function() {    if (this.direction == 1) {      this.speedDelta = 0.002;    } else if (this.direction == -1) {      this.speedDelta = -0.002;    }    var period = this.time.now * this.speedDelta;    this.player.x =  Math.cos(period) * this.radius;    this.player.y =  d + Math.sin(period) * this.radius;  },  changeDirection: function() {    this.direction *= -1;  }} 
Link to comment
Share on other sites

Hi, here is quick fix of your code - create some angle variable and store current angle in it. Then increse or decrease it in update. Using: "var period = this.time.now * this.speedDelta;" is strange...

    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create, update: update });    function create() {    this.stage.backgroundColor = '#FFFFFF';    x = 0;    y = 0;    angle = 0;    this.direction = 1;    this.speedDelta = 0.002;    this.radius = 114;    this.physics.startSystem(Phaser.Physics.ARCADE);    //adding player    this.player = this.add.sprite(x, y, 'player');    this.player.anchor.setTo(0.5, 0.5);    this.game.physics.arcade.enable(this.player);    this.input.onDown.add(changeDirection, this);  }   function update() {    if (this.direction == 1) {      this.speedDelta = 3.14;    } else if (this.direction == -1) {      this.speedDelta = -3.14;    }        angle += this.time.physicsElapsed * this.speedDelta;    this.player.x =  Math.cos(angle) * this.radius + 200;    this.player.y =  Math.sin(angle) * this.radius + 200;  }   function changeDirection() {    this.direction *= -1;  }
Link to comment
Share on other sites

It works for me and on mouse click object changes direction. Here is whole index.html (as I do not include any assets, there is green square instead of player picture). Just copy and save it as index.html and run it:

<!DOCTYPE html><html lang="en"><head>    <title>Circular</title>    <meta charset="utf-8">    <script src="js/phaser222.js"></script></head><body>        <script>    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create, update: update });    function create() {    this.stage.backgroundColor = '#FFFFFF';    x = 0;    y = 0;    angle = 0;    this.direction = 1;    this.speedDelta = 0.002;    this.radius = 114;    this.physics.startSystem(Phaser.Physics.ARCADE);    //adding player    this.player = this.add.sprite(x, y, 'player');    this.player.anchor.setTo(0.5, 0.5);    this.game.physics.arcade.enable(this.player);    this.input.onDown.add(changeDirection, this);  }   function update() {    if (this.direction == 1) {      this.speedDelta = 3.14;    } else if (this.direction == -1) {      this.speedDelta = -3.14;    }        angle += this.time.physicsElapsed * this.speedDelta;    this.player.x =  Math.cos(angle) * this.radius + 200;    this.player.y =  Math.sin(angle) * this.radius + 200;  }   function changeDirection() {    this.direction *= -1;  }    </script></body></html>
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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