คุณจะจัดการอัตราส่วนภาพที่แตกต่างใน platformer 2d อย่างไร

เมื่อนานมาแล้ว 4: 3 เป็นอัตราส่วน apect เพียงอย่างเดียวที่คุณจะพบบนพีซี วันนี้สิ่งที่พบบ่อยที่สุดคือ 16:10 แต่จอภาพใหม่ส่วนใหญ่ (โดยเฉพาะแลปท็อป) คือ 16: 9

ฉันกำลังเขียน platformer 2D และฉันไม่สามารถตัดสินใจได้ว่าจะจัดการกับอัตราส่วนต่าง ๆ ทั้งหมดได้อย่างไร

นี่คือแนวคิดบางส่วน:

1. 4: 3 ได้รับเนื้อหามากขึ้นเวดกรีนถูกตัดทั้งด้านบนและล่าง
2. 16: 9 ได้เนื้อหามากขึ้นส่วนที่เหลือถูกตัดไปทางขวา
3. เกมดังกล่าวอยู่ใน 16: 9 พร้อมแถบแนวนอนสีดำสำหรับ ARs อื่น ๆ
4. เกมนี้เป็นแบบ 4: 3 พร้อมแถบแนวตั้งสีดำสำหรับ ARs อื่น ๆ

หากคุณไม่มีเหตุผลที่น่าสนใจที่จะทำให้เกมของคุณ "กว้าง" (ในกรณีที่ใช้วิธีที่ 3) หรือแคบ (ในกรณีที่ใช้วิธีที่ 4) ไปด้วยการรวมกันของ 1 และ 2 (หรืออาจเป็น 3 และ 4 ถ้าคุณต้องการ ซ่อนสิ่งที่ปิดหน้าจอ)

เลือกอัตราส่วนการประนีประนอม (16:10 เป็นอัตราส่วนที่ดีหรือแม้แต่ 16:11) หากผู้ใช้อยู่บน 16: 9 ให้เนื้อหาเพิ่มเติมแก่พวกเขาและถ้าพวกเขาอยู่ใน 4: 3 ให้เนื้อหาเพิ่มเติมที่ด้านบนและด้านล่าง

ไม่ว่าในกรณีใด - ฉันคิดว่ามันดีที่สุดที่จะใช้กับสิ่งนี้ในคลาสกล้องของคุณ:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

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

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

ผู้ใช้ที่ฉันคิดว่าโดยทั่วไปจะยอมรับแถบสีดำเมื่อแสดงด้วยเนื้อหาแบบเต็มหน้าจอ ดังนั้นกลยุทธ์ 3 และ 4 จึงเป็นที่ยอมรับหากไม่เหมาะ พวกเขามีข้อได้เปรียบที่คุณรู้อยู่เสมอว่าเนื้อหาที่คุณกำลังเรนเดอร์มีมากน้อยเพียงใด: เช่นไม่มีบั๊กที่ลับๆซึ่งเกิดขึ้นเมื่อทำงานในหน้าจอกว้างเท่านั้น

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

สมมติว่าคุณมี UI / HUD ซึ่งถูกซ้อนทับอยู่เหนือสุดของโลก 2D 'ทางกายภาพ' แล้วมันก็ตรงไปตรงมามากพอ รายการที่มีลำดับความสำคัญต่ำนั้นง่ายคุณแค่ทำให้แน่ใจว่าวิวพอร์ต 4: 3 มีศูนย์กลางอยู่ที่สิ่งที่น่าสนใจจากนั้นดึงสิ่งที่มีลำดับความสำคัญต่ำที่สุดเท่าที่จะทำได้ไปทางซ้ายหรือขวา สิ่งที่มีความสำคัญสูงในโลก 2D (เช่นตัวละครของคุณศัตรูที่ตัวละครของคุณกำลังต่อสู้อยู่โดยตรง) ควรถูกเก็บไว้ในวิวพอร์ต 4: 3 เช่นไม่มีรหัสเกมของคุณซูมกล้องเพื่อใช้ประโยชน์จากอสังหาริมทรัพย์หน้าจอพิเศษเพราะคุณจะมีรหัสเกมที่ทำหน้าที่แตกต่างกันในแบบไวด์สกรีนและไม่ ให้รหัสเกมสมมติว่าโลกกำลังแสดงผลใน 4: 3 และให้รหัสการเรนเดอร์ของคุณทราบว่าจริงๆแล้วมีมากกว่าการมองเห็น

การจัดวางองค์ประกอบ UI / HUD สามารถเข้าถึงได้สองวิธี:

1. การจัดตำแหน่งแบบไดนามิก: ระบุองค์ประกอบทั้งหมดของคุณที่สัมพันธ์กับขอบหน้าจอ (เช่นไม่ใช่ทั้งหมดที่สัมพันธ์กับ 0,0) องค์ประกอบจะอยู่ใกล้หรือไกลออกไปจากกึ่งกลางหน้าจอทั้งนี้ขึ้นอยู่กับอัตราส่วนภาพของคุณ จุดเด่น: ช่วยให้คุณสามารถเชื่อมโยงสิ่งต่าง ๆ เข้ากับมุมและทำให้พวกเขา 'ใช้งานได้' จุดด้อย: ยากที่จะทำให้เค้าโครงทำงานได้ดีตรงกลางและความเสี่ยงขององค์ประกอบทับซ้อนกัน
2. ตำแหน่งคงที่แบบอนุรักษ์นิยม: จัดวางองค์ประกอบทั้งหมดของคุณใน 4: 3 และเพียงชดเชยพวกเขาเมื่อทำงานในจอกว้าง จุดเด่น: ตรรกะ / พิกัดเค้าโครงที่เรียบง่ายไม่คลุมเครือ จุดด้อย: ออกจากพื้นที่ภาพที่มองเห็นทางด้านซ้ายและด้านขวาของส่วนควบคุม UI ของคุณซึ่งคุณจะเห็นโลก 2 มิติในพื้นหลัง แต่ไม่มี UI

เกมไหนที่เหมาะสมที่สุดสำหรับคุณ? หากคุณกำลังสร้าง Canabalt (เช่นเกมที่ขึ้นอยู่กับความเร็วแนวนอน) อัตราส่วนกว้างที่มีแถบสีดำ (# 3) ในมุมที่แคบกว่าจะเหมาะสำหรับการเน้นการเคลื่อนไหวด้านข้าง ในทางกลับกันถ้าคุณมีเกมทางอากาศเช่น Super Smash Brothers หน้าจอที่สูงขึ้น (# 2 หรือ # 4) จะดีที่สุด ฉันตัดสินใจบนพื้นฐานของสิ่งที่ดีที่สุดสำหรับเกม

ฉันเห็นด้วยกับผู้เผชิญเหตุอื่น ๆ ที่ควรคำนึงถึงองค์ประกอบที่อาจปรากฏในหน้าจอเดียว แต่ไม่เห็นด้วยกับอีกจอหนึ่ง

Castle Crashers ดูเหมือนจะใช้หมายเลข # 2 และ # 3 เล็กน้อย - คุณจะได้รับแถบสีดำบนหน้าจอ 4: 3 และพื้นที่ที่มองเห็นได้เล็กกว่าเล็กน้อย - แต่คุณควรมี "พื้นที่ปลอดภัย" รอบขอบ ที่ซึ่งคุณไม่ได้ใส่อะไรที่มีความสำคัญอยู่ดี (สำหรับหน้าจอเช่นทีวี CRT ที่ตัดขอบ)

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

ฉันเชื่อว่าการถ่ายทำรายการโทรทัศน์มีลักษณะเป็นแบบนี้เช่นว่าหน้าจอไวด์สกรีนก็โอเค (ทุกคนไม่แออัดท่ามกลางฉาก) ในขณะที่การตัด 4: 3 นั้นไม่รุนแรงและมีปรากฎน้อยมาก

นี่คือบล็อกโพสต์เกี่ยวกับการจัดการหน้าจอหลายขนาดบนอุปกรณ์มือถือและนี่เป็นส่วนหนึ่งที่สองวิธีวิธีนี้เขียนในภาษาจาวาโดยใช้LibGDX มันเหมือนคำตอบของ Andrew แต่อาจช่วยคนอื่นได้

โพสต์บล็อกครอบคลุมสามวิธีหลัก:

1. อยู่กับแถบสีดำด้านบนหรือด้านข้าง
2. ใช้วิวพอร์ตเสมือน
3. ใช้องค์ประกอบลอยตัวเช่นเดียวกับที่คุณจะพบในเค้าโครงหน้าเว็บ flexbox

หมายเลข 1 เป็นคำอธิบายที่ค่อนข้างดี

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

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