วิธีการสร้างวิดีโอเกม html5

อัศวินคาวบอยผู้ผจญภัยไปกับยานอวกาศของเขา ได้ขอเชิญชวนทุกท่านเข้ามาร่วมเล่นเกมไปพร้อมกับเขาได้แล้วตอนนี้  หากคุณตัดสินใจคุณจะได้พบกับยานอวกาศของคุณ ที่กำลังปฏิบัติหน้าที่หลบหลีกยานอวกาศของผู้บุกรุก และคุณต้องทำการยิงโจมตียานของเอเลี่ยนศัตรูผู้บุกรุก ดังนั้นนี่คือการเริ่มต้นเกมใหม่ของ html5 ผ่านท่างเว็บของ Spritted โดยเกมนี้มีชื่อว่า War Games: Space Dementia  “ผมได้คิดไอเดียนี้ขึ้นมา เพราะว่าผมต้องการที่จะทำเกมอาเขตแอคชั่นอยู่เสมอ ผมมีความชื่นชอบเกม Robotron 2084 อย่างมาก ผมว่ามันดูเป็นเกมที่เล่นง่ายและเต็มไปด้วยความสนุกสนาน ดังนั้นผมจึงคิดว่าแล้วทำไมเราไม่ใช้เกมนี้มาเป็นแรงบันดาลใจล่ะ?” คุณ Eduardo Ortega หัวหน้าโปรเจคของ Spritted ได้อธิบายไว้ และเขายังได้ตัดสินใจที่จะเปิดเผยความลับเกือบทั้งหมด รวมถึงทีมงานของเขายังได้อธิบายเกี่ยวกับขั้นตอนวิธีการทำงานในการสร้างเกมของพวกเขาไว้อีกด้วย

Eduardo ได้อธิบายไว้อีกว่า “ผู้เล่นเกมที่มีความประทับใจในเกมนี้คือผู้เล่นที่ชื่นชอบวิธีการเล่นเกมแบบง่ายๆ และมันเป็นเกมแนวคลาสสิกโดยตรงสำหรับคุณผู้เล่น”  ไอเดียของการสร้างเกม War Games: Space Dementia ก็เช่นเดียวกันกับ “เกมอาเขต (Arcade), ที่เล่นง่ายและสะดวกในการพกพา” ขั้นตอนแรกของกระบวนการสร้างสรรค์วิดีโอเกมคือการมีไอเดียเกี่ยวกับเกม และเมื่อคุณได้ตัดสินใจเลือกไอเดียของคุณ นั้นคือการบ่งบอกว่าคุณได้มาซึ่งสคริพท์หรือต้นฉบับของเกมแล้ว สำหรับการลงมือทำงานต่อไปคือ ทีมงานจะต้องดำเนินการทำให้เกมใหม่นี้มีชีวิตขึ้นมา โดยต้องร่วมมือกันสร้างและวางแผนการปฏิบัติงานสำหรับขั้นตอนกระบวนการต่อไป

Ortega เขาได้อธิบายว่า “เมื่อผมรู้แล้วว่าเกมประเภทไหนที่เราต้องการ, เราก็ได้เรียกประชุมทีมงานของเราและเริ่มร่างโครงสร้างไอเดียทั่วๆไปเกี่ยวกับอะไรบ้างคือสิ่งที่เกมจะสามารถเป็นไปได้” เขาได้ทำงานร่วมกับนักเขียนโปรแกรม 1 คนและนักออกแบบเกมอีก 1 คน ด้วยเริ่มจากการอธิบายรายละเอียดโครงร่างในส่วนต่อประสานกับผู้ใช้ (UI หรือ User Interface), รายละเอียดของเมนู, ปุ่มต่างๆ, และการเปลี่ยนหน้าจอ (Screen Transitions), และเขายังมีหน้าที่รับผิดชอบเกี่ยวกับประสบการณ์ของผู้ใช้ ซึ่งจะประกอบด้วย “การพัฒนาเกี่ยวกับความเคลื่อนไหวบนหน้าจอทั้งหมดและการใช้งานได้ง่ายสำหรับผู้ใช้” และนี่คือคำพูดของ Ortega  และหลังจากนั้นสิ่งที่เกิดขึ้นของการพัฒนาเกมคือ สกรีนหน้าจอ, พวกศัตรู, ไอเทมสิ่งของ, และอื่นๆ... และทั้งหมดนี้คือโครงร่างของลักษณะทั่วๆไป เมื่อนักออกแบบได้รับทำการดำเนินการทั้งหมดเรียบร้อยแล้ว ก็จะนำผลงานไปเสนอต่อคุณ Eduardo เมื่อเขาได้ตราจสอบและเห็นว่าทุกอย่างเรียบร้อยเป็นไปตามที่เข้าต้องการ จากนั้นก็จะเริ่มกระบวนการทำงานในขั้นตอนต่อไปที่เหลือ: โครงร่างรูปภาพของนักออกแบบและรหัสโค้ดครั้งแรกจากนักโปรแกรมเมอร์

ความหลงใหลและแรงกระตุ้น, แรงบันดาลใจของการออกแบบเกม

Daniel Peña คือผู้รับผิดชอบในการสร้างสรรค์ตัวละครและให้สิ่งต่างๆที่เป็นรูปร่างทางกายภาพในเกม เขาคือดีไซเนอร์เกมหรือนักออกแบบเกมของ Spritted เขาเคยทำงานที่บริษัทเกี่ยวกับการโฆษณา แต่ในที่สุดความรักที่เขามีต่อเกมก็นำเขามาสู่การเป็นนักออกแบบเกม ชายหนุ่มจาก Valladolid ได้เล่าถึงไอเดียความคิดสำหรับการออกแบบ  War Games: Space Dementia นี้ว่า ได้เข้าถึงตัวเขาเมื่อตอนที่เขากำลังฟังเพลงหนึ่งจากยุค 80 นั้นคือเพลง: ‘Avalon’ de Roxy Music ต้องขอบคุณสำหรับชื่อนี้ และหลังจากที่ได้รับการอนุมัติจาก Eduardo Ortega ชายหนุ่มนักออกแบบเกมผู้นี้ก็ได้ตัดสินใจที่จะสร้างตัวละครที่ขึ้นอยู่กับตำนานของกษัตริย์อาเธอร์และอัศวิน

ชื่อแรกของเกมน่าจะเป็น Defenders of AVA แต่พวกเขาคิดว่าบางทีอาจจะทำให้ผู้คนเข้าใจผิดเกิดการอ้างอิงไปยังกลุ่มวงดนตรีเพลงป๊อปนอร์ดิกชื่อดังอย่างวง ABBA จากนั้นพวกเขาจึงเปลี่ยนชื่อเป็น Knights of Space เพื่อหลีกเลี่ยงการเกิดความสับสน แต่ถึงอย่างไรก็ตามพวกเขาก็จบลงด้วยการเลือกใช้ชื่อปัจจุบันของเกมเนื่องจากมีเหตุผลทางการค้า “ชื่อ Knights of Space มันคือการอ้างอิงขนาดเล็กน้อยสำหรับการที่จะพิทักษ์ปกครองจักรวาลที่น่ามหัศจรรย์” กล่าวโดย Peña ผู้ที่ได้ยอมรับการบูรณาการเกี่ยวกับการออกแบบของโลโก้

ขั้นตอนการออกแบบเป็นเรื่องที่ค่อนข้างน่าสนใจและมีความคลาสสิก Daniel เขามีความต้องการที่จะใช้แค่กระดาษกับดินสอเพื่อสเก็ตซ์โครงร่างของเกม และเมื่อเขามีไอเดียที่ชัดเจนเป็นที่พึงพอใจ เขาก็จะทำการสแกนผลและผ่านขั้นตอนต่อไปด้วยการวาดภาพประกอบ โปรแกรมนี้เป็นของ Adobe เป็นโปรแกรมที่ได้รับการอนุญาตให้เขียนดัดแปลงเป็นดิจิทัลภาพประกอบที่ถูกสร้างขึ้นบนกระดาษ งานวาดภาพที่ได้รับแรงบันดาลใจมาจากกษัตริย์อาเธอร์ “K1-ARZ อยู่ทำงานบนยานอวกาศของเขา XK-LIBUR เขาต้องปกป้องพื้นที่ 3 ส่วนที่อยู่รอบ KM-LOT” นี่คือคำที่ Peña ย้ำเกี่ยวกับพล็อตเรื่องของเกม War Games: Space Dementia และเขาอธิบายว่า K1-ARZ คือเวอร์ชั้นจักรวาลของกษัตริอาเธอร์

นอกจากนี้เขายังแสดงให้เห็นถึงความสุนทรียศาสตร์ของเกม ที่ได้แรงบันดาลใจจากการ์ตูน Hellboy โดยผู้วาดภาพประกอบและผู้สร้างคือ Mike Mignola  และโทนสีที่ตัดกันและรูปทรงเป็นเหลี่ยมคือลักษณะงานของเขา นอกจากนี้เรายังได้เห็นอิทธิพลของเกมอาเขตคลาสสิกในยุด 80 เช่นเกม Tron, Asteroids หรือ R-Type อีกด้วย

การเขียนโปรแกรม, กรอบโครงสร้างของวิดีโอเกม

มุ่งเน้นไปที่วิธีการเล่นที่ไม่ซับซ้อน และนำเสนอไอเดียโปรแกรมการสร้างเกมง่ายๆ ให้เอาชีวิตรอดได้บนหน้าจอเดียวกัน David Santín ได้บอกกับเราว่าเขาได้สร้างวิดีโอเกมตั้งแต่เขาอายุ 11 ปี และตอนนี้เขาได้เป็นโปรแกรมเมอร์เกมของ Spritted เมื่อผู้จัดการโปรเจคทำให้เขาได้แจ้งเกิดจากเกมเมื่อปี 1986 "หลังจากการเล่นเกมเมื่อสมัยเด็กๆ ผมก็ได้ตัดสินใจว่าผมก็สามารถสร้างมันได้เช่นกัน" David กล่าวถึงความทรงจำในอดีต เมื่อหัวหน้าโปรเจคได้มอบหน้าที่ให้หนุ่มน้อยจากเมืองมาดริด ทำการสร้างวิดีโอเกมที่มีแรงบันดาลใจใน Robotron 2084, และทันทีทันใดนั้นที่เขาคิดเกี่ยวกับเกมของ Smash TV

David มีความชื่นชอบเกมอาเขตคลาสสิกอยู่เสมอๆ อย่างเกม Robotron 2084 ที่มีมาก่อน ดังนั้นเข้าได้ตัดสินใจดำเนินการต่อไปกับการเคลื่อนไหวของ Smash TV เพื่อทำการสร้างเกม War Games: Space Dementia  Robotron ถูกปล่อยออกมาเมื่อปี 1982 ซึ่งเป้าหมายของเกมนี้คือการกำจัดหุ่นยนต์ที่ก่อกบฏและต่อต้านพวกมนุษย์จากโลกอนาคตที่มีเนื้อหาเกิดขึ้นในปี 2084 และทุกคนต้องทำทุกอย่างเพื่อเอาชีวิตรอดจากสถานการณ์นี้ หลังจากปี 1990 ก็มีการสร้าง Smash TV กับเนื้อหาที่มีเป้าหมายในการอยู่รอดเช่นเดียวกัน: ผู้เข้าร่วมแข่งขันในรายการทีวีของอนาคต จะต้องกำจัดหรือโจมตีและเก็บสะสม ‘powerups’.

“เราเลือกที่จะทำเกมเกี่ยวกับยานอวกาศ เพราะมันพัฒนาได้ไม่ยาก” David ได้กล่าวยืนยัน มันจะเป็นเกมที่มีมุมมองทางอากาศ การออกแบบสร้างยานอวกาศที่มีมุมมองจากด้านบนจะทำได้ง่ายกว่าการสร้างบุคคล, David ได้อธิบายเกี่ยวกับการเคลื่อนไหวของตัวละครในเกม “เมื่อคุณได้วาดภาพเล็กๆให้เคลื่อนไหวไว้ที่มุมของสมุดหรือหนังสือหลายๆหน้า จากนั้นเมื่อคุณดีดหรือกรีดมุมหนังสืออย่างรวดเร็ว จะทำให้รูปภาพที่วาดไว้เคลื่อนไหวมีชีวิตได้; ซึ่งในแต่ละหน้าจะทำให้เกิด Sprite” สิ่งที่เรียกว่า ‘sprite’ นั้นจะมีค่าเทียบเท่ากับภาพในฟิล์มของภาพยนตร์

ในกรณีของ War Games: Space Dementia เป็นเกมที่มีการวางแผนจากจุดเริ่มต้นไว้ในมุมมองทางอากาศ และนี่คือเหตุผลที่พวกเขาเลือกยานอวกาศเพื่อหลีกเลี่ยงการสร้างแปดตำแหน่งด้วยการเคลื่อนไหวของบุคคล: ด้านหน้า, ด้านหลัง, ด้านข้าง และอื่นๆ “ถ้าคุณสร้างรถถังหรือเครื่องบินที่มีมุมมองจากด้านบน มันจะไม่มีส่วนหัวหรือช่วงคอ ดังนั้นคุณจะต้องทำการสร้างเพียงแค่ sprite” David กล่าว การวางตำแหน่งไว้แปดครั้งต้องใช้เวลามากขึ้นในการเขียนโปรแกรม ตั้งแต่ทุกๆความเคลื่อนไหวจะต้องการรหัสของมันเอง และสำหรับการออกแบบก็ดีไซด์ก็เช่นกัน

David ได้เขียนโปรแกรมของเขาในฐานะที่เข้าได้ออกแบบดิไซด์จาก Daniel พวกเขาทำงานร่วมกันและมีการตัดสินใจร่วมกัน แม้ว่า David เป็นผู้ที่รับผิดชอบในหน้าที่ของการให้ไอเทมของรางวัลในแต่ละเกม นั้มหมายถึงว่าเป็นคุณสมบัติที่เฉพาะเจาะจง "ในแต่ละประเภทของยานอวกาศมีคุณสมบัติและไหวพริบไม่ซ้ำกัน สำหรับยานอวกาศในระดับเลเวลต้นๆจะมีการเคลื่อนไหวช้าและเอาแน่เอานอนไม่ได้ การเปลี่ยนแปลงของเลเวลสุดท้ายจะมีปรากฎข้อผิดพลาด และสามารถที่จะไล่ตามคุณได้ในกลุ่ม และคาดเดาการเคลื่อนไหวทั้งหมดของคุณ” Santín ได้อธิบาย

ทุกๆไอเทมในเกมจะมาพร้อมกับการเคลื่อนไหวที่ไม่ซ้ำกัน และต้องขอบคุณการควบคุมทั้งหมดของตัวแปรที่ทำขึ้นในจักรวาล และตามคำกล่าว Santín ว่า “บางส่วนของตัวแปรเหล่านี้มีความเร็วของแรงโน้มถ่วง ความเร็วที่สามารถตอบสนองในการไล่ล่าและความสามารถในการหมุนตัวอัตโนมัติ”

อย่างไม่ต้องสงสัยเลยว่า มันเป็นความยากลำบากครั้งยิ่งใหญ่ที่ David ต้องเผชิญกับการสร้างเกม War Games: Space Dementia เขาจะต้องทำผลงานให้ออกมาอย่างดี อย่างเช่าการเคลื่อนไหวของยานอวกาศ, การยิงปืนหรือขีปนาวุธ, ตัวละคร และรายละเอียดอื่นๆที่มีอยู่ในเกม "มันยากที่ในตลาดของเกม html5 จะพบเกมที่สามารถเคลื่อนย้ายวัตถุจำนวนมากได้ในเวลาพร้อมๆกัน" David กล่าวสรุป

Html5, กับภาษาสากล?

Santín ได้อธิบายว่า “การเขียนโปรแกรมใน html5 มีความยากลำบากมาก โดยเฉพาะอย่างยิ่งในการทำงานที่ยังไม่ได้รับผลที่ดีและยังไม่มีประสิทธิภาพที่ดีอย่างเช่นภาษาพื้นเมือง แต่มันก็มีข้อได้เปรียบด้านของการข้ามแพลตฟอร์ม”  ภาษาพื้นเมืองเป็นอีกหนึ่งอย่างที่สร้างขึ้นโดยเฉพาะสำหรับหน่วยประมวลผลบางอย่าง; Apple, Android, และอื่นๆอีกมากมาย “เมื่อคุณเขียนโปรแกรมแอปพลิเคชั่นในรหัสภาษาพื้นเมืองนั้นๆ ก็เท่ากับว่าคุณกำลังลงมือทำในภาษาของเมืองนั้นๆ โดยที่คุณไม่ต้องมีการแปลอะไรมากมายและทำให้การทำงานได้อย่างรวดเร็วขึ้น”

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

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

ในความเป็นจริงกับการเล่นบนมือถือ คุณจะมีความรู้สึกได้ถึงการขับยานอวกาศผ่านจอยสติ๊กคู่แบบไดนามิก นอกจากนี้ยังมีคุณลักษณะในการนำเสนอของ Robotron 2084 และ Smash TV  และต้องขอบคุณ Phaser เนื่องจากมันเป็น Framework ซึ่ง David ได้ใช้ในการเขียนโปรแกรมสำหรับเกม เพียงเปิดตัวจอยสติ๊ก plug-in คู่, พวกเขาก็สามารถแนะนำเกมได้โดยปราศจากการอยขีดข่วน

 “Phaser คือหนึ่ง Framework, ที่เป็นซีรี่ย์ของโครงสร้างการเขียนโปรแกรมที่มุ่งเน้นการแก้ปัญหาบางชนิด โดยเฉพาะ Phaser ที่มีวัตถุประสงค์มุ่งเน้นในการสร้างวิดีโอเกม” Santín ได้ชี้แจง, เขาเป็นผู้รับผิดชอบในการบริหารจัดการ sprites, การใส่เสียง, เขามีเครื่องมือสำหรับการสร้างเกม และเขายังจะมุ่งเน้นในการจัดการให้เกมมีประสิทธิภาพ

แม้ว่าความคิดห็นเริ่มต้นของ Eduardo Ortega คือการสร้างเกมต่อสู้เพื่อความอยู่รอดที่เล่นได้อย่างง่ายๆ และผู้เล่นสามารถเล่นได้บนหน้าจอเพียงหน้าจอเดียวเท่นนั้น นั่นหมายความว่าผู้เล่นจะสามารถเล่นต่อเนื่องไปได้เรื่อยๆจนกว่าคุณจะพ่ายแพ้ไปเอง เมื่อพวกเขาได้เห็นศักยภาพของเกมที่พวกเขาได้อุทิศเวลาจำนวนมากเพื่อมัน (พวกเขาสารภาพว่ามันเกิดขึ้นในช่วงเวลาของฤดูร้อนที่อบอุ่น), ผู้สร้างได้ตัดสินใจให้มีการสร้างเกมต่อไปและบทสรุปก็จบลงด้วยการสร้างเกม html5 และให้มีการพัฒนาปรับปรุงให้มีรายละเอียดเพิ่มมากขึ้น ในท้ายที่สุด, มันก็กลายมาเป็นเกมยานอวกาศสู้รบที่แบ่งอาณาเขตออกเป็น 3 โซนหรือพื้นที่ โดยการมีตัวเอกหรือยานอวกาศหลักของเรื่องจะต้องทำการต่อสู้กับเหล่าศัตรู และพวกศัตรูมีอยู่ 5 ประเภทที่แตกต่างกันออกไป และเมื่อถึงการต่อสู้ตอนสุดท้ายในแต่ละครั้งผู้เล่นจะต้องเผชิญหน้ากับหัวหน้าของศัตรู และผู้เล่นต้องเอาชนะหัวหน้าของศัตรูให้ได้เพื่อที่จะผ่านไปยังโซนต่อไปจนสิ้นสุดเกม และก็นี่คือความมหัศจรรย์ของวิดีโอเกมรวมถึงความน่าทึ่งกับกลศาสตร์วิธีการสร้างของผู้สร้างวิดีโอเกม

บทความโดย Paula Gil Alonso