Move camera by "dragging" the world floor

[fariazz]

In many strategy games it's common that the world is larger than what you see on the screen, and the user will "drag" themself around the level to move around the world.

 

How can I implement this in Phaser?

 

I've seen examples to drag sprites within a level, but not to drag basically the camera view itself.

 

Something like this example: http://examples.phaser.io/_site/view_full.html?d=world&f=fixed+to+camera.js&t=fixed%20to%20camera   but where you are moving by dragging with either the mouse or the touch instead of the arrow keys

 

 

[mariogarranz]

I did something like this checking for a pointer. If the pointer is down, on the update function, I would move the camera according to the pointer position.

If you're making an strategy game, however, you may find it's more useful to move the camera when the pointer is on the borders of the screen, that's at least how most games work.

[sanojian]

Here is how I did it.  I am fairly new to Phaser so take it with a grain of salt.

 

In your update function:

if (this.game.input.activePointer.isDown) {	if (this.game.origDragPoint) {		// move the camera by the amount the mouse has moved since last update		this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;		this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y;	}	// set new drag origin to current position	this.game.origDragPoint = this.game.input.activePointer.position.clone();}else {	this.game.origDragPoint = null;}

[fariazz]

Thanks Sanojian that worked like a charm!

[WitheringTreant]

Very nice solution, sanojian. Thanks!

[jdnichollsc]

See my example: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

Regards, Nicholls

[WombatTurkey]

36 minutes ago, Nicholls said:

See my example: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

Regards, Nicholls

This is amazing thanks for sharing

[rodrigezer]

On 10/14/2014 at 9:15 AM, sanojian said:

Here is how I did it.  I am fairly new to Phaser so take it with a grain of salt.

 

In your update function:

if (this.game.input.activePointer.isDown) {	if (this.game.origDragPoint) {		// move the camera by the amount the mouse has moved since last update		this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;		this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y;	}	// set new drag origin to current position	this.game.origDragPoint = this.game.input.activePointer.position.clone();}else {	this.game.origDragPoint = null;}

Can update it for phaser 3?

[chrisme]

I know it's phaser 2 category, but b/c someone asked and I also stumbled upon it, here's the version adjusted to phaser 3:

if (this.game.input.activePointer.isDown) {
  if (this.game.origDragPoint) {
	// move the camera by the amount the mouse has moved since last update
	this.cameras.main.scrollX +=
	  this.game.origDragPoint.x - this.game.input.activePointer.position.x;
	this.cameras.main.scrollY +=
	  this.game.origDragPoint.y - this.game.input.activePointer.position.y;
  } // set new drag origin to current position
  this.game.origDragPoint = this.game.input.activePointer.position.clone();
} else {
  this.game.origDragPoint = null;
}

 

[samme]

• Drag to move camera
• Drag to move camera, locked pointer
• Drag to move camera, by pointer velocity

Edited February 5, 2021 by samme
links