Bagaimana mencocokkan ukuran font dengan resolusi layar?

12

Jadi saya mengerjakan game menggunakan LibGDX, dan saya punya masalah.

Untuk membuat game saya paling sesuai dengan resolusi, saya membuat aset dasar untuk setiap aspek rasio, misalnya, gambar latar belakang menu utama, saya membuatnya dalam 800X600 untuk 4: 3, 1280X720 untuk 16: 9 dll.

Sekarang saya mencoba memasukkan TextButtons ke dalam game, untuk opsi; Masalah saya adalah bahwa saya tidak tahu ukuran font yang cocok dengan resolusi layar mana. Apakah ada cara untuk mencari tahu ini, atau apakah saya harus pergi satu per satu melalui setiap resolusi yang saya miliki dan hanya mencocokkan teks dengan resolusi secara manual?

libgdx gui fonts user-experience aspect-ratio Aon GoltzCrank
sumber

Jawaban:

17

Sangat mudah: Font tidak perlu mencocokkan resolusi, mereka harus mencocokkan kerapatan piksel .

Kerapatan piksel diukur sebagai piksel per inci ( PPI ), atau piksel per sentimeter. Ada juga satuan ukuran yang disebut kepadatan piksel independen ( DP ) . Didefinisikan 1dpdengan ukuran satu piksel pada 160 PPIlayar.

Sekarang kembali ke font, coba lakukan tes ini: letakkan laptop Anda untuk berjalan di 720p. Lihatlah ukuran font. Sekarang colokkan ke monitor 1080p 42 "dari desktop Anda. Jika monitor Anda menampilkan informasi yang tepat tentang ukurannya, maka font tersebut seharusnya memiliki ukuran yang PERSIS sama dengan di layar 720p. Bayangkan betapa anehnya jika teks di komputer Anda laptop memiliki ukuran yang berbeda dari teks pada monitor desktop Anda. Dengan mengatakan, resolusi yang lebih besar harus memberikan lebih detail pada font, layar yang lebih besar harus memberikan lebih banyak konten untuk ditampilkan.

Fakta yang sama dapat diamati pada editor teks. Sebuah 72ptfont harus terlihat di layar sama seperti ketika dicetak di atas kertas.

Semua ini berarti Anda mungkin harus menginginkan ukuran yang sama di semua ukuran tampilan (dengan beberapa pengecualian). Jika Anda ingin mendasarkan diri di suatu tempat, situs web biasanya menggunakan 12ptfont, penggunaan MS Windows 11ptdan 12ptfont.

Bagan ini (juga termasuk di bagian bawah jawaban) memberi tahu kami 12ptdi CSS kira-kira sama dengan 16pxdi CSS (Seolah-olah ini tidak cukup membingungkan, px dalam CSS sama dengan dp di tempat lain), jadi katakanlah Anda Anda akan membuat font Anda 16dpdi LibGDX.

Di gim Anda, gunakan FreeTypeFontGeneratoruntuk menghasilkan font secara dinamis, dengan cara ini Anda dapat mempertimbangkan kepadatan layar saat membuatnya:

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

Ini bekerja karena Gdx.graphics.getDensity()sama dengan YourScreenDensity/160demikian, adalah "faktor skala" untuk membawa barang-barang ke ukuran mereka pada layar 160ppi.

Tentang pengecualian yang saya sebutkan sebelumnya: Anda mungkin ingin ukuran font disesuaikan dengan ukuran layar untuk logo, promo, dll. Namun perlu diingat bahwa Anda akan lebih baik membuatnya di editor grafis seperti Photoshop atau Gimp bagaimanapun juga.

Pengecualian lainnya adalah teks pada layar kecil. Layar ponsel 4,5 "atau lebih kecil, dapat dikenakan. Biasanya Anda tidak akan punya waktu untuk membuat konten gulir, atau Anda tidak akan mampu membayar begitu banyak konten di layar itu. Anda dapat mencoba untuk memperkecil ukuran font 1dp, seperti pembaca mungkin akan memiliki ponsel yang sangat dekat dengan wajah mereka, mereka mungkin tidak akan memiliki masalah membaca. Perlu diingat Anda dapat mengganggu pemain membaca teks kecil yang tidak dapat dibaca.

TL; DR:

  • Ukuran fisik kira-kira tidak akan berubah secara langsung dengan ukuran layar atau resolusi, tetapi dengan kombinasi keduanya ( screenSize/resolutionPPI terkenal)
  • Pikirkan pt dan dp . Lupakan piksel layar sampai Anda harus menggambar hasil akhir.
  • Buat font Anda saat runtime dengan ukuran yang wajar.
  • Mengonversi dp ke piksel layar:pixels = dp * Gdx.graphics.getDensity();
  • Jika Anda menggunakan mesin yang tidak memberi Anda konverter ke dp seperti LibGDX Gdx.graphics.getDensity(), Anda dapat mencoba :, densityFactor = Screen.getPixelsPerInch() / 160.0flalupixels = dp * densityFactor

EDIT:

2014, 25 Juni di Google IO, Matias mengumumkan pedoman gaya baru untuk Android, termasuk font Roboto baru dan pedoman tipografi. Ambil tabel ini sebagai panduan:

Pedoman ukuran font Android, diambil dari google.com/design

EDIT2:

Termasuk bagan ukuran font CSS jika tautan membusuk: Ukuran font CSS

Gustavo Maciel
sumber
1
+1, jawaban yang bagus. Jarak menonton juga merupakan faktor yang sangat penting. Anda akan membutuhkan font yang lebih besar untuk game yang berjalan di konsol / TV dibandingkan dengan yang untuk PC atau bahkan Tablet (di mana jarak pandangnya cukup singkat).
bummzack
1
@bummzack senang Anda menunjukkan ini! Anda dapat mencapai ini dengan menambahkan faktor skala rumus, seperti ini: dp * Gdx.graphics.getDensity() * distanceFactor. Anda dapat membuat distanceFactor sebagai konstanta dan mendefinisikannya 2ketika mengkompilasi untuk konsol / TV, 1jika tidak. Tentu saja Anda harus menemukan nilai yang lebih baik untuk ini.
Gustavo Maciel
Saya mengalami masalah dengan ini. Ketika saya hanya menempatkan ukuran SP ke generator sebagai ukuran untuk piksel saya mendapatkan ukuran yang sama persis pada aplikasi desktop saya seperti yang ada di gambar, dan sumber online lainnya tentang ini. Ketika saya kalikan dengan getDensity() == 0.6mereka tidak dapat dibaca di desktop saya. Mereka menjadi kecil, tetapi berukuran baik pada Galaxy S8 saya di mana `getDensity () == 3 '. Saya telah menghitung sendiri kepadatannya dan mereka kelihatannya benar, kemudian saya benar-benar memegang telepon saya di sebelah aplikasi desktop saya dan semuanya memang sama. Tapi bukankah seharusnya ukuran gambar yang sebenarnya dilihat di desktop saya?
Madmenyo
@ Madmenyo Itulah faktor penskalaan yang saya bicarakan. Anda harus menggunakan penskalaan kerapatan untuk menjaga ukuran teks tetap sama di perangkat yang memiliki faktor bentuk yang sama. Jadi bukan hanya dp * getDensity(), Anda mungkin harus melakukan dp * getDensity() * scalingFactor, yang scalingFactorharus diputuskan pada waktu kompilasi, dan sesuatu seperti ini bisa bekerja: Telepon: scalingFactor = 1Komputer: scalingFactor = 3dan TV: scalingFactor = 5. Mainkan angka-angka ini!
Gustavo Maciel
GetDensity tidak mengembalikan kepadatan yang tepat saat itu ternyata. github.com/libgdx/libgdx/issues/5322#issuecomment-406902114 Anda harus melakukan sesuatu seperti getPpiX() / 160)untuk mendapatkan hasil yang lebih baik. Namun, getDensity()melakukan pekerjaan yang cukup baik kurasa dalam banyak kasus.
Madmenyo