สิ่งที่ระบบการประสานงานเพื่อใช้ในการจัดการกับ 2D UI?

จากคำถามเกี่ยวกับอัตราส่วนภาพฉันสนใจที่จะได้ยินว่าคนอื่นกำลังใช้อะไรเมื่อทำงานกับระบบ 2D UI (น่าจะเป็นโซลูชันที่ปลูกเองในบ้าน) โดยเฉพาะวิธีการทำคุณจัดการกับระบบพิกัด ในใจของฉันมีสามตัวเลือก:

1. ยากรหัสพิกัด (เช่น: 0 -> 720, 0 -> 576)
2. พิกัดปกติ (0.0 -> 1.0 0.0 -> 1.0), แมปลงในพิกัดจริงก่อนการแสดงผล
3. พิกัดเสมือน (เช่น: 0 -> 1600 0 -> 1000), แมปลงในพิกัดจริงก่อนการแสดงผล

รหัสตายตัวจะมีประโยชน์เฉพาะเมื่อคุณอยู่บนแพลตฟอร์มคงที่และรู้ว่าพิกัดพื้นที่หน้าจอของคุณล่วงหน้าหรือว่าคุณพร้อมที่จะเขียนเค้าโครงหน้าจอสำหรับทุกขนาดของหน้าจอที่เป็นไปได้

พิกัดปกติเป็นสิ่งที่ดี แต่ประสบความคลุมเครือเมื่ออัตราส่วนของหน้าจอไม่ได้รับการแก้ไข (เช่น 0.75 แผนที่ไปยังพิกัดทางกายภาพที่แตกต่างกันเมื่อทำงานในจอไวด์สกรีนมากกว่าที่ทำใน 4: 3) นอกจากนี้สำหรับผู้แต่งมันเป็นเรื่องธรรมดาที่จะประกาศองค์ประกอบ UI ให้เป็น (0.2 x 0.2) เพียงเพื่อจะพบว่ามันไม่ได้เป็นรูปสี่เหลี่ยมจัตุรัสจริง ๆ เมื่อแสดงผล

พิกัดเสมือนไม่มีความกำกวม แต่ประสบปัญหาเดียวกับพิกัดปกติที่ขั้นตอนการแมปใหม่ความคลาดเคลื่อนเลขฐานสิบเล็กน้อยอาจส่งผลให้เกิดข้อผิดพลาดแบบทีละหนึ่งหมายความว่าองค์ประกอบ UI ที่ควรเรียงต่อกันระหว่างพวกเขา

ในทำนองเดียวกันเมื่อคุณมีหน้าจอความละเอียดคงที่ทั้งพิกัดปกติและเสมือนหมายความว่ามันยากมากที่จะรับประกันการแมป 1: 1 ระหว่างพิกเซลที่สร้างขึ้นอย่างประณีตของศิลปินในภาพ UI และพิกเซลบนหน้าจอหมายความว่าคุณเสี่ยงต่อการ สิ่งประดิษฐ์ที่น่ารังเกียจในการปรับขนาด (สมมติว่าคุณแสดงผลเป็นภาพพื้นผิวบนหน้าจอ)

เราได้ใช้วิธีการประสานเสมือนจริงโดยเฉพาะเพื่อหลีกเลี่ยงความคลุมเครือเกี่ยวกับอัตราส่วนภาพ ดังนั้นเมื่อเรนเดอร์ไปที่หน้าจอ 16:10 พื้นที่ UI คือ (0,0) -> (1600,1000) แต่เมื่อเรนเดอร์เป็น 4: 3 พื้นที่ UI ที่ใช้งานได้จริงคือ (133,0) -> (1467 , 0)

มีวิธีแก้ปัญหาที่ดีกว่าที่ฉันไม่รู้หรือไม่? มีกลยุทธ์ที่ดีในการลดปัญหาทั้งสามวิธีนี้หรือไม่?

ฉันคิดว่าฉันยอมรับว่าพิกัดปกติไม่ได้แมปสิ่งที่ดีกับ UI

โดยทั่วไปแล้วสิ่งที่ฉันทำกับเค้าโครง 2D นั้นโดยทั่วไปคือพื้นที่ "เสมือน" ของคุณ แต่ฉันเลือกพื้นที่ที่แมป 1: 1 ด้วยความละเอียดเป้าหมายที่ฉันต้องการ (1280x720 เป็นต้น) มันไม่ได้รับการแก้ไข แต่เป็นเรื่องง่ายที่จะจัดการกับและฉันรู้ว่าใน 90% ของกรณีมันจะดูถูกต้อง เห็นได้ชัดว่ามันเป็นสิ่งสำคัญที่จะไม่ได้รับความพึงพอใจและการตรวจสอบความละเอียดที่แตกต่างกันมักจะ

เพื่อความคมชัดเมื่อทำการแมปละเอียดฉันจะยืมเคล็ดลับจากการแสดงแบบอักษรและให้ข้อมูลคำแนะนำ ดังนั้นตรวจสอบให้แน่ใจว่ามีการติดแท็กสิ่งต่าง ๆ ที่จำเป็นต้องมีอย่างต่อเนื่องในขณะที่ยังทำการปัดเศษเป็นพิกเซลที่แน่นอนซึ่งจำเป็นต้องมีการจัดตำแหน่งที่คมชัด

บางทีลองพิจารณาทำสิ่งต่าง ๆ ให้สัมพันธ์มากขึ้น ดังนั้นแทนที่จะเป็น "ตำแหน่งของวัตถุ 1 ที่สัมบูรณ์ X, Y" คุณสามารถระบุ "ตำแหน่งด้านล่างซ้ายของวัตถุ 2 ได้ที่ออฟเซ็ตบางส่วนจากด้านล่างขวาของวัตถุ 1" ดังนั้นจึงง่ายต่อการลดระดับและ / หรือย้ายสิ่งต่าง ๆ โดยไม่สูญเสียความสัมพันธ์ที่สำคัญ

ระบบพิกัดของCEGUIนั้นคิดออกมาดีมาก มันเป็นระบบพิกัดที่เป็นหนึ่งเดียวผสมผสานการวางตำแหน่งที่แน่นอนกับการวางตำแหน่งสัมพัทธ์ คุณสามารถระบุสถานที่เช่น:

• ตรงกลางหน้าจอ
  UDim(0.5,0)
• ห้าพิกเซลทางด้านซ้ายของขอบขวา
  UDim(1.0,-5)
• สองวิดเจ็ตที่อยู่ตรงกลาง แต่คั่นด้วย 10 พิกเซล
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

หากมีข้อสงสัยทำไมไม่ไปกับรูปแบบกล่อง CSS หรือทำให้มันง่ายขึ้น?

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

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

วันนี้ทางเลือกที่ดีอาจเป็น 1920x1080

สามารถสร้างงานศิลปะและหน้าจอจำลองได้ตามความละเอียดนั้นและทำให้ง่ายต่อการวัดตำแหน่ง / ระยะทางเป็นพิกเซล

หากใช้อัตราส่วนภาพต่อพิกัดเสมือนแตกต่างกันคุณสามารถเลือกวิธีปรับให้พอดีกับหน้าจอ (การทำกล่องจดหมายการครอบตัดด้านข้างหรือทั้งสองอย่าง)

เมื่อทำการเข้ารหัสฉันพบว่า 'การคิดเป็นพิกเซล' ง่ายกว่าการคิดในพิกัดปกติ! - ฉันต้องการให้ข้อความเป็น '50 (เสมือน) พิกเซลสูง 'มากกว่า' 0.0463 หน่วยสูง '

มันขึ้นอยู่กับประเภทของ GUI ที่คุณใช้ทั้งหมด แต่บ่อยครั้งที่เกมมีสิ่งต่าง ๆ ที่ทอดยาวไปตามขอบของหน้าจอและในมุมและจากนั้นพวกเขาอาจมีกล่องที่อยู่ตรงกลางของหน้าจอ

หากเป็นกรณีของคุณฉันขอแนะนำให้ใช้รูปแบบที่คุณระบุตัวยึดและตัวชดเชย (x, y) หรือไม่ สิ่งนี้จะคล้ายกับBorderLayoutของ Java (แต่อาจมีทั้งสี่มุม, สี่มุมของขอบและหนึ่งจุดศูนย์กลางของหน้าจอ) ตัวอย่างเช่นคุณสามารถระบุออฟเซตของ (0,0) จากมุมบนซ้าย; จากนั้นองค์ประกอบจะถูกยึดตรงมุมของหน้าจอ และไม่ว่าความละเอียดอัตราส่วนภาพ ฯลฯ จะเป็นอย่างไรคุณจะมีตัวบ่งชี้สุขภาพที่มุมของหน้าจอ แต่ถ้าคุณยึดองค์ประกอบไว้ที่มุมขวาบนองค์ประกอบจะยึดตามธรรมชาติกับจุดบนขวา (แทนที่จะเป็นซ้ายบน) ดังนั้นอีกครั้งมันจะถูกยึดโดยอัตโนมัติที่มุมของหน้าจอไม่ว่าจะมีความละเอียด

ฉันแนะนำให้เทียบกับพิกัด 0.0-1.0 ปกติ สิ่งเหล่านี้อาจแตกต่างกันไปตามความแม่นยำจุดลอยตัว GUI ควรถูกแมปกับพิกเซลยกเว้นว่าคุณมี 3D GUI

มากขึ้นอยู่กับชนิดของเกมและสถานการณ์ สำหรับต้นแบบที่รวดเร็วและสกปรกฉันชอบที่จะวางแผน UI บนกระดาษกราฟเขียนรายการพิกัดตัวเลขสำหรับขนาดหน้าต่างคงที่และฮาร์ดโค้ดทุกอย่าง - มันง่ายและเร็วขึ้นสำหรับฉัน แต่สำหรับโครงการ "ของจริง" ที่คุณต้องการให้มีหน้าต่างที่ปรับขนาดได้หรือความละเอียดของหน้าจออื่นซึ่งอาจไม่เหมาะอย่างยิ่งและวิธีการแก้ปัญหาบางอย่างที่ช่วยให้สามารถปรับขนาดทั้งสองทิศทางได้ดีขึ้น