Jak dopasować rozmiar czcionki do rozdzielczości ekranu?

Pracuję więc nad grą przy użyciu LibGDX i mam problem.

Aby moja gra pasowała do większości rozdzielczości, stworzyłem podstawowy zasób dla każdego współczynnika proporcji, na przykład obraz tła menu głównego, zrobiłem to w 800X600 dla 4: 3, 1280X720 dla 16: 9 itd.

Teraz próbuję włączyć TextButtons do gry, aby uzyskać opcje; Mój problem polega na tym, że nie mogę ustalić, które rozmiary czcionek pasują do rozdzielczości ekranu. Czy istnieje sposób, aby to rozgryźć, czy też muszę przeglądać kolejno wszystkie dostępne rozdzielczości i ręcznie dopasowywać tekst do rozdzielczości?

To proste: Czcionki nie muszą pasować do rozdzielczości, muszą pasować do gęstości pikseli .

Gęstość pikseli mierzy się w pikselach na cal ( PPI ) lub pikselach na centymetr. Istnieje również jednostka miary zwana pikselami niezależnymi od gęstości ( DP ) . Określa się, że 1dpjest to rozmiar jednego piksela na 160 PPIekranie.

Teraz wracając do czcionek, spróbuj wykonać ten test: uruchom laptopa na 720p. Spójrz na rozmiar czcionki. Teraz podłącz go do monitora 1080p 42 "na pulpicie. Jeśli monitor wyświetla prawidłowe informacje o swoim rozmiarze, czcionka powinna mieć DOKŁADNIE taki sam rozmiar jak na ekranie 720p. Wyobraź sobie, jak dziwnie by było, gdyby tekst w twoim laptop miał inny rozmiar niż tekst na monitorze komputera. Powiedziawszy to, większe rozdzielczości powinny dawać więcej szczegółów czcionce, większe ekrany powinny dawać więcej treści do wyświetlenia.

Ten sam fakt można zaobserwować w edytorach tekstu. 72ptCzcionki powinien wyglądać na ekranie taki sam to po wydrukowaniu na papierze.

Wszystko to oznacza, że ​​prawdopodobnie powinieneś chcieć mieć taki sam rozmiar we wszystkich rozmiarach wyświetlacza (z pewnymi wyjątkami). Jeśli chcesz gdzieś się oprzeć, strony internetowe zwykle używają 12ptczcionek, MS Windows 11pti 12ptczcionek.

Ta tabela (również u dołu odpowiedzi) mówi nam, że 12ptw CSS jest mniej więcej równa 16pxrównież w CSS (jakby to nie było dość mylące, px w CSS jest taki sam jak dp wszędzie indziej), więc powiedzmy, że 16dpZrobię twoje czcionki na LibGDX.

W swojej grze używaj FreeTypeFontGeneratordo dynamicznego generowania czcionek, w ten sposób możesz wziąć pod uwagę gęstość ekranu podczas ich tworzenia:

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

Działa Gdx.graphics.getDensity()to, ponieważ jest równe, YourScreenDensity/160dlatego jest „współczynnikiem skali”, aby doprowadzić rzeczy do rozmiaru, jaki byłyby na ekranie o rozdzielczości 160ppi.

O wyjątkach, o których wspomniałem wcześniej: prawdopodobnie będziesz chciał zmienić rozmiar czcionek odpowiednio do rozmiaru ekranu w przypadku logo, promocji itp. Pamiętaj jednak, że lepiej będzie, jeśli utworzysz je w edytorze graficznym, takim jak Photoshop lub Gimp , tak czy siak.

Drugim wyjątkiem jest tekst na małych ekranach. Ekrany telefonu o przekątnej 4,5 cala lub mniejsze, urządzenia do noszenia. Zwykle nie będziesz mieć czasu na przewijanie zawartości lub po prostu nie będziesz mógł sobie pozwolić na umieszczenie takiej ilości treści na tym ekranie. Możesz spróbować zmniejszyć czcionkę 1dp, ponieważ czytelnik prawdopodobnie będzie miał telefon bardzo blisko twarzy, prawdopodobnie nie będzie miał problemu z czytaniem. Pamiętaj, że możesz denerwować gracza czytającego nieczytelny mały tekst.

TL; DR:

• Rozmiar fizyczny z grubsza nie zmienia się bezpośrednio wraz z rozmiarem ekranu lub rozdzielczością, ale z kombinacją obu ( screenSize/resolutionsłynny PPI)
• Pomyśl o pt i dp . Zapomnij o pikselach ekranowych, dopóki nie będziesz musiał narysować końcowego wyniku.
• Utwórz czcionkę w czasie wykonywania w rozsądnym rozmiarze.
• Konwersja dp na piksele ekranowe:pixels = dp * Gdx.graphics.getDensity();
• Jeśli używasz silnika, który nie daje ci konwertera na dp jak LibGDX Gdx.graphics.getDensity(), możesz spróbować :, densityFactor = Screen.getPixelsPerInch() / 160.0ftopixels = dp * densityFactor

EDYTOWAĆ:

2014, 25 czerwca w Google IO, Matias ogłosił nowe wytyczne dotyczące stylu dla Androida, zawiera nowe wytyczne dotyczące czcionek i typografii Roboto. Weź ten stół jako przewodnik:

EDYCJA 2:

Dołączona tabela rozmiarów czcionek CSS na wypadek zepsucia się linku: