Jump to content

Move camera by "dragging" the world floor


Go to solution Solved by sanojian,

Recommended Posts

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

 

 

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • Solution

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;}
Link to post
Share on other sites
  • 1 year later...
  • 3 months later...
  • 2 years later...
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?

Link to post
Share on other sites
  • 4 months later...

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;
}

 

Link to post
Share on other sites
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...