Jak dopasować rozmiar czcionki do rozdzielczości ekranu?


12

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?

Odpowiedzi:


17

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:

Wskazówki dotyczące rozmiaru czcionki dla systemu Android, wykonane na google.com/design

EDYCJA 2:

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


1
+1, świetna odpowiedź. Odległość widzenia jest również bardzo ważnym czynnikiem. Będziesz potrzebował większych czcionek do gier, które działają na konsoli / telewizorze w porównaniu do czcionek na PC lub nawet na tablecie (gdzie odległość oglądania jest dość krótka).
bummzack

1
@bummzack świetnie, że zwróciłeś na to uwagę! Można to osiągnąć przez dodanie współczynnik skalowania do formuły, tak: dp * Gdx.graphics.getDensity() * distanceFactor. W przeciwnym razie możesz ustawić DistanceFactor jako stały i zdefiniować go 2podczas kompilacji dla konsoli / telewizora 1. Oczywiście powinieneś znaleźć dla tego lepsze wartości.
Gustavo Maciel

Mam z tym problemy. Kiedy po prostu umieszczam rozmiar SP w generatorze jako rozmiar pikseli, otrzymuję dokładnie taki sam rozmiar w mojej aplikacji komputerowej jak na obrazie i innych źródłach online na ten temat. Kiedy pomnożę przez getDensity() == 0.6, są one nieczytelne na moim pulpicie. Stają się małe, ale ładnie wielkości na moim Galaxy S8, gdzie `getDensity () == 3 '. Sam obliczyłem gęstość i wydają się one poprawne, potem faktycznie trzymałem telefon obok aplikacji komputerowej i rzeczywiście są one równe. Ale czy nie powinny być wielkości rzeczywistego obrazu wyświetlanego na moim pulpicie?
Madmenyo

@Madmenyo To jest czynnik skalowania, o którym mówiłem. Powinieneś użyć skalowania gęstości, aby utrzymać ten sam rozmiar tekstu na urządzeniach, które mają ten sam współczynnik kształtu. Więc zamiast po prostu dp * getDensity(), powinieneś zrobić dp * getDensity() * scalingFactor, które scalingFactorpowinny być podejmowane w czasie kompilacji, a coś takiego może pracować: Telefony: scalingFactor = 1Komputer: scalingFactor = 3i telewizja: scalingFactor = 5. Graj z tymi liczbami!
Gustavo Maciel

GetDensity nie zwraca dokładnej gęstości, jak się okazuje. github.com/libgdx/libgdx/issues/5322#issuecomment-406902114 musisz zrobić coś takiego, getPpiX() / 160)aby uzyskać lepszy wynik. Jednak getDensity()w większości przypadków wykonuje dobrą robotę.
Madmenyo
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.