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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.