Keiner Ihrer Vorschläge ist eine Lösung für gestochen scharfe 2D-Grafiken bei allen Auflösungen. SVGs sind großartig und unendlich skalierbar. Da Sie jedoch nicht wissen, wo die Pixelgrenzen im endgültigen Rendering liegen, können Sie bei allen Auflösungen keine scharfen Kanten erzielen. Angenommen, Ihre GUI ist ein rotes Feld auf grünem Hintergrund. Wenn die Kante zwischen Rot und Grün in die Mitte eines Pixels fällt und der SVG-Renderer Anti-Aliasing ausführt, erhalten Sie eine Zeile oder Spalte mit halb roten, halb grünen Pixeln, die wie Brei aussehen. Wenn der Renderer keinen Anti-Alias hat, erhalten Sie stattdessen die Kante an der falschen Stelle, was für ein einzelnes Rechteck in Ordnung sein kann, aber für ein sich wiederholendes Muster kann jede Instanz des Musters eine andere Breite haben, was genauso ist bemerkbar.
Das Herunterskalieren einer Bitmap auf die Bildschirmauflösung ist genauso schlecht. Stellen Sie sich erneut vor, Ihr grün-roter Rand befindet sich an einer Pixelgrenze, die in der verkleinerten Bitmap keine Pixelgrenze darstellt. Sie werden wieder eine Zeile oder Spalte mit Pixeln erhalten, die eine matschige rot-grüne Mischung sind. Die niedrigsten Auflösungen sind am wichtigsten, um scharfe Kanten zu haben, aber sie sind am stärksten betroffen.
Sie können eine dieser Techniken etwas funktionieren lassen, wenn Sie eine Einschränkung akzeptieren können: Anstatt eine Auflösung zu verarbeiten, sind Sie bereit, eine Reihe von Auflösungen zu handhaben, idealerweise zwei Potenzen voneinander entfernt (z. B. Symbolgrößen von 512 x 512, 256 x 256, 128 x 128) usw.) Zeichnen Sie beim Entwerfen Ihrer Benutzeroberfläche eine große Bitmap (512 x 512) oder ein Vektorbild. Verwenden Sie jedoch Hilfslinien in Ihrem Editor, um die Mindestgröße (z. B. 64 x 64) anzuzeigen. Stellen Sie sicher, dass alle wichtigen Kanten mit diesen Hilfslinien übereinstimmen. Sie können jedoch weiterhin Kurven, Verläufe usw. verwenden. Auf diese Weise wissen Sie, dass Sie den verschwommenen Brei bei niedrigen Auflösungen nicht erhalten, aber dennoch die Vorteile von glatten Diagonalen und Kurven bei hohen Auflösungen. Dies ist eine schnelle Möglichkeit, eine skalierbare Benutzeroberfläche zu entwerfen.
Mobile Betriebssysteme (die für eine Reihe von Bildschirm-dpis entwickelt wurden) verwenden eine ähnliche Technik, jedoch mit zwei Unterschieden. Erstens "buffen" sie die tatsächliche dpi des Bildschirms auf die nächste "Standard" -dpi. Dies bedeutet, dass eine Benutzeroberfläche auf verschiedenen Bildschirmen möglicherweise etwas größer oder kleiner angezeigt wird. Sie wissen jedoch genau, wie viele Pixel in jedem Symbol oder Widget enthalten sind. Damit dies funktioniert, beschränken sie die Auflösungen nicht auf Zweierpotenzen, sondern haben auch einige Zwischenauflösungen.
Zweitens können Designer für jede Auflösung eine andere Bitmap angeben. Dies bedeutet, dass Sie ein detaillierteres Design für einen Bildschirm mit höherer Auflösung erstellen können, ohne dass es auf einem Bildschirm mit niedriger Auflösung zu beschäftigt ist. (Sie können beispielsweise ein feines Schachbrett- oder Linealmuster verwenden und es bei jeder Auflösung korrekt anzeigen lassen.) Sie können dies auch in Betracht ziehen, aber das Entwerfen und Verwalten der Bitmap-Assets ist dadurch etwas zeitaufwändiger.
Wenn Ihre Buckets zwei Potenzen voneinander entfernt sind, können Sie die Bilder mithilfe von Mipmaps speichern (anstatt die integrierte Mipmap-Generierung zu verwenden), unabhängig davon, ob Sie für jede Auflösung unterschiedliche Bilder erstellen oder nur verkleinern. Auf diese Weise vermeiden Sie die Kosten für die Laufzeitspeicherbandbreite beim Downscaling.
