วิธีวาด Space Invader

• แนะนำ Space Invader Generator และอธิบายหลักการสร้าง อินเวเดอร์พิกเซลอาร์ต แบบอัตโนมัติได้หลากหลายรูปแบบ
• ใช้โครงสร้างจากการสร้าง ลำตัวรูปหลายเหลี่ยมแบบเวกเตอร์ อย่างง่าย ร่วมกับกฎเรขาคณิต เช่น ความสมมาตร จุดสุ่ม และการสะท้อน
• องค์ประกอบอย่างแขน ขา หนวด และเขา ก็ขยายต่อได้ด้วยความสุ่มและวิธีเชิงเรขาคณิต ทำให้ดัดแปลงได้ง่ายและสร้างสรรค์
• จากรูปแบบเวกเตอร์สู่การ แปลงเป็นพิกเซล รวมถึงการลงสีและเพิ่มดวงตา เพื่อให้ได้กราฟิกเกมที่คุ้นตา
• เปิดเผยทั้งกระบวนการสร้างและ ตรรกะการเขียนโค้ด เพื่อให้ผู้เรียนและนักพัฒนาปรับแต่งหรือลองทำตามได้โดยตรง

---

ภาพรวม

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

ที่มาของการเริ่มต้น

• ระหว่างพัฒนาเครื่องมือเรนเดอร์ 3D ชื่อ Rayven จึงตระหนักถึงความสำคัญของการสร้างผลงานที่จับต้องได้จริง
• เลือก Space Invader เพราะเป็น วัตถุที่เข้าใจได้ตรงไปตรงมาและจดจำได้ง่าย พร้อมให้ผลลัพธ์ที่เรียบง่ายและสนุก
• เริ่มจากการลองวาดอินเวเดอร์คลาสสิกหลายแบบด้วยการเรนเดอร์ 3D แบบเวกเตอร์ แล้วคิดว่าน่าจะสนุกหากต่อยอดเป็นตัวสร้างแบบสุ่ม
• ประสบการณ์จากการสร้างครั้งนี้ยังถูกนำไปแชร์ใน Code Challenge ของ Creative Coding Amsterdam ด้วย

Code Challenge

• Space Invaders Code Challenge ได้รับ ความสนใจจากทั้งครีเอเตอร์และนักพัฒนา จำนวนมาก
• กำลังรวบรวมการนำไปทำต่อและผลงานหลากหลายแบบ และมีการแชร์กันอย่างคึกคักในคอมมูนิตี้สายพัฒนา

จากสเก็ตช์สู่พิกเซล

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

กระบวนการสร้างอินเวเดอร์

หาแกนกลาง

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

กำหนดด้านบนและด้านล่าง

• ตอนออกแบบด้านข้างของลำตัว จะสุ่มเลือก จุดบนและจุดล่าง
• รูปร่างทั้งสองด้านจะคงเหมือนกันตามแกนสมมาตร

วาดด้านซ้าย

• วาง จุด 1 ถึง 5 จุด แบบสุ่มทางด้านซ้ายของลำตัว
• สร้างผลลัพธ์ได้หลากหลาย ตั้งแต่รูปหลายเหลี่ยมนูนอย่างง่ายไปจนถึงรูปทรงที่ดัดแปลงอิสระ
• ปัญหาเส้นซ้อนกันจะถูกปรับแก้อย่างเป็นธรรมชาติในขั้นตอนการแปลงเป็นพิกเซล

สะท้อนไปด้านขวา

• ใช้ข้อมูลจุดยอดฝั่งซ้ายเพื่อสร้าง ภาพสะท้อนฝั่งขวา โดยอัตโนมัติ

เชื่อมเป็นรูปหลายเหลี่ยมของลำตัว

• เชื่อมจุดต่าง ๆ เข้าด้วยกันจนได้ ลำตัวแบบเวกเตอร์รูปหลายเหลี่ยม
• เมื่อเติมแขนขาลงไปบนพื้นฐานนี้ ก็จะได้รูปทรงหลักของอินเวเดอร์

เพิ่มแขนขา

วิธีสร้างหนวดและเขา

• สร้างหนวดด้านล่าง (tentacle) และเขาด้านบน (horn) แยกจากกัน โดยใช้วิธีเดียวกันแต่เปลี่ยนตำแหน่งและมุม

หาตำแหน่งเริ่มของหนวด

• ใช้จุดที่อยู่ล่างสุดของลำตัวเป็นฐาน แล้วสุ่มสร้าง หนวดฝั่งซ้าย ก่อน

สเก็ตช์เส้นกึ่งกลาง

• ใช้จุดสุ่มมาสร้าง polyline (เส้นกึ่งกลาง)
• ทำให้ปรับความยาวและรูปทรงของหนวดได้หลากหลายมิติ

เพิ่มความหนา (fat line)

• เพราะมีแค่เส้นกึ่งกลางจะบางเกินไป จึง สร้างจุดเพิ่มทั้งสองข้าง เพื่อทำให้เป็นหนวดหนา
• ยิ่งใกล้ลำตัวจะยิ่งหนา และจะค่อย ๆ เรียวเล็กลงที่ปลาย (เอฟเฟกต์ taper)
• บริเวณที่มุมหักมากจะลดความกว้างของเส้น เพื่อให้จุดเชื่อมดูเป็นธรรมชาติ
• ใช้ พารามิเตอร์ easing เพื่อควบคุมความกว้าง

ทำหนวดให้เสร็จสมบูรณ์

• เชื่อมจุดปลายทั้งสองด้านเข้าด้วยกันจนเป็น หนวดหนา ที่สมบูรณ์

ขยายเป็นหลายหนวดและเขา

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

แปลงจากเวกเตอร์เป็นพิกเซล

ทำลำตัวเป็นพิกเซล

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

ทำแขนขาเป็นพิกเซล

• หนวดและเขามีขนาดบาง จึงมักมีกรณีที่จุดกึ่งกลางไม่อยู่ภายในรูป
• จึงกำหนดพิกเซลโดยตรวจ ระยะห่างระหว่างจุดกับจุดกึ่งกลางของพิกเซลข้างเคียง
• สามารถเพิ่มความเป็นธรรมชาติของหนวดได้ด้วยการแบ่งย่อย mid-line (line splitting)

เพิ่มดวงตา

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

การลงสี

ตรรกะการสร้างสี

• ใช้ OKLCH color space
• เมื่อเทียบกับ HSL จะรักษาค่าความสว่าง (lightness) ให้คงที่ได้ดีกว่า และสร้างชุดสีที่สดมีชีวิตชีวาได้หลากหลาย
• ตรึงค่าความสว่างไว้ค่าเดียว แล้วสุ่มอีกสองพารามิเตอร์เพื่อสร้างความหลากหลาย
• ช่วยให้อินเวเดอร์มีความต่อเนื่องและความสอดคล้องทางภาพ

ใช้การแปรผันของ CSS

• สามารถปรับสีได้ด้วย CSS variables
• ปรับความสว่างและความอิ่มสีให้เหมาะกับแต่ละสถานการณ์ เช่น ความต่างขององค์ประกอบ UI หรือโหมดดีบัก

การทำแอนิเมชัน

• เพิ่มการเคลื่อนไหวให้หนวด เขา และดวงตาด้วย แอนิเมชันเรียบง่าย 2 เฟรม แบบเดียวกับเกมต้นฉบับ
• สร้างเฟรมที่เปลี่ยนรูปโดยคัดลอก mid-line ของแขนขาแล้วเลื่อนแบบสุ่ม
• ดวงตาก็ถูกขยับทีละหนึ่งพิกเซลเพื่อเพิ่มความมีชีวิตชีวา

การปรับขนาด

• เมื่อเพิ่ม ขนาดกริด อินเวเดอร์ก็จะยิ่งละเอียดและซับซ้อนขึ้น
• หากใหญ่เกินไป ความเป็นนามธรรมของเวกเตอร์จะเด่นชัดจนความรู้สึกแบบอินเวเดอร์ดั้งเดิมลดลง
• จำกัดไว้ที่ 31x31 พิกเซล และมีตัวเลือกซ่อนที่ขยายได้สูงสุดถึง 51x51

บทสรุป

• ได้ตัวสร้างที่สามารถสร้าง อินเวเดอร์สีสันสดใส ได้อย่างหลากหลายไม่สิ้นสุดโดยอัตโนมัติ
• กระบวนการทำและการเขียนโพสต์ช่วยให้เกิดทั้งการเรียนรู้ ความสนุก และอิสระในการสร้างสรรค์
• ทั้งโค้ดและหลักการถูกเปิดเผยไว้ครบ ทำให้เหมาะกับการ ฝึกปฏิบัติ ทดลอง และปรับแต่ง

บันทึกหลังการสร้าง

• เก็บโค้ด JavaScript ไว้ในโพสต์เพื่อให้ศึกษาและอ้างอิงได้สะดวก
• ใช้ Anime.js และ dependency ภายนอกหลายตัว ในการออกแบบแอนิเมชัน และพัฒนาด้วย TypeScript
• มีโหมดดีบักแยกต่างหากและตัวเลือก step ให้สำรวจขั้นตอนการสร้างได้โดยตรง

โบนัส - โพสต์การวาดเชือก

• โพสต์อินเทอร์แอ็กทีฟก่อนหน้านี้เกี่ยวกับการวาด รูปร่างเชือก (rope) ด้วย SVG และ JavaScript ก็น่าอ่านเช่นกัน