phaser Phaser Draggable World Map Group

[issey]

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!

[nazimboudeffa]

can you add some more code as i don't know this feature i'll wonder to have more code material to think on it

also i have downloaded the code of the example and it doens't work

[issey]

Hi,

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
    this.scrollingMap.input.enableDrag(false);
    // 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.events.onDragStart.add(function(){
         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.events.onDragStop.add(function(){
         this.scrollingMap.isBeingDragged = false;
    }, this);
    
} //End create function


function update() {
  
  // if the map is being dragged...
    if(this.scrollingMap.isBeingDragged){
         this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y);
    }
    // if the map is NOT being dragged...
    else{
         // 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...
         else{
              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;
              }
         }
    }
}

 

[nazimboudeffa]

thank you,

cool it's a little bit late here i'll take a look at it tomorrow because this question is really interesting

[nazimboudeffa]

Hi,

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

so

there is two lines that are calling the same key

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

 

and

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

 

[issey]

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.anchor.set(0.05,0.5);
scrollingMap.inputEnabled = true;
[etc...]

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");
scrollingMap.add(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");
scrollingMap.addChild(someSprite);

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

Note that you can also add groups as children:

someGroup = game.add.group(); 
scrollingMap.addChild(someGroup);

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