स्क्रीन रिज़ॉल्यूशन के साथ फ़ॉन्ट आकार कैसे मिलान करें?


12

इसलिए मैं LibGDX का उपयोग कर एक गेम पर काम कर रहा हूं, और मुझे एक समस्या है।

मेरे खेल को सबसे अधिक प्रस्तावों के अनुकूल बनाने के लिए, मैंने प्रत्येक पहलू अनुपात के लिए एक आधार संपत्ति बनाई, उदाहरण के लिए, एक मुख्य मेनू पृष्ठभूमि छवि, मैंने इसे 4X3 के लिए 800X600 में बनाया, 16: 9 आदि के लिए 1280X720।

अब मैं TextButtonविकल्पों के लिए खेल में शामिल करने की कोशिश कर रहा हूं ; मेरी समस्या यह है कि मैं यह पता नहीं लगा सकता कि कौन से फ़ॉन्ट आकार किस स्क्रीन रिज़ॉल्यूशन के साथ मेल खाते हैं। क्या यह पता लगाने का एक तरीका है, या क्या मेरे पास प्रत्येक संकल्प के माध्यम से एक-एक करके जाना है और बस मैन्युअल रूप से पाठ को संकल्प से मेल खाना है?

जवाबों:


17

यह आसान है: फ़ॉन्ट्स को रिज़ॉल्यूशन से मिलान करने की आवश्यकता नहीं है, उन्हें पिक्सेल घनत्व से मेल खाना चाहिए ।

पिक्सेल घनत्व को पिक्सेल प्रति इंच ( PPI ), या पिक्सेल प्रति सेंटीमीटर के रूप में मापा जाता है । एक माप इकाई भी है जिसे घनत्व स्वतंत्र पिक्सल ( डीपी ) कहा जाता है । यह परिभाषित किया गया है कि 1dpएक 160 PPIस्क्रीन पर एक पिक्सेल का आकार है ।

अब फोंट पर वापस आ रहे हैं, इस परीक्षण को बनाने की कोशिश करें: अपने लैपटॉप को 720p पर चलाने के लिए रखें। फ़ॉन्ट के आकार पर एक नज़र डालें। अब इसे अपने डेस्कटॉप के 1080p 42 "मॉनीटर में प्लग करें। यदि आपका मॉनीटर इसके आकार के बारे में सही जानकारी देता है, तो फ़ॉन्ट का आकार वही होना चाहिए जो कि 720p स्क्रीन पर था। कल्पना करें कि यदि आपके टेक्स्ट में टेक्स्ट कितना अजीब है। लैपटॉप का आपके डेस्कटॉप मॉनीटर पर पाठ की तुलना में एक अलग आकार था। उस कहा के साथ, बड़े प्रस्तावों को फ़ॉन्ट को अधिक विस्तार देना चाहिए, बड़ी स्क्रीन को दिखाने के लिए अधिक सामग्री देनी चाहिए।

पाठ्य संपादकों पर भी यही तथ्य देखा जा सकता है। एक 72ptफ़ॉन्ट को स्क्रीन पर उसी तरह दिखना चाहिए जैसा कि कागज पर छपा होता है।

इसका मतलब यह है कि आपको सभी प्रदर्शन आकारों (कुछ अपवादों के साथ) में समान आकार चाहिए। यदि आप कहीं खुद को आधार बनाना चाहते हैं, तो वेबसाइटें आमतौर पर 12ptफोंट, एमएस विंडोज का उपयोग करती हैं 11ptऔर 12ptफोंट का उपयोग करती हैं।

यह चार्ट (उत्तर के तल में भी शामिल है) 12ptसीएसएस में हमें बताएं सीएसएस में 16pxभी लगभग समान है (जैसे कि यह पर्याप्त भ्रामक नहीं था, सीएसएस में एक px हर जगह डीपी के समान है), तो चलिए आपको बताते हैं ' 16dpLibGDX पर अपने फोंट बनाएंगे।

अपने खेल पर, FreeTypeFontGeneratorगतिशील रूप से फोंट उत्पन्न करने के लिए उपयोग करें , इस तरह से आप स्क्रीन घनत्व पर विचार कर सकते हैं जब उन्हें बनाते हैं:

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

यह इसलिए काम करता है क्योंकि इस तरह Gdx.graphics.getDensity()से समान है YourScreenDensity/160, चीजों को उस आकार में लाने के लिए "स्केल फैक्टर" है जो वे 160ppi स्क्रीन पर होंगे।

मेरे द्वारा पहले उल्लेख किए गए अपवादों के बारे में: आप शायद लोगो, प्रोमो, आदि के मामले में स्क्रीन आकार के अनुसार फोंट को फिर से आकार देना चाहते हैं, लेकिन ध्यान रखें कि आप फ़ोटोशॉप या जिम्प जैसे ग्राफिक्स एडिटर पर इन्हें बनाना बेहतर होगा। , वैसे भी।

अन्य अपवाद छोटे स्क्रीन पर पाठ है। 4.5 "या छोटे फोन स्क्रीन, वियरेबल्स। आमतौर पर आपके पास स्क्रॉलिंग सामग्री बनाने का समय नहीं होगा, या आप बस उस स्क्रीन पर इतनी सामग्री डालने में सक्षम नहीं होंगे। आप फ़ॉन्ट को स्केल करने की कोशिश कर सकते हैं 1dp, जैसा कि नीचे है। पाठक के पास शायद फोन उनके चेहरे के बहुत करीब होगा, उन्हें शायद पढ़ने में कोई समस्या नहीं होगी। ध्यान रखें कि आप बिना पढ़े छोटे पाठ को पढ़ने वाले खिलाड़ी को परेशान कर सकते हैं।

टी एल; डॉ:

  • भौतिक आकार स्क्रीन आकार या रिज़ॉल्यूशन के साथ सीधे तौर पर नहीं बदलेगा, लेकिन दोनों के संयोजन के साथ ( screenSize/resolutionप्रसिद्ध पीपीआई)
  • पीटी और डीपी के बारे में सोचो । जब तक आपको अंतिम परिणाम नहीं निकालना है, स्क्रीन पिक्सल के बारे में भूल जाएं।
  • एक उचित आकार के साथ रनटाइम पर अपना फ़ॉन्ट बनाएं।
  • स्क्रीन पिक्सल के लिए dp परिवर्तित :pixels = dp * Gdx.graphics.getDensity();
  • यदि आप एक इंजन का उपयोग कर रहे हैं जो आपको LibGDX की तरह डीपी को कनवर्टर नहीं देता है Gdx.graphics.getDensity(), तो आप कोशिश कर सकते हैं: densityFactor = Screen.getPixelsPerInch() / 160.0fफिरpixels = dp * densityFactor

संपादित करें:

2014, Google IO पर जून 25, Matias ने Android के लिए एक नई शैली दिशानिर्देशों की घोषणा की, इसमें एक नया Roboto फ़ॉन्ट और टाइपोग्राफी दिशानिर्देश शामिल हैं। इस तालिका को एक गाइड के रूप में लें:

Android फ़ॉन्ट आकार दिशानिर्देश, fron google.com/design लिया गया

EDIT2:

लिंक के सड़ने की स्थिति में सीएसएस फ़ॉन्ट आकार चार्ट शामिल: सीएसएस फ़ॉन्ट आकार


1
+1, बढ़िया जवाब। देखने की दूरी भी एक बहुत महत्वपूर्ण कारक है। पीसी या यहां तक ​​कि एक टैबलेट (जहां देखने की दूरी काफी कम है) की तुलना में आपको कंसोल / टीवी पर चलने वाले गेम्स के लिए बड़े फोंट की आवश्यकता होगी।
बंमज़ैक

1
@bummzack महान है कि आपने इसे इंगित किया है! आप इस तरह सूत्र में एक स्केलिंग कारक जोड़कर इसे प्राप्त कर सकते हैं dp * Gdx.graphics.getDensity() * distanceFactor:। आप दूरी को एक स्थिर बना सकते हैं और इसे 2कंसोल / टीवी के लिए संकलन करते समय परिभाषित कर सकते हैं , 1अन्यथा। बेशक आपको इसके लिए बेहतर मूल्य खोजने चाहिए।
गुस्तावो मैकिएल

मुझे इससे समस्या हो रही है। जब मैं सिर्फ पिक्सेल के आकार के रूप में जनरेटर में एसपी आकार डालता हूं, तो मुझे अपने डेस्कटॉप ऐप पर छवि के समान ही आकार मिलता है, और इस बारे में अन्य ऑनलाइन स्रोत। जब मैं getDensity() == 0.6उनके द्वारा गुणा करता हूं तो वे मेरे डेस्कटॉप पर अपठनीय होते हैं। वे मेरे गैलेक्सी S8 पर छोटे, लेकिन अच्छे आकार में मिलते हैं, जहां `गेटडेंसिटी () == 3 'है। मैंने स्वयं घनत्व की गणना की है और वे सही प्रतीत होते हैं, फिर मैंने वास्तव में अपने फोन को अपने डेस्कटॉप एप्लिकेशन के पास रखा और वे वास्तव में बराबर हैं। लेकिन क्या उन्हें मेरे डेस्कटॉप पर देखी गई वास्तविक छवि का आकार नहीं होना चाहिए?
मैडमैनियो

@ मैडमैनो वह स्केलिंग फैक्टर है जिसके बारे में मैंने बात की है। आपको पाठ आकार को उन उपकरणों पर रखने के लिए घनत्व स्केलिंग का उपयोग करना चाहिए जो समान रूप-कारक के हैं। तो बस के बजाय dp * getDensity(), आपको शायद करना चाहिए dp * getDensity() * scalingFactor, जिसे scalingFactorसंकलन समय पर तय किया जाना चाहिए, और ऐसा कुछ काम कर सकता है: फ़ोन: scalingFactor = 1कंप्यूटर: scalingFactor = 3और टीवी scalingFactor = 5:। इन नंबरों के साथ खेलें!
गुस्तावो मैकील

गेट डेंसिटी ठीक घनत्व वापस नहीं करता है क्योंकि यह निकलता है। github.com/libgdx/libgdx/issues/5322#issuecomment-406902114 आपको getPpiX() / 160)बेहतर परिणाम प्राप्त करने के लिए कुछ करना होगा । हालांकि, getDensity()ज्यादातर मामलों में मुझे लगता है कि एक अच्छा पर्याप्त काम है।
मडमेन्यो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.