Yazı tipi boyutunu ekran çözünürlüğü ile nasıl eşleştirebilirim?


12

Bu yüzden LibGDX kullanan bir oyun üzerinde çalışıyorum ve bir sorunum var.

Oyunumu en çok çözüme ulaştırmak için, her bir en boy oranı için bir temel varlık oluşturdum, örneğin bir ana menü arka plan görüntüsü, 4: 3 için 800X600, 16: 9 için 1280X720 vb.

Şimdi TextButtonseçenekler için oyuna dahil etmeye çalışıyorum ; Benim sorunum hangi yazı tipi boyutlarının hangi ekran çözünürlükleriyle eşleştiğini anlayamıyorum. Bunu anlamanın bir yolu var mı, yoksa sahip olduğum çözünürlüklerin her biri için tek tek gitmek zorunda mıyım ve metni manuel olarak çözünürlüğe eşleştirmek zorunda mıyım?

Yanıtlar:


17

Kolay: Yazı tiplerinin çözünürlükle eşleşmesi gerekmez, piksel yoğunluğuyla eşleşmesi gerekir .

Piksel yoğunluğu inç başına piksel ( PPI ) veya santimetre başına piksel olarak ölçülür . Ayrıca yoğunluktan bağımsız pikseller ( DP ) adı verilen bir ölçü birimi de vardır . 1dpBir pikselin 160 PPIekranda sahip olduğu boyut olarak tanımlanır .

Şimdi yazı tiplerine geri dönün, bu testi yapmaya çalışın: dizüstü bilgisayarınızı 720p'de çalıştırın. Yazı tipinin boyutuna bir göz atın. Şimdi masaüstünüzün 1080p 42 "monitörüne takın. Monitörünüzün boyutu hakkında doğru bilgileri verirse, yazı tipinin 720p ekranda tam olarak aynı boyutta olması gerekir. Dizüstü bilgisayar masaüstü monitörünüzün metninden farklı bir boyuta sahipti.Bununla birlikte, daha büyük çözünürlükler yazı tipine daha fazla ayrıntı vermeli, daha büyük ekranlar daha fazla içerik gösterilmelidir.

Aynı gerçek metin editörlerinde de görülebilir. Bir 72ptyazı ekranında o kağıda basılmış ne zaman aynı bakmak gerekir.

Tüm bunlar, tüm ekran boyutlarında (bazı istisnalar dışında) muhtemelen aynı boyutu istemeniz gerektiği anlamına gelir. Kendinizi bir yere dayandırmak istiyorsanız, web siteleri genellikle 12ptyazı tiplerini, MS Windows kullanır 11ptve 12ptyazı tiplerini kullanır .

Bu grafik (cevabın alt kısmında da yer almaktadır) bize 12ptCSS'de kabaca CSS'de eşittir 16px(Bu yeterince kafa karıştırıcı değilse, CSS'deki bir piksel dp ile aynıdır ), yani diyelim ki Yazı tiplerinizi 16dpLibGDX üzerinde yapacağım.

Oyununuzda, FreeTypeFontGeneratoryazı tiplerini dinamik olarak oluşturmak için kullanın , bu şekilde bunları oluştururken ekran yoğunluğunu göz önünde bulundurabilirsiniz:

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

Bu işe yarar, çünkü Gdx.graphics.getDensity()eşittir YourScreenDensity/160, 160ppi ekranda olacakları boyuta getirmek için bir "ölçek faktörü".

Daha önce bahsettiğim istisnalar hakkında: muhtemelen yazı tiplerinin logolar, tanıtımlar vb. Durumunda ekran boyutuna göre yeniden boyutlandırılmasını isteyeceksiniz. Ancak bunları Photoshop veya Gimp gibi bir grafik düzenleyicide yapmanın daha iyi olacağını unutmayın. , yine de.

Diğer istisna, küçük ekranlardaki metindir. 4,5 "veya daha küçük telefon ekranları, giyilebilir cihazlar. Genellikle kaydırma içeriği yapmak için zamanınız olmaz veya bu ekrana çok fazla içerik koymayı göze alamazsınız. Yazı tipini 1dpküçültmeye çalışabilirsiniz . okuyucu muhtemelen telefonun yüzüne çok yakın olacak, muhtemelen okuma problemi olmayacak.Oyuncuyu okunamayan küçük metinleri okuyarak rahatsız edebileceğinizi unutmayın.

TL; DR:

  • Fiziksel boyut kabaca ekran boyutu veya çözünürlüğü ile doğrudan değişmez, ancak her ikisinin bir kombinasyonu ile ( screenSize/resolutionünlü PPI)
  • Pt ve dp'yi düşünün . Nihai sonucu çizene kadar ekran piksellerini unutun.
  • Yazı tipinizi çalışma zamanında makul bir boyutta oluşturun.
  • DP'yi ekran piksellerine dönüştürme :pixels = dp * Gdx.graphics.getDensity();
  • Eğer hayır için dönüştürücü veriyor bir motoru kullanıyorsanız dp LibGDX en gibi Gdx.graphics.getDensity(), deneyebileceğiniz: densityFactor = Screen.getPixelsPerInch() / 160.0fsonrapixels = dp * densityFactor

DÜZENLE:

2014, 25 Haziran Google IO'da, Matias Android için yeni bir stil yönergeleri açıkladı, yeni bir Roboto yazı tipi ve tipografi yönergeleri içeriyor. Bu tabloyu kılavuz olarak alın:

Google.com/design adresinden alınmış Android yazı tipi boyutu yönergeleri

EDIT2:

Bağlantının çürümesi durumunda CSS yazı tipi boyutu çizelgesi eklenmiştir: CSS yazı tipi boyutları


1
+1, harika cevap. Görüş mesafesi de çok önemli bir faktördür. Bir konsolda / TV'de çalışan oyunlar için PC veya hatta bir Tablet'e (görüntüleme mesafesinin oldukça kısa olduğu) kıyasla daha büyük yazı tiplerine ihtiyacınız olacaktır.
bummzack

1
@bummzack bunu işaret ettiğiniz için harika! Böyle, formüle bir ölçekleme faktörünü ekleyerek elde edebilirsiniz: dp * Gdx.graphics.getDensity() * distanceFactor. DistanceFactor öğesini sabit yapabilir ve 2konsol / TV için derlerken tanımlayabilirsiniz , 1aksi takdirde. Elbette bunun için daha iyi değerler bulmalısınız.
Gustavo Maciel

Bununla ilgili sorunlar yaşıyorum. SP boyutunu jeneratöre piksel boyutu olarak koyduğumda, masaüstü uygulamamdaki görüntüdeki boyutlarla ve bununla ilgili diğer çevrimiçi kaynaklarla tam olarak aynı boyutu alıyorum. Ben çarpma tarafından ne zaman getDensity() == 0.6onlar benim masaüstünde okunamaz durumda. Galaxy S8'imde küçülüyorlar, ancak `` getDensity () == 3 '' boyutunda güzel boyutlara sahipler. Yoğunluğu kendim hesapladım ve doğru görünüyorlar, sonra telefonumu masaüstü uygulamamın yanında tuttum ve gerçekten eşitler. Ancak masaüstümde görüntülenen gerçek resmin boyutu olmamalı mı?
Madmenyo

@Madmenyo Bu bahsettiğim ölçeklendirme faktörü. Aynı form faktörüne sahip cihazlarda metin boyutunu aynı tutmak için yoğunluk ölçeklendirmesi kullanmalısınız. Bunun yerine sadece bir dp * getDensity(), muhtemelen yapmalıyım dp * getDensity() * scalingFactor, hangi scalingFactorderleme zamanında karar olmalı ve böyle bir şey işe yarayabilir: Telefonlar: scalingFactor = 1Bilgisayar: scalingFactor = 3ve TV: scalingFactor = 5. Bu sayılarla oynayın!
Gustavo Maciel

GetDensity, ortaya çıktığı için kesin yoğunluğu döndürmez. DahagetPpiX() / 160) iyi sonuç almak için github.com/libgdx/libgdx/issues/5322#issuecomment-406902114 gibi bir şey yapmalısınız . Ancak, getDensity()çoğu durumda sanırım yeterince iyi bir iş çıkar.
Madmenyo
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.