วิธีวาด Space Invader
(muffinman.io)- แนะนำ 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 ก็น่าอ่านเช่นกัน
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
ฉันก็ลองทำตัวสร้าง space invader เหมือนกัน
มีทั้งเวอร์ชันที่รันได้ และเปิดเผยซอร์สโค้ดไว้ด้วย
ได้แรงบันดาลใจจาก Jared Tarbell
ได้พบว่าผลงานออกมาดูดีได้ง่ายกว่าที่คิด
หัวใจสำคัญคือดวงตา ความสมมาตรสองข้าง และพิกเซลสุ่มภายในสี่เหลี่ยมเล็กๆ
เห็นด้วยเรื่องที่ได้แรงบันดาลใจจาก Jared Tarbell ตัวฉันเองก็รู้สึกว่างานของเขามีความหมายมากในช่วงที่เริ่มจับคอมพิวเตอร์ใหม่ๆ
levitated.net และต่อมาคือ complexification.net ก็เป็นเหมือนอัญมณีของยุคแรกเริ่มของอินเทอร์เน็ต
น่าเสียดายที่การรองรับ Flash (Levitated) และ Java (Complexification) ถูกยกเลิกไปแล้ว ทำให้ตัวอย่างส่วนใหญ่ใช้งานไม่ได้
ถึงอย่างนั้นฝั่ง Complexification ก็ยังรันได้ถ้านำซอร์ส Processing .pde ไปวางใน Processing editor
ชอบทั้ง UI และชุดสีสุ่มมาก
ผลลัพธ์ออกมาเท่มากจริงๆ
นี่เป็นหนึ่งในประสบการณ์การอ่านบนมือถือที่ดีที่สุดครั้งหนึ่งของฉันเลย
ตกใจกับความดีของผลลัพธ์มาก
ดูได้ที่ muffinman.io/invaders
ดีกว่าที่คาดไว้จากการอ่านแค่ตัวบทความ
และวันนี้ฉันก็ได้รู้จัก oklch
พอขัดเกลาและเพิ่ม UI เข้าไปก็รู้สึกว่าดีขึ้นมาก
OKLCH เป็นการอัปเกรดครั้งใหญ่มากจริงๆ
เดิมทีการจัดการสีด้วยโค้ดเป็นเรื่องยาก แต่นี่ช่วยให้สะดวกขึ้นมากอย่างชัดเจน
ส่วนตัวฉันก็ชอบ HSLuv เหมือนกัน แต่เสียดายที่เบราว์เซอร์ยังไม่รองรับแบบเนทีฟ
สนุกดี
ในเชิงย้อนแย้ง มันให้ความรู้สึกเหมือนกำลังสร้าง invader เพื่อช่วยโลกใบนี้ และนี่แหละคือวิถีแฮ็กเกอร์ที่สนุกได้โดยไม่ต้องพึ่ง brute force AI
โปรเจกต์นี้น่าแนะนำมากพอสมควร
มนตร์เสน่ห์ของกระบวนการสร้างสรรค์นั้นสุดท้ายก็อยู่ที่การลงมือทำแบบนั้นเอง
การตรึงภาพไว้ด้านบนเพื่อให้เราเห็นตลอดว่ากำลังพูดถึงอะไรอยู่เป็นอะไรที่ยอดเยี่ยมมาก
ปกติฉันไม่ค่อยชอบหน้าเว็บที่เปลี่ยนไปหวือหวาตามการเลื่อน แต่กรณีนี้เป็นข้อยกเว้นจริงๆ
เจ๋งมาก
ฉันสะสม space invader จากทั่วโลกอยู่
space-invaders.com/flashinvaders ก็น่าดูเหมือนกัน
ที่เกี่ยวข้องกันก็มี levInvaderFractal (2003) จากตำนานเว็บยุค 2000 อย่าง levitated.net
อ่านอย่างเพลิดเพลินมาก
รู้สึกได้เลยว่ามีความใส่ใจทั้งในวิธีแก้ปัญหา ตัวบทความเอง และการนำเสนอ
ฉันคิดว่า space invader ที่ดีควรดูน่าเกรงขามและอันตราย
ถ้ามีก้ามแกว่งไปมาด้วยก็ได้คะแนนเพิ่ม
น่าสนใจมาก
เป็นบทความที่สนุกเป็นพิเศษสำหรับคนที่รักกลิ่นอาย 8 บิตและคอมพิวเตอร์ย้อนยุค
ระหว่างอ่านก็แวบขึ้นมาว่า นี่อาจเป็นภาพดิจิทัลของ ‘ความปรารถนาของแม่ธรรมชาติที่จะทำให้ทุกสิ่งวิวัฒนาการไปเป็นปู’ ก็ได้
เพราะความสมมาตรของ space invader และโครงสร้างอย่างขาและก้ามที่หลากหลาย สุดท้าย invader ทุกตัวก็ดูคล้ายปู
เลยอดจินตนาการไม่ได้ว่า บางทีเราอาจกำลังเห็นความสอดคล้องบางอย่างจาก Matrix อยู่ก็เป็นได้