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

Question

使用鼠标滚轮放大和缩小似乎有效。不过我想在混合中放置鼠标位置。

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

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

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

});

这是一个不太可能的方案，但我想模仿游戏《遥远的世界》中的缩放行为。

Answer 1

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

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