2D UI को संभालने के लिए किस समन्वय प्रणाली का उपयोग करना है?


20

से इसे जारी रखते हुए पहलू अनुपात सवाल है, मैं अन्य लोगों को क्या प्रयोग कर रहे हैं सुनने के लिए जब 2 डी यूआई सिस्टम (सबसे अधिक संभावना अपने स्वयं के देसी समाधान) पर काम कर रहा इच्छुक हूँ। विशेष रूप से, आप समन्वय प्रणालियों को कैसे संभालते हैं। मेरे दिमाग में तीन विकल्प हैं:

  1. हार्ड-कोडित निर्देशांक (जैसे: 0 -> 720, 0 -> 576)
  2. सामान्यीकृत समन्वय (0.0 -> 1.0, 0.0 -> 1.0), प्रतिपादन से पहले वास्तविक निर्देशांक में मैप किया गया
  3. वर्चुअल को-ऑर्डिनेट्स (जैसे: 0 -> 1600, 0 -> 1000), रेंडर करने से पहले वास्तविक निर्देशांक में मैप किया गया

यदि आप एक निश्चित प्लेटफ़ॉर्म पर हैं तो हार्ड-कोडेड केवल उपयोगी है और जानते हैं कि आपके स्क्रीन स्पेस निर्देशांक पहले से क्या हैं, या यदि आप स्क्रीन आयामों के हर संभव सेट के लिए लेखक स्क्रीन लेआउट के लिए तैयार हैं।

सामान्यीकृत सह-निर्देशांक अच्छे हैं, लेकिन अस्पष्टता से ग्रस्त हैं जब स्क्रीन का पहलू अनुपात तय नहीं किया जाता है (उदाहरण के लिए एक अलग भौतिक समन्वय के 0.75 मानचित्र जब वाइडस्क्रीन में 4: 3 में चलता है)। इसके अलावा, लेखकों के लिए, यह यूआई तत्व घोषित करने के लिए वास्तव में प्रतिरूपात्मक है (0.2 x 0.2), केवल यह खोजने के लिए कि यह वास्तव में वर्ग नहीं है जब प्रदान किया गया हो।

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

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

हम वर्चुअल को-ऑर्डिनेट दृष्टिकोण के साथ गए हैं, विशेष रूप से पहलू अनुपात के बारे में अस्पष्टता से बचने के लिए। इसलिए जब 16:10 स्क्रीन पर रेंडर किया जाता है, तो UI स्पेस (0,0) -> (1600,1000) होता है, लेकिन जब 4: 3 में दिया जाता है, तो यूआई स्पेस वास्तव में (133,0) -> (1467) होता है , 0)।

क्या ऐसे कोई बेहतर उपाय हैं जिनके बारे में मुझे अभी जानकारी नहीं है? क्या इन 3 दृष्टिकोणों की समस्याओं को कम करने के लिए कोई अच्छी रणनीति है?

जवाबों:


5

मुझे लगता है कि मैं मानता हूं कि सामान्यीकृत निर्देशांक वास्तव में यूआई सामान के लिए अच्छी तरह से मैप नहीं करते हैं।

मैं आमतौर पर 2 डी लेआउट के लिए क्या करता हूं, मूल रूप से आपका "वर्चुअल" को-ऑर्डिनेट स्पेस है, लेकिन मैं अपने पसंदीदा लक्ष्य रिज़ॉल्यूशन (1280x720, उदाहरण के लिए) के साथ 1: 1 का स्पेस लेता हूं। यह तय नहीं है, लेकिन इससे निपटने के लिए यह सहज है और मुझे पता है कि 90% मामलों में यह सही लगेगा। जाहिर है यह महत्वपूर्ण नहीं है कि जटिल हो, और वास्तव में अक्सर विभिन्न प्रस्तावों की जांच करें

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

शायद चीजों को अधिक सापेक्ष बनाने पर भी विचार करें। इसलिए सब कुछ "एक्स एक्स, वाई पर स्थिति ऑब्जेक्ट 1" होने के बजाय, आप "ऑब्जेक्ट 1 के निचले दाएं से ऑब्जेक्ट 1 के बाईं ओर ऑब्जेक्ट 2 के बाईं ओर नीचे" स्थिति निर्दिष्ट कर सकते हैं। महत्वपूर्ण रिश्तों को खोए बिना चीजों को फिर से बेचना और / या स्थानांतरित करना आसान है।


5

CEGUI का समन्वय प्रणाली वास्तव में अच्छी तरह से सोचा हुआ लगता है। यह एकीकृत समन्वय प्रणाली है जो सापेक्ष स्थिति के साथ पूर्ण स्थिति को मिश्रित करती है। आप जैसे स्थान निर्दिष्ट कर सकते हैं:

  • स्क्रीन के बीच में
    UDim(0.5,0)
  • दाएं किनारे के बाईं ओर पांच पिक्सेल
    UDim(1.0,-5)
  • बीच में दो विजेट लेकिन 10 पिक्सल से अलग
    HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

2

यदि संदेह है, तो सीएसएस बॉक्स मॉडल या इसके सरलीकरण के साथ क्यों नहीं?

आप प्रतिशत या पिक्सेल में स्थिति निर्दिष्ट कर सकते हैं। आप कंटेनरों को प्रतिशत के साथ रख सकते हैं, लेकिन उनके द्वारा आइटम को पिक्सेल द्वारा स्थिति में रख सकते हैं, उदाहरण के लिए।


1

मुझे वर्चुअल निर्देशांक का उपयोग करना पसंद है, लेकिन एक सामान्य लक्ष्य रिज़ॉल्यूशन के आसपास (अधिमानतः उच्चतम रिज़ॉल्यूशन में से एक) जो आप गेम को चलाने की अपेक्षा करते हैं।

इन दिनों, एक अच्छा विकल्प 1920x1080 हो सकता है।

सभी आर्टवर्क और स्क्रीन मॉक-अप उस रिज़ॉल्यूशन पर बनाए जा सकते हैं, और इससे पिक्सल्स में पोज़िशन / डिस्टेंस को मापना आसान हो जाता है।

यदि वर्चुअल निर्देशांक के लिए एक अलग पहलू अनुपात में चल रहा है, तो आप इसे स्क्रीन पर फिट करने का विकल्प चुन सकते हैं (लेटरबॉक्सिंग, पक्षों को क्रॉप करना, या दोनों का एक सा)

कोडिंग करते समय, मुझे सामान्यीकृत निर्देशांक में सोचने की तुलना में 'पिक्सल में सोच' बहुत आसान लगती है! - मैं चाहता हूं कि पाठ 'ऊँचाई' के बजाय '50 (आभासी) पिक्सल '0.0463 यूनिट ऊँचा हो।


0

यह पूरी तरह से इस बात पर निर्भर करता है कि आपके पास किस प्रकार का जीयूआई है, लेकिन अक्सर गेम में स्क्रीन के किनारों और कोनों में एंकरिंग की जाती है, और फिर मोडल डायलॉग या कुछ के लिए स्क्रीन के बीच में एक बॉक्स हो सकता है।

यदि आपके लिए ऐसा है, तो क्या मैं एक योजना का उपयोग करने का सुझाव दे सकता हूं, जहां आप एक एंकर और एक ऑफसेट (x, y) निर्दिष्ट करते हैं? यह Java के BorderLayout के समान होगा (लेकिन शायद चार कोनों, किनारों की चार पहेलियों और स्क्रीन के एक केंद्र के साथ)। इसलिए, उदाहरण के लिए, आप ऊपरी-बाएँ कोने से (0,0) की एक ऑफसेट निर्दिष्ट कर सकते हैं; तब तत्व स्क्रीन के कोने में बिल्कुल लंगर डालेगा। और फिर कोई फर्क नहीं पड़ता कि क्या संकल्प, पहलू अनुपात, आदि, आपके पास स्क्रीन के कोने में स्वास्थ्य संकेतक होगा। लेकिन तब यदि आप किसी तत्व को शीर्ष दाएं कोने पर लंगर डालते हैं, तो तत्व स्वाभाविक रूप से उसके शीर्ष दाएं बिंदु (शीर्ष बाएं के बजाय) के सापेक्ष लंगर डालेगा, इसलिए फिर से यह स्क्रीन के कोने पर स्वचालित रूप से लंगर डालेगा, कोई फर्क नहीं पड़ता।

मैं निश्चित रूप से सामान्यीकृत 0.0-1.0 निर्देशांक के खिलाफ सलाह देता हूं; ये फ़्लोटिंग-पॉइंट सटीकता के आधार पर भिन्न हो सकते हैं। GUI को पिक्सेल में मैप किया जाना चाहिए, जब तक कि आपके पास 3D GUI न हो।


ठीक है, किसी भी तरह की यूआई प्रणाली के लिए दिए गए सापेक्ष स्थिति और लंगर का उपयोग करना। मैं विशेष रूप से विभिन्न घटकों के बीच माप में अधिक रुचि रखता हूं। और इस तरह की बात के लिए, 3 डी / 2 डी जीयूआई भेद की तरह है: विशेष रूप से जब आप मनमाने आकार की छवियों को लेने के लिए बनावट वाले स्क्रीन स्पेस क्वैड का उपयोग कर रहे हों, और उन्हें अपने यूआई स्पेस में स्केल / पोजिशन करें।
MrCranky

0

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

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