fariazz

Move camera by "dragging" the world floor

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

 

 

Share this post


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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.