试图在 Phaser 中获得鼠标滚轮缩放效果

Question

用鼠标滚轮放大和缩小似乎有效。但是我想把鼠标位置放在混音中。

如果用户放大，相机会（最好是缓慢的，但也可以立即工作）在放大或缩小时向鼠标位置移动。换句话说，相机应该以当前鼠标 x,y 坐标为中心，或者至少在缩放时转向它。

相机 x,y 不等于 canvas x,y 吗？它似乎向相反的方向平移。我在 [Typescript] create() 方法中尝试了 pan() 和 centerOn()：

this.input.on("wheel",  (pointer, gameObjects, deltaX, deltaY, deltaZ) => {

  if (deltaY > 0) {
    this.camera.zoom -= .1;
  }

  if (deltaY < 0) {
    this.camera.zoom += .1;
  }

  this.camera.pan(pointer.x, point.y, 2000, "Power2");

  //this.camera.centerOn(pointer.x, pointer.y);

});

这是一个远射，但我想模仿游戏中的缩放行为 Distant Worlds。

Answer 1

https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#worldX__anchor

指针的x,y是相对于你所见的左上角，不考虑当前相机位置。 worldX 和 worldY 在像上面这样的事件中传递时，会随着相机位置发生偏移。所以调用 camera.pan(worldX, worldY) 会将相机置于您悬停的地方。

这是一个略有不同的点击示例。 https://stackblitz.com/edit/so-phaser-pan-to-mouse

Answer 2

对于 OP 来说为时已晚，但可能对其他人有用。我找到了一种让相机以类似于 Distant Worlds 等游戏的方式工作的方法。

     this.input.on("wheel",  (pointer, gameObjects, deltaX, deltaY, deltaZ) => {

        if (deltaY > 0) {
            var newZoom = this.camera.zoom -.1;
            if (newZoom > 0.3) {
                this.camera.zoom = newZoom;     
            }
        }
      
        if (deltaY < 0) {
            var newZoom = this.camera.zoom +.1;
            if (newZoom < 1.3) {
                this.camera.zoom = newZoom;     
            }
        }

        // this.camera.centerOn(pointer.worldX, pointer.worldY);
        // this.camera.pan(pointer.worldX, pointer.worldY, 2000, "Power2");
      
      });

    this.input.on('pointermove', (pointer) => {
        if (!pointer.isDown) return;

        this.camera.scrollX -= (pointer.x - pointer.prevPosition.x) / this.camera.zoom;
        this.camera.scrollY -= (pointer.y - pointer.prevPosition.y) / this.camera.zoom;
    });

试图在 Phaser 中获得鼠标滚轮缩放效果

Trying to get mouse wheel zoom effect in Phaser

phaser-framework