title: PHASER ALTARA Struggling with motion paths, enemy ai and animations
body: <p>Basically I want to make my sprite follow a motion path and depending on its direction it is going, it will play a particular animation. i.e. moving up will display its back, moving left will display the left side of the sprite and so on.</p>
  
  <p>I've tried for hours but to no avail in trying to make this work. I had some luck using prototype but the final game will be using the structure below. ANY help will be appreciated.</p>
  
  <pre><code>/*
   * initalise Phaser framework with width:960px, height:540px
   */
  var game = new Phaser.Game(960, 540, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update, });
  /*
   * Preload runs before the game starts. Assets such as images and sounds such be preloaded here.
   * A webserver is required to load assets.
   *
   * Also in this function we set game scale so it full browser width.
   */
  function preload() {
      // set to scale to full browser width
      this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      this.scale.parentIsWindow = true;
      //set the background color so can confirm the game renders in the browser
      this.stage.backgroundColor = '#4488cc';
      this.game.renderer.renderSession.roundPixels = true;
  
      //preload images &amp; sounds
  
      //game.load.image('key', 'folder/filename.png');
      //this.load.image('nazi', 'image/nazi.png');
      game.load.spritesheet('nazi', 'images/nazi.png', 128, 128, 6);
  
      this.bmd = null;
      this.alien = null;
      this.mode = 0;
      //Use this website to set enemy movements http://phaser.io/waveforms. Export save data from the console log.
      this.points = {
          "type":0,"closed":true,"x":[120,120,260,260,200,180,120],"y":[368,108,108,308,308,368,368]
      };
      this.pi = 0;
      this.path = [];
  }
  
  /*
  * Add game variables here
  */
  var nazi;
  /*
   * Create runs once only when Phaser first loads
   * create the game scene by adding objects to the stage
   */
  function create() {
      bmd = this.add.bitmapData(this.game.width, this.game.height);
      bmd.addToWorld();
      /*
      For testing
      this.alien = this.add.sprite(0, 0, 'alien');
      this.alien.anchor.set(0.5);
      */
      this.nazi = this.add.sprite(0, 0, 'nazi');
      this.nazi.anchor.set(0.5);
  
      var py = this.points.y;
  
  
      /*Original Code
      //define the animation
      nazi.animations.add('walk');
      //start the animation at 30fps
      nazi.animations.play('walk', 3, true);
      */
      //define the animation
      this.nazi.animations.add('walkDown', [2, 3]);
      //start the animation at 30fps
      this.nazi.animations.play('walkDown', 3, true);
      //define the animation
      this.nazi.animations.add('walkLR', [4, 5]);
      //start the animation at 30fps
      this.nazi.animations.play('walkLR', 3, true);
      //define the animation
      this.nazi.animations.add('walkUp', [0, 1]);
      //start the animation at 30fps
      this.nazi.animations.play('walkUp', 3, true);
  
  }
  function plot() {
      this.bmd.clear();
      this.path = [];
      /*ROTATION CODE*/
      var ix = 0;
      /**/
  
      //Sets the speed of the sprite
      var x = 0.5 / game.width;
      //looping through plotting points from x and y array
      for (var i = 0; i &lt;= 1; i += x) {
          var px = this.math.linearInterpolation(this.points.x, i);
          var py = this.math.linearInterpolation(this.points.y, i);
          /* ROTATION CODE to follow direction of path*/
          var node = { x: px, y: py, angle: 0 };
              if (ix &gt; 0)
              {
              node.angle = this.math.angleBetweenPoints(this.path[ix - 1], node);
              }
          this.path.push(node);
          ix++;
          /**/
          //this.path.push( { x: px, y: py });
          this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');
          }
      for (var p = 0; p &lt; this.points.x.length; p++) {
          this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
          }
  }
  /*
   * Update runs continuously. Its the game loop function.
   * Add collision detections and control events here
   */
  function update() {
      plot();
       //  Reset the players velocity (movement)
  
      //this.nazi = 'nazi';
              /* For Testing
              this.alien.x = this.path[this.pi].x;
              this.alien.y = this.path[this.pi].y;
  
              //ROTATION CODE: 
              this.alien.rotation = this.path[this.pi].angle;
              */
              this.nazi.x = this.path[this.pi].x;
              this.nazi.y = this.path[this.pi].y;
              //this.nazi.rotation = this.path[this.pi].angle;
  
              this.pi++;
              if (this.pi &gt;= this.path.length)
              {
                  this.pi = 0;
              }
              /*
              // Flipping the player image based on the velocity
      if(nazi.body.velocity.x &gt; 0){
         //player is moving right
         nazi.scale.x = -1;
         nazi.animations.play('walkLR');
     }
     else if(nazi.body.velocity.x &lt; 0){
          //player is moving left
         nazi.scale.x = 1; //flip the image
         nazi.animations.play('walkLR');
     }
     else if (nazi.body.velocity.y &lt; 0){
         nazi.animations.play('walkUp');
  
         }
     else if(nazi.body.velocity.y &gt; 0){
         //player is not moving
         nazi.animations.play('walkDown');
  
     }
  */
  
  }
  </code></pre>