Drag map

Phaser 3
1

Hi All,

I found some nice example of moving map by arrows.

How can I make the same move by mouse?

    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

    const cursors = this.input.keyboard.createCursorKeys();
    const controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        speed: 0.5
    };
    this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);

Thanks,
Spontan23

2

Hey!

Try it: [Phaser 3] Scrolling camera by drag

3

Hey,

Something is still wrong in my configuration. Should I add something in update method?

Here is my code:
create() {

  console.log('create method');

  var map = this.make.tilemap({ key: 'map', tileWidth: 32, tileHeight: 32 });

  var tileset = map.addTilesetImage('tiles');

  var layer = map.createLayer(0, tileset, 0, 0); // layer index, tileset, x, y

  layer.skipCull = true;

  this.cameras.main.setBounds(600, 600, map.widthInPixels, map.heightInPixels);

var help = this.add.text(16, 16, ‘Arrow keys to scroll’, {

      fontSize: '18px'

  });

  help.setScrollFactor(0);

  let cameraOptions = {

    x: 50,             // x position of the camera (default = 0)

    y: 50,             // y position of the camera (default = 0)

    width: 600,        // width of the camera (default = game.config.width)

    height: 600,       // height of the camera (default = game.config.height)

    top: 600,          // Top bound of scroll (default = 0)

    bottom: 3175,      // Bottom bound of scroll (default = 5000)

    wheel:{

      enable: true,

      delta: 60

    },      // Does this camera use mouse wheel? (default = false)

    drag: 0.90,        // Reduces the scroll speed per game step in 10%. (default = 0.95)

    minSpeed: 9,       // Bellow this speed value (pixels/second), the scroll is stopped. (default = 4)

    snap: {

      enable: false,

      padding: 60

    },        // Does this camera use snap points? (default = false)

    snapConfig: {      // Defines snap points

      topMargin: 50,   // y position of first snap point (default = 0)

      padding: 50,     // Space in pixels between snap points (default = 20)

      deadZone: 0      // % of space between points not influenced by snap effect (0 - 1) (default = 0)

    }

  };

let myCamera = new ScrollingCamera(this, cameraOptions);
var cam = this.cameras.main;
cam.setBounds(0, 0, 4096, 4096);
}

4

any errors in browser console?

5

no errors in browser console.

6

please drop your project code to codesandbox.io or codepen.io or somewhere, where all can see it.

7

I put it here: https://codepen.io/Spontan23/pen/dyzYWEe?editors=1111

However map is not loading for some reason as it is loading in my project.

8
9

Thanks. That’s awesome :slight_smile: