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");

    this.fxShadow = this.player.preFX.addShadow(

      0,

      0,

      0.1,

      0.66,

      0x000000,

      12,

      0.25

    );

​

    // Soleil, genre

    this.ball = this.add.circle(0, 0, 30, 0xffffcc);

    this.angle = 0;

​

    // Controles

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

​

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

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

      s: Phaser.Input.Keyboard.KeyCodes.S

    });

​

    // Caméra

    this.camera = this.cameras.main;

  }

​

  update(t) {

    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);

    }

​

    // Soleil

    this.angle += 0.025;

    const radius = 100;

    this.ball.x = this.player.x + radius * Math.cos(this.angle);

    this.ball.y = this.player.y + radius * Math.sin(this.angle);

​

    // Ombre

    const shadowRadius = 2;

    this.fxShadow.x = shadowRadius * Math.cos(this.angle);

    this.fxShadow.y = shadowRadius * Math.sin(this.angle);

  }

}

​

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"]);

​