8 Directional movement

Impact, Node, Web Sockets, Javascript, HTML5, Mysql, tons of things in this tutorial
Post Reply
craigpars0061
Posts: 2
Joined: Mon Sep 09, 2013 4:41 am

8 Directional movement

Post by craigpars0061 »

I'm having a weird issue when I use my keyboard to try and move I'm getting a blank screen

heres my player.js

Code: Select all

ig.module(

    'game.entities.player'
)

.requires(

    'impact.entity'
)
    .defines(function () {
        var ismove = 0;
        var speed = 100;
        var playername = 'cracken';

        EntityPlayer = ig.Entity.extend({
            size: {
                x: 32,
                y: 48
            },
            direction: 1,
            messagebox: "",
            type: ig.Entity.TYPE.A,
            nettimer: 10,
            name: "player",
            gamename: playername,
            messageboxtimer: 200,
            checkAgainst: ig.Entity.TYPE.NONE,
            collides: ig.Entity.COLLIDES.PASSIVE,

            animSheet: new ig.AnimationSheet('media/player.png', 32, 48),

            init: function (x, y, settings) {
                this.parent(x, y, settings);

                // Add the animations
                this.addAnim('up', .21, [9, 10, 11]);
                this.addAnim('down', .21, [0, 1, 2]);
                this.addAnim('left', .21, [3, 4, 5]);
                this.addAnim('right', .21, [6, 7, 8]);
                this.addAnim('idleup', 0.1, [10]);
                this.addAnim('idledown', 0.1, [1]);
                this.addAnim('idleleft', 0.1, [4]);
                this.addAnim('idleright', 0.1, [7]);

                this.addAnim('upleft', .21, [9, 10, 11]);
                this.addAnim('upright', .21, [9, 10, 11]);
                this.addAnim('downleft', .21, [0, 1, 2]);
                this.addAnim('downright', .21, [0, 1, 2]);
                this.addAnim('idleupleft', 0.1, [10]);
                this.addAnim('idleupright', 0.1, [10]);
                this.addAnim('idledownleft', 0.1, [1]);
                this.addAnim('idledownright', 0.1, [1]);


                socket.emit('initializeplayer', this.gamename);
            },

            update: function () {

                // Movement
                // If the the input state is left and not right (ismove != 3).
                if (ig.input.state('left') && ismove != 3) {
                  if (ig.input.state('up')) {
                      this.currentAnim = this.anims.upleft;
                      currentanimation = 8;

                  } else if (ig.input.state('down')) {
                      this.currentAnim = this.anims.downleft;
                      currentanimation = 6;

                  } else {
                      this.currentAnim = this.anims.left;
                      currentanimation = 7;

                      // Set is Moving Exactly to left.
                      ismove = 7;

                  }

                // If the the input state is right and not left (ismove != 7).
                } else if (ig.input.state('right') && ismove != 7) {
                    if (ig.input.state('up')) {
                      this.currentAnim = this.anims.upright;
                      currentanimation = 2;

                    } else if (ig.input.state('down')) {
                      this.currentAnim = this.anims.downright;
                      currentanimation = 4;

                    } else {
                      this.currentAnim = this.anims.right;
                      currentanimation = 3;

                      // Set is Moving Exactly to right.
                      ismove = 3;
                    }
                } else if (ig.input.state('down') && ismove != 1) {
                    if (ig.input.state('left')) {
                      this.currentAnim = this.anims.downleft;
                      currentanimation = 6;

                    } else if (ig.input.state('right')) {
                      this.currentAnim = this.anims.downright;
                      currentanimation = 4;

                    } else {
                      this.currentAnim = this.anims.down;
                      currentanimation = 5;

                      // Set is Moving Exactly to down.
                      ismove = 5;
                    }

                } else if (ig.input.state('up') && ismove != 5) {
                    if (ig.input.state('left')) {
                      this.currentAnim = this.anims.upleft;
                      currentanimation = 8;

                    } else if (ig.input.state('right')) {
                      this.currentAnim = this.anims.upright;
                      currentanimation = 2;

                    } else {
                      currentanimation = 1;
                      this.currentAnim = this.anims.up;

                      // Set is Moving Exactly to up.
                      ismove = 1;
                    }

                } else {
                  this.vel.x = 0;
                  this.vel.y = 0;
                  ismove = 0;

                  if (this.direction == 1) {
                      this.currentAnim = this.anims.idleup;
                      currentanimation = 9;
                  }
                  if (this.direction == 2) {
                      this.currentAnim = this.anims.idleupright;
                      currentanimation = 10;
                  }
                  if (this.direction == 3) {
                      this.currentAnim = this.anims.idleright;
                      currentanimation = 11;
                  }
                  if (this.direction == 4) {
                      this.currentAnim = this.anims.idledownright;
                      currentanimation = 12;
                  }
                  if (this.direction == 5) {
                      this.currentAnim = this.anims.idledown;
                      currentanimation = 13;
                  }
                  if (this.direction == 6) {
                      this.currentAnim = this.anims.idledownleft;
                      currentanimation = 14;
                  }
                  if (this.direction == 7) {
                      this.currentAnim = this.anims.idleleft;
                      currentanimation = 15;
                  }
                  if (this.direction == 8) {
                      this.currentAnim = this.anims.idleupleft;
                      currentanimation = 16;
                  }
                }

                switch (currentanimation) {
                  case 1:
                      this.vel.x = 0;
                      this.vel.y = -this.speed;
                      this.direction = 1;
                      break;

                  case 2:
                      this.vel.x = +this.speed;
                      this.vel.y = -this.speed;
                      this.direction = 2;
                      break;

                  case 3:
                      this.vel.x = +this.speed;
                      this.vel.y = 0;
                      this.direction = 3;
                      break;

                  case 4:
                      this.vel.x = +this.speed;
                      this.vel.y = +this.speed;
                      this.direction = 4;
                      break;

                  case 5:
                      this.vel.x = 0;
                      this.vel.y = +this.speed;
                      this.direction = 5;
                      break;

                  case 6:
                      this.vel.x = -this.speed;
                      this.vel.y = +this.speed;
                      this.direction = 6;
                      break;

                  case 7:
                      this.vel.x = -this.speed;
                      this.vel.y = 0;
                      this.direction = 7;
                      break;

                  case 8:
                      this.vel.x = -this.speed;
                      this.vel.y = -this.speed;
                      this.direction = 8;
                      break;
                }

                ////////////////////////////////
                if (this.nettimer < 1) {
                    this.nettimer = 5;
                    socket.emit('recievedata', this.pos.x, this.pos.y, currentanimation, this.gamename);
                }
                this.nettimer = this.nettimer - 1;
                this.parent();
            }
        });

        // Other Players
        EntityOtherplayer = ig.Entity.extend({
            size: {
                x: 32,
                y: 48
            },

            type: ig.Entity.TYPE.B,
            speed: 100,
            name: "otherplayer",
            gamename: "",
            animation: 1,

            //checkAgainst: ig.Entity.TYPE.B,
            collides: ig.Entity.COLLIDES.PASSIVE,
            animSheet: new ig.AnimationSheet('media/player.png', 32, 48),

            init: function (x, y, settings) {
                this.parent(x, y, settings);
                this.health = 100;

                // Add the animations
                this.addAnim('up', .21, [9, 10, 11]);
                this.addAnim('down', .21, [0, 1, 2]);
                this.addAnim('left', .21, [3, 4, 5]);
                this.addAnim('right', .21, [6, 7, 8]);
                this.addAnim('idleup', 0.1, [10]);
                this.addAnim('idledown', 0.1, [1]);
                this.addAnim('idleleft', 0.1, [4]);
                this.addAnim('idleright', 0.1, [7]);
                this.addAnim('upleft', .21, [9, 10, 11]);
                this.addAnim('upright', .21, [9, 10, 11]);
                this.addAnim('downleft', .21, [0, 1, 2]);
                this.addAnim('downright', .21, [0, 1, 2]);
                this.addAnim('idleupleft', 0.1, [10]);
                this.addAnim('idleupright', 0.1, [10]);
                this.addAnim('idledownleft', 0.1, [1]);
                this.addAnim('idledownright', 0.1, [1]);

            },

            netmoveplayer: function () {

                this.pos.x = positionx;
                this.pos.y = positiony;
            },

            update: function () {
                switch (this.animation) {
                case 1:
                    this.currentAnim = this.anims.up;
                    break;
                case 2:
                    this.currentAnim = this.anims.upright;
                    break;
                case 3:
                    this.currentAnim = this.anims.right;
                    break;
                case 4:
                    this.currentAnim = this.anims.downright;
                    break;
                case 5:
                    this.currentAnim = this.anims.down;
                    break;
                case 6:
                    this.currentAnim = this.anims.downleft;
                    break;
                case 7:
                    this.currentAnim = this.anims.left;
                    break;
                case 8:
                    this.currentAnim = this.anims.upleft;
                    break;
                case 9:
                    this.currentAnim = this.anims.idleup;
                    break;
                case 10:
                    this.currentAnim = this.anims.idleupright;
                    break;
                case 11:
                    this.currentAnim = this.anims.idleright;
                    break;
                case 12:
                    this.currentAnim = this.anims.idledownright;
                    break;
                case 13:
                    this.currentAnim = this.anims.idledown;
                    break;
                case 14:
                    this.currentAnim = this.anims.idledownleft;
                    break;
                case 15:
                    this.currentAnim = this.anims.idleleft;
                    break;
                case 16:
                    this.currentAnim = this.anims.idleupleft;
                    break;
                }
            }
        });
    })
I'd really like to get this working, if anyone knows why the black blank screen shows up please let me know.
User avatar
hallsofvallhalla
Site Admin
Posts: 12023
Joined: Wed Apr 22, 2009 11:29 pm

Re: 8 Directional movement

Post by hallsofvallhalla »

hit F12 in the browser and bring up the console tab. Refresh and see what it says
craigpars0061
Posts: 2
Joined: Mon Sep 09, 2013 4:41 am

Re: 8 Directional movement

Post by craigpars0061 »

I got it!
Took a lot of playing around, I had to delete my code and start over a couple of times.

Code: Select all

ig.module('game.entities.player')
  .requires('impact.entity')

.defines(function () {

  EntityPlayer = ig.Entity.extend({
    size: {
      x: 32,
      y: 43
    },
    direction: 1,
    type: ig.Entity.TYPE.A,
    nettimer: 10,
    movementspeed: 100,
    name: "player",
    gamename: playername,
    destinationx: 99999999,
    destinationy: 99999999,
    messageboxtimer: 200,
    speed: 100,

    checkAgainst: ig.Entity.TYPE.NONE,
    collides: ig.Entity.COLLIDES.PASSIVE,

    animSheet: new ig.AnimationSheet('media/player.png', 32, 48),

    init: function (x, y, settings) {
      this.parent(x, y, settings);

      // Add the animations
      this.addAnim('up', .21, [9, 10, 11]);
      this.addAnim('down', .21, [0, 1, 2]);
      this.addAnim('left', .21, [3, 4, 5]);
      this.addAnim('right', .21, [6, 7, 8]);
      this.addAnim('idleup', 0.1, [10]);
      this.addAnim('idledown', 0.1, [1]);
      this.addAnim('idleleft', 0.1, [4]);
      this.addAnim('idleright', 0.1, [7]);

      // Idle Animations
      this.addAnim('upleft', .21, [9, 10, 11]);
      this.addAnim('upright', .21, [9, 10, 11]);
      this.addAnim('downleft', .21, [0, 1, 2]);
      this.addAnim('downright', .21, [0, 1, 2]);
      this.addAnim('idleupleft', 0.1, [10]);
      this.addAnim('idleupright', 0.1, [10]);
      this.addAnim('idledownleft', 0.1, [1]);
      this.addAnim('idledownright', 0.1, [1]);

      // Default Animation at Start
      this.currentAnim = this.anims.idleup;

      // Multiplayer Start
      socket.emit('initializeplayer', this.gamename, this.pos.x, this.pos.y);
    },

    update: function () {

      // Movement
      // If the the input state is left and not right (ismove != 3).
      if (ig.input.state('left') && ismove != 3) {
        if (ig.input.state('up')) {
          this.currentAnim = this.anims.upleft;
          currentanimation = 8;

        } else if (ig.input.state('down')) {
          this.currentAnim = this.anims.downleft;
          currentanimation = 6;

        } else {
          this.currentAnim = this.anims.left;
          currentanimation = 7;

          // Set is Moving Exactly to left.
          ismove = 7;

        }

        // If the the input state is right and not left (ismove != 7).
      } else if (ig.input.state('right') && ismove != 7) {
        if (ig.input.state('up')) {
          this.currentAnim = this.anims.upright;
          currentanimation = 2;

        } else if (ig.input.state('down')) {
          this.currentAnim = this.anims.downright;
          currentanimation = 4;

        } else {
          this.currentAnim = this.anims.right;
          currentanimation = 3;

          // Set is Moving Exactly to right.
          ismove = 3;
        }
      } else if (ig.input.state('down') && ismove != 1) {
        if (ig.input.state('left')) {
          this.currentAnim = this.anims.downleft;
          currentanimation = 6;

        } else if (ig.input.state('right')) {
          this.currentAnim = this.anims.downright;
          currentanimation = 4;

        } else {
          this.currentAnim = this.anims.down;
          currentanimation = 5;

          // Set is Moving Exactly to down.
          ismove = 5;
        }

      } else if (ig.input.state('up') && ismove != 5) {
        if (ig.input.state('left')) {
          this.currentAnim = this.anims.upleft;
          currentanimation = 8;

        } else if (ig.input.state('right')) {
          this.currentAnim = this.anims.upright;
          currentanimation = 2;

        } else {
          currentanimation = 1;
          this.currentAnim = this.anims.up;

          // Set is Moving Exactly to up.
          ismove = 1;
        }

      } else {
        this.vel.x = 0;
        this.vel.y = 0;
        ismove = 0;

        if (this.direction == 1) {
          this.currentAnim = this.anims.idleup;
          currentanimation = 9;
        }
        if (this.direction == 2) {
          this.currentAnim = this.anims.idleupright;
          currentanimation = 10;
        }
        if (this.direction == 3) {
          this.currentAnim = this.anims.idleright;
          currentanimation = 11;
        }
        if (this.direction == 4) {
          this.currentAnim = this.anims.idledownright;
          currentanimation = 12;
        }
        if (this.direction == 5) {
          this.currentAnim = this.anims.idledown;
          currentanimation = 13;
        }
        if (this.direction == 6) {
          this.currentAnim = this.anims.idledownleft;
          currentanimation = 14;
        }
        if (this.direction == 7) {
          this.currentAnim = this.anims.idleleft;
          currentanimation = 15;
        }
        if (this.direction == 8) {
          this.currentAnim = this.anims.idleupleft;
          currentanimation = 16;
        }
      }

      switch (currentanimation) {
      case 1:
        this.vel.x = 0;
        this.vel.y = -this.speed;
        this.direction = 1;
        break;

      case 2:
        this.vel.x = +this.speed;
        this.vel.y = -this.speed;
        this.direction = 2;
        break;

      case 3:
        this.vel.x = +this.speed;
        this.vel.y = 0;
        this.direction = 3;
        break;

      case 4:
        this.vel.x = +this.speed;
        this.vel.y = +this.speed;
        this.direction = 4;
        break;

      case 5:
        this.vel.x = 0;
        this.vel.y = +this.speed;
        this.direction = 5;
        break;

      case 6:
        this.vel.x = -this.speed;
        this.vel.y = +this.speed;
        this.direction = 6;
        break;

      case 7:
        this.vel.x = -this.speed;
        this.vel.y = 0;
        this.direction = 7;
        break;

      case 8:
        this.vel.x = -this.speed;
        this.vel.y = -this.speed;
        this.direction = 8;
        break;
      }    

      if (this.nettimer < 1) {
        socket.emit('resyncplayer', this.pos.x, this.pos.y, currentanimation, this.gamename);
        this.nettimer = 4;
      }
      // Need to count down.
      this.nettimer = this.nettimer - 1;
      this.parent();
    }
  });

  /**
   * What shows up on the page as other players
   */
  EntityOtherplayer = ig.Entity.extend({
    size: {
      x: 32,
      y: 48
    },

    type: ig.Entity.TYPE.B,

    speed: 100,
    name: "otherplayer",
    gamename: "",
    animation: 1,
    //checkAgainst: ig.Entity.TYPE.B,
    collides: ig.Entity.COLLIDES.PASSIVE,

    animSheet: new ig.AnimationSheet('media/player.png', 32, 48),

    init: function (x, y, settings) {
      this.parent(x, y, settings);
      this.health = 100;

      // Add the animations
      this.addAnim('up', .21, [9, 10, 11]);
      this.addAnim('down', .21, [0, 1, 2]);
      this.addAnim('left', .21, [3, 4, 5]);
      this.addAnim('right', .21, [6, 7, 8]);
      this.addAnim('idleup', 0.1, [10]);
      this.addAnim('idledown', 0.1, [1]);
      this.addAnim('idleleft', 0.1, [4]);
      this.addAnim('idleright', 0.1, [7]);

      // Idle Animations
      this.addAnim('upleft', .21, [9, 10, 11]);
      this.addAnim('upright', .21, [9, 10, 11]);
      this.addAnim('downleft', .21, [0, 1, 2]);
      this.addAnim('downright', .21, [0, 1, 2]);
      this.addAnim('idleupleft', 0.1, [10]);
      this.addAnim('idleupright', 0.1, [10]);
      this.addAnim('idledownleft', 0.1, [1]);
      this.addAnim('idledownright', 0.1, [1]);
    },

    netmoveplayer: function () {

      this.pos.x = positionx;
      this.pos.y = positiony;
    },

    update: function () {
      switch (this.animation) {
      case 1:
        this.currentAnim = this.anims.up;
        break;
      case 2:
        if (this.currentAnim != this.anims.upright) {
          this.currentAnim = this.anims.upright;
        }
        this.currentAnim = this.anims.upright;
        break;
      case 3:
        if (this.currentAnim != this.anims.right) {
          this.currentAnim = this.anims.right;
        }
        break;
      case 4:
        if (this.currentAnim != this.anims.downright) {
          this.currentAnim = this.anims.downright;
        }
        break;
      case 5:
        if (this.currentAnim != this.anims.down) {
          this.currentAnim = this.anims.down;
        }
        break;
      case 6:
        if (this.currentAnim != this.anims.downleft) {
          this.currentAnim = this.anims.downleft;
        }
        break;
      case 7:
        if (this.currentAnim != this.anims.left) {
          this.currentAnim = this.anims.left;
        }
        break;
      case 8:
        if (this.currentAnim != this.anims.upleft) {
          this.currentAnim = this.anims.upleft;
        }
        break;
      case 9:
        this.currentAnim = this.anims.idleup;
        break;
      case 10:
        this.currentAnim = this.anims.idleupright;
        break;
      case 11:
        this.currentAnim = this.anims.idleright;
        break;
      case 12:
        this.currentAnim = this.anims.idledownright;
        break;
      case 13:
        this.currentAnim = this.anims.idledown;
        break;
      case 14:
        this.currentAnim = this.anims.idledownleft;
        break;
      case 15:
        this.currentAnim = this.anims.idleleft;
        break;
      case 16:
        this.currentAnim = this.anims.idleupleft;
        break;
      }

      this.parent();
    }
  });
});
Post Reply

Return to “Impact and Node/Socket.io”