สิ่งที่ทำให้ภาพศิลปะพิกเซลปรับแตกต่างจากภาพอื่น ๆ


13

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


  1. ฉันได้ยินมาว่าฉันควรจะปรับสเกลพิกเซลภาพเป็น 200%, 300% และอื่น ๆ ไม่ได้อยู่ระหว่างขนาดเช่น 120%

    • ทำไมถึงเป็นอย่างนั้น? ไม่ควรปรับ "ใช้งานได้" อย่างที่มันทำกับรูปภาพอื่น ๆ
    • ถ้าฉันต้องทำให้ตัวละครของฉันใหญ่ขึ้นหรือเล็กลงเพื่อให้ได้รูปแบบการเล่นที่ถูกต้อง ฉันจะแก้ไขสิ่งนี้ได้อย่างไร
  2. ฉันบอกว่า "ไม่ดี" ในการใช้งานภาพพิกเซลในระดับที่แตกต่างกันในหนึ่งเกม - เพราะเหตุใด

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

คำตอบ:


31

การปรับสเกลด้วยจำนวนเต็ม

ปรับขนาดได้ 2x, 3x ... n x คือง่าย - แต่ละพิกเซลจะกลายเป็นเพียงn x nตารางพิกเซลและรูปลักษณ์ของเทพดาเดิมจะถูกเก็บรักษาไว้อย่างสมบูรณ์แบบ (รวมทั้งเส้นคมมุมและบันไดคดเคี้ยวเลี้ยว) .

เราพบปัญหาเมื่อปรับสเกลพิกเซลด้วยจำนวนเศษส่วน (เช่น 1.5x) เนื่องจากพิกเซลนั้นไม่ต่อเนื่องกันตามธรรมชาติ เราไม่มี "ครึ่งพิกเซล" จริงๆ

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

ดังนั้นโดยปกติเราจะใช้การกรอง "เพื่อนบ้านที่ใกล้ที่สุด" (หรือที่เรียกว่าการกรองแบบจุด) เพื่อให้แต่ละพิกเซลหลังจากการปรับขนาดใช้สีจากพิกเซลเดียวในสไปรท์ดั้งเดิม

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

น่าเสียดายที่ซอฟต์แวร์แก้ไขภาพและการกรองพื้นผิว GPU นั้นไม่ได้เลือกอย่างมากว่าพวกเขาจะทำซ้ำหรือข้ามพิกเซล - พวกเขาเพียงแค่ทำตามกฎการปัดเศษขั้นพื้นฐานซึ่งสามารถทำให้ผลลัพธ์ดูผิดเพี้ยนและไม่สม่ำเสมอ

ลองดูตัวอย่างด้านล่าง ตรงกลางเราปรับขนาดสไปรต์เห็ด 150% โดยใช้การกรองเพื่อนบ้านที่ใกล้ที่สุดและผลลัพธ์จะดูไร้ค่าและไร้สาระ ตาข้างหนึ่งใหญ่กว่าอีกข้างโครงร่างบางอันหนาในขณะที่บางตาอยู่และจุดที่โค้งมนดูไม่เป็นระเบียบ ... มันดูไม่เหมือนที่ศิลปินพิกเซลจะวาดลงบนจุดประสงค์

ตัวอย่างของสิ่งประดิษฐ์จากการใช้สเกลที่ไม่ใช่จำนวนเต็ม

ถ้าเราต้องการผีสางที่ใหญ่กว่า 150% (พูดเพื่อทำให้เกมเพลย์รู้สึกถูกหรือสนับสนุนความละเอียดของหน้าจอทางเลือก ) จากนั้นเราสามารถทาสีพื้นที่ปัญหาเช่นตัวอย่างทางด้านขวา ตอนนี้ดูเหมือนว่าสิ่งที่ศิลปินจะทำและสอดคล้องกับงานศิลปะอื่น ๆ ในเกม (แม้ว่าฉันไม่ใช่ศิลปินพิกเซลที่ยอดเยี่ยม แต่ก็ยังดีกว่าได้)

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


นอกเหนือ: เครื่องชั่งน้ำหนักเศษส่วนยังสามารถปลูกขึ้นที่รันไทม์

ลองนึกภาพเกมของคุณอยู่ในความละเอียด NES (256 x 240) และคุณต้องการแสดงบนหน้าจอ 1080p

1080 ÷ 240 = 4.5 ดังนั้นบางพิกเซลแหล่งที่มาหรือ "texels" ในฉากของคุณจะถูกเป่าขึ้นถึง 5 พิกเซลหน้าจอในขณะที่คนอื่น ๆ มีเพียง 4 เท่านั้นสร้างความบิดเบือนตามที่เราเห็นด้านบน ในการเคลื่อนไหวพวกเขามักจะทำให้ sprites ripple และระยับวอกแวกโดยไม่มีสาเหตุชัดเจน:

ตัวอย่างการเคลื่อนที่ของเห็ดที่มีเศษส่วน

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

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

การรักษาระดับพิกเซลที่สอดคล้องกัน

"กฎ" นี้มีความสอดคล้องกับโวหาร

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

ตัวอย่างการปรับขนาดสินทรัพย์แตกต่างกันในเกมเดียว

ในตัวอย่างด้านซ้ายฉันรวบรวมสไปรต์บางส่วนจาก Super Mario World ทั้งหมดในระดับเดียวกันและมันก็ดูดี

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

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

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

แต่ฉันต้องทำอย่างไร

ไม่ไม่ได้จริงๆ มันเป็นเกมของคุณและคุณสามารถทำให้มันเป็นแบบที่คุณต้องการ

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

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

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.