Jump to content


Recommended Posts

Hi everyone!

I'm new to Phaser (and HTML5 game development in general) :)

I found this great tutorial on creating draggable maps with inertia: http://www.emanueleferonato.com/2016/01/18/how-to-create-a-html-draggable-and-scrollable-map-with-inertia-using-phaser-framework/

I am trying to apply the dragging effect to a group of sprites (a world map and a bunch of interactive sprites on top) -- so you'd be able to drag around the map and find things to collect. The tutorial has the dragging effect applied on just an image.

I managed to create a group with the map and the sprites on top, so far everything works fine. My only issue is connecting the group back to the dragging effect.
Basically, I'm a little confused about what this.scrollingMap represents syntax-wise, so when it comes to replacing this line with a group, I'm a little lost. 

this.scrollingMap = game.add.image(0, 0, "map");

Hopefully this is clear enough to understand!

Thanks in advance!

Link to comment
Share on other sites


Yeah, sure. Here's what I have so far:


var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
  game.load.image('map', 'assets/images/baseMap.png');
  game.load.image('star', 'assets/images/star.png');

function create() {
    // Creating the group
    world = game.add.group();
    world.create(0, 0, 'map');
    // Adding random sprites to it
    for (var i = 0; i < 10; i++)
    { world.create(game.world.randomX, game.world.randomY, 'star');}
    //This group works on its own.
    //I would like to link it to the dragging animation below "scrollingMap".

  //The Draggable Map from the tutorial
    // Adding the big map to scroll
    this.scrollingMap = game.add.image(0, 0, "map"); //<-- This is where I am having trouble changing from an image to a group.
    // map will accept inputs
    this.scrollingMap.inputEnabled = true;
    // map can be dragged
    // custom property: we save map position
    this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
    // custom property: the map is not being dragged at the moment
    this.scrollingMap.isBeingDragged = false; 
    // custom property: map is not moving (or is moving at no speed)
    this.scrollingMap.movingSpeed = 0; 
    // map can be dragged only if it entirely remains into this rectangle
    this.scrollingMap.input.boundsRect = new Phaser.Rectangle(game.width - this.scrollingMap.width, game.height - this.scrollingMap.height, this.scrollingMap.width * 2 - game.width, this.scrollingMap.height * 2 - game.height);
    // when the player starts dragging...
         this.scrollingMap.isBeingDragged = true;
         // set movingSpeed property to zero. This will stop moving the map
         // if the player wants to drag when it's already moving
         this.scrollingMap.movingSpeed = 0;
    }, this);
    // when the player stops dragging...
         this.scrollingMap.isBeingDragged = false;
    }, this);
} //End create function

function update() {
  // if the map is being dragged...
         this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
    // if the map is NOT being dragged...
         // if the moving speed is greater than 1...
         if(this.scrollingMap.movingSpeed > 1){
              this.scrollingMap.x += this.scrollingMap.movingSpeed * Math.cos(this.scrollingMap.movingangle);
              this.scrollingMap.y += this.scrollingMap.movingSpeed * Math.sin(this.scrollingMap.movingangle);
              if(this.scrollingMap.x < game.width - this.scrollingMap.width){
                   this.scrollingMap.x = game.width - this.scrollingMap.width;
              if(this.scrollingMap.x > 0){
                   this.scrollingMap.x = 0;
              if(this.scrollingMap.y < game.height - this.scrollingMap.height){
                   this.scrollingMap.y = game.height - this.scrollingMap.height;
              if(this.scrollingMap.y > 0){
                   this.scrollingMap.y = 0;
              this.scrollingMap.movingSpeed *= friction;
              // save current map position
              this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
         // if the moving speed is less than 1...
              var distance = this.scrollingMap.savedPosition.distance(this.scrollingMap.position);
              var angle = this.scrollingMap.savedPosition.angle(this.scrollingMap.position);
              if(distance > 4){
                   this.scrollingMap.movingSpeed = distance * speedMult;
                   this.scrollingMap.movingangle = angle;


Link to comment
Share on other sites


this tutorial seems to explain how to build an infinit scrolling world https://gamedevacademy.org/how-to-make-an-infinitely-scrolling-game-with-phaser/

and we can probably use this example  to fix the problem https://phaser.io/examples/v2/world/move-around-world

(but a t the moment there is an error loading the js file i've told the slack about it)

btw, i am reading the code


there is two lines that are calling the same key

world.create(0, 0, 'map');



this.scrollingMap = game.add.image(0, 0, "map"); 


Link to comment
Share on other sites

  • 2 weeks later...

So after some time, I ended up finding the solution...

First off, I removed all this.scrollingMap and changed them to scrollingMap to remove any confusion. Ended up still working perfectly.

scrollingMap = game.add.image(0, 0, "map");
scrollingMap.inputEnabled = true;

Next, Groups in Phaser don't seem to be able to have input working on elements together, only one at a time. So changing to something like wouldn't work:

scrollingMap = game.add.group();
map = game.add.image(0, 0, "map");
// The following line won't work
scrollingMap.inputEnabled = true;

I tried using the Align functions that Phaser offers... Until I ended up realising that you can actually nest sprites within other sprites like so:

scrollingMap = game.add.image(0, 0, "map");
someSprite = game.add.image(100, 100, "sprite");

And voila! There's the solution, as simple as that.

Note that you can also add groups as children:

someGroup = game.add.group(); 

Found the solution here if anyone's curious: http://www.html5gamedevs.com/topic/7745-move-a-group-of-sprites-together-as-one-body/

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...