screenToViewport?

   const screenToViewport = (screenPosition) => {
      // Calculate the scale of the canvas
      const scaleX = this.canvas.width / 2;
      const scaleY = this.canvas.height / 2;
      // Apply camera position offset to screen coordinates
      const cameraAdjustedX = screenPosition.x + this.camera.x * 2;
      const cameraAdjustedY = screenPosition.y + this.camera.y * 2;
      // Convert adjusted screen coordinates to canvas coordinates
      const canvasX = cameraAdjustedX - scaleX;
      const canvasY = cameraAdjustedY - scaleY;
      // Return the canvas coordinates
      return { x: canvasX, y: canvasY };
    };

Wie kann man hier die Funktionalität des Viewports mithilfe von

this.canvas.zoom

implementieren?

Answer 1

[EchoTech]

Du musst nur die Bildschirmkoordinaten und die Kamera-Offset-Koordinaten durch this.canvas.zoom dividieren, um den Zoom-Faktor zu berücksichtigen. Anschließend musst du dass selbe mit der Leinwand, also (scaleX und scaleY) machen, um die angepasste Größe der Leinwand im Viewport zu berücksichtigen.

 // Apply camera position offset to screen coordinates

einfach screenPosition.x + this.camera.x * 2 in Klammern setzen und hinten dran dann / this.canvas.zoom;

 // Convert adjusted screen coordinates to canvas coordinates

hier dass selbe, nur brauchst du hier keine Klammer zu setzen

Answer 2

[RedByte1608]

Probiere mal alle 2er Werte mit this.canvas.zoom auszutauschen