ไม่นึกมาก่อนว่าวันหนึ่งผมจะทำให้ตุ๊กตาที่บ้านให้ออกมาเดินบนจอคอม พร้อมกับเพลง Lo-fi ประกอบ ใครสนใจจะทำอะไรคล้ายๆ แบบนี้ ผมเล่าที่มาที่ไป รวมถึงคอร์สที่เรียนเพื่อใช้ทำวีดีโอแบบด้านบนไว้ในบทความนี้ครับ บอกก่อนนะว่าวิธีของผมน่าจะไม่ใช่วิธีมาตรฐาน เพราะมาแบบจับพลัดจับผลู
เกม HTML
เรื่องเริ่มจากผมอยากลองดูว่าเกมคอมพิวเตอร์แบบง่ายๆ เบสิกๆ เค้าทำกันยังไง เลยลองไปดูคอร์สเรียนฟรีบน Udemy ชื่อ Code Your First Game: Arcade Classic in JavaScript on Canvas ของ Chris DeLeon ซึ่งสอนทำเกมแบบง่ายๆ อย่างเกม Pong (นึกถึงเกม Atari 8-bit สมัยก่อนที่ มีลูกบอลเด้งไปเด้งมาบนหน้าจอ แล้วเรามีหน้าที่บังคับแท่งยาวๆ แนวนอนด้านล่างจอ ไปทางซ้ายไปทางขวา เพื่อสะกัดลูกบอลไม่ให้ตกลงไปด้านล่าง) คอร์สนี้สอนแบบดิบๆ โดยใช้ Notepad เขียนโค้ด ซึ่งน่าจะถูกใจสายฮาร์ดคอร์เลย พอเรียนคอร์สฟรีจบก็เลยอุดหนุนคอร์สจ่ายเงินของเขาซะหน่อย (How to Program Games: Tile Classics in JS for HTML5 Canvas) ซึ่งเขาก็สอนเกมชนิดต่างๆ เพิ่มเติม อย่าง เกมรถแข่ง เกมที่ให้ตัวละครเดินไปในเขาวงกตเพื่อหาทางออก และอื่นๆ โดยสไตล์การสอนก็เป็นแบบเดิมคือ ทำบน Notepad โดยไม่ใช้ตัวช่วยอะไรเลย
ข้อดีของคอร์สของ Chris คือ ทำให้คุณเข้าใจโลจิกในการเขียนเกมแบบเปลือยทุกขั้นตอน และก็ไม่ต้องมีพื้นฐานความรู้อะไรมาก่อนเลย น่าจะเหมาะสำหรับผู้เริ่มต้น ส่วนข้อเสียก็คือ การเขียนโค้ดยาวๆ บน Notepad มันไม่สะดวก หา bug ก็ยาก
แม้คอร์สของคริสปูพื้นฐานในการเขียนเกมได้เป็นอย่างดี แต่ผลงานที่ออกมามันก็ไม่สวยเท่าไหร่ คือเป็นแบบหน้าจอดำๆ แล้วมีบล็อกต่างๆ วิ่งไปมา ออกแนวยุค 80 ผมเลยไปหาคอร์สเพิ่ม แล้วก็ได้เจอคอร์ส Learn Game Development with JavaScript ของ Frank Dvorak
คราวนี้เกมออกมาน่าเล่นเลย ภาพสวย มีซาวน์เอฟเฟกต์ประกอบ แถมตัวละครก็ animate ได้ด้วย ที่สำคัญคอร์สนี้เรียนได้ไม่ยากด้วย เพราะเขาเตรียมไฟล์ภาพและเสียงต่างๆ ไว้ให้เราหมดแล้ว แค่เราอาจจะต้องมีพื้นฐาน OOP (Object-Oriented Programming) ซะนิดหน่อย เพราะเปิดมาเขาก็เขียนแต่ละส่วนของเกมด้วย class เลย ใครไม่คุ้นเคยกับ OOP ก็อาจจะตกใจ แต่เอาจริงๆ ถึงจะไม่รู้จัก OOP มาก่อน ถ้าทำตามเขาไปเรื่อยๆ ก็น่าจะเข้าใจได้
เกมที่คอร์สนี้สอนเป็นเกมยิง โดยใช้เทคนิค parallax ที่ให้ตัวเราอยู่กับที่ แต่เคลื่อนฉากหลังผ่านตัวเราไปเรื่อยๆ สร้างภาพหลอกตาเสมือนว่าเรากำลังเคลื่อนที่ไปข้างหน้า (อย่างในวิดีโอของผมข้างบน) คอร์สนี้ผมแนะนำเลยครับ ใครจะเอาไป inspire เด็กๆ ให้สนใจ programming ก็ได้
ทีนี้ผมก็อยากลองเขียนเกมง่ายๆ ของตัวเองแล้วสิ
Animation
คอร์สเรียนของ Frank ทำให้รู้ว่าการจะ animate ตัวละครได้ เราจะต้องมีสิ่งที่เรียกว่า sprite sheet อย่างในภาพด้านล่างซะก่อน ซึ่งเราจะขยันวาดภาพออกมาทีละภาพแล้วเอามาเรียงกันก็ได้ แต่ผลงานที่ออกมาก็อาจเคลื่อนไหวไม่สมูทถ้าไม่รู้เทคนิคที่ถูกต้อง ที่สำคัญคือ การวาดภาพซ้ำๆ หลายๆ ภาพ มันน่าน่าเบื่อจะตาย! ผมเลยอยากใช้เทคนิค rigging เพื่อทำตัวละครให้เหมือนเป็นหุ่นกระบอก ที่เราจะบังคับควมคุมให้ทำท่าทำทางต่างๆ ได้ ซึ่งแน่นอนว่าผมทำไม่เป็นและก็ต้องไปตามหาคอร์สบน Udemy อีกนั่นแหละ
(อ่อ ลืมบอกไปว่า Frank มีคอร์สฟรีสอนใช้ JavaScript ทำ animation จาก sprite sheet ด้วยนะ ใครสนใจ ลองดูคอร์ส JavaScript Game Development for Beginners: Sprite Animation ได้ครับ)
โปรแกรมที่เอาไว้ทำ rigging เหมือนจะมีหลายตัว อย่าง Spriter, Dragon Bones, และ Spine ผมเลือกเรียนคอร์ส SPRITER 2D Humanoid Character Rigging & Animation for Unity ของ Billy McDaniel เพราะดู preview คอร์สแล้วเห็นว่าผลงานออกมาดูสวยดี และแม้แต่เวอร์ชั่น Pro ของ Spriter ก็ไม่ได้ราคาแพงเกินไป (60 USD) ผมคิดว่าผมตัดสินใจถูกนะที่เรียนคอร์สนี้ เพราะเค้ามี tips and tricks ต่างๆ มาสอนทำให้เราประหยัดเวลาลองผิดลองถูกได้เยอะ เรื่องที่ดูเหมือนง่ายอย่างจะวางชิ้นส่วนต่างๆ ของคาแรกเตอร์ให้ชิ้นไหนอยู่บนชิ้นไหนอยู่ล่าง หรือ การกรุ๊ปชิ้นส่วนต่างๆ ให้เคลื่อนไปพร้อมๆ กัน พอลองทำดูจริงๆ จะพบว่า ถ้าไม่มีคนแนะนำคงต้องใช้เวลานานพอสมควรกว่าจะจับทางถูก
หลังจากผมสร้าง sprite sheet เป็นแล้ว ผมก็พร้อมที่จะดีไซน์คาแรกเตอร์ของตัวเอง ซึ่งผมก็เอาตุ๊กตาที่บ้านนี่แหละมาเป็นแบบ โดยผมใช้โปรแกรมยอดฮิตบนไอแพดอย่าง Procreate วาด (ผมเคยเรียนคอร์ส สร้างสรรค์งานอาร์ตแบบมีสไตล์ด้วยแอพ Procreate ของ ASUKA111 บนแพลตฟอร์ม FutureSkill พอดีตอนนั้นอยากหัดใช้ Procreate เพื่อวาดภาพประกอบลงหนังสือของตัวเอง)
ถึงตอนนี้ผมก็ทำให้เจ้าตุ๊กตาหมีเดินได้แล้ว แต่กลับกลายเป็นว่ายังไม่มีไอเดียว่าจะทำออกมาเป็นเกมอะไรนี่สิ อาจเป็นเพราะปกติผมเองก็ไม่ค่อยได้เล่นเกมด้วยมั้ง ผมเลยเกิดความคิดว่าจะทำเพลง Lo-fi มาประกอบวีดีโอ โดยให้เจ้าหมีของผมเดินวนลูปไปเรื่อยๆ ดีกว่า
ว่าแต่เพลง Lo-fi นี่มันทำยังไงล่ะ?
เพลง Lo-fi
ผมก็เลือกหาคอร์สบน Udemy อีกเหมือนเดิมนั่นแหละ คราวนี้ค้นพบว่าโปรแกรมทำเพลง หรือที่มักเรียกว่า DAW (Digital Audio Workstation) มีดังๆ อยู่ 3 โปรแกรม คือ Logic Pro X (บน Mac), FL Studio และ Ableton Live พอค้นหาข้อมูลเพิ่มเติมก็พบว่าโปรแกรม Logic Pro X เพิ่งออกเวอร์ชั่นบนไอแพดชื่อ Logic Pro for iPad ซึ่งเก็บ subscription รายเดือน ซึ่งก็ดีสำหรับผม เพราะปกติโปรแกรม DAW พวกนี้ราคาค่อนข้างแพงและผมก็ไม่รู้ว่าตัวเองจะมีแพชชั่นทำเพลงไปนานแค่ไหน ผมเลยเลือก Logic Pro for iPad เป็น DAW สำหรับการทำเพลง Lo-fi ครั้งนี้
ผมเลือกคอร์สสอนทำเพลง Lofi Music Production – A Songwriters Guide ของ Mike Barnes ซึ่งเน้นสอนการทำเพลงสไตล์ Lo-fi ไม่ได้เน้นสอนการใช้ DAW ตัวใดตัวหนึ่งเป็นพิเศษ แต่พอดีในคอร์สเค้าสาธิตการทำเพลงด้วย Logic Pro X ซึ่งก็แทบจะเหมือน Logic Pro on iPad แป๊ะ เลยเหมือนยิงปืนนัดเดียวได้นกสองตัว เรียน Lo-fi ไปพร้อมกับ Logic Pro on iPad ซะเลย อีกอย่างที่ดีคือ คอร์สนี้สั้นดี เหมาะกับคนร้อนของอยากเห็นผลลัพธ์ไวๆ
เอาล่ะ หลังที่อ่านมาถึงตรงนี้ ทุกคนคงเดาได้แหละว่าผมน่าจะต้องเป็นตัวแทนจำหน่าย Udemy แน่ๆ … เปล่า! ผมแค่ซื้อคอร์สของเขาบ่อย ไม่ได้มีส่วนได้ส่วนเสียแต่อย่างใด