एकता यूआई वर्ग जो चौड़ाई या ऊंचाई को भरता है


11

मैं इस आवश्यकताओं के साथ एक बोर्ड बनाने की कोशिश कर रहा हूँ:

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

मैं एंकरों के साथ खेल रहा हूं लेकिन मुझे ऐसा करने के लिए कोई संयोजन नहीं मिल रहा है। एकमात्र उपाय जो मैं सोच सकता हूं, वह कंटेनर के किसी प्रकार के "ऑनसाइज़" की स्क्रिप्ट है और बोर्ड के आकार को प्रोग्रामेटिक रूप से सेट करना है।

यह मूल लेआउट है। (१) बोर्डनव्स है। (२) बोर्ड है।

मूल लेआउट

मैं चाहता हूं कि यदि स्क्रीन लंबी हो जाए, तो वर्ग बढ़ता है, लेकिन फिर भी वर्ग है:

यहाँ छवि विवरण दर्ज करें

या कम करता है:

यहाँ छवि विवरण दर्ज करें

लेकिन, हालांकि वे पिछले उदाहरण ऊपर और नीचे के किनारों पर तड़क रहे हैं, मैं यह भी चाहता हूं कि अगर ऊर्ध्वाधर स्थान उपलब्ध चौड़ाई से अधिक लंबा हो जाता है, तो वर्ग बाईं और दाईं सीमाओं के आधार पर अपने आकार को सीमित करता है:

यहाँ छवि विवरण दर्ज करें

Q1: एंकर / पिवोट्स के साथ ऐसा करने का कोई तरीका है? यह मेरे लिए ठीक है कि अगर बोर्डवांस और बोर्ड के बीच में इंटरवेट कैनवस बन जाए तो वह काम करता है।

Q2: यदि हां, तो मुझे एंकरों को कहां रखना चाहिए? क्या मुझे मध्यवर्ती वस्तुओं की आवश्यकता है?

Q3: यदि नहीं, तो समाधान स्क्रिप्ट कर रहा है? वहाँ किसी भी onResize कैनवास पर संभाल करने के लिए है? मैं सूची में किसी भी आकार बदलने वाली घटना को नहीं देख सकता, लेकिन शायद मैं नहीं जानता कि इसके लिए कहां देखना है। मुझे लगता है कि हर फ्रेम पर इसका परीक्षण थोड़ा अधिक लगता है, घटना संचालित बेहतर लगती है।

धन्यवाद!

जवाबों:


13

अंत में मुझे ऐसा करने का एक तरीका मिला (v5.0.0 में परीक्षण किया गया), इस तरह से:

  • अभिविन्यास की जांच करने के लिए कोड, या सशर्त की आवश्यकता नहीं है।
  • तराजू के साथ हैक नहीं करता है और न ही एक संदर्भ समाधान की आवश्यकता है।

यूआई वीडियो ट्यूटोरियल में, एक बड़ा हिस्सा गायब है, हालांकि पाठ-प्रलेखन में अच्छी तरह से प्रलेखित है: "ऑटो-लेआउट" सिस्टम।

ऑटो-लेआउट "लेआउट" और "लेआउट नियंत्रक" से बने तंत्र हैं। लेआउट नियंत्रक ऐसे घटक हैं जो UI गेम ऑब्जेक्ट से संलग्न हो सकते हैं। नियंत्रणकर्ता Rect Transformसमझदारी से आकार बदल सकते हैं ।

कुछ नियंत्रक उस वस्तु का आकार बदल सकते हैं जहां घटक को लागू किया जाता है, जबकि अन्य नियंत्रक उस वस्तु के बच्चों का आकार बदल सकते हैं।

वहाँ कुछ अंतर्निहित नियंत्रकों। उनमें से एक है Aspect Ratio Fitter

सबसे पहले, मैं अपने Boardपैनल का चयन करता हूं और मैं एक नया Aspect Ratio Fitterघटक संलग्न करता हूं :

यहाँ छवि विवरण दर्ज करें

Aspect Ratio Fitter"बनाए रखने के" वस्तु के लिए चाहते थे पहलू अनुपात के उद्देश्य रहा है। ऐसा करने के लिए, या तो ऑब्जेक्ट को चाइल्ड ऑब्जेक्ट के आसपास "रैप" करने के लिए सेट किया जा सकता है (जबकि पहलू अनुपात को मेनटेन कर रहा है), या तो इसे अपने कंटेनर का विस्तार और फिट करने के लिए सेट किया जा सकता है (पहलू अनुपात बनाए रखते हुए)।

मैं तब Fit In Parentविकल्प चुनता हूं और मैं निर्दिष्ट करता हूं कि मुझे वांछित पहलू अनुपात 1 पर सेट करके एक आदर्श वर्ग चाहिए:

यहाँ छवि विवरण दर्ज करें

यहाँ छवि विवरण दर्ज करें

यह बहुत ही समान लेआउट में पैदावार करता है जो मैं चाहता था, लेकिन मुझे बोर्ड को इसके आयाम बताने की जरूरत नहीं थी। लेकिन फिर भी, यह जानता है कि इसे चित्रित किया जाना चाहिए:

यहाँ छवि विवरण दर्ज करें

यदि मैं लंबवत रूप से सिकुड़ता हूं या विस्तार करता है, तो पहलू अनुपात बनाए रखते हुए वर्ग माता-पिता का अनुसरण करता है:

यहाँ छवि विवरण दर्ज करें

यहाँ छवि विवरण दर्ज करें

जादुई रूप से, जब चौड़ाई को कम करके परिवर्तन किया जाता है, तो कोई स्क्रिप्ट संलग्न करने के लिए नहीं होती है और न ही संपत्ति बदलने के लिए, जैसा कि "पहलू अनुपात फिटर" हमारे लिए स्वचालित रूप से करता है:

यहाँ छवि विवरण दर्ज करें

अंत में, जैसा कि मैं वहां थोड़ा सा मार्जिन चाहता था, मैं सिर्फ एक कंटेनर रेक्ट ट्रांसफॉर्म को जगह देता हूं जो स्पेसर के रूप में कार्य करता है और इसमें Boardसे ले BoardCanvasजाता है MarginCanvas:

यहाँ छवि विवरण दर्ज करें


आह, भयानक, यह एक उत्कृष्ट समाधान की तरह दिखता है। खुशी है कि आपने इसे पाया, साझा करने के लिए धन्यवाद!
क्रिस मैकफ़रलैंड

3

यह संभव है, लेकिन स्क्रीन के परिदृश्य या चित्र को परिभाषित करने या युगल मूल्यों को बदलने के लिए कोड या दो की शायद एक छोटी सी रेखा के साथ।

कैनवस पर, आपको कैनवस स्कैलर की "यूआई स्केल मोड" को "स्क्रीन साइज के साथ स्केल" बनाने की आवश्यकता है, और "स्क्रीन मैच मोड" को "मैच की चौड़ाई या ऊँचाई" बनाने की आवश्यकता है:

यहाँ छवि विवरण दर्ज करें

800x600 के डिफॉल्ट रेफ़रेंस रिज़ॉल्यूशन का उपयोग किया जाता है और मान लिया जाता है कि स्क्रीन का व्यूपोर्ट लैंडस्केप है (उदाहरण Screen.widthसे बड़ा है Screen.height), मैच स्लाइडर को ऊँचाई की ओर सभी तरह से सेट करना होगा1

फिर आप मध्य / मध्य एंकर प्रीसेट का उपयोग करके कैनवस पर एक छवि चाहते हैं। आप अपने कैनवस स्केलर के रेफरेंस रिज़ॉल्यूशन के वाई मान से मिलान करने के लिए छवि की चौड़ाई और ऊँचाई भी चाहते हैं।

यहाँ छवि विवरण दर्ज करें

फिर आप कैमरे के व्यूपोर्ट का आकार बदल सकते हैं और देख सकते हैं कि व्यूपोर्ट की ऊंचाई से मेल खाने के लिए इसकी ऊंचाई को बढ़ाते हुए छवि अपना आकार बनाए रखती है:

यहाँ छवि विवरण दर्ज करें


यदि स्क्रीन पोर्ट्रेट है - और यह वह जगह है जहां आपको संभवतः जांचने और / या बदलने के लिए कोड की आवश्यकता होगी - आपको स्केलर के मैच वैल्यू को बनाने की आवश्यकता है 0, और संदर्भ रिज़ॉल्यूशन से मिलान करने के लिए अपनी छवि की ऊँचाई और चौड़ाई को बदल दें X मान। (नीचे दी गई तस्वीरों में, छवि की चौड़ाई और ऊंचाई दोनों हैं 800)


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

यहाँ छवि विवरण दर्ज करें

और आगे, यदि आप एक बिसात या कुछ और चाहते हैं, तो प्रत्येक चित्र की X और Y स्थिति और ऊँचाई और चौड़ाई, कैनवस स्केलर के रिज़ॉल्यूशन के प्रतिशत पर आधारित हो सकती है जो भी आप करते हैं:

यहाँ छवि विवरण दर्ज करें


1
आपके अत्यधिक विस्तृत उत्तर के लिए धन्यवाद क्रिस। अंत में मुझे एक समाधान मिला जिसमें अभिविन्यास की जांच करने के लिए कोड की किसी भी पंक्ति की आवश्यकता नहीं है, और तराजू के साथ हैक नहीं करता है और एक संदर्भ रिज़ॉल्यूशन का उपयोग नहीं करता है। मैं अपना जवाब पोस्ट करने जा रहा हूं, लेकिन मैंने आपके प्रयास और चित्रण का धन्यवाद किए बिना पास करना चाहा।
ज़ावि मोंटेरो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.