Skip to main content Link Search Menu Expand Document (external link)

Custom Walking Animation

Press the arrow keys to move. This demo shows how you can change the parameters of the walking animations for your character spritesheets.

The Code

// Your game config
const game = new Phaser.Game(config);

function preload() {
  this.load.image("tiles", "assets/cloud_tileset.png");
  this.load.tilemapTiledJSON("cloud-city-map", "assets/cloud_city.json");
  this.load.spritesheet("player", "assets/characters.png", {
    frameWidth: 52,
    frameHeight: 72,
  });
}

function create() {
  const cloudCityTilemap = this.make.tilemap({ key: "cloud-city-map" });
  cloudCityTilemap.addTilesetImage("Cloud City", "tiles");
  for (let i = 0; i < cloudCityTilemap.layers.length; i++) {
    const layer = cloudCityTilemap.createLayer(i, "Cloud City", 0, 0);
    layer.scale = 3;
  }
  const playerSprite = this.add.sprite(0, 0, "player");
  playerSprite.scale = 1.5;
  playerSprite.setFrame(getStopFrame("down"));
  this.cameras.main.startFollow(playerSprite, true);
  this.cameras.main.setFollowOffset(-playerSprite.width, -playerSprite.height);

  createPlayerAnimation.call(this, "up", 90, 92);
  createPlayerAnimation.call(this, "right", 78, 80);
  createPlayerAnimation.call(this, "down", 54, 56);
  createPlayerAnimation.call(this, "left", 66, 68);

  const gridEngineConfig = {
    characters: [
      {
        id: "player",
        sprite: playerSprite,
        startPosition: { x: 8, y: 8 },
      },
    ],
  };

  this.gridEngine.create(cloudCityTilemap, gridEngineConfig);
  this.gridEngine.movementStarted().subscribe(({ direction }) => {
    playerSprite.anims.play(direction);
  });

  this.gridEngine.movementStopped().subscribe(({ direction }) => {
    playerSprite.anims.stop();
    playerSprite.setFrame(getStopFrame(direction));
  });

  this.gridEngine.directionChanged().subscribe(({ direction }) => {
    playerSprite.setFrame(getStopFrame(direction));
  });
}

function createPlayerAnimation(name, startFrame, endFrame) {
  this.anims.create({
    key: name,
    frames: this.anims.generateFrameNumbers("player", {
      start: startFrame,
      end: endFrame,
    }),
    frameRate: 10,
    repeat: -1,
    yoyo: true,
  });
}

function getStopFrame(direction) {
  switch (direction) {
    case "up":
      return 91;
    case "right":
      return 79;
    case "down":
      return 55;
    case "left":
      return 67;
  }
}

function update() {
  const cursors = this.input.keyboard.createCursorKeys();
  if (cursors.left.isDown) {
    this.gridEngine.move("player", "left");
  } else if (cursors.right.isDown) {
    this.gridEngine.move("player", "right");
  } else if (cursors.up.isDown) {
    this.gridEngine.move("player", "up");
  } else if (cursors.down.isDown) {
    this.gridEngine.move("player", "down");
  }
}