Phaser 可拖动分组世界地图

Question

我发现了这个关于使用惯性创建可拖动地图的精彩教程：http://www.emanueleferonato.com/2016/01/18/how-to-create-a-html-draggable-and-scrollable-map-with-inertia-using-phaser-framework/

本教程仅对图像应用了拖动效果。我正在尝试将拖动效果应用于一组精灵，因此它们会同时拖动（地图图像+一组精灵）。

我的问题是我对 this.scrollingMap 在语法上表示什么感到有些困惑。所以当谈到用一个组来代替这条线时，我有点迷茫。

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

有人有什么想法吗？

如果有帮助，我也复制了下面的简化代码。

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;
              }
         }
    }
}

Answer 1

所以，我最终找到了解决方案......

首先，我删除了所有 this.scrollingMap 并将它们更改为 scrollingMap 以消除任何混乱。最终仍然完美地工作。

scrollingMap = game.add.image(0, 0, "map");
scrollingMap.anchor.set(0.05,0.5);
scrollingMap.inputEnabled = true;
[etc...]

接下来，Phaser 中的组 似乎无法让输入一起处理元素，一次只能输入一个。所以改成类似的东西是行不通的：

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

我尝试使用 Phaser 提供的 Align 功能...直到我最终意识到您实际上可以将精灵嵌套在其他精灵中，如下所示：

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

瞧！有解决办法，就这么简单。

请注意，您还可以将组添加为子组：

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

如果有人好奇，请在此处找到解决方案： http://www.html5gamedevs.com/topic/7745-move-a-group-of-sprites-together-as-one-body/