कस्टम फ़ॉन्ट Unity3d में

किसी तरह, यूनिटी 3 डी में अपना प्रोजेक्ट तैयार करते समय, मुझे बिटमैप फ़ॉन्ट (उर्फ बिटमैप फ़ॉन्ट) का उपयोग करना पड़ा। मुझे बहुत खुशी हुई जब मैंने एकता में इस तरह का फॉन्ट बनाने के लिए उपकरण खोजे। लेकिन कुछ समय बाद मैंने महसूस किया कि इस विषय पर किसी भी दस्तावेज की कमी के कारण यह प्रक्रिया किसी भी तरह से तुच्छ नहीं है।

यह लेख एकता में उपयोग करने के लिए तैयार कस्टम बिटमैप फ़ॉन्ट का निर्माण करने के बारे में है। सबक काफी विस्तृत है और फ़ोटोशॉप में काम को प्रभावित करता है। रुचि कृपया बिल्ली के नीचे।

परिचय

जैसा कि विकि समझाता है, एक बिटमैप फ़ॉन्ट वास्तव में उपयोग किए गए सभी पात्रों की बिटमैप छवियों का एक सेट है। यही है, सबसे पहले हमें एक बनावट की आवश्यकता है जिसमें हमें सभी पात्रों की छवियां चाहिए। इस उदाहरण में, मैं अपने आप को केवल संख्याओं और कुछ सहायक पात्रों तक सीमित करूंगा, हालाँकि, आप इस तकनीक का उपयोग किसी भी संख्या में ग्लिफ़ पर कर सकते हैं।

बनावट की तैयारी

हमारे फ़ॉन्ट में 14 वर्ण होंगे: शून्य से नौ तक की संख्याएं, "+", "-", एक बिंदु जो भिन्नात्मक और पूर्णांक भागों और एक स्थान को अलग करता है। हम उन प्रतीकों के लिए कुछ आरक्षित स्थानों को भी छोड़ देंगे जिन्हें हम भविष्य में जोड़ना चाहते हैं। बनावट पर कुल 16 स्लॉट।

एक बनावट पर इन 16 स्लॉट को व्यवस्थित करने का सबसे इष्टतम तरीका इस प्रकार है: 4 कॉलम और 4 पंक्तियों का उपयोग करें



उदाहरण तैयार करने के लिए, मैंने फ़ोटोशॉप का उपयोग किया, और पाठ के दौरान मैं इसमें अपने कार्यों के लिए कुछ स्पष्टीकरण भी दूंगा। तो, छवि संपादक खोलें और एक नया दस्तावेज़ बनाएं, 400 आकार में 400 पिक्सेल। इस स्तर पर बनावट का आकार माप विशेष रूप से महत्वपूर्ण नहीं है, मुख्य बात यह है कि यह बहुत छोटा नहीं है। हम पाठ के बहुत अंत में एकता में अंतिम बनावट आकार को उजागर करेंगे।

सुविधा के लिए, मैं आपको शासकों, ग्रिड और गाइड (शासक, ग्रिड और गाइड) के प्रदर्शन को सक्षम करने की सलाह देता हूं। गाइड Ctrl + के लिए ग्रिड Ctrl + 'प्रदर्शित करने के लिए हॉटकी; लाइन के लिए Ctrl + R। एक दिशानिर्देश बनाने के लिए, बस इसे दस्तावेज़ शासक से खींचें। इन सभी सहायकों के लिए सेटिंग्स मेनू में हैं -> प्राथमिकताएं -> इकाइयां और शासक

अगला, हमें बनावट को वास्तव में, प्रतीकों के रूप में सामग्री के साथ भरना होगा। मेरे बिटमैप फ़ॉन्ट के आधार के रूप में, मैंने नि: शुल्क Unispace फ़ॉन्ट का उपयोग किया। Shift + T हॉटकी के साथ टेक्स्ट टूल को कॉल करें और हमारा पहला ग्लिफ़ डालें। सभी पात्रों को 16 स्लॉट्स में से प्रत्येक के केंद्र में सटीक रूप से तैनात किया जाना चाहिए (यहां हमें एक सहायक ग्रिड की आवश्यकता होगी)। पहला चरित्र दर्ज करने के बाद (हमारे मामले में यह शून्य है), प्रविष्टि की पुष्टि करने के लिए Enter दबाएं। परत को सही ढंग से रखने के लिए, Ctrl + T कुंजियों को दबाकर, हम ट्रांसफ़ॉर्म टूल को कॉल करते हैं और लेयर को सहायक ग्रिड द्वारा निर्देशित वांछित स्थान पर ले जाते हैं।



हम इस सरल ऑपरेशन को उन सभी प्रतीकों के साथ करते हैं जिनकी हमें ज़रूरत है और - वॉइला!

अगले चरण में, हम सभी परिणामी परतों को संख्याओं और संकेतों के साथ एक सामान्य परत में संयोजित करेंगे। ऐसा करने के लिए, उन्हें परत पैनल में चुनें और Ctrl + E दबाएं। मुख्य बात गलती से पृष्ठभूमि परत को हुक नहीं करना है, क्योंकि तब पारदर्शिता के बारे में सभी जानकारी गायब हो जाएगी। उसके बाद, काम का सबसे दिलचस्प और रचनात्मक हिस्सा शुरू होता है। स्वाद के लिए परत प्रभाव को अनुकूलित करें। मैं यहां इसका विस्तार से वर्णन नहीं करूंगा, हर कोई अपने लिए तय करेगा कि वह अपने तरीके से क्या पसंद करता है और क्या करता है। मेरे साथ जो हुआ वह नीचे चित्र में देखा जा सकता है।



तो, इस समय हमारे पास दो परतें हैं: संकेतों के साथ हमारी संख्या और एक सफेद पृष्ठभूमि परत। हमारे द्वारा आवश्यक सभी प्रभावों को कॉन्फ़िगर करने के बाद, परत की एक बैकअप प्रतिलिपि बनाएं और अगले चरण पर आगे बढ़ें: एक अल्फा चैनल का निर्माण।

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

एक ताजा डुप्लिकेट परत हमारे अल्फा चैनल का मूल बन जाएगी। पहले हमें इसके सभी प्रभावों को सेंकना होगा, यानी परत को तेज करना होगा। ऐसा करने के लिए, मैं आमतौर पर एक नई खाली परत बनाता हूं, इसे चुनें और अब मैं जिस परत के साथ काम कर रहा हूं - उन्हें एक (Ctrl + +) में मर्ज करें।



हमें पारदर्शिता जानकारी के साथ एक रास्टराइज़्ड परत मिली। अब यह केवल अल्फा चैनल पर इस जानकारी को स्थानांतरित करने के लिए बना हुआ है। ऐसा करने के लिए, Ctrl दबाए रखें, परत पैनल में आयनिक परत पर क्लिक करें - पारदर्शिता मास्क का उपयोग करके चयन प्राप्त करना और चैनल पैनल में एक नया चैनल बनाना, फिर से Ctrl दबाकर रखना। एक नया चैनल बनाने के लिए बटन एक टोकरी के साथ एक चैनल को हटाने के लिए बटन के पास पैनल के नीचे दाईं ओर स्थित है। परिणामी चैनल उलटा हो गया - इससे कोई फर्क नहीं पड़ता। संयोजन Ctrl + मैं चीजों की सामान्य स्थिति को पुनर्स्थापित करता हूं।



अल्फा चैनल तैयार है। बनावट, सामान्य तौर पर भी। सिवाय इसके कि सफेद पृष्ठभूमि की परत पात्रों के चारों ओर छाया के सही प्रदर्शन के साथ हस्तक्षेप करती है। मैंने उसे छाया के रंग में रंग दिया।

हम बनावट को एक पसंदीदा प्रारूप में सहेजते हैं जो अल्फा चैनल का समर्थन करता है (मैं टीजीए -32 बिट का उपयोग करता हूं) और अगले चरण पर आगे बढ़ता हूं।

एकता में एक फॉन्ट बनाने की तैयारी

Unity3d में बनावट आयात करें। ऐसा करने के लिए, प्रोजेक्ट पैनल में हमें एसेट्स फोल्डर मिलता है और कॉन्टेक्स्ट मेनू से इम्पोर्ट न्यू एसेट ... हम फाइल को अपनी बनावट के साथ पाते हैं। हो गया।



बनावट सेटिंग्स बहुत स्पष्ट हैं, और मैं उन्हें विस्तार नहीं दूंगा। मैं केवल उल्लेख करता हूं कि आपको साने की बनावट का आकार निर्धारित करने की आवश्यकता है। हमारे मामले में, 256x256 px ठीक है।

अगला, एक ही संदर्भ मेनू में, एक नई सामग्री और फ़ॉन्ट संपत्ति बनाएं (बनाएं -> सामग्री, बनाएँ -> कस्टम फ़ॉन्ट)। सामग्री सेटिंग्स में, बस आयातित बनावट का चयन करें। साथ ही, सामग्री को पारदर्शिता बनाए रखना चाहिए। इसलिए, सामग्री का प्रकार हम उपयुक्त का चयन करते हैं: पारदर्शी / विसरित।



अंत में, हम पाठ के बहुत सार पर आते हैं। हमने एक सुंदर बनावट के साथ सामग्री को अनुकूलित किया है, और अब हमें किसी भी तरह से इसे से एकता में उपयोग के लिए तैयार रास्टर फ़ॉन्ट को इकट्ठा करने की आवश्यकता है।

एकता में बिटमैप फ़ॉन्ट

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



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

Ascii प्रारंभ ऑफसेट Ascii कोड तालिका को स्थानांतरित करने के लिए जिम्मेदार पूर्णांक है। उदाहरण: मान को 10 पर सेट करें, और अब कोड 65 के साथ प्रतीक "ए" तक पहुंच प्राप्त की जा सकती है।
केरिंग - पत्र रिक्ति।
लाइन रिक्ति - पाठ की लाइनों के बीच की दूरी।
डिफ़ॉल्ट सामग्री - फ़ॉन्ट बनावट के साथ सामग्री। हम इसे पहले ही बना चुके हैं।
चरित्र अनुपात - प्रत्येक वर्ण के लिए सेटिंग मैपिंग की एक सरणी।

यह चरित्र अनुपात है जो हमें सबसे अधिक रुचि देता है।

आकार - सरणी का आकार (फ़ॉन्ट में वर्णों की संख्या)।
तत्व x - एक विशिष्ट प्रतीक के लिए सेटिंग्स के साथ चरित्र अनुपात सरणी का तत्व।
सूचकांक - प्रतीक के असिसी-कोड, असिसी स्टार्ट ऑफ़सेट को ध्यान में रखते हुए।
यूवी - बनावट पर प्रतीक के निर्देशांक और आकार।
एक्स, वाई, डब्ल्यू, एच - प्रतीक के साथ बनावट अनुभाग के निचले बाएं कोने के निर्देशांक, साथ ही इस खंड की चौड़ाई और ऊंचाई।

यहां मैपिग के सिद्धांत में एक छोटे से विषयांतर करना आवश्यक है, स्पॉइलर में एक छोटा दृश्य सहायता है।


कार्यक्षेत्र - बहुभुज के निर्देशांक और आयाम जिस पर प्रतीक मैप करेगा
एक्स, वाई, डब्ल्यू, एच - प्रतीक के साथ बहुभुज के निचले बाएं कोने के निर्देशांक, साथ ही साथ इस बहुभुज की चौड़ाई और ऊंचाई। सामान्य स्थिति में, x और y को 0 पर सेट किया जाता है, w और h बहुभुज की लंबाई और चौड़ाई है, और h एक ऋणात्मक संख्या है। मत पूछो क्यों, मैं खुद नहीं समझ पाया।
चौड़ाई एक अक्षर का एक सा है जो किसी विशेष वर्ण के लिए रिक्ति है।
फ़्लिप किया - बहुभुज के सापेक्ष बनावट को 90 डिग्री घुमाता है (ऊर्ध्वाधर फोंट के लिए इस्तेमाल किया जा सकता है)।

तो, मुख्य पैरामीटर स्पष्ट होना चाहिए। चलो हमारे नंबरों की मैपिंग शुरू करते हैं। सबसे पहले, Ascii कोड की तालिका पर एक नज़र डालें।



जैसा कि आप देख सकते हैं, प्रत्येक वर्ण में एक विशिष्ट Ascii कोड होता है। उदाहरण के लिए, कोड 43 प्लस चिह्न से संबंधित है। और अब हम संबंधित क्षेत्रों में निर्देशांक दर्ज करने का कठिन, कठिन कार्य शुरू कर रहे हैं। नीचे एक तस्वीर है जो दिखाती है कि प्लस और माइनस संकेत कैसे मैप किए गए थे।



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

प्रोजेक्ट दृश्य में एक खाली ऑब्जेक्ट बनाएँ। इसे "TextMesh" घटक असाइन करें और सेटिंग्स में हमारे फ़ॉन्ट का चयन करें।



ब्यूटी!

अंतभाषण

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