<footer><div id=version></div></footer>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 5px;
  top: 5px;
}

document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var text;

new Phaser.Game(config);

function preload() {
  this.load.image("map", "assets/tests/camera/earthbound-scarab.png");
}

function create() {
  this.input.mousePointer.motionFactor = 0.5;
  this.input.pointer1.motionFactor = 0.5;

  var cam = this.cameras.main;

  var map = this.add.image(0, 0, "map").setOrigin(0, 0);

  // cam.setBounds(0, 0, map.displayWidth, map.displayHeight);

  text = this.add.text(0, 0, "Click and drag to move", {
      font: "16px Courier",
      fill: "#0ff",
      backgroundColor: "#000c",
      fixedWidth: 200
    })
    .setScrollFactor(0);

  this.input.on("pointermove", function (p) {
    if (!p.isDown) return;

    const { x, y } = p.velocity;

    cam.scrollX -= x / cam.zoom;
    cam.scrollY -= y / cam.zoom;
  });
}

function update() {
  text.setText(
    JSON.stringify(
      this.input.activePointer,
      ["isDown", "downX", "downY", "worldX", "worldY", "x", "y", "velocity"],
      2
    )
  );
}