Wie kann ich die Schriftgröße an die Bildschirmauflösung anpassen?

Ich arbeite an einem Spiel mit LibGDX und habe ein Problem.

Damit mein Spiel für die meisten Auflösungen geeignet ist, habe ich für jedes Seitenverhältnis ein Basiselement erstellt, z. B. ein Hintergrundbild für das Hauptmenü. Ich habe es in 800 x 600 für 4: 3, 1280 x 720 für 16: 9 usw. erstellt.

Jetzt versuche ich, TextButtons für die Optionen in das Spiel zu integrieren . Mein Problem ist, dass ich nicht herausfinden kann, welche Schriftgrößen mit welchen Bildschirmauflösungen übereinstimmen. Gibt es eine Möglichkeit, dies herauszufinden, oder muss ich jede meiner Auflösungen einzeln durchgehen und den Text einfach manuell an die Auflösung anpassen?

Es ist ganz einfach: Schriftarten müssen nicht mit der Auflösung übereinstimmen, sondern mit der Pixeldichte .

Die Pixeldichte wird als Pixel pro Zoll ( PPI ) oder Pixel pro Zentimeter gemessen . Es gibt auch eine Maßeinheit, die als dichteunabhängige Pixel ( DP ) bezeichnet wird . Es ist definiert, dass dies 1dpdie Größe ist, die ein Pixel auf einem 160 PPIBildschirm hat.

Versuchen Sie nun, diesen Test erneut durchzuführen: Schalten Sie Ihren Laptop auf 720p. Sehen Sie sich die Schriftgröße an. Schließen Sie es jetzt an den 1080p 42 "-Monitor Ihres Desktops an. Wenn Ihr Monitor die richtigen Informationen über seine Größe ausgibt, sollte die Schrift genau die Größe haben, die sie auf dem 720p-Bildschirm hatte. Stellen Sie sich vor, wie seltsam es wäre, wenn Text in Ihrem Desktop wäre Der Laptop hatte eine andere Größe als der Text auf Ihrem Desktop-Monitor. Vor diesem Hintergrund sollten größere Auflösungen die Schriftart detaillierter und größere Bildschirme mehr Inhalte anzeigen.

Die gleiche Tatsache kann bei Texteditoren beobachtet werden. Eine 72ptSchriftart sollte auf dem Bildschirm genauso aussehen wie auf Papier.

All dies bedeutet, dass Sie wahrscheinlich über alle Anzeigegrößen hinweg die gleiche Größe wünschen sollten (mit einigen Ausnahmen). Wenn Sie sich irgendwo niederlassen möchten, verwenden Websites normalerweise 12ptSchriftarten, MS Windows 11ptund 12ptSchriftarten.

Dieses Diagramm (das auch am Ende der Antwort enthalten ist) sagt uns, dass 12ptCSS ungefähr gleich ist wie 16pxCSS (als ob dies nicht verwirrend genug wäre, ist ein px in CSS überall mit dp identisch ), sagen wir also Ich mache deine Schriften 16dpauf LibGDX.

Verwenden Sie in Ihrem Spiel die FreeTypeFontGeneratorOption, um Schriftarten dynamisch zu generieren. Auf diese Weise können Sie die Bildschirmdichte beim Erstellen berücksichtigen:

BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
    return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt

Dies funktioniert, weil Gdx.graphics.getDensity()gleich YourScreenDensity/160ein "Skalierungsfaktor" ist, um Dinge auf die Größe zu bringen, die sie auf einem 160ppi-Bildschirm haben würden.

Zu den Ausnahmen, die ich bereits erwähnt habe: Bei Logos, Promos usw. möchten Sie wahrscheinlich, dass die Schriftgröße entsprechend der Bildschirmgröße angepasst wird. Beachten Sie jedoch, dass Sie diese besser in einem Grafikeditor wie Photoshop oder Gimp erstellen sollten , wie auch immer.

Die andere Ausnahme ist Text auf winzigen Bildschirmen. 4,5 "oder kleinere Telefonbildschirme, Wearables. Normalerweise haben Sie keine Zeit, um Bildlaufinhalte zu erstellen, oder Sie können es sich einfach nicht leisten, so viel Inhalt auf diesen Bildschirm zu bringen. Sie können versuchen, die Schriftart zu 1dpverkleinern, wie z Der Leser wird das Telefon wahrscheinlich sehr nahe am Gesicht haben, er wird wahrscheinlich kein Problem beim Lesen haben. Denken Sie daran, dass Sie den Spieler beim Lesen von unlesbarem kleinem Text möglicherweise ärgern.

TL; DR:

• Die physische Größe ändert sich ungefähr nicht direkt mit der Bildschirmgröße oder Auflösung, sondern mit einer Kombination aus beiden ( screenSize/resolutiondem berühmten PPI).
• Denken Sie an pt und dp . Vergessen Sie Bildschirmpixel, bis Sie das Endergebnis zeichnen müssen.
• Erstellen Sie Ihre Schrift zur Laufzeit mit einer angemessenen Größe.
• Konvertieren von dp in Bildschirmpixel:pixels = dp * Gdx.graphics.getDensity();
• Wenn Sie eine Engine verwenden, die Ihnen keinen Konverter für dp wie LibGDX Gdx.graphics.getDensity()bietet, können Sie versuchen : densityFactor = Screen.getPixelsPerInch() / 160.0f, dannpixels = dp * densityFactor

BEARBEITEN:

Am 25. Juni 2014 kündigte Matias auf Google IO eine neue Stilrichtlinie für Android an. Sie enthält eine neue Roboto-Richtlinien für Schriftarten und Typografie. Nehmen Sie diese Tabelle als Leitfaden:

EDIT2:

Enthaltene CSS-Schriftgrößentabelle für den Fall, dass der Link verrottet: