drag the camera

[4ucai]

Hi guys,

 

Is there a way to be able to drag the camera? Instead of controlling it's x and y?

 

[LuckieLordie]

Have you thought about using a pointer and tracking how far on the screen you drag it to move the cameras xy?

[luckylooke]

Hi guys,

 

Is there a way to be able to drag the camera? Instead of controlling it's x and y?

Have you solved dragging the camera? Could you provide snipped?

 

EDIT:

I have this snipped, works with mouse move but cannot made it with touches :/

http://jsfiddle.net/luckylooke/YHj24/5/

[luckylooke]

This should be working, I cannot test it on touchable device now... later I will, now I am going to sleeep

http://jsfiddle.net/luckylooke/YHj24/7/

[luckylooke]

This should be working, I cannot test it on touchable device now... later I will, now I am going to sleeep

http://jsfiddle.net/luckylooke/YHj24/7/

Ok, I have tested it and it doesnt work... I decided to bypass phaser as I am confused from documentation and make it pure javascript If anybody can remade it in better phaserway I am looking forward to see it

 

Working pure javascript solution (tested):

http://jsfiddle.net/YHj24/8/

[luckylooke]

I have also added the mouse event, so now it supports mouse as well as touches

 

http://jsfiddle.net/YHj24/10/

[luckylooke]

This problem I was affraid of:

When I try to drag items in my game world, it also fires moving the camera. I have no clue how to make exception in dragging here.

 

http://jsfiddle.net/luckylooke/YHj24/11/

 

This is why I wanted to make it more phaserway.. :/

[titmael]

Thx for your snippet, works well for me.

 

For your problem, is there anyway to pass a callbacks that will be fired when start/stop dragging an object ? (That way you could have a switch variable to enable camera dragging or not)

[luckylooke]

Thx for your snippet, works well for me.

 

For your problem, is there anyway to pass a callbacks that will be fired when start/stop dragging an object ? (That way you could have a switch variable to enable camera dragging or not)

 

You give me idea, but it is very weird solution, because you need to setup every draggable entity in game :/

Here it is: http://jsfiddle.net/luckylooke/YHj24/12/

 

 

EDIT: Heureka

I have made new solution, working without need to disabling world drag in every touchable entity

Little mix of pure js events and phaser event handlers:

http://jsfiddle.net/luckylooke/YHj24/15/

 

TESTED WITH MOUSE and TOUCHES 

[lokhmakov]

Hi,

1. Only Phaser whithout hacks

http://jsfiddle.net/YHj24/21/

 

2. In typescript:
 

        move_camera_by_pointer(o_pointer : Phaser.Pointer) {            if (!o_pointer.timeDown) { return; }            if (o_pointer.isDown && !o_pointer.targetObject) {                if (this.o_mcamera) {                    this.game.camera.x += this.o_mcamera.x - o_pointer.position.x;                    this.game.camera.y += this.o_mcamera.y - o_pointer.position.y;                }                this.o_mcamera = o_pointer.position.clone();            }            if (o_pointer.isUp) { this.o_mcamera = null; }        }

[luckylooke]

 

Hi,

1. Only Phaser whithout hacks

http://jsfiddle.net/YHj24/21/

 

2. In typescript:

 

        move_camera_by_pointer(o_pointer : Phaser.Pointer) {            if (!o_pointer.timeDown) { return; }            if (o_pointer.isDown && !o_pointer.targetObject) {                if (this.o_mcamera) {                    this.game.camera.x += this.o_mcamera.x - o_pointer.position.x;                    this.game.camera.y += this.o_mcamera.y - o_pointer.position.y;                }                this.o_mcamera = o_pointer.position.clone();            }            if (o_pointer.isUp) { this.o_mcamera = null; }        }

Beautiful, thanks

[WakeskaterX]

I've added a modification to this as well. This is a spin off of lokmahkov.

 

I wanted to give the camera a bit of velocity so that you could drag and let it fly for a bit before it came to a rest, so you could 'flick' the camera.

 

You can play with the settings but here's the fiddle for it:  http://jsfiddle.net/3c4jc2b8/1/

[seiyria]

Would this solution work if the background was not an image, but a tilemap? Can you drag a layer?

[jdnichollsc]

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

 

Regards, Nicholls