fariazz Posted October 14, 2014 Share Posted October 14, 2014 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 hoskope and Tilde 2 Link to comment Share on other sites More sharing options...
mariogarranz Posted October 14, 2014 Share Posted October 14, 2014 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 comment Share on other sites More sharing options...
sanojian Posted October 14, 2014 Share Posted October 14, 2014 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;} hoskope, ProsoVasya, Tilde and 3 others 6 Link to comment Share on other sites More sharing options...
fariazz Posted October 15, 2014 Author Share Posted October 15, 2014 Thanks Sanojian that worked like a charm! Link to comment Share on other sites More sharing options...
WitheringTreant Posted January 4, 2016 Share Posted January 4, 2016 Very nice solution, sanojian. Thanks! Link to comment Share on other sites More sharing options...
jdnichollsc Posted April 12, 2016 Share Posted April 12, 2016 See my example: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ Regards, Nicholls Umz and WombatTurkey 2 Link to comment Share on other sites More sharing options...
WombatTurkey Posted April 12, 2016 Share Posted April 12, 2016 36 minutes ago, Nicholls said: See my example: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ Regards, Nicholls This is amazing thanks for sharing jdnichollsc 1 Link to comment Share on other sites More sharing options...
rodrigezer Posted February 16, 2019 Share Posted February 16, 2019 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 comment Share on other sites More sharing options...
chrisme Posted June 30, 2019 Share Posted June 30, 2019 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 comment Share on other sites More sharing options...
samme Posted February 5, 2021 Share Posted February 5, 2021 (edited) Drag to move camera Drag to move camera, locked pointer Drag to move camera, by pointer velocity Edited February 5, 2021 by samme links AlanFonderflick and jdnichollsc 2 Link to comment Share on other sites More sharing options...
Recommended Posts