GUI तत्वों के बारे में कैसे जाना जाए?


12

नोट: मैं अपना GUI सिस्टम बनाने की योजना बना रहा हूं। यह सीखने के लिए अच्छा होगा, हल्का, केवल बिट्स की आवश्यकता है, खेल के साथ संबंध, आदि।

मैं सोच रहा था कि यह कैसे करना है। मेरा मतलब तत्व हैं:

  • रेडियो के बटन
  • यहां बॉक्स में टेक्स्ट डालें
  • बटन
  • स्लाइडर्स
  • चेक बॉक्स

मैं उन्हें बनाने के लिए नहीं देख रहा हूँ, फिर भी। लेकिन वे कैसे जाएंगे।

विचार

मेरे पास प्रत्येक राज्य होगा जिसमें सामान की आवश्यकता होती है, इसलिए लगभग सभी, तत्वों का एक कंटेनर होता है। प्रत्येक तत्व एक GUI टुकड़ा है।

इन प्रत्येक की स्थिति, एक ग्राफिक आदि है।

जिस बिट पर मैं ज्यादा अटक जाता हूं, वह है उनका तर्क।

उस के लिए मेरा विचार, प्रतिरूपकता और सादगी के लिए अनुमति देने के लिए एक MainMenuStartButton से बचने के लिए था; एक OptionsOneBackButton, आदि और इसके बजाय स्लाइडर स्लाइडर 1 करने में सक्षम हो; या बटन प्रारंभ।

इसके बजाय, प्रत्येक के पास GUI नामस्थान में एक फ़ंक्शन :: फ़ंक्शन को फ़ंक्शन करना होगा, जैसे Gui :: StartButtonClick, या GUI :: ColourSliderHover।

मैं बस सोच रहा था कि यह असाधारण रूप से धीमा होगा या नहीं।

और उस बात के लिए, क्या गेम्स के लिए GUI करने का कोई आसान, सरल तरीका है? कोई Qt, wxWidgets या कुछ भी नहीं।

जवाबों:


15

GUI एक आसान या सरल समस्या नहीं है, खासकर जब आप गेम में आते हैं और गतिशील, दिलचस्प मेनू की इच्छा रखते हैं।

एक "आसान" चीज जो आप कर सकते हैं वह है मिडलवेयर का उपयोग करने का प्रयास। यहाँ उस पर एक सवाल है

यदि आप इसे स्वयं रोल करने जा रहे हैं, तो कुछ चीजें हैं जो मैं सुझाऊंगा।

  • जीयूआई तत्वों में आम तौर पर एक "माता-पिता" होता है, या तो एक और जीयूआई तत्व या एक "विंडो", या ऐसा कुछ। या तो नीचे इंगित करने या मूल बिंदु होने का अर्थ है कि आप उस बच्चे के बारे में सब कुछ बता सकते हैं।

  • आप GUI तत्वों को संरचना द्वारा बना सकते हैं। बहुत सारे विगेट्स में लेबल होते हैं (उनमें से बहुत सारे), और यह एक कोड या किसी अन्य UI तत्वों के बच्चे को कोड की कॉपी / पेस्ट करने या बेस क्लास से विरासत में लेने की कोशिश करने के लिए एक घटक या अपने यूआई तत्वों के एक बच्चे की अवधारणा बनाने के लिए समझ में आ सकता है। लेबल कार्यक्षमता के साथ।

  • तथाकथित विशिष्ट विजेट के बहुत सारे भेस में बटन हैं। चेकबॉक्स केवल राज्यों और विशेष छवियों वाले बटन हैं। रेडियो बटन सिर्फ चेकबॉक्स होते हैं जिनकी मेटा-स्थिति होती है (एक और केवल एक किसी भी समय सक्रिय होता है) अन्य रेडियो बटन के साथ। इसका प्रयोग अपने लाभ के लिए करें। एक गेम में मैंने काम किया, "चेकबॉक्स" पूरी तरह से स्क्रिप्टिंग और कला के माध्यम से नियमित बटन के साथ किया गया था।

  • अपनी पहली परियोजना के लिए, अधिक प्रत्यक्ष मार्ग लेने पर विचार करें। हां, अपनी क्रियाशील घटनाओं को प्रतिनिधि बनाएं और असाइन करें कि आपको तत्व निर्माण (यानी onMouseButtonDown, onMouseButtonUp, onHover इत्यादि) की आवश्यकता है, लेकिन केवल हार्ड कोडिंग पर विचार करें, जो आप अन्यथा होना चाहते हैं (यानी रंग बदलते हैं, बटन दबाएं) जब तक आपको कुछ न मिले। कार्यात्मक। एक बार जब आप उस बिंदु पर होते हैं, तो उस व्यवहार डेटा को बनाने पर विचार करें (यानी "प्रेस साउंड" के लिए बटन पर एक चर है, या शायद उन घटकों पर विचार करें जो आपके यूआई तत्व व्यवहार को परिभाषित करने के लिए उपयोग करते हैं जो आप उन्हें बनाते समय केवल उन्हें देते हैं।

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


2
अधिक जटिल GUI सामान के लिए आपको जल्द ही किसी प्रकार के लेआउट-प्रबंधन की आवश्यकता होगी। एचबीओक्स और वीबॉक्स जैसे बुनियादी लेआउट पूर्ण निर्देशांक वाले सभी तत्वों की स्थिति की तुलना में उपयोग करना बहुत आसान है। उदाहरण: web.archive.org/web/20100410150433/http://doc.qt.nokia.com/4.6/… जो आपके GUI को उपयोग में आसान बनाता है, लेकिन लागू करने में इतना आसान नहीं;)
bummackack

8

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

मेरा व्यक्तिगत पसंदीदा UI सिस्टम विंडोज प्रेजेंटेशन फाउंडेशन (WPF) है। यह वास्तव में यूआई भेदभाव के लिए अगले स्तर तक की क्षमता लेता है। यहां इसकी कुछ और दिलचस्प विशेषताएं हैं:

  1. नियंत्रण डिफ़ॉल्ट रूप से "लुक-लेस" होते हैं। एक नियंत्रण तर्क और दृश्य उपस्थिति आम तौर पर decoupled है। हर नियंत्रण जहाज एक डिफ़ॉल्ट शैली और टेम्पलेट के साथ होता है, जो इसके डिफ़ॉल्ट दृश्य उपस्थिति का वर्णन करता है। उदाहरण के लिए, एक बटन को बाहरी आघात, एक ठोस रंग या ढाल पृष्ठभूमि और एक सामग्री प्रस्तुतकर्ता (कैप्शन पेश करने के लिए) के साथ एक गोल आयत के रूप में दर्शाया जा सकता है। डेवलपर्स (या डिजाइनर) कस्टम स्टाइल टेम्पलेट बना सकते हैं जो उपस्थिति को बदलते हैं और (एक हद तक) एक नियंत्रण का व्यवहार। एक नियंत्रण के सरल गुणों को ओवरराइड करने के लिए शैलियों का उपयोग किया जा सकता है, जैसे अग्रभूमि / पृष्ठभूमि रंग, टेम्पलेट, आदि; टेम्पलेट्स वास्तविक दृश्य संरचना को बदलते हैं।

  2. शैलियों और टेम्पलेट्स में "ट्रिगर" शामिल हो सकते हैं। ट्रिगर कुछ घटनाओं या संपत्ति मूल्यों (या मूल्यों के संयोजन) के लिए सुन सकते हैं और शैली या टेम्पलेट के पहलुओं को सशर्त रूप से बदल सकते हैं। उदाहरण के लिए, बटन के बटन को आम तौर पर पृष्ठभूमि पर रंग बदलने के प्रयोजनों के लिए "IsMouseOver" संपत्ति पर ट्रिगर होता है जब माउस बटन पर होवर करता है।

  3. यूआई तत्वों के कुछ अलग "स्तर" हैं जिनमें हल्के वजन वाले तत्वों से लेकर न्यूनतम कार्यक्षमता से लेकर पूर्ण-वजन वाले भारी-भरकम नियंत्रण शामिल हैं। यह आपको कुछ लचीलापन देता है कि आप अपने यूआई को कैसे तैयार करते हैं। UI तत्व वर्गों में से सबसे सरल UIElement, कोई शैली या टेम्पलेट नहीं है और केवल सबसे सरल इनपुट घटनाओं का समर्थन करता है। स्टेटस इंडिकेटर जैसे सरल तत्वों के लिए, यह कार्यक्षमता आपके लिए आवश्यक हो सकती है। यदि आपको अधिक व्यापक इनपुट समर्थन की आवश्यकता होती है, तो आप FrameworkElement(जो बढ़ाता है UIElement) प्राप्त कर सकते हैं । पारंपरिक विगेट्स आम तौर पर प्राप्त होते हैं Control, जो FrameworkElementकस्टम शैली और टेम्पलेट समर्थन (अन्य चीजों के बीच) को बढ़ाता है और जोड़ता है।

  4. WPF एक बरकरार, स्केलेबल, रिज़ॉल्यूशन-स्वतंत्र वेक्टर ग्राफिक्स मॉडल का उपयोग करता है। Windows पर, WPF अनुप्रयोगों को Direct3D का उपयोग करके गाया और रचा गया है।

  5. WPF की शुरूआत में Xaml नामक एक नई घोषित प्रोग्रामिंग भाषा शामिल थी। Xml पर आधारित Xaml, UI "दृश्यों" की घोषणा के लिए पसंदीदा भाषा है। यह वास्तव में बहुत चालाक है, और हालांकि यह पहली नज़र में समान दिखाई दे सकता है, यह मूल रूप से एक्सयूएल (और बहुत शक्तिशाली) जैसी मौजूदा भाषाओं से अलग है।

  6. WPF में एक बहुत ही उन्नत टेक्स्ट सबसिस्टम है। यह सभी का समर्थन करता है यदि सभी ओपन टाइप फ़ॉन्ट सुविधाएँ, द्विदिश क्लीयर टाइप एंटीएलियासिंग, सबपिक्सल पोजिशनिंग, आदि।

"ठीक है, महान, अब यह खेल विकास के लिए कैसे प्रासंगिक है?"

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

अब, खेल के लिए WPF का उपयोग करने के साथ समस्या यह है कि यह काफी भारी है और अपने स्वयं के "सैंडबॉक्स" में प्रस्तुत करता है। उसके अनुसार, मेरा मतलब है कि डायरेक्ट 3 डी या ओपनजीएल गेम के माहौल में डब्ल्यूपीएफ की मेजबानी का कोई समर्थित तरीका नहीं है। एक WPF एप्लिकेशन के भीतर Direct3D सामग्री को होस्ट करना संभव है, लेकिन आप WPF एप्लिकेशन के फ्रैमरेट द्वारा सीमित होंगे, जो आम तौर पर आप चाहते हैं की तुलना में कम है। कुछ प्रकार के गेम के लिए, जैसे 2D रणनीति गेम (मेरे वर्तमान WPF गेम प्रोजेक्ट का स्क्रीनशॉट), यह अभी भी बहुत अच्छा काम कर सकता है। किसी और चीज के लिए, इतना नहीं। लेकिन आप अभी भी अपने खुद के यूआई ढांचे को विकसित करने में WPF के कुछ और अधिक सम्मोहक वास्तु अवधारणाओं को लागू कर सकते हैं।

WPF / G (WPF for Games) "] ( http://wpfg.codeplex.com/ ) नामक WPF का एक खुला-स्रोत, अप्रबंधित C ++ / Direct3D कार्यान्वयन भी है, जो विशेष रूप से दोनों Win32 में गेम में उपयोग के लिए डिज़ाइन किया गया है और विंडोज मोबाइल। सक्रिय विकास बंद हो गया है, लेकिन पिछली बार जब मैंने इसकी जाँच की, तो यह एक पूर्ण कार्यान्वयन था। टेक्स्ट सबसिस्टम वह क्षेत्र था जिसमें Microsoft के WPF कार्यान्वयन की तुलना में वास्तव में कमी थी, लेकिन यह गेम के लिए एक समस्या से कम नहीं है। मैं कल्पना करूंगा कि डायरेक्ट 3 डी-आधारित गेम इंजन के साथ डब्ल्यूपीएफ / जी को एकीकृत करना अपेक्षाकृत सरल होगा। इस मार्ग पर जाना आपको यूआई अनुकूलन के लिए व्यापक समर्थन के साथ एक अत्यंत सक्षम, रिज़ॉल्यूशन-स्वतंत्र यूआई फ्रेमवर्क प्रदान कर सकता है।

बस आपको यह अंदाजा लगाने के लिए कि WPF- आधारित गेम UI कैसा दिख सकता है, यहां मेरे पालतू प्रोजेक्ट से एक स्क्रीनशॉट है:

मेरे चल रहे WPF- आधारित गेम प्रोजेक्ट से स्क्रीनशॉट


NoesisGUI WPF का उपयोग करता है। यह बहुत अच्छा है, लेकिन मुझे WPF नहीं पता है और मुझे इसे सीखने में दर्द होता है। मैं व्यक्तिगत रूप से एक वेब स्टैक दृष्टिकोण पसंद करूंगा।
user441521

2

मैं इस तरह से एक तत्काल GUI के लिए जाना होगा: http://code.google.com/p/nvidia-widgets/

NVidia विजेट मोलिअरकेट से IMGUI (तत्काल GUI) पर आधारित है।

मुझे लगता है कि जीयूआई जितना आसान हो सकता है, उतना आसान है।

सभी इस बात पर निर्भर करते हैं कि आपकी जरूरतें क्या हैं।


1
सरल हां, और त्वरित डिबग कार्य या प्रोटोटाइप के लिए आदर्श है, लेकिन तत्काल जीयूआई में यूआई और आपके गेम लॉजिक के बीच युग्मन की मात्रा मुझे डराती है।
दस

2

जिस गेम में मैं काम कर रहा हूं, उसमें हमारा अपना कस्टम GUI ढांचा है। मैंने इसे बहुत सरल पाया है, लेकिन फिर भी मैं जो कुछ भी करना चाहता हूं, वह सब कर रहा हूं। मुझे नहीं पता कि यह एक "पैटर्न" है जिसका उपयोग कई अन्य करते हैं, लेकिन यह हमारे लिए अच्छा काम करता है।

मूल रूप से, सभी बटन, चेकबॉक्स, आदि वर्ग तत्व के उपवर्ग हैं; और तत्वों की घटनाएँ हैं। फिर हमारे पास CompoundElements (जो स्वयं तत्व का एक उपवर्ग हैं), जिसमें अन्य तत्व शामिल हैं। प्रत्येक चक्र में, तीन विधियों को कहा जाता है: प्रोसेवेंट (घटना), टिक (समय), और ड्रा (सतह)। प्रत्येक CompoundElement तब उन तरीकों को अपने बच्चे के तत्वों पर कहता है। उन कॉलों में (विशेष रूप से प्रक्रिया विधि), हम किसी भी प्रासंगिक घटनाओं को बंद कर देते हैं।

यह सब पायथन में है (सी ++ की तुलना में बहुत धीमी भाषा), और यह पूरी तरह से ठीक चलता है।


2

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

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


^ यह 100%। मैं वहाँ बाहर खेल कार्यान्वयन के लिए अच्छे वेब स्टैक की कमी से दुखी हूँ। वेब स्टैक यूआई के लिए शानदार है और अपने यूआई के लिए सभी खेलों में अधिक सामान्य होने की आवश्यकता है। अब तक जिन पुस्तकालयों में मैंने काम करने की कोशिश की थी, उन्हें लागू करने के लिए गधे में दर्द था या 100% सच एचटीएमएल / सीएसएस / जावास्क्रिप्ट नहीं था। मैं वर्तमान में सुसंगत लैब्स को देख रहा हूं और यह आशाजनक लग रहा है लेकिन इसमें एक उचित राशि खर्च होती है, लेकिन इसमें कुछ इंजनों के लिए इंडी संस्करण हैं।
user441521

2

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

अपनी आवश्यकताओं को पूरा करना महत्वपूर्ण है। यदि आप अनिश्चित हैं, तो बस अपने आप को याद दिलाएँ YAGNI


1

यहाँ ओपन के लिए बनाया गया एक जीयूआई का एक उदाहरण (स्रोत कोड और सभी) विशेष रूप से के लिए है, Slick2D बुलाया Thingle जिनमें से एक बंदरगाह है Thinlet

Slick2D के लिए एक और GUI SUI थी जिसे आप देखना चाहते हैं।

मैं इन उदाहरणों का अनुसरण करूंगा और XML संचालित GUI के साथ जाऊंगा। हालाँकि ये परियोजनाएँ पुरानी / मृत हैं, आप उनमें से कुछ विचारों को लेने में सक्षम हो सकते हैं।


1

मुझे लगता है कि "यह पता लगाने" के लिए सबसे अच्छे तरीकों में से एक है कि कैसे .NET में विंडोज फॉर्म जैसे अत्यधिक विकसित GUI चौखटे काम करते हैं।

उदाहरण के लिए, वे सभी नियंत्रण हैं, जिनमें एक स्थान, आकार, बच्चे के नियंत्रण की सूची, अपने माता-पिता के लिए एक संदर्भ, Textजो कुछ भी नियंत्रण के लिए इसका उपयोग कर सकता है , के लिए एक संपत्ति है, साथ ही साथ विभिन्न कार्यों और पूर्वनिर्धारित कार्यों।

वे सभी में विभिन्न घटनाओं जैसे Click, MouseOverऔर Resizing

उदाहरण के लिए, जब एक बच्चा नियंत्रण बदल जाता है, तो यह उस श्रृंखला को एक अधिसूचना भेजता है जिसका लेआउट बदल गया है, और सभी माता-पिता तब कॉल करते हैं PerformLayout()

साथ ही, ऑटो-आकार और ऑटो-व्यवस्था इन GUI की सामान्य विशेषताएं हैं, जिससे प्रोग्रामर को बस नियंत्रण जोड़ने की अनुमति मिलती है और माता-पिता नियंत्रण स्वचालित रूप से समायोजित या व्यवस्थित करते हैं।


1

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.