Canvas-Ursprung abziehen und den Punkt skalieren
Beginnen Sie mit clientX und clientY des Ereignisses sowie dem Rechteck aus canvas.getBoundingClientRect(). Dieses Rechteck liegt relativ zum sichtbaren Browserbereich. Ziehen Sie deshalb vor der Skalierung seine Werte left und top ab. Ist die logische Spielfläche 800 × 450 Einheiten groß und das dargestellte Rechteck 400 × 225 Pixel, multiplizieren Sie die lokalen x- und y-Werte mit zwei. Die dargestellte Mitte entspricht dann dem logischen Punkt (400, 225), unabhängig von der Scrollposition der Seite.
Verwenden Sie das tatsächliche Inhaltsrechteck, statt es aus der Fensterbreite abzuleiten. Berücksichtigen Sie CSS-Rahmen und Innenabstände um das Canvas und aktualisieren Sie die Umrechnung nach Größen- oder Ausrichtungsänderungen. Nutzt das Spiel einen Kameraversatz, freie Randbalken oder weitere Welttransformationen, machen Sie diese Schritte in umgekehrter Reihenfolge rückgängig, bevor Sie den Punkt mit den Trefferbereiche des Spiels vergleichen.
Die gesamte Fläche einschließlich freier Bereiche testen
Platzieren Sie ein vorübergehendes Fadenkreuz an der umgerechneten Zeigerposition und testen Sie alle vier Canvas-Ecken, die Mitte und jeden Rand eines Ziels. Klicken Sie zur Kalibrierung in die Mitte eines gezeichneten Kreises und prüfen Sie, ob der ermittelte Punkt in der Spielwelt nahe dessen Mittelpunkt liegt. Klicken Sie danach knapp außerhalb, um die Treffergrenze und den vorgesehenen Toleranzbereich zu prüfen. Laut MDN ist clientX relativ zum sichtbaren Browserbereich; getBoundingClientRect() liefert die Elementgrenzen ebenfalls relativ dazu. Diese Kombination verhindert eine Vermischung verschiedener Koordinatensysteme.
Darstellung und Trefferbereiche miteinander verknüpfen
Speichern Sie Weltposition und Abmessungen eines Ziels nur einmal. Nutzen Sie dieselben Daten zum Zeichnen und für den Test, ob der Zeiger darin liegt. Vermeiden Sie getrennt von Hand eingetragene Bildschirmkoordinaten für das sichtbare Symbol und seinen Klickbereich. Testen Sie erneut, sobald sich Canvas-Skalierung, CSS-Größe, Gerätepixelverhältnis oder Kameraversatz ändern. Stimmt die angezeigte Prüfposition, aber das Ziel reagiert weiterhin nicht, prüfen Sie die Formberechnung und die Reihenfolge der Eingabeverarbeitung, statt willkürliche Pixelversätze hinzuzufügen.
Fragen zu Canvas-Koordinaten für Treffertests
Sollte ich offsetX und offsetY für Canvas-Treffer verwenden?
Für ein einfaches Canvas ohne Transformation können sie praktisch sein. Explizite Ereigniskoordinaten, Elementgrenzen und die Spieltransformation machen die einzelnen Schritte jedoch nachvollziehbarer, wenn sich Layout oder Kameraskalierung ändern.
Gehört devicePixelRatio zur Zeigerkonvertierung?
Nur wenn sowohl der Zeigerpunkt als auch die Trefferformen Pixel des internen Canvas-Puffers verwenden. Häufig werden die Koordinaten des sichtbaren Browserbereichs in logische Spieleinheiten umgerechnet; die Gerätepixelskalierung bleibt dann Teil der Darstellungstransformation.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden