PHASER Altara - Struggling with Enemy AI, Motion Paths and Animation

[pugmuffin]

So I'm try to get my enemy sprite to follow a motion path and depending on direction the sprite will change animation. So turning left will show the left side, moving up shows its back and moving down shows its face.

 

I can't seem to get it to work, through hours of struggling with it. any help would be appreciated.

Here is my code. I almost had it working with prototype, but the final game will be built in this format.

/* * 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 & 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 testingthis.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 animationnazi.animations.add('walk');//start the animation at 30fpsnazi.animations.play('walk', 3, true);*///define the animationthis.nazi.animations.add('walkDown', [2, 3]);//start the animation at 30fpsthis.nazi.animations.play('walkDown', 3, true);//define the animationthis.nazi.animations.add('walkLR', [4, 5]);//start the animation at 30fpsthis.nazi.animations.play('walkLR', 3, true);//define the animationthis.nazi.animations.add('walkUp', [0, 1]);//start the animation at 30fpsthis.nazi.animations.play('walkUp', 3, true);}function plot() {this.bmd.clear();this.path = [];/*ROTATION CODE*/var ix = 0;/**///Sets the speed of the spritevar x = 0.5 / game.width;//looping through plotting points from x and y arrayfor (var i = 0; i <= 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 > 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 < 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 Testingthis.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 >= this.path.length)            {                this.pi = 0;            }/*// Flipping the player image based on the velocityif(nazi.body.velocity.x > 0){       //player is moving right       nazi.scale.x = -1;       nazi.animations.play('walkLR');   }   else if(nazi.body.velocity.x < 0){        //player is moving left       nazi.scale.x = 1; //flip the image       nazi.animations.play('walkLR');   }   else if (nazi.body.velocity.y < 0){  nazi.animations.play('walkUp');    }   else if(nazi.body.velocity.y > 0){       //player is not moving       nazi.animations.play('walkDown');          }*/}

 

[drhayes]

How come the series of if statements around velocity didn't work? Was the nazi positioned weirdly?

[chg]

Does the character walk diagonally? If so, try comparing the absolute value of the x component of the velocity to the y component. If x is bigger, set the horizontal walk cycle and use the sign to decide if you need to mirror the sprite; else check the sign of the y component to decide whether to play the walk up or walk down animation.

Note: your code does not handle velocity components of 0, is this intentional?