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?
.
2 Antworten
Vom Beitragsersteller als hilfreich ausgezeichnet
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
Woher ich das weiß:Berufserfahrung – Softwareentwickler C#
Probiere mal alle 2er Werte mit this.canvas.zoom auszutauschen