GAMESLASHKimo แนะวิธีแก้ภาพเกม Pixel Art จาก Claude ให้พิกเซลคมและสม่ำเสมอ
โดย GameSlash
ดูตัวอย่างจากวิดีโอ Kimo เรื่อง Nearest Filtering, Integer Scaling และขนาดพิกเซล พร้อมแยกความต่างจาก Pixel Snapping
Kimo (@asynkimo) แชร์ 8 แนวทางเรนเดอร์เกม Pixel Art ที่สร้างด้วย Claude โดยชี้ว่าภาพต้นฉบับที่ดีอาจดูแย่ได้หากตั้งค่าการแสดงผลไม่ถูกต้อง ในวิดีโอความยาว 15 วินาที เขาสาธิต 3 ปัญหา ได้แก่ ภาพเบลอ พิกเซลกว้างไม่เท่ากันหลังขยายภาพ และขนาดพิกเซลของตัวละครที่ไม่ตรงกับฉาก
1. ทำขอบพิกเซลให้คม
Kimo แนะนำให้ใช้ Texture Filter แบบ Nearest ปิด Mipmaps ของ Sprite และหลีกเลี่ยงการบีบอัดแบบสูญเสียข้อมูล ในวิดีโอเขาเปลี่ยนจาก Linear เป็น Nearest เพื่อรักษาขอบพิกเซลของตัวละครให้คม
2. Integer Scaling: ขยายภาพให้พิกเซลกว้างเท่ากัน
Kimo แนะนำให้เลือกความละเอียดตั้งต้นเพียงค่าเดียว เช่น 384×216 แล้วขยายภาพทั้งจอด้วยตัวคูณจำนวนเต็ม ส่วนพื้นที่จอที่เหลือให้เติมแถบดำ ในวิดีโอ การขยาย 5.45 เท่าทำให้พิกเซลข้างกันมีความกว้าง 5 และ 6 พิกเซล ขณะที่การขยาย 5 เท่าทำให้ทั้งสองกว้างเท่ากันที่ 5 พิกเซล
3. Pixel Snapping: จัดตำแหน่งให้ตรงกริด
อีกข้อที่ Kimo แนะนำคือจัดตำแหน่งกล้องและ Sprite ให้ตรงกับพิกเซลจำนวนเต็ม Integer Scaling จัดการวิธีขยายภาพทั้งภาพ ส่วน Pixel Snapping จัดการตำแหน่งที่กล้องและวัตถุถูกวาดบนกริด ทั้งสองวิธีแก้ปัญหาคนละจุด โดยวิดีโอนี้ไม่ได้สาธิต Snapping โดยตรง ภาพคู่ด้านบนจึงเป็นตัวอย่างการขยายภาพเท่านั้น
4. ใช้ขนาดพิกเซลเดียวกันทั้งเกม
รักษาขนาดพิกเซลของ Sprite, Tile, เอฟเฟกต์ และ UI ให้สอดคล้องกัน ในวิดีโอ Kimo เปรียบเทียบพิกเซลของตัวละครกับฉาก เพื่อให้เห็นว่าขนาดที่ต่างกันทำให้ภาพดูเหมือนนำคนละชิ้นมาแปะรวมกัน
5. หลีกเลี่ยงการหมุนภาพอย่างอิสระ
Kimo แนะนำให้ใช้ภาพที่วาดมาสำหรับมุมหมุนนั้น หรือหมุนทีละ 90 องศา แทนการหมุน Pixel Art อย่างอิสระระหว่างเล่น
6. ใช้ฟอนต์พิกเซลที่ขนาดดั้งเดิม
แสดงฟอนต์พิกเซลที่ขนาดที่ออกแบบไว้ และปิด Antialiasing เพื่อให้ขอบตัวอักษรคม
7. จัด Particle และเอฟเฟกต์ให้อยู่บนกริดเดียวกัน
ให้ Particle และเอฟเฟกต์ต่าง ๆ ใช้กริดพิกเซลเดียวกับ Sprite เพื่อให้ภาพดูสอดคล้องกัน
8. เทียบ Asset ใหม่กับ Tile ก่อนใช้
ก่อนนำ Asset เข้าเกม ให้วางเทียบกับ Tile ที่ระดับ 1× แล้วตรวจว่าขนาดพิกเซลตรงกัน
ค่าที่ Kimo แนะนำสำหรับแต่ละเอนจิน
สำหรับ Godot เขาแนะนำ Nearest, Stretch Mode แบบ viewport และ Scale Mode แบบ integer เปิด Pixel Snapping ของทั้ง 2D Transform และ Vertices นำเข้า Sprite แบบ Lossless และตั้ง Antialiasing ของฟอนต์เป็น None ส่วน Unity ให้ใช้ Point, ปิด Compression และ Mipmaps ใช้ Pixels Per Unit เดียวกันสำหรับ Sprite ตั้ง Pixel Perfect Camera ให้ตรงกับความละเอียดตั้งต้น และปิด Antialiasing