ปรับขนาด platformer ศิลปะพิกเซลของฉันจาก 720p เป็น 1080p

ฉันกำลังพัฒนา platformer 2D เป็นพิกเซลแบบอาร์ตสำหรับพีซีและสมาร์ทโฟน แต่ฉันติดอยู่กับปัญหาทางเทคนิค

ฉันเลือกที่จะมีความละเอียดไทล์ 32x32 และความละเอียดสไปรต์ตัวอักษร 64x64 ระดับจะแบ่งออกเป็นส่วนต่าง ๆ ที่ฉันเรียกว่า "หน้าจอ" และในแต่ละหน้าจอฉันมีแผ่นกระเบื้อง 40x22.5 ประมาณโดยประมาณ 40x23 ดังนั้นความละเอียดต่ำสุดคือ 1280x720

ในเกมฉันมีกลไกการกระโดดสองครั้งดังนั้นฉันจึงต้องมีมุมมองแนวตั้งที่ดีในแต่ละ "หน้าจอ"

ปัญหามาที่นี่: 1280x720 ไม่ใช่ความละเอียดสูงมาก บนจอภาพ HD หน้าต่างจะไม่ใหญ่และถ้าฉันเพิ่มความละเอียดขึ้น 2 เท่าจะเป็น 2560x1440 และหน้าต่างจะใหญ่กว่าจอ HD จริงมาก หากฉันลองขนาดระหว่าง 1280x720 ถึง 2560x1440 กราฟิกจะเริ่มติดอ่างหรือมีรูปร่างผิดปกติ

ฉันจะแก้ปัญหานี้ได้อย่างไร มีวิธีการแก้ปัญหาที่ไม่ต้องการให้ฉันวาดกระเบื้องและสไปรต์ทั้งหมดในรูปแบบ 16x16 หรือไม่?

2d resolution scale pixel-art

— Xargon Wan
แหล่งที่มา

การลดความละเอียด แต่มีกล้องย้ายหน้าจอเป็นตัวเลือกการออกแบบที่ยอมรับได้หรือไม่? นั่นคือความละเอียดตอนนี้คือ 640 x 360 แต่หน้าจอของคุณยังคงเป็น 1280x720 แต่คุณต้องเคลื่อนที่ไปรอบ ๆ ห้องเหมือนอย่าง Metroid หรือ Axiom Verge?

— lozzajp

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

— สถานการณ์

น่าเสียดายที่ @YoshSynergi นี่ไม่เป็นความจริงสำหรับงานศิลปะพิกเซล การปรับขนาดพิกเซลศิลปะในแบบที่เราอาจขยายพื้นผิวไฮเรสต์หรือฉาก 3D แนะนำสิ่งประดิษฐ์ที่เห็นได้ชัดเจนและแม้กระทั่งเกมที่มีกล้องเสมือนยังคงต้องเลือกเนื้อหาการครอบตัดและการขยายเพื่อให้แน่ใจว่าการปรับขนาดใด ๆ อัตราส่วนจำนวน สเกลเศษส่วนใด ๆ ไม่ว่าจะเกิดอะไรขึ้นในท่อจะสร้างสิ่งประดิษฐ์

— DMGregory

เพียงแค่พยายามให้แน่ใจว่าปัญหานั้นตรงอะไร คุณกำลังบอกว่าเพราะหน้าจอแผนที่ 1280X720 ของคุณเล็กกว่าจอแสดงผลแบบ 1920X1080 คุณจึงต้องการยกระดับการแสดงผลแผนที่ให้เป็นแบบเต็มหน้าจอ ฉันสับสนว่าการวาดไทล์ 16X16 จะไม่สามารถแก้ปัญหาได้ (เท่าที่ฉันเข้าใจ)

— RobM

@DMGregory หากคุณสามารถให้ตัวอย่างบางส่วนกับสิ่งประดิษฐ์ในการปรับขนาดเมื่อใช้สเกลเศษส่วนมันจะยอดเยี่ยมเพราะฉันไม่สามารถจินตนาการสถานการณ์เดียวที่เมื่อฉันปรับขนาดภาพในทั้งสองทิศทางในปริมาณเท่ากันโดยไม่ต้องใช้ปริมาณ ตัวเลขทั้งหมดหรือเศษส่วนที่สิ่งประดิษฐ์ปรากฏขึ้น ด้วยสิ่งประดิษฐ์ฉันหมายถึงสิ่งต่าง ๆ ที่ไม่ควรอยู่ที่นั่นซึ่งแตกต่างจากความพร่ามัวที่เกิดขึ้นจนถึงระดับสูงโดยไม่มีพิกเซลเพียงพอ

— Yosh Synergi

คำตอบ:

สำหรับทุกคนที่สงสัยว่าทำไมเรื่องนี้ถึงเป็นปัญหาของพิกเซลอาร์ตนี่เป็นตัวอย่างที่รวดเร็วโดยใช้ฉากจาก Super Mario World:

หากเราปรับขนาดเกมพิกเซลแบบพิกเซลจาก 720 เป็น 1080 ที่รันไทม์ (วิธีที่กล้องเกมทั่วไปอาจใช้) เราจะได้รับสิ่งประดิษฐ์เนื่องจากอัตราส่วนพิกเซลที่ไม่เป็นจำนวนเต็มของพิกเซลหน้าจอต่อ texel ต้นทาง ตรวจสอบความไม่ลงรอยกันของตัวเลขจากตัวอย่างมาตราส่วนทางด้านขวาและดูว่าใบไม้และหูของมาริโอดูอย่างไร

มันเล่นได้ แต่สูญเสียความคมชัดของศิลปะพิกเซลที่มีเสน่ห์ และในการเคลื่อนไหวสิ่งประดิษฐ์เหล่านี้สามารถคลานข้ามสไปรต์ทำให้ดูแวววาว

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

น่าเสียดายที่อัตราส่วน 1.5x ระหว่าง 720p และ 1080p เป็นสถานการณ์ที่เลวร้ายที่สุดที่เราสามารถพบได้

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

ตัวเลือกของคุณต้มลงไปที่:

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

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

นี่ไม่ได้หมายความว่าคุณจะต้องละทิ้งทรัพย์สินที่มีอยู่ซึ่งดูดีไปที่ 720p บทความนี้อธิบายการแลกเปลี่ยนบริบทระหว่างชุดเนื้อหาที่แตกต่างกันเพื่อรองรับการแก้ไขเป้าหมายที่กว้างขึ้น (ใน Unity แต่สามารถนำหลักการไปใช้ในเกมที่ไม่ใช่ Unity ได้เช่นกัน)
- ดังที่คุณทราบการวาดสินทรัพย์ทั้งหมดของคุณใหม่ที่ขนาดครึ่งหนึ่ง (ขนาด16x16 ตัวอักษร 32x32 ตัวอักษร ) จะช่วยให้คุณจัดการ 720p ที่ระดับ 2x และ 1080p ที่ระดับ 3 เท่าโดยมีจำนวนกระเบื้องเท่าที่แสดงในขณะนี้ คุณอาจพบว่าความละเอียดไทล์เล็ก ๆ มีข้อ จำกัด ทางสายตามากขึ้น
- คุณสามารถวาดชุดสินทรัพย์ "รูปแบบขนาดใหญ่" สำรองที่มีขนาดใหญ่กว่า 150% ( กระเบื้อง 48x48 ตัวอักษร 96x96 ตัว ) ซึ่งจะจัดการ 1080p ที่ระดับ 1x (คุณต้องการใช้เนื้อหาที่มีอยู่ของคุณสำหรับ 720p หรือ 1440 เป็นต้น) ความละเอียดที่มากขึ้นจะช่วยให้คุณรักษาความน่าเชื่อถือของงานศิลปะปัจจุบันของคุณได้ดังนั้นคุณไม่ต้องเสียสละสไตล์และรายละเอียดที่คุณมีอยู่ตอนนี้
- ตัวเลือกที่สามคือการวาดชุดเนื้อหาที่มีขนาดเล็กกว่าเล็กน้อยเพียงอย่างเดียว (ขนาด24x24 ตัวอักษร 48x48 ตัวอักษร ) ซึ่งสามารถจัดการ 1080p ที่ระดับสเกล 2x และอีกครั้งอาจหมายถึงการเสียสละรายละเอียดน้อยกว่าการลดขนาดสินทรัพย์ทั้งหมด
  
  ตัวเลือกทั้งสามตัวนี้จะช่วยให้คุณคงเฟรมและเกมเพลย์ไว้เหมือนเดิมที่ 720 และ 1080 แต่ด้วยค่าใช้จ่ายของงานสินทรัพย์ที่เพิ่มขึ้นเป็นสองเท่า

ดังนั้นน่าเสียดายที่ไม่มีการชนะง่ายๆที่นี่เพียงแค่การแลกเปลี่ยนที่ต่างกัน

— DMGregory
แหล่งที่มา

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

— Gnemlock

อธิบายอย่างละเอียดเกี่ยวกับตัวเลือก @ DMGregory ในการสร้างเนื้อหาทางเลือกที่ความละเอียดต่างกัน:

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

ตัวเลือกที่ดีที่สุดถัดไปที่ฉันรู้คือลองอัลกอริธึมการปรับขนาดรูปภาพที่หลากหลายโดยเฉพาะอัลกอริธึมการปรับขนาดพิกเซลแบบศิลปะ เหมือนเมื่อก่อนนี่ไม่ใช่เพนซ่า การเลือกอัลกอริธึมการขยายที่เฉพาะเจาะจงนั้นมีความเฉพาะเจาะจงสูง มันมีส่วนเกี่ยวข้องกับ 'ความรู้สึก' ในเกมของคุณเช่นเดียวกับศิลปะและแม้จะมีอัลกอริธึมที่ดี + การจับคู่ศิลปะคุณอาจต้องปรับแต่งสไปรท์ด้วยมือ

ในทั้งสองกรณีความคิดคือการใช้เครื่องมือเพื่อทำงานเป็นกลุ่มสำหรับคุณและมุ่งเน้นความพยายามของมนุษย์ในรายละเอียดที่เหลือ เช่นเดียวกับ @DMGregory กล่าวว่า "ไม่มีการชนะอย่างง่ายดายที่นี่เพียงแค่การแลกเปลี่ยนที่ต่างกัน"

แก้ไขเกี่ยวกับการปรับขนาดเศษส่วน: อัลกอริธึมการปรับขนาดพิกเซลส่วนใหญ่เพิ่มขึ้นโดยตัวเลขทั้งหมดเท่านั้น การย่ออัลกอริธึมการปรับขนาดของคุณเองคุณอาจต้องรวมการลดอัตราการสุ่มเพื่อลดขนาด 1.5 เท่าที่คุณต้องการ นี่คือผลลัพธ์ของการรวมอัลกอริธึม scale3x เข้ากับ upscale & อัลกอริทึม fant เป็น downscale 50%:

เดิม:

ลดขนาด:

— Pikalek
แหล่งที่มา

น่าเสียดายที่อัลกอริธึมการปรับขนาดพิกเซลศิลปะส่วนใหญ่ที่ฉันพบยังมีแนวโน้มที่จะจัดการกับการลดอัตราการสุ่มสัญญาณทั้งจำนวน (2x, 3x, 4x โดยปกติ) ดังนั้นพวกเขาจึงไม่ได้ช่วยอะไรมากนักในกรณี 720-> 1080 (อาจมีใครสามารถใช้ตัวเพิ่มขนาด 3x พิกเซลจากนั้นลดตัวอย่างครึ่ง ... ไม่แน่ใจว่ามันจะดูดีขึ้นหรือแย่ลงกว่า upscale โดยตรง)

— DMGregory

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

— Pikalek

+1 กับโซลูชันเวกเตอร์ คุณต้องทำให้สินทรัพย์มีขนาดใหญ่และลดต่ำลงอย่างแท้จริง

— Mark Aven