Unity UI square ที่เติมความกว้างหรือความสูง

ฉันกำลังพยายามสร้างบอร์ดด้วยข้อกำหนดนี้:

• มันจะเป็นรูปสี่เหลี่ยมจัตุรัส
• มันจะพอดีกับความกว้างหรือความสูงที่มีอยู่
• มันจะอยู่กึ่งกลางในผืนผ้าใบ
• มันอาจถูกห่อไว้ในผืนผ้ากลางเพิ่มเติมตามความจำเป็น

ฉันกำลังเล่นกับแองเคอร์ แต่ฉันไม่พบการรวมกันใด ๆ ที่จะทำอย่างนั้น ทางออกเดียวที่ฉันคิดได้ก็คือสคริปต์ "OnResize" ของคอนเทนเนอร์และตั้งค่าขนาดของบอร์ดโดยทางโปรแกรม

นี่คือเค้าโครงดั้งเดิม (1) คือ BoardCanvas (2) คือคณะกรรมการ

ฉันต้องการถ้าหน้าจอสูงขึ้นสี่เหลี่ยมก็จะโตขึ้น แต่ก็ยังเป็นสี่เหลี่ยมจัตุรัส:

หรือลด:

แต่ถึงแม้ว่าตัวอย่างก่อนหน้านี้จะถูกตัดไปที่ขอบด้านบนและด้านล่าง แต่ฉันก็ต้องการที่ถ้าพื้นที่แนวตั้งจะสูงกว่าความกว้างที่มีอยู่สี่เหลี่ยมจัตุรัสจะ จำกัด ขนาดของมันขึ้นอยู่กับเส้นขอบซ้ายและขวา:

Q1:มีวิธีทำเช่นนี้กับสมอ / pivots หรือไม่? ไม่เป็นไรสำหรับฉันที่จะสร้างผืนผ้ากลางระหว่าง BoardCanvas และ Board เองถ้าใช้งานได้

Q2:ถ้าเป็นเช่นนั้นฉันควรวางตำแหน่งจุดยึดที่ไหน ฉันต้องการวัตถุระดับกลางหรือไม่

Q3:ถ้าไม่สคริปต์แก้ปัญหาคืออะไร? มี OnResize ใด ๆ บนผืนผ้าใบเพื่อจัดการ? ฉันไม่เห็นเหตุการณ์การปรับขนาดใด ๆ ในรายการ แต่บางทีฉันก็ไม่รู้จะหาได้ที่ไหน ฉันรู้สึกว่าการทดสอบในทุกเฟรมดูเหมือนว่าเกินความเป็นจริงการขับเคลื่อนของเหตุการณ์ดูเหมือนจะดีกว่า

ขอบคุณ!

ในที่สุดฉันก็พบวิธีที่จะทำ (ทดสอบใน v5.0.0) ในแบบที่:

• ไม่ต้องการรหัสหรือเงื่อนไขเพื่อตรวจสอบการวางแนว
• ไม่แฮ็กด้วยสเกลและไม่ต้องการความละเอียดอ้างอิง

ในบทช่วยสอนวิดีโอ UI มีส่วนใหญ่หายไปแม้ว่าจะมีเอกสารที่ดีในเอกสาร - เอกสาร: ระบบ "เลย์เอาต์อัตโนมัติ"

เลย์เอาต์อัตโนมัติเป็นกลไกที่ทำจาก "เลย์เอาต์" และ "เลย์เอาต์คอนโทรลเลอร์" ตัวควบคุมเลย์เอาต์เป็นส่วนประกอบที่สามารถแนบกับ UI Game Object ผู้ควบคุมสามารถปรับขนาดRect Transformได้อย่างชาญฉลาด

ตัวควบคุมบางตัวอาจปรับขนาดวัตถุที่ใช้องค์ประกอบนั้นในขณะที่ตัวควบคุมอื่นอาจปรับขนาดลูกของวัตถุนั้น

มีคอนโทรลเลอร์ในตัวไม่กี่ตัว Aspect Ratio Fitterหนึ่งในนั้นคือ

ก่อนอื่นฉันเลือกBoardพาเนลและแนบAspect Ratio Fitterส่วนประกอบใหม่:

Aspect Ratio Fitterดูเหมือนว่าจะมุ่งมั่นที่จะ "รักษา" อัตราส่วนของวัตถุที่ต้องการ เมื่อต้องการทำเช่นนั้นวัตถุสามารถตั้งค่าเป็น "ห่อ" รอบวัตถุลูก (ในขณะที่ดูแลอัตราส่วนกว้างยาว) หรือสามารถตั้งค่าให้ขยายและพอดีกับคอนเทนเนอร์ (ในขณะที่รักษาอัตราส่วนกว้างยาว)

จากนั้นฉันเลือกFit In Parentตัวเลือกและฉันระบุว่าฉันต้องการสแควร์ที่สมบูรณ์แบบโดยการตั้งค่าอัตราส่วนภาพที่ต้องการเป็น 1:

สิ่งนี้ให้ผลในรูปแบบที่คล้ายกันมากกว่าที่ฉันต้องการ แต่ฉันไม่ต้องบอกขนาดของบอร์ด แต่ถึงกระนั้นก็รู้ว่ามันจะต้องเป็นสี่เหลี่ยมจัตุรัสตามที่อธิบายไว้:

หากฉันย่อขนาดตามแนวตั้งหรือขยายสแควร์จะติดตามค่าพาเรนต์ขณะที่ยังคงอัตราส่วนไว้:

อย่างน่าอัศจรรย์เมื่อการเปลี่ยนแปลงไม่ได้รับการลดความกว้างไม่มีสคริปต์ที่จะแนบและไม่มีคุณสมบัติที่จะเปลี่ยนแปลงเนื่องจาก "Aspect Ratio Fitter" ทำเพื่อเราโดยอัตโนมัติ:

ในที่สุดเมื่อฉันต้องการอัตรากำไรขั้นต้นที่นั่นฉันเพียงวางการแปลงคอนเทนเนอร์ที่ทำหน้าที่เป็นตัวเว้นวรรคและย้ายBoardจากBoardCanvasเข้าสู่MarginCanvas:

สิ่งนี้เป็นไปได้ แต่อาจมีเพียงโค้ดเล็ก ๆ หรือสองเส้นเพื่อกำหนดว่าหน้าจอเป็นแนวนอนหรือแนวตั้งและเปลี่ยนค่าสองสามอย่าง

บน Canvas คุณต้องทำให้ "Ui Scale Mode" ของ Scaler เป็น "Scale with Size Screen" และทำให้ "Screen Match Mode" เป็น "Match Width หรือ Height":

สมมติว่าเริ่มต้นความละเอียด 800x600 อ้างอิงถูกนำมาใช้และสมมติว่าวิวพอร์ตของหน้าจอเป็นแนวนอน (เช่นScreen.widthมีค่ามากกว่าScreen.height) 1ความต้องการเลื่อนการแข่งขันจะได้รับการตั้งค่าทั้งหมดทางไปสู่ความสูงเป็น

จากนั้นคุณจะต้องการภาพบนผืนผ้าใบโดยใช้พรีเซ็ตกลาง / กลางสมอ คุณต้องการให้ความกว้างและความสูงของอิมเมจตรงกับค่า Y ของตัวแก้ไข Canvas Scaler ของคุณ

จากนั้นคุณสามารถปรับขนาดวิวพอร์ตของกล้องและดูว่าภาพยังคงรูปร่างของมันในขณะที่ยืดความสูงเพื่อให้ตรงกับความสูงของวิวพอร์ต:

หากหน้าจอเป็นแนวตั้ง - และนี่คือที่ที่คุณอาจต้องใช้รหัสเพื่อตรวจสอบและ / หรือเปลี่ยนแปลงตามที่ต้องการ - คุณต้องทำให้ค่าการจับคู่ของ Scaler's เป็น0และเปลี่ยนความสูงและความกว้างของรูปภาพเพื่อให้ตรงกับความละเอียดของการอ้างอิง ค่า X (ในภาพด้านล่างทั้งความกว้างและความสูงของภาพมีทั้งคู่800)

หากคุณพยายามจัดให้มีภาพขนาดเล็กลงภายในคุณสามารถ "ปรับ" ภาพโดยปรับความกว้างและความสูงของภาพเทียบกับค่า X หรือ Y ของความละเอียดอ้างอิง (ขึ้นอยู่กับแนวนอนหรือแนวตั้ง) ตัวอย่างเช่นฉันสร้างสี่เหลี่ยมสีน้ำเงินที่ใช้ครึ่งหนึ่งของค่า X ความละเอียดของการอ้างอิง (เนื่องจากวิวพอร์ตเป็นแนวตั้ง) และมันขยายและย่อขนาด:

และยิ่งไปกว่านั้นหากคุณต้องการกระดานหมากรุกหรืออะไรบางอย่างตำแหน่ง X และ Y ของแต่ละภาพและความสูงและความกว้างสามารถเป็นไปตามเปอร์เซ็นต์ของความละเอียดของ Canvas Scaler เพื่อทำสิ่งที่คุณต้องการ: