मैं मुख्य बात से शुरू करता हूं: हमने एक सुविधाजनक लेआउट टूल बनाया और कार्य पाइपलाइन को बदल दिया। अब क्रम में।
मोबाइल गेम्स में कई अलग-अलग इंटरफेस हैं, जिनमें HUD और मेटा के लिए बड़ी संख्या में स्क्रीन शामिल हैं। यूएक्स-डिजाइनर उन्हें डिजाइन करते हैं, यूआई-डिजाइनर आकर्षित करते हैं, और इस सब के लिए इंजन में दिखाई देते हैं, विशेष रूप से प्रशिक्षित लोग हैं - तकनीकी यूआई-डिजाइनर। खैर, या बस लेआउट डिजाइनर। उनकी नौकरी का एक हिस्सा श्रमसाध्य रूप से PSD लेआउट से प्रीफैब, संख्या के बाद नंबर पर स्थानांतरित करने के लिए है। वे यूआई-एनिमेशन में भी संलग्न होते हैं, स्प्राइट्स में भरते हैं, लेआउट को अनुकूल बनाते हैं, स्थानीयकरण कुंजी की व्यवस्था करते हैं और इसी तरह।
और हमने अपने आप को कई लक्ष्य निर्धारित किए:
- लेआउट डिजाइनर के काम को गति दें और उसे दिनचर्या से बचाएं;
- यूआई डिजाइन और विकास के विभागों के बीच बातचीत को कारगर बनाना;
- UI में एकरूपता लाएं: दिशानिर्देश बनाएं और उनके आधार पर एकता संपत्ति बनाएं;
- UI की एक्स्टेंसिबिलिटी और बहुमुखी प्रतिभा, संपत्ति की पुन: प्रयोज्यता, संपादन के लिए प्रतिरोध और आसान अनुकूलन प्रदान करते हैं।
ऐसा ही हुआ भी।
हमने एकता इंजन और एडोब फोटोशॉप से कुछ प्रकार की डिज़ाइन प्रणाली बनाने की कोशिश की (जो, ऐसा लगता है कि गेम देव को छोड़कर, इंटरफेस बनाने के लिए शायद ही उपयोग किया जाता है)। मोटे तौर पर, हमें फ़ोटोशॉप और यूनिटी बनाने के काम का सामना करना पड़ा।
सबसे पहले, एकता में "दृश्य भाषा" के पूरे सेट को प्रोजेक्ट करना आवश्यक था। ऐसा करने के लिए, हमने शैलियों को चुना और उन्हें अपनी आवश्यकताओं के अनुरूप बनाया। यह कंपनियों के बीच एक काफी सामान्य अभ्यास है। तो एक फ़ॉन्ट सेट एक फ़ॉन्ट शैली बन गया है, लेआउट का एक सेट इन लेआउट के स्प्राइट्स के साथ एक शैली बन गया है, रंगों का एक सेट रंगों के साथ एक शैली बन गया है, और इसी तरह। यह सब एक बार बनाने के लिए पर्याप्त था, और फिर दिशानिर्देशों के साथ पीएसडी विस्तार के साथ बस पुन: उपयोग और पूरक किया गया था। इस प्रकार, यूआई डिजाइनर को विभिन्न स्क्रीन पर 1001 सब्सट्रेट को छोड़ने और कई सार्वभौमिक बनाने के लिए मजबूर किया जाता है।
वर्तमान शैली जो हैं:
- रंग शैली <नाम, रंग>
- पाठ शैली <नाम, फ़ॉन्ट, फ़ॉन्ट आकार, फ़ॉन्ट सामग्री, पंक्ति रिक्ति>
- फ़ॉन्ट शैली <शीर्षक, फ़ॉन्ट, फ़ॉन्ट सामग्री>
- बटन शैली <नाम, बटन सेटिंग्स>
- लेआउट शैली <नाम, स्प्राइट, इंडेंटेशन>
- स्प्राइट स्टाइल <नाम, स्प्राइट>
- स्थानीयकरण शैली <नाम, कुंजी>
- आइकन शैली <नाम, स्प्राइट>
और सामान्य तौर पर, आप आसानी से और सरल शैली बना सकते हैं, इसे आधार से विरासत में मिला सकते हैं। उदाहरण के लिए:
[CreateAssetMenu(menuName = "UIStyles/ColorStyle")] public class ColorStyle : BaseStyle<Color> { }
केवल सीमा: प्रकार सीरियल योग्य होना चाहिए। यहां तक कि टाइपसेट अपने स्वयं के प्रकार के निर्माण के साथ सामना करेगा।
UI की स्थिति को बदलने के लिए कुछ शैलियों की आवश्यकता होती है। उदाहरण के लिए, रंग शैली, पाठ शैली, स्प्राइट शैली, बटन शैली, स्थानीयकरण शैली। ये सभी अलग-अलग गेमबिज को प्रभावित करते हैं। चित्रों को अलग-अलग रंगों में चित्रित किया जाता है, विभिन्न स्प्राइटों को उनमें प्रतिस्थापित किया जाता है, और इसी तरह।
अब तक, यह स्पष्ट नहीं था कि यह सब कैसे उपयोग किया जाए। मैं एक सरल उदाहरण दूंगा। मान लीजिए कि हमारे पास विभिन्न रंगों के ऑफ़र का एक बटन है। बटन का रंग ऑफ़र पर ही निर्भर करता है। और वे इस तरह दिखते हैं:
फिर हम इमेज के साथ एक प्रीफ़ैब बनाते हैं, जिस पर हम ColorStyleComponent को हैंग करते हैं, इसमें ColorStyle स्टाइल डालें, जहाँ बटन को रिप्लेस किए जा सकने वाले सभी रंगों को स्टोर किया जाएगा, और फिर कोड के अंदर ऑफर के आधार पर स्टाइल लागू करेंगे।
शैलियाँ FontStyle, IconStyle और LayoutStyle का उपयोग ऑटो-बिल्डर के लिए किया जाता है। यह परियोजना में सभी फोंट, आइकन और अंडरले का एक पुस्तकालय है।
शैलियों के साथ एक प्रणाली की एक बड़ी संख्या में फायदे हैं (केवल एक परियोजना में संपत्ति का एक गुच्छा कष्टप्रद हो सकता है):
- पुन: उपयोग;
- शैली बदलते समय, प्रीफ़ैब नहीं बदलता है, लेकिन अगर कुछ बदलने की आवश्यकता है, तो यह सभी प्रीफ़ैब्स को प्रभावित करेगा;
- टाइपसेट स्वयं शैलियों को बनाते हैं, उन्हें बदलते हैं और उन्हें हटा देते हैं, जो प्रोग्रामर को फूलों के साथ मोनोबेख में खेतों के ढेर के बारे में भूलने की अनुमति देता है;
- शैलियों को इस तथ्य के कारण सीधे संपादक में लागू किया जा सकता है कि संपादक BaseStyleComponent <T, TStyle> के लिए अपना स्वयं का संपादक लिखा गया है।
एक बड़े विजेट की स्थिति को बदलने के लिए, कई शैलियों का उपयोग किया जा सकता है, विभिन्न वस्तुओं को चालू / बंद किया जा सकता है। ऐसा करने के लिए, प्रोजेक्ट में StateStyleComponent बनाया गया, जो उन सभी शैलियों और वस्तुओं को एकत्रित करता है जिन्हें चालू / बंद करने की आवश्यकता होती है। फिर, विजेट में दाईं ओर, इसके सभी संभावित राज्यों को बनाया और स्विच किया गया है। यह प्रोग्रामर्स को रंग / फोंट / टेक्स्ट / स्प्राइट्स स्विच करने के लिए एक ही कोड के एक गुच्छा से बचाता है।
फिर हमने एक ऑटो बनाने वाली कंपनी बनाई। यह एक उपकरण है जिसमें आप psd चिपकाते हैं, और आउटपुट पर एक कच्चा प्रीफ़ैब बनाया जाता है, जिसमें कुछ स्प्राइट पहले से ही डाले जाते हैं, पोज़िशन, नाम, फोंट, आकार, उपनाम नीचे रखे जाते हैं - सब कुछ जो बहुत सावधानी से psd से लेआउट डिजाइनरों द्वारा पेन से कॉपी किया जाता है। यह मोटे तौर पर लंगर भी चलाता है और एक पदानुक्रम रखता है। और यह सेकंड के एक मामले में करता है, जो अंततः श्रमसाध्य नकल के घंटे बचाता है।
ऑटोकॉम्प्यूटर विंडो स्वयं सेटिंग्स पर कम दिखती है। उपयोग के दौरान, इन सेटिंग्स को जोड़ा जाएगा।
सभी डेटा प्राप्त करने के लिए, psd parser विशेष रूप से psd विनिर्देशन के आधार पर इन आवश्यकताओं के लिए लिखा गया था। यह एक उबाऊ प्रक्रिया है, आप तैयार पुस्तकालय ले सकते हैं। लेकिन जब से हम एक बटन के साथ सब कुछ करना चाहते थे, मुझे खरोंच से लिखना पड़ा।
ऑटो-निर्माता फ़ोटोशॉप में पूरे पदानुक्रम की प्रतिलिपि बनाता है। सबसे पहले, एक रूट ऑब्जेक्ट प्रीफैब के नाम से बनाया गया है, जो स्क्रीन के किनारों पर लंगर डाले हुए है। इसके अंदर, ऑब्जेक्ट्स को ऊपर वर्णित सिद्धांत के अनुसार बनाया गया है - ऑब्जेक्ट को रूट ऑब्जेक्ट में बनाया गया है, और फिर वैश्विक स्थिति बनाए रखते हुए एक वास्तविक माता-पिता को सौंपा गया है। एंकर को सिद्धांत के अनुसार रखा जाता है - किस किनारे या केंद्र के पास वस्तु स्थित होती है, जिसके निकट स्थित है, अलग से कुल्हाड़ी OX और ओए। सभी पदों और आकारों को पूर्णांक बनाया जाता है। ऑटो-निर्माता छिपी हुई वस्तुओं की उपेक्षा करता है।
फ़ोटोशॉप में, 5 प्रकार की परतें हैं: समूह, पिक्सेल, आकार, ग्रंथ और स्मार्ट ऑब्जेक्ट।
- ऑटो-मेकर में समूह (ग्रुप लेयर) एक खाली गेमबजेक्ट में बदल जाता है, इसलिए एक बड़े इंटरफ़ेस घटक जैसे कि, स्लॉट, स्लॉट्स का समूह और इतने पर आसानी से एक समूह में जोड़ा जा सकता है।
- पिक्सेल परत बस सफेद रंग के साथ छवि बन जाती है। यह आइकन, बैक, पिक्चर, फायरफ्लाइ हो सकता है। फिर उन्हें मैन्युअल रूप से प्रोजेक्ट में जोड़ा जाता है, जैसे स्प्राइट, और छवि में डाला जाता है।
- आकार (आकार की परत) आकार के रंग के साथ एक तस्वीर बन जाती है। यह किसी भी वेक्टर तत्व हो सकते हैं: लेआउट, आइकन और अन्य।
- ऑटोकंप्यूटर में ग्रंथ TextMeshProUGUI बन जाता है और पाठ, फ़ॉन्ट, रंग, स्ट्रोक, छाया, ग्रेडिएंट, फ़ॉन्ट आकार, स्थिति (दाएं, केंद्र, बाएं) को विरासत में मिला है।
- स्मार्ट ऑब्जेक्ट्स सामान्य खाली गेमबॉजेक्ट बन जाते हैं। यह करने के लिए स्मार्ट ऑब्जेक्ट्स का उपयोग करने के लिए तार्किक है जो पहले से ही नेस्टेड प्रीफैब के रूप में लगाए गए हैं (उदाहरण के लिए, शीर्ष बार, जो हर जगह समान है)
ऑटो-रैपर सभी स्थानों से रंगों को इकट्ठा करना जानता है (उदाहरण के लिए, आकार रंग, फ़ॉन्ट रंग, रंग प्रभाव, रंग परत) और उन्हें एक हेक्स में परिवर्तित करें। इसी तरह पारदर्शिता के साथ।
अलग से, यूआई डिजाइनर तुरंत परतों और समूहों (जैसे ज़ेप्लिन में) के नाम पर विकल्प रखता है।
तालिका में विकल्पों के उदाहरण उपकरण के लाभ: तेजी से लेआउट, पदानुक्रम को सहेजना, आवश्यक घटकों को जोड़ना, खेल की वस्तुओं के नामों को एकजुट करना, स्वचालित रूप से नाम से शैलियों को जोड़ना, रास्कॉस्ट्स को बंद करना जहां इसकी आवश्यकता नहीं है, अनुमानित रूप से।
लेकिन दृष्टिकोण में इसकी कमियां हैं: यदि psd- लेआउट केवल एक बटन के लिए 1000 परतों से बना है, तो यह व्यावहारिक रूप से बेकार होगा, इस मामले में बटन को स्मार्ट ऑब्जेक्ट में जोड़ने की सिफारिश की गई है। इसके अलावा, उपकरण को UI डिजाइनर से एक सामान्य और सही नामकरण की आवश्यकता होती है - अब परतों को "Rectangle_copy_21_1005" नाम देना संभव नहीं होगा। दूसरी ओर, यह अन्य UI डिजाइनरों के लिए लेआउट को अधिक पठनीय बनाता है।
योजनाओं को एक प्रणाली के साथ आना है जो सब्सट्रेट स्प्राइट के निर्यात से बचाएगा।
इस लेख से ऑटो-निर्माता पॉपअप के साथ लेआउट में 3 मिनट 13 सेकंड का समय लगा (परियोजना में स्प्राइट्स को छोड़कर)। पेन में 18 मिनट 32 सेकंड लगते हैं। इसी समय, पेन के साथ लेआउट में भी समस्याएं हैं - कुछ स्थानों पर, गलत स्थिति जो एक यूआई डिजाइनर की गहरी नजर को नोटिस करेगी और फिर से बनाना होगा। इसलिए, स्वचालित लेआउट भी अच्छा है क्योंकि यह मानव कारक को समाप्त करता है।
और ऑटो-निर्माता के बारे में कुछ समीक्षाएं:
"ऑटो-निर्माता काफी तेजी से काम करते हैं, लेकिन अभी तक, ऐसा लगता है कि प्रवेश, स्थापना और स्थापना की दहलीज को सरल करना आवश्यक है"
"मुझे लगता है कि यदि आप टाइप्टर के लिए शैलियों की स्थापना करते हैं, तो यह समय में बहुत अंतर नहीं है, लेकिन डिजाइनर और प्रोग्रामर सुनिश्चित करने के लिए समय और तंत्रिकाओं को बचाएंगे"
"बात बहुत मस्त है))"
“शैलियाँ - विषय बहुत अच्छा है, यह हमारी परियोजना में पर्याप्त नहीं है, क्योंकि वे लेआउट, ग्रंथों आदि पर बटन को फिर से रंगना पसंद करते हैं। यह बहुत अच्छा है कि अब इसे स्टाइलिस्ट में तय किया जा सकता है और कोई सिरदर्द नहीं है, कि आपके पास अलग-अलग रंग हैं या वर्दी में अलग-अलग स्प्राइट हैं]
“यूआई डिजाइनरों को खुद लेआउट करना चाहिए, क्योंकि केवल वे अपने लेआउट की विशेषताओं को जानते हैं। और ऑटो-लेआउट डिजाइनर उन लोगों के लिए बहुत अच्छी बात है जो लेआउट की पेचीदगियों को समझना नहीं चाहते हैं। यदि इंस्ट्रूमेंट में एक सहज ज्ञान युक्त अंतरफलक है और यह फिम्मा से सीखता है, तो यह केवल शानदार होगा। "
व्यक्तिगत रूप से, मुझे लगता है कि जो कुछ भी स्वचालित हो सकता है वह स्वचालित होना चाहिए, और लोगों को अधिक रचनात्मक और आविष्कारशील कार्य में संलग्न होने का अवसर दिया जाना चाहिए।