ฉันจะสร้างระบบอิสระความละเอียดได้อย่างไร

ฉันกำลังยุ่งกับสิ่งนี้ ฉันสามารถยึดสิ่งของไว้ที่ขอบซึ่งจะทำให้ความละเอียด UI ของฉันเป็นอิสระ ... จนกว่ามันจะเปลี่ยนไปมากจนกราฟิกนั้นเล็กเกินไป ฉันจะปรับขนาดอย่างเหมาะสมเมื่อใดก็ตามที่จำเป็นได้อย่างไร ฉันจะเก็บกราฟิกของฉันในสัดส่วนที่เหมาะสมในขณะที่ปรับขนาดได้อย่างไร ฉันไม่ต้องการให้พวกมันยืดออกหากความละเอียดมีสัดส่วนต่างกันเช่น 16:10 ซึ่งต่างกับสิ่งอื่น

มีวิธีการจริงและผ่านการทดสอบมาแล้วหรือไม่? เครื่องเล่นวิดีโอแสดงขอบดำเนื่องจากปัญหานี้สิ่งนี้ไม่สามารถแก้ไขได้อย่างถูกต้องหรือไม่?

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

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

สำหรับขนาดและการวางตำแหน่งเราจำเป็นต้องใช้ชุดของหน่วยที่รักษาอัตราส่วนกับความละเอียดของแอปพลิเคชันที่เกิดขึ้นจริง ในกรณีนี้ให้ใช้นิ้วเพราะฉันเป็นคนอเมริกันและคุณสามารถปรับขนาดองค์ประกอบด้วย DPI (จุดต่อนิ้ว) ตัวอย่างเช่นสมมติว่าแอปพลิเคชันของคุณทำงานที่ 800x600 ค่าเริ่มต้น Windows DPI คือ 96 ดังนั้นหมายความว่าแอปพลิเคชันมีความละเอียด (800/96) x (600/96) นิ้วหรือ 8.33x6.25 นิ้ว

เนื่องจากคุณต้องทำงานอย่างน้อยที่สุดทั้งอัตราส่วน 4: 3 และ 16: 9 วิธีที่คุณจัดการกับระบบพิกัดหน้าจอของคุณจะยุ่งยากเล็กน้อย สิ่งที่ฉันแนะนำให้ทำคือวาง (0,0) ที่กึ่งกลางของพื้นที่แสดงผล (รวมถึงหน้าต่างและส่วนควบคุม) มันใช้งานได้ดีเพราะถ้าคุณใส่ (0,0) ในมุมหนึ่งเมื่อมุมนั้นเคลื่อนที่ไปตามความละเอียดและอัตราส่วนภาพมันจะแปลสไปรท์ทั้งหมดของคุณในขณะที่ศูนย์กลางของหน้าจอจะเป็นศูนย์กลางของหน้าจอเสมอ ไม่ว่าจะเป็นอุปกรณ์ ดำเนินการตามตัวอย่างของเราด้วย 800x600 สิ่งนี้จะส่งผลให้ระบบพิกัดที่ (จากซ้ายไปขวา) -4.165in ถึง 4.165in และ (บนลงล่าง) 3.125in ถึง -3.125in

ดังนั้นในขณะนี้คุณมีระบบ UI อิสระ DPI พร้อมรายการที่จะอยู่ในจุดเดียวกันเสมอเมื่อเทียบกับจุดกึ่งกลางของหน้าจอ - ไม่ใช่ความละเอียดที่ค่อนข้างอิสระ โชคดีที่ความอิสระในการ DPI ของคุณนั้นสามารถปรับขนาด UI ได้โดยการปรับ DPI ตามการแก้ปัญหาบางอย่าง ตัวอย่างเช่นเราสามารถปรับขนาด DPI โดยใช้ความละเอียดแนวตั้งเป็นวิธีแก้ปัญหาของเรา หาก 800x600 เป็น 96 DPI เราจะใช้ 123 DPI สำหรับ 1024x768 หรือ 115 DPI สำหรับ 1280x720

สุดท้ายคุณจะต้องสร้างระบบเลย์เอาต์ที่จัดการทั้งตำแหน่งที่แน่นอนและการวางตำแหน่งที่สัมพันธ์กัน ตัวอย่างที่ยอดเยี่ยมของเรื่องนี้คือ WPF และเว็บ คุณสามารถระบุว่าการควบคุม / กล่องเติม% ขององค์ประกอบหลักในขณะที่เชื่อมต่อกับขอบพร้อมกับตัวเลือกเค้าโครงอัตโนมัติที่มีประโยชน์อื่น ๆ อีกมากมาย ทั้งหมดนี้เข้าด้วยกันจะส่งผลให้ระบบ UI สามารถดูเกือบจะเหมือนกันในทุกความละเอียดและอัตราส่วนภาพ

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

โดยทั่วไปสิ่งที่คุณต้องการทำขึ้นอยู่กับเกม

ทางเลือกหนึ่งคือการมีเส้นขอบสีดำหากอัตราส่วน (สัดส่วน) แตกต่างกัน (อาจจะง่ายที่สุดเพียงแสดงผลกับพื้นผิวจากนั้นแสดงภาพไปยังหน้าจอปรับขนาดตามความเหมาะสม)

ตัวเลือกอื่นคือมีเส้นทางการแสดงผลที่แตกต่างกันสำหรับอัตราส่วนกว้างยาวที่แตกต่างกัน คุณสามารถมีหนึ่งสำหรับจอกว้างหนึ่งสำหรับ 'ปกติ'

อีกตัวเลือกหนึ่งคือการแยกสิ่งต่าง ๆ เช่นทำให้กล่องข้อความ UI มีขนาดใหญ่ขึ้นหรือเล็กลงขึ้นอยู่กับความละเอียด เมื่อใดก็ตามที่คุณต้องการหาตำแหน่งที่จะวาดแทนที่จะใช้พิกเซลที่แน่นอนให้ทำสิ่งต่าง ๆ เช่น 0.2 ลง, 0.8 ข้าม, กว้าง 0.1, สูง 0.3 ในกรณีนี้คุณมักจะยืดเส้นยืดสายแม้ว่าจะขึ้นอยู่กับว่าคุณวาดสิ่งต่าง ๆ ได้ดี (เช่นยืดพื้นหลัง UI แต่ไม่ใช่ข้อความ)

ในแง่ของ 3D ตราบใดที่คุณตั้งค่าวิวพอร์ตอย่างถูกต้องคุณควรลงเอยด้วยผู้เล่นไวด์สกรีนที่สามารถเห็นได้มากกว่าการตั้งค่าที่ไม่ใช่แบบไวด์สกรีนเล็กน้อย (หรือวาดเส้นขอบสีดำ / หรือยืดมุมมอง)