Terevaka - मोबाइल प्लेटफ़ॉर्म के लिए Lua पर एक उच्च-स्तरीय रूपरेखा

प्रिय दोस्तों, आज मैं आपको अपने स्वयं के डिजाइन के मोबाइल प्लेटफार्मों के लिए लुआ पर उच्च-स्तरीय ढांचे के बारे में बताऊंगा। जैसा कि आप शायद नाम से अनुमान लगाते हैं, यह रूपरेखा ग्राफिक्स के प्रतिपादन के लिए और सिस्टम के साथ बातचीत के लिए एक और निम्न-स्तरीय रूपरेखा का उपयोग करती है। इसकी गुणवत्ता एमओएआई है। इसके साथ एक न्यूनतम परिचित के लिए, मैं अपने पिछले लेख habrahabr.ru/post/176765 को पढ़ने की सलाह देता हूं

सबसे पहले, नए ढांचे को किन कार्यों को हल करना चाहिए?
सबसे पहले, स्क्रीन विखंडन के साथ समस्याएं। और दूसरी बात (टा-डैम), मैं सबसे सरल, चित्रमय इंटरफ़ेस संपादक के साथ कुछ करना चाहता था। तीसरा, रूपरेखा को समग्र रूप से अनुप्रयोग की वास्तुकला और फ़ाइल संरचना को परिभाषित करना था। मैं यह कहना चाहता हूं कि कोड थोड़ा कम (600 लाइनों से कम) निकला, इसलिए, भले ही ढांचा आपके अनुरूप न हो, लेकिन यह पता लगाना मुश्किल नहीं होगा कि इसके साथ कैसे काम किया जाए और अपनी आवश्यकताओं को पूरा करने के लिए इसे तेज किया जाए।
चेतावनी: परिदृश्य अनुप्रयोगों के लिए रूपरेखा को तेज किया जाता है, इसलिए यदि आपको पोर्ट्रेट मोड की आवश्यकता है, तो आपको इसे अंतिम रूप देने में कुछ समय बिताना होगा।


स्क्रीन के विखंडन पर वापस।
विखंडन समस्या को हल करने के लिए, आवेदन को ध्यान में रखना होगा:

• विभिन्न स्क्रीन आकार
• अलग-अलग अनुमति
• अलग-अलग अनुपात

इन तीनों समस्याओं को हल करने के लिए एक झटके में, कोरोना SDK या Gideros पूरे आवेदन के लिए स्केलिंग नीति चुनने का सुझाव देता है। इनमें से सबसे पर्याप्त मोड तथाकथित लेटरबॉक्स है। यह तब होता है जब एप्लिकेशन स्क्रीन के आकार में समान रूप से छोटा होता है, लेकिन उसी समय अनुपात के बेमेल होने के मामले में किनारों पर काली पट्टियाँ बनी रहती हैं।
MOAI में ऐसा कोई मोड नहीं है, लेकिन एक स्निपेट है कि इसे कई लाइनों में कैसे लागू किया जाए, व्यूपोर्ट मापदंडों में हेरफेर किया जाए।
यह स्पष्ट है कि इस तरह के एक आधे उपाय वास्तव में एक अच्छे आवेदन को संतुष्ट नहीं कर सकते हैं। मोबाइल उपकरणों की स्क्रीन पहले से ही छोटी हैं, ताकि उनके क्षेत्र को काली धारियों द्वारा खाया जाए।
जाहिर है, कोई भी एक लोचदार लेआउट के बिना नहीं कर सकता (हम आकार / अनुपात की समस्या को हल करते हैं)।
अलग-अलग स्क्रीन रिज़ॉल्यूशन के लिए, यह अलग-अलग ग्राफिक्स या इसके स्केलिंग के सेट द्वारा आसानी से हल किया जाता है। हालांकि, एंड्रॉइड / आईओएस में, ये तंत्र अलग तरीके से काम करते हैं, इसलिए आपको इसे स्वयं लागू करना होगा।

स्प्राइट ग्राफिक्स एडिटर

आलेखीय संपादक PyQt का उपयोग करके लिखा गया था। यह काफी सरल है और केवल स्प्राइट्स, अर्थात् चित्रों को हेरफेर कर सकता है।
MOAI टेक्स्ट डिस्प्ले का समर्थन करता है, लेकिन न तो ग्राफिकल एडिटर और न ही टेरेवाका इसे प्रदर्शित कर सकते हैं। व्यवहार में, इसका मतलब है कि यदि आपको बटन के ऊपर पाठ लगाने की आवश्यकता है, तो आपको बटन के स्प्राइट को लोड करने के बाद इस कार्यक्रम को करने की आवश्यकता है (या सीधे बटन के स्प्राइट, लोल पर पाठ को डालें)।
फिर भी, ग्राफिक संपादक एक शक्तिशाली उपकरण है, क्योंकि यह न केवल तत्वों को ग्राफिक रूप से रखने की अनुमति देता है, बल्कि कार्यक्रम के तर्क से दृश्य को अलग करने के लिए भी है।
आलेखीय संपादक एक JSON फ़ाइल में प्रोजेक्ट फ़ाइल संग्रहीत करता है और एक फ़ाइल - एक परत के सिद्धांत के अनुसार Terevaka आंतरिक प्रतिनिधित्व (Lua फ़ाइल) को परत निर्यात करता है।

परतें दो प्रकार की होती हैं - लोचदार और स्केलेबल।
लोचदार परत, जब प्रदर्शित होती है, स्नैप के किनारों के आधार पर तत्वों को रखती है। यानी यदि आप ऊपरी दाएं कोने का पालन करते समय तत्व चाहते हैं, तो आपको इस कोने के सापेक्ष निर्देशांक निर्दिष्ट करने की आवश्यकता है।
उदाहरण, संपादक में एक परत:

Iphone 3.5 इंच:

Iphone 4 इंच:

ipad:


एक स्केलेबल परत एक अन्य प्रकार की परत होती है जो समानुपातिक रूप से, एक लेटरबॉक्स की तरह होती है। उदाहरण के लिए, यह मुख्य मेनू को स्केलेबल परत के साथ करने के लिए समझ में आता है, लेकिन पृष्ठभूमि, हालांकि, पूर्ण स्क्रीन में बेहतर है।
उदाहरण, संपादक में एक परत:

Iphone 3.5 इंच:

Iphone 4 इंच:

ipad:

संपादक में, स्केलेबल परत का अनुपात 427x320 तय किया गया है। ये iPad के अनुपात हैं, जो iPhone के आकार तक कम हो जाते हैं। आप अपने लिए अधिक सुविधाजनक विकल्प चुन सकते हैं, लेकिन आपको ग्राफिक्स के संकल्प के बारे में याद रखने की आवश्यकता है, जिसका उपयोग डिजाइनर और सीधे आवेदन में किया जाएगा। अपने लिए, मैं 853x640 का उपयोग करता हूं (मुझे ग्राफिक्स एडिटर के सोर्स कोड में पैरामीटर को सीधे बदलने की आवश्यकता है) और रेटिना एडिटर में ग्राफिक्स भरें। आवेदन में ही, एक नियम के रूप में, मैं और भी अधिक रिज़ॉल्यूशन के बनावट का उपयोग करता हूं ताकि ग्राफिक्स बड़ी रेटिना स्क्रीन के अनुरूप हो, और परत लोडिंग के दौरान मैं डीपीएम्टीप्लायर पैरामीटर निर्दिष्ट करता हूं ताकि स्प्राइट सही आकार लोड करें।
मेरे द्वारा 427x320 आबादी को हार्डकोड करने का कारण यह है कि आकार / प्रस्तावों के साथ भ्रमित होना आसान है, इसलिए कौन जानता है कि क्या है, वे यह पता लगाएंगे कि इसे आपके मामले में कैसे अनुकूलित किया जाए।

इसलिए, दृष्टिकोणों को मिलाकर, आप जल्दी से लचीले ग्राफिक्स बना सकते हैं।
परतों वाली फाइलें Android के समान ./res/layout/ निर्देशिका में संग्रहीत की जाती हैं।

स्क्रीन रिज़ॉल्यूशन का विखंडन

विभिन्न स्क्रीन रिज़ॉल्यूशन ग्राफिक्स के दोहरे सेट द्वारा समर्थित हैं।
एक नियमित रिज़ॉल्यूशन का ग्राफिक्स सेट ./res/drawable-mdpi/ में संग्रहीत किया जाता है, और एक रेटिना में / .res/drawable-xhdpi/ पर होता है। यदि स्क्रीन रिज़ॉल्यूशन इनमें से एक से मेल नहीं खाता है, तो सबसे उपयुक्त सेट लिया और स्केल किया जाएगा। निर्देशिका ./res/drawable-ldpi और ./res/drawable-hdpi अभी तक इंजन द्वारा समर्थित नहीं हैं।
एक महत्वपूर्ण बिंदु - एक परत को लोड करते समय, एक बुनावट में पैक किए गए स्प्राइट्स का उपयोग करने की सलाह दी जाती है ताकि खपत की गई मेमोरी की मात्रा का अनुकूलन किया जा सके। फ्रेमवर्क एमएएआई प्रारूप का समर्थन करता है जिसमें पेड टेक्सचरपैकर कन्वर्ट कर सकता है।
चेतावनी: खाली क्षेत्रों को हटाने के लिए TexturePacker में बनावट पैकिंग का उपयोग न करें, क्योंकि MOAI प्रारूप में निर्यातक में एक बग है और ग्राफिक्स अंततः फ्लोट करेगा।

अनेक वस्तुओं का संग्रह

एक परत से स्प्राइट प्राप्त करने के लिए, findPropById फ़ंक्शन का उपयोग करें (फिर से, एंड्रॉइड के साथ एक सादृश्य)
स्प्राइट पर क्लिक करने से निपटने के लिए, बस एक विशेष कॉलबैक संलग्न करें (तेरवाका-नमूनों में उदाहरण देखें)।
तेरवाका-नमूने परियोजना में विभिन्न अन्य उपयोग उदाहरण देखें। उदाहरण को चलाने के लिए, उदाहरण के फ़ोल्डर में टेरेअवाका की प्रतिलिपि बनाएँ, या बेहतर अभी तक, इसमें एक सिमलिंक बनाएं।
विभिन्न स्क्रीन के तहत एप्लिकेशन का परीक्षण करने के लिए, आपको कई अलग-अलग उपकरणों की आवश्यकता नहीं है - लॉन्च प्रोफाइल का उपयोग करें। समाप्त प्रोफ़ाइल निर्देशिका में हैं ।/terevaka/profiles
एक प्रोफ़ाइल के साथ शुरू करने के लिए, moai का उपयोग करें ।/terevaka/profiles/ipad.lua main.lua कमांड, जहां ipad.lua iPad प्रोफ़ाइल है। किसी प्रोफ़ाइल में आमतौर पर 3-4 लाइनें होती हैं, आप आसानी से अपनी प्रोफ़ाइल बना सकते हैं।
Ui बिल्डर के लिए स्प्राइट्स को mdpi रिज़ॉल्यूशन में सहेजने की आवश्यकता है।

सारांश

प्रारंभ में, परियोजना मेरे नए गेम के कोड से कुछ सामान्य कोड के चयन के रूप में शुरू हुई। दोनों ही कोड और इसके लिए आवश्यकताओं की संरचना करने के प्रयास में, उन्होंने फ्रेमवर्क के उद्भव का नेतृत्व किया, और फिर, मेरे पुराने विचारों और ग्राफिक डिजाइनर का उपयोग किया। इसके अलावा, MOAI को ही अंतिम रूप दिया जाना था, हालांकि, इसके डेवलपर्स की त्वरित प्रतिक्रिया के लिए धन्यवाद, सभी परिवर्तन पहले से ही मुख्य रिपॉजिटरी में किए गए हैं।
इसके अलावा - यह एक प्रदर्शनकारी अनुभव है कि आपको अपने पुस्तकालयों को लिखने से डरने की ज़रूरत नहीं है यदि आप उनके लिए आवश्यकताओं को स्पष्ट रूप से समझते हैं, और यदि आप एक स्क्रिप्टिंग भाषा में लिखते हैं :)

संदर्भ

तेरवका: जीथुब.नेफरहोतेप / तेरवका
नमूने: github.com/Nepherhotep/terevaka-samples
यूआई बिल्डर: github.com/Nepherhotep/terevaka-ui-builder
आधिकारिक MOAI: github.com/moai/moai-dev
मेरा कांटा: github.com/Nepherhotep/moai-dev