Messen Sie das CSS-Feld, bevor Sie Pixel festlegen
Lesen Sie die angezeigten Leinwandabmessungen ab, multiplizieren Sie sie mit dem gewählten Gerätemaßstab, legen Sie die Breite und Höhe des Hintergrunds fest und transformieren Sie die Zeichenkoordinaten, damit die Spiellogik weiterhin CSS-Raumeinheiten verwenden kann. Wenden Sie die Transformation erneut an, nachdem Sie die Breite oder Höhe geändert haben, da durch die Zuweisung dieser Canvas-Attribute der Zeichnungsstatus zurückgesetzt wird.
Vergleichen Sie ein Ein-Pixel-Raster, diagonale Kanten und kleinen UI-Text mit Skalierungsfaktoren wie 1, 1,5 und 2. Überprüfen Sie sowohl die Schärfe als auch die Reaktionsfähigkeit. Ein vollständiger devicePixelRatio-Multiplikator ist ein Ausgangspunkt und keine Regel, die jedes Spiel befolgen sollte; Durch Verringern des Rendermaßstabs können die Kosten bei dichten Displays gesenkt werden, während das CSS-Layout unverändert bleibt.
Behandeln Sie Größenänderung und Speicher als Teil der Auswahl
Die Anzahl der Backing-Store-Pixel wächst mit beiden Dimensionen, sodass bei einer Verdoppelung der Skalierung in jede Richtung viermal so viele Pixel entstehen. Testen Sie eine geschäftige Szene mit der größten unterstützten Anzeigegröße und achten Sie auf Speicherauslastung oder langsamere Neuzeichnungen, bevor Sie eine Einstellung mit hoher Dichte bereitstellen.
Die Canvas-Anleitung von MDN zeigt ein auf devicePixelRatio basierendes Setup. Auf der Best-Practices-Seite von WebGL werden Feinheiten mit nicht ganzzahligen Verhältnissen und Zoom erläutert. Überprüfen Sie dies erneut, nachdem Sie den Browser vergrößert oder ein Fenster zwischen Anzeigen verschoben haben, und vermeiden Sie ein wiederholtes Zurücksetzen des Hintergrundspeichers, wenn sich seine effektiven Abmessungen nicht geändert haben.
Fragen zu Canvas-Auflösung und devicePixelRatio im Spiel
Sollte die Leinwandbreite immer gleich der CSS-Breite mal devicePixelRatio sein?
Nein. Das kann Inhalte schärfen, vervielfacht aber Arbeit und Gedächtnis. Vergleichen Sie eine Version mit voller Auflösung mit einer begrenzten Skala unter Verwendung derselben Szene und visueller Überprüfungen.
Warum wird die Zeichnung nach der Größenänderung unscharf?
Durch Ändern der Leinwandbreite oder -höhe wird die Bitmap gelöscht und der Kontextstatus zurückgesetzt. Berechnen Sie die Hintergrundabmessungen neu, skalieren Sie den Kontext erneut und zeichnen Sie die Szene neu.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden