preload() {
    // Preload the player assets.
    for (let i = 1; i <= 8; i++) {
      this.load.image(`swimmer-${i}`, `/images/booty/swimmer-${i}.png`);
    }
  }

  create() {
    // Add the "sea"!
    this.add.rectangle(0, 8 * 8 * this.gameScale, config.width, 8 * 12 * this.gameScale, 0x0000C5).setOrigin(0, 0);

    // The player can only move within the "sea" area.
    this.physics.world.setBounds(0, 8 * 8 * this.gameScale, config.width, 8 * 12 * this.gameScale);

    // Create the player sprite.
    this.player = this.physics.add.sprite(400, 300, 'swimmer-1');
    this.player.setOrigin(0, 0);

    // Our player should be restricted to only move within the boundaries
    // of the sea area we've defined.
    this.player.setCollideWorldBounds(true);

    // Add the players animation frames.
    const swimFrames = [];
    for (let i = 1; i <= 8; i++) {
      swimFrames.push({ key: `swimmer-${i}` });
    }
    this.anims.create({
      key: 'swim',
      frames: swimFrames,
      // How fast to change frame.
      frameRate: 10,
      // Repeat indefinitely.
      repeat: -1
    });

    // The animation just plays throughout the game.
    this.player.play('swim');

    // Allow the user to move our player using the cursor keys.
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    // Manage moving the player.
    const moveSpeed = 8 * 8 * this.gameScale;

    // Reset velocity every frame to stop movement when no key is pressed.
    this.player.setVelocity(0);

    // Handle left and right.
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-moveSpeed);
    }
    else if (this.cursors.right.isDown) {
      this.player.setVelocityX(moveSpeed);
    }

    // Handle up and down.
    if (this.cursors.up.isDown) {
      this.player.setVelocityY(-moveSpeed);
    }
    else if (this.cursors.down.isDown) {
      this.player.setVelocityY(moveSpeed);
    }

  }