Draggable Camera

GitHub

Loading layer structure...

The draggable camera lets you click and drag around the canvas. That's about it. It should work with desktop and mobile and has an easing feature that you can switch on and off.

// Initialize a draggable camera (no psdKey needed)
this.dragCam = this.P2P.createCamera(this.cameras.main, ['draggable']);

// Initialize a draggable camera with options
this.dragCam = this.P2P.createCamera(this.cameras.main, ['draggable'], {
  draggable: {
    useBounds: { x: 0, y: 0, width: 1000, height: 1000 },
    easeDragging: true,
    friction: 0.95,
    minSpeed: 0.1,
  },
});

Just like the lazyLoad feature, you can create the camera with defaults and set specific parameters later on.

Events

Dragging triggers events, so you can listen for "draggableStart", "draggableActive" and "draggableComplete".

Loading layer structure... 
this.dragCam = this.P2P.createCamera(this.cameras.main, ["draggable"]);

this.events.on("draggableStart", () => {
  console.log(`Drag has begun.`);
});

this.events.on("draggableActive", () => {
  console.log(`Drag is active.`);
});

this.events.on("draggableComplete", () => {
  console.log(`Drag has completed.`);
});

Pause and Resume

You can pause and resume the draggable camera, which is useful when you need to interact with objects in the scene without the camera moving.

Loading layer structure... 
this.dragCam = this.P2P.createCamera(this.cameras.main, ["draggable"]);

// Pause camera dragging
this.dragCam.pause();

// Resume camera dragging
this.dragCam.resume();

// Check if currently paused
if (this.dragCam.isPaused()) {
  console.log("Camera dragging is paused");
}

Ignore Objects

You can specify paths to ignore when dragging. When the user clicks on an ignored interactive object, the camera drag won't start, allowing the object itself to be dragged or interacted with. This is perfect for having draggable objects within a draggable camera view.

Loading layer structure... 
// Make shapes draggable
this.shapes.getChildren().forEach(child => {
  child.setInteractive({ draggable: true });
  this.input.setDraggable(child);
});

// Camera ignores shapes group - drag the shapes, not the camera!
this.dragCam = this.P2P.createCamera(this.cameras.main, ['draggable'], {
  draggable: {
    ignore: ['shapes']
  }
});

The ignore array uses path matching similar to place():

  • Exact name match: "button" matches any object named "button"
  • Full path match: "ui/buttons" matches that exact path
  • Path prefix: "ui/buttons" also matches "ui/buttons/ok"