let scaleFactor = 800 / 256;

class Example extends Phaser.Scene {

  // Sources :

  // https://elvgames.itch.io/free-retro-game-world-sprites

  preload() {

    this.load.image("map", "https://assets.codepen.io/9367036/map.png");

​

    this.load.spritesheet(

      "char_idle",

      "https://assets.codepen.io/9367036/Char_003_Idle.png",

      {

        frameWidth: 96 / 4,

        frameHeight: 96 / 4

      }

    );

    this.load.spritesheet(

      "char",

      "https://assets.codepen.io/9367036/Char_003.png",

      {

        frameWidth: 96 / 4,

        frameHeight: 96 / 4

      }

    );

  }

​

  create() {

    // Background

    this.map = this.add

      .tileSprite(0, config.height, 256, 256 * 2, "map")

      .setOrigin(0, 1)

      .setScale(scaleFactor);

​

    // Character

    this.anims.create({

      key: "idle_back",

      frames: this.anims.generateFrameNumbers("char_idle", {

        start: 12,

        end: 15

      }),

      frameRate: 8,

      repeat: -1

    });

    this.anims.create({

      key: "idle_front",

      frames: this.anims.generateFrameNumbers("char_idle", {

        start: 0,

        end: 3

      }),

      frameRate: 8,

      repeat: -1

    });

    this.player = this.add

      .sprite(config.width / 2, config.height / 2, "char_idle")

      .setScale(scaleFactor)

      .play("idle_back");

​

    // Caméra

    this.isPanning = false;

​

    // Controles

    this.input.on("pointerdown", () => {

      if (!this.isPanning) {

        this.startPan();

      }

    });

​

    this.keys = this.input.keyboard.addKeys({

      w: Phaser.Input.Keyboard.KeyCodes.W,

      s: Phaser.Input.Keyboard.KeyCodes.S

    });

  }

​

  update() {

    if (this.isPanning) return;

​

    if (this.keys.w.isDown) {

      this.map.tilePositionY -= 2;

      this.player.play("idle_back", true);

    } else if (this.keys.s.isDown) {

      this.map.tilePositionY += 2;

      this.player.play("idle_front", true);

    }

  }

​

  startPan() {

    this.isPanning = true;

​

    const initialX = config.width / 2;

    const initialY = config.height / 2;

​

    this.cameras.main.pan(config.width / 2, -config.height, 1000, "Linear");

    this.cameras.main.once("camerapancomplete", () => {

      this.time.delayedCall(500, () => {

        this.cameras.main.pan(initialX, initialY, 1000, "Linear");

        this.cameras.main.once("camerapancomplete", () => {

          this.isPanning = false;

        });

      });

    });

  }

}

​

const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 400,

  scene: Example,

  pixelArt: true,

  transparent: true,

  physics: {

    default: "arcade",

    arcade: {

      debug: true

    }

  }

};

​

const game = new Phaser.Game(config);

​

activateControls(["W", "S"]);

​