class Example extends Phaser.Scene {
  preload() {
    // Assets : https://kenney.nl/
    this.load.setBaseURL("https://assets.codepen.io/9367036");

    this.load.image("snake", "snake.png");
    this.load.image("pig", "pig.png");
    this.load.image("chicken", "chicken.png");
    this.load.image("moose", "moose.png");
  }

  create() {
    const style = { font: "15px Arial", fill: "#e2e4e9" };

    // Translation
    this.add
      .text(config.width * 0.5, config.height * 0.9, "Translation", style)
      .setOrigin(0.5, 0.5);
    const image1 = this.add.image(178, 136, "snake");
    image1.x = config.width * 0.25;
    image1.y = config.height * 0.66;
    this.tweens.add({
      targets: image1,
      x: config.width * 0.75,
      ease: "Quad.easeInOut",
      duration: 2000,
      yoyo: true,
      repeat: -1
    });

    // Scale
    this.add
      .text(
        config.width * 0.125,
        config.height * 0.25,
        "Échelle (scale)",
        style
      )
      .setOrigin(0.5, 0.5);
    const image2 = this.add.image(178, 136, "pig");
    image2.x = config.width * 0.125;
    image2.y = config.height * 0.5;
    this.tweens.add({
      targets: image2,
      scaleX: 0.2,
      scaleY: 0.2,
      duration: 3000,
      yoyo: true,
      repeat: -1
    });

    // Rotation
    this.add
      .text(config.width * 0.875, config.height * 0.25, "Rotation", style)
      .setOrigin(0.5, 0.5);
    const image3 = this.add.image(136, 153, "chicken");
    image3.x = config.width * 0.875;
    image3.y = config.height * 0.5;
    this.tweens.add({
      targets: image3,
      rotation: Math.PI * 2,
      duration: 4000,
      repeat: -1
    });

    // Transparence
    this.add
      .text(config.width * 0.5, config.height * 0.1, "Transparence", style)
      .setOrigin(0.5, 0.5);
    const image4 = this.add.image(276, 170, "moose");
    image4.x = config.width * 0.5;
    image4.y = config.height * 0.33;
    this.tweens.add({
      targets: image4,
      alpha: 0,
      duration: 3000,
      ease: "Quad.easeInOut",
      yoyo: true,
      repeat: -1
    });
  }
}

const config = {
  type: Phaser.AUTO,
  transparent: true,
  width: 800,
  height: 400,
  scene: Example
};

const game = new Phaser.Game(config);