LibGDX ट्यूटोरियल - एक यूजर इंटरफेस बनाना भाग 1

LibGDX लाइब्रेरी के साथ आगे काम करते हुए, मुझे com.badlogic.gdx.scenes.scene2d.ui पैकेज मिला। यह पैकेज यूजर इंटरफेस बनाने के लिए बनाया गया है। और यहाँ निराशा ने मेरा इंतजार किया: कोई ट्यूटोरियल लेख नहीं है। इसलिए, मैंने सूत्रों और जावदॉक प्रलेखन का उपयोग करते हुए पैकेज के साथ स्वतंत्र रूप से निपटने का फैसला किया। यही है, यह दृश्य 2d.ui पर एक ट्यूटोरियल होगा, लेकिन अनुवाद नहीं। यहां मैं विस्तार से वर्णन नहीं करूंगा, विधायक, विधियां, विस्तृत हस्ताक्षर प्रदान करेंगे। मैं एक पक्षी की आंखों का दृश्य लेने की कोशिश करूंगा, क्योंकि सिद्धांतों को जानने के बाद, आप हमेशा प्रलेखन से अधिक सीख सकते हैं। लेकिन इस दृष्टिकोण के साथ, बहुत अधिक सामग्री है, इसलिए मैं इसे दो (संभवतः अधिक) लेखों में तोड़ दूंगा।

पिछले लेख को याद करें और हमने स्टेज क्लास के बारे में क्या कहा। स्टेज वर्ग में अभिनेता (अभिनेता) शामिल और प्रबंधित हो सकते हैं। एक समूह वर्ग भी है, जो एक अभिनेता और एक अभिनेता के लिए एक कंटेनर है। तो, दृश्य 2d.ua पैकेज से सभी दृश्य घटक या तो अभिनेता या समूह से विरासत में मिले हैं। तदनुसार, समूह वारिस में अन्य घटक शामिल हो सकते हैं। हम बाद में इन घटकों को देखेंगे, और अब अभिनेता के उत्तराधिकारियों पर एक नज़र डालेंगे। प्रत्यक्ष वंशज विजेट वर्ग है, और निम्नलिखित छह घटक इसे विरासत में मिले हैं: लेबल, टेक्स्टफिल्ड, छवि, सूची, चयन बॉक्स, स्लाइडर।

यह ध्यान दिया जाना चाहिए कि सभी दृश्य घटक लेआउट इंटरफ़ेस को लागू करते हैं। यह इंटरफ़ेस कंटेनर घटकों में घटकों के सही स्थान के लिए आवश्यक है। यह एक घटक को फिर से तैयार करने के लिए तरीके प्रदान करता है, पसंदीदा, न्यूनतम, अधिकतम आकार निर्धारित करता है।

एक और महत्वपूर्ण अवधारणा शैली है। अंदर, लगभग हर ग्राफिक घटक में एक स्थिर वर्ग होता है जिसे <ComponentName> शैली कहा जाता है। उदाहरण के लिए, LabelStyle। यह वर्ग इस वर्ग के सही संचालन के लिए आवश्यक संसाधनों को संग्रहीत करता है - उदाहरण के लिए, फ़ॉन्ट, फ़ॉन्ट रंग, आदि। तथ्य यह है कि ओपनजीएल सीधे फोंट को प्रस्तुत नहीं कर सकता है, इसलिए कुछ अतिरिक्त तंत्र की आवश्यकता है। स्पष्ट विकल्प अक्षरों की छवियों और एक पाठ फ़ाइल के साथ एक चित्र बनाना है जो बताता है कि कौन सा पत्र कहाँ स्थित है। फिर इस विवरण से आप एक वर्ग बना सकते हैं जो व्यक्तिगत पत्र-चित्रों से पाठ की पंक्तियों का "निर्माण" कर सकता है। यहाँ लेबल क्लास से LabelStyle वर्ग का एक उदाहरण दिया गया है:

static public class LabelStyle { public BitmapFont font; /** Optional. */ public Color fontColor; public LabelStyle () { } public LabelStyle (BitmapFont font, Color fontColor) { this.font = font; this.fontColor = fontColor; } } 

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

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

 { resources: { com.badlogic.gdx.graphics.Color: { black: { r: 0, g: 0, b: 0, a: 1 } }, com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } } }, styles: { com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { default: { font: default-font, fontColor: black } } } } 

कुछ टिप्पणियाँ। यह फाइल JSON फॉर्मेट में लिखी गई है। पहला खंड संसाधन है। काला RGBA मॉडल में परिभाषित रंग है। डिफ़ॉल्ट-फ़ॉन्ट फ़ॉन्ट का नाम है। मैंने com.badlogic.utils पैकेज से फ़ॉन्ट लिया, जहाँ उन्हें arial-15.fnt और arial-15.bng कहा जाता था। दूसरा खंड सीधे शैलियों का है। यहां हमने एक फ़ॉन्ट की पहचान की है जिसे फ़ॉन्ट और फ़ॉन्ट रंग दिया गया है। ध्यान दें कि फ़ाइल में फ़ील्ड्स के नाम शैली वर्गों में सार्वजनिक फ़ील्ड्स के नामों के अनुरूप हैं। आप प्रत्येक घटक के लिए अलग-अलग नामों से कई शैलियों को परिभाषित कर सकते हैं। आप त्वचा वर्ग के getStyle (वर्ग प्रकार, स्ट्रिंग नाम) विधि का उपयोग करके वांछित शैली प्राप्त कर सकते हैं। डिफ़ॉल्ट रूप से, आप कंस्ट्रक्टर के लिए स्किन कंपोनेंट पास करते हैं और उसमें से कंपोनेंट डिफ़ॉल्ट नामक एक स्टाइल लेता है।

सेटिंग्स फ़ाइल के लिए, यह आवश्यक है कि उसी नाम की छवि फ़ाइल उसी निर्देशिका में हो, लेकिन एक्सटेंशन png के साथ। यदि, उदाहरण के लिए, आपने सेटिंग फ़ाइल का नाम SimpleSkin रखा है, तो ग्राफ़िक फ़ाइल को SimpleSkin.png कहा जाएगा। यदि आप TextureRegion जैसे संसाधनों का उपयोग करते हैं तो यह आवश्यक है। इस फ़ाइल के बिना, प्रोग्राम एक अपवाद फेंक देगा और शुरू नहीं होगा।

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

अब हम व्यक्तिगत घटकों, उनकी शैलियों और उपयोगों के बारे में अधिक विस्तार से बात करते हैं।

लेबल

यह शब्दों में पाठ को लपेटने की क्षमता वाला एक सरल पाठ लेबल है। इसके कई डिज़ाइनर हैं, सबसे महत्वपूर्ण, मेरी राय में, निम्नलिखित दो:

 public Label (Skin skin) 

- पाठ के बिना एक लेबल बनाता है।

 public Label (String text, Skin skin) 

- पाठ के साथ एक लेबल बनाता है।
शैली को सेट करने और वापस करने के लिए विधियाँ हैं - setStyle (), getStyle (), टेक्स्ट सेटटेक्स्ट () सेट करने के लिए एक विधि, और setWrapt () के अनुसार रैपिंग सेट करने की विधि। डिफ़ॉल्ट रूप से, शब्द रैप अक्षम है। इसका उपयोग करने के लिए, पहले पसंदीदा आकार को लेबल (पसंदीदा आकार) पर सेट करें।
अन्यथा, घटक के गुण विशेष रुचि के नहीं हैं, इसके स्थान का नियंत्रण, रोटेशन आदि। अभिनेता वर्ग के समान ही लागू किया गया।

घटक शैली वर्ग। जाहिर है, वह केवल एक फ़ॉन्ट और फ़ॉन्ट रंग की जरूरत है।

 ... static public class LabelStyle { public BitmapFont font; /** Optional. */ public Color fontColor; public LabelStyle () { } public LabelStyle (BitmapFont font, Color fontColor) { this.font = font; this.fontColor = fontColor; } } ... 

सेटिंग्स फ़ाइल से इस वर्ग के अनुरूप संसाधन:

 resources: { com.badlogic.gdx.graphics.Color: { black: { r: 0, g: 0, b: 0, a: 1 } }, com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } } }, styles: { com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { default: { font: default-font, fontColor: black } } } 

उपयोग उदाहरण:

 ... Skin skin = new Skin(Gdx.files.internal("data/skins/SimpleSkin")); Label label = new Label("I am label", skin); label.x = 10; label.y = 10; stage.add(label); ... 

TextField

अगली कक्षा TextField है। यह एक टेक्स्ट इनपुट फील्ड है। यह वर्ग पहले से ही अधिक दिलचस्प है, क्योंकि आप इसे सुनने वाले को असाइन कर सकते हैं। LibGDX लाइब्रेरी को "सब्सक्राइबर-रीडर्स" पैटर्न का उपयोग करके लिखा गया था, लेकिन सीमित - आप केवल एक श्रोता स्थापित कर सकते हैं। श्रोता setTextFieldListener () विधि द्वारा निर्धारित किया जाता है, जो कि TextFieldListener प्रकार के एक पैरामीटर को स्वीकार करता है। यह इंटरफ़ेस है, यहाँ इसका कोड है:

 ... static public interface TextFieldListener { public void keyTyped (TextField textField, char key); } ... 

जाहिर है, एक घटना संसाधित होती है - चरित्र दर्ज किया जाता है।

क्लास में कई कंस्ट्रक्टर हैं। हम दो मुख्य बातों का वर्णन करेंगे, मेरी राय में:

 TextField(String text, Skin skin) 

- पाठ के साथ एक पाठ बॉक्स बनाता है

 TextField(Skin skin) 

- एक खाली टेक्स्ट फ़ील्ड बनाता है

कुछ वर्ग विधियाँ:

 setText() 

- पाठ सेट करता है

 setPasswordMode() 

- पाठ के बजाय, सेटपासवर्डचैटर () पद्धति का उपयोग करके आपके द्वारा चुने गए वर्ण प्रदर्शित किए जाएंगे

 setMessageText() 

- एक संकेत पाठ सेट करता है जो प्रदर्शित किया जाएगा यदि आपने पाठ बॉक्स में कुछ भी दर्ज नहीं किया है।

TextField मानक कुंजी के साथ एक पीसी पर पाठ की प्रतिलिपि बनाने और चिपकाने का समर्थन करता है। Android पर, Android सीमाओं के कारण कॉपी करना और चिपकाना समर्थित नहीं है।

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

 ... static public class TextFieldStyle { /** Optional. */ public NinePatch background, cursor; public BitmapFont font; public Color fontColor; /** Optional. */ public TextureRegion selection; /** Optional. */ public BitmapFont messageFont; /** Optional. */ public Color messageFontColor; ... 

सेटिंग्स फ़ाइल से संसाधन:

 ... com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: { default: { font: default-font, fontColor: black } } ... 

और उपयोग का एक उदाहरण:

 ... TextField textField = new TextField("I am text field", skin); textField.y = 30; stage.addActor(textField); ... 

छवि

इमेज क्लास उन कुछ में से एक है जिन्हें अपने काम के लिए स्टाइल की आवश्यकता नहीं है। इसलिए, इसका विवरण काफी संक्षिप्त होगा। आप कई डिजाइनरों द्वारा इस वर्ग का एक ऑब्जेक्ट बना सकते हैं, सबसे सरल में से एक छवि (टेक्सचररेजियन क्षेत्र) है। वर्ग ClickListener प्रकार के श्रोता का समर्थन करता है। यहाँ इस इंटरफ़ेस के लिए स्रोत है:

 ... public interface ClickListener { public void click (Actor actor, float x, float y); } ... 

यही है, हम अपनी छवि पर क्लिक घटनाओं को संभाल सकते हैं।

एक उपयोगी विधि सेटरीजन () है, जो आपको छवि को बदलने की अनुमति देती है। आप डिजाइनर को बनावट और उसके क्षेत्र दोनों में पास कर सकते हैं। हालांकि, स्केलिंग, रोटेशन केवल एक बनावट क्षेत्र के मामले में काम करेगा।

उपयोग उदाहरण:

 ... Image image = new Image(new Texture(Gdx.files.internal("data/skins/default.png"))); image.y = 100; stage.addActor(image); ... 

यह बनावट के लिए एक पैरामीटर के रूप में बनावट का उपयोग करता है। वास्तविक अनुप्रयोगों में, TextureRegion का उपयोग करना बेहतर है।

सूची

सूची वर्ग एक विशिष्ट फ़ील्ड का चयन करने की क्षमता के साथ पाठ फ़ील्ड की एक सूची है। डेल्फी से सूची स्विंग, या सूची बॉक्स का एनालॉग।
परंपरागत रूप से, इसके कई निर्माता हैं, सरलतम सूची (ऑब्जेक्ट [] आइटम, त्वचा की त्वचा) में से एक। यह आइटम सरणी से एक सूची से एक ऑब्जेक्ट बनाता है। आप getSelection () पद्धति का उपयोग करके चयनित तत्व का पता लगा सकते हैं, और इसका सूचकांक getSelectedIndex () है। आप setItems () विधि का उपयोग करके एक नई सूची सेट कर सकते हैं; आप किसी भी आइटम को नाम या इंडेक्स द्वारा सेट कर सकते हैं: setSelection (), setSelectionIndex ()। सूची सूची सूची श्रोता का समर्थन करता है। कक्षा स्रोत:

 ... public interface SelectionListener { public void selected (Actor actor, int index, String value); } ... 

किसी आइटम का चयन करने पर चयनित () विधि को कहा जाता है।

यहाँ एक शैली वर्ग है:

 ... static public class ListStyle { public BitmapFont font; public Color fontColorSelected = new Color(1, 1, 1, 1); public Color fontColorUnselected = new Color(1, 1, 1, 1); public NinePatch selectedPatch; ... 

जैसा कि हम देख सकते हैं, रंगों को पहले से ही प्रारंभ किया गया है, लेकिन फ़ॉन्ट और चयनितपैक का वर्णन करना होगा। NinePatch के बारे में एक छोटा सा विषयांतर। यह एक नियमित छवि (.png) है, जिसमें 1-पिक्सेल किनारों में कुछ ओवरहेड जानकारी होती है। इस छवि का उपयोग चयनित आइटम के लिए किया जाता है। आप यहाँ अधिक विवरण पढ़ सकते हैं habrahabr.ru/post/113623 यहाँ सेटिंग्स फ़ाइल से अंश हैं जो हमारी सूची के लिए जिम्मेदार हैं:

 ... com.badlogic.gdx.graphics.g2d.NinePatch: { default-nine : [ {width: 100, height: 100, x: 0, y: 0} ] } ... com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: { default: { font: default-font, selectedPatch: default-nine } } ... 

और यहाँ एक उपयोग उदाहरण है:

 ... List list = new List(new String[] {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"}, skin); list.x = 300; stage.addActor(list); ... 

selectbox

SelectBox वर्ग कई तत्वों की एक ड्रॉप-डाउन सूची है। निष्क्रिय अवस्था में, यह एक पंक्ति है जो चयनित आइटम को दिखाती है। जब हम इसे सक्रिय करते हैं, तो हमें उन तत्वों की एक सूची दिखाई जाती है जिन्हें दबाकर चुना जा सकता है। इसके कई निर्माता हैं, सबसे सरल - SelectBox (ऑब्जेक्ट [] आइटम, त्वचा की त्वचा) - तत्वों की एक ड्रॉप-डाउन सूची बनाता है। पहले आइटम को चयनित माना जाता है। शेष कक्षा सूची के समान है। यह सूची-चयनकर्ता के रूप में समान श्रोताओं का समर्थन करता है, सूची आइटम में हेरफेर करने के लिए समान तरीके हैं। यहाँ एक शैली वर्ग है:

 ... static public class SelectBoxStyle { public NinePatch background; public NinePatch listBackground; public NinePatch listSelection; public BitmapFont font; public Color fontColor = new Color(1, 1, 1, 1); public float itemSpacing = 10; ... 

जैसा कि हम देख सकते हैं, तीन NinePatch-a और एक फ़ॉन्ट को अनिवार्य आरंभीकरण की आवश्यकता है।

यहाँ सेटिंग्स फ़ाइल से अंश हैं:

 ... com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: { default: { font: default-font, background: default-nine, listBackground: default-nine, listSelection: default-nine } } ... 

उपयोग उदाहरण:

 ... SelectBox selectBox = new SelectBox(new String[] {"Item 1", "Item 2", "Item 3"}, skin); selectBox.x = 400; stage.addActor(selectBox); ... 

स्लाइडर

अंतिम विजेट वंशज वर्ग। स्लाइडर वर्ग अधिकतम और न्यूनतम मूल्यों वाला एक स्लाइडर है। उपयोगकर्ता स्लाइडर के मूल्य को ड्रैग और ड्रॉप करके बदल सकता है। कक्षा में अधिकतम, न्यूनतम मान, चरणों की संख्या के विनिर्देश के साथ कई निर्माता हैं। सबसे सरल है स्लाइडर (त्वचा की त्वचा)। यह 100 के अधिकतम ग्रेड के साथ 100 के अधिकतम मान और न्यूनतम 0 के साथ एक स्लाइडर बनाएगा। वर्ग मान परिवर्तन की घटनाओं का उपयोग कर मान को बदल सकता है मान ValueChangedListener के एक वर्ग का उपयोग करके:

 ... static public interface ValueChangedListener { public void changed (Slider slider, float value); } ... 

जब आप स्लाइडर का मान बदलते हैं, तो परिवर्तित () विधि कहा जाता है।

एक शैली वर्ग को दो मापदंडों की आवश्यकता होती है:

 ... static public class SliderStyle { NinePatch slider; // .    . TextureRegion knob; //  ,   . ... 

यहाँ सेटिंग्स फ़ाइल से कोड के टुकड़े हैं:

 ... com.badlogic.gdx.graphics.g2d.TextureRegion: { default-region: {width: 10, height: 12, x: 0, y: 0} } ... com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: { default: { slider: default-nine, knob: default-region } } ... 

और यहाँ एक उपयोग उदाहरण है:

 ... Slider slider = new Slider(skin); stage.addActor(slider); ... 

दृश्य 2d.ui पैकेज समीक्षा का पहला भाग पूरा हो गया है। मैं आपको याद दिला दूं कि हमने केवल उन वर्गों पर विचार किया है जो विजेट से विरासत में मिले हैं। अभी भी कंटेनर कक्षाओं का एक बड़ा आधा हिस्सा है - खिड़कियां, सूचियां, स्क्रॉल करने योग्य सूची, पैनल, आदि। इनमें (बटन) बटन शामिल हैं। जैसे ही समय प्रकट होता है, मैं एक अगली कड़ी लिखूंगा, जहां मैं शेष कक्षाओं पर विचार करूंगा।

आवेदन: अवसरों के प्रदर्शन के साथ एक परियोजना।
परिशिष्ट: मेरे द्वारा ArgoUML कार्यक्रम में संकलित वर्ग आरेख।