การออกแบบและพัฒนาสื่อเพื่อการศึกษาโดยใช้ โปรแกรม Construct 2 ผศ.ดร. พิศณุชัยจิตวณิชกุล สาขาวิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี นายสุพัฒน์ กุลชัย
สารบัญ หน้า ส่วนที่ 1 รู้จักโปรแกรม Construct 2 เบื้องต้น 1. แนะนำโปรแกรม Construct 2 เบื้องต้น 1 2. คุณสมบัติของโปรแกรม Construct 2 1 3. ส่วนประกอบของโปรแกรม Construct 2 2 4. เทมเพลตสำหรับสร้างเกม 6 5. เกมตัวอย่างที่ Construct 2 เตรียมไว้ให้ 6 ส่วนที่ 2 การใช้งานโปรแกรม Construct 2 เบื้องต้น 1. การสร้างโปรเจคเกม 8 2. การจัดการ Layout 10 3. การใช้งาน Event sheet 12 4. การสร้างวัตถุหรือนำเข้าวัตถุแบบต่าง ๆ 16 5. การใช้งาน Project panel 18 6. การใช้งาน Layers panel 18 7. การใส่พฤติกรรม (Behavior) ให้วัตถุ 19 8. การใช้งาน Properties panel 21 9. การใช้งาน Object panel 21 10. การรันทดสอบเกม 22 11. การ Export เกมไปยังแพลตฟอร์มต่าง ๆ 23 ส่วนที่ 3 การสร้างเกมเบื้องต้น 1. ลักษณะของเกม 26 2. การสร้างโปรเจคเกม 26 3. ฉาก และพื้นหลัง 27 4. ตัวละคร (การเคลื่อนไหว, แอนิเมชัน) 29 5. อุปสรรค และศัตรู 39 6. วิธีการชนะเกม 41 7. ส่วนแสดงข้อมูลต่าง ๆ ของเกม (HUD) 43 ส่วนที่ 4 การสร้างเกมเพื่อการศึกษา 1. ลักษณะของเกม 54 2. การออกแบบชุดคำถาม 54 3. การสร้างโปรเจคเกม 56
4. ฉากและพื้นหลัง 57 5. ส่วนแสดงข้อมูลต่าง ๆ ของเกม (HUD) 60 6. การเพิ่มตรรกะต่าง ๆ ให้เกม (game logic) 61 7. วิธีการชนะเกม 72 ส่วนที่ 5 การสร้างสื่อแบบโต้ตอบ 1. ลักษณะของสื่อแบบโต้ตอบ 73 2. การออกแบบสื่อแบบโต้ตอบจากเนื้อหา 73 3. การสร้างโปรเจคการคำนวณความต้านทานจากแถบสี 73 4. ฉากและพื้นหลัง 74 5. ส่วนแสดงข้อมูลผลลัพธ์(HUD) 81 6. การเพิ่มตรรกะต่าง ๆ ให้สื่อ (logic) 87
1 ส่วนที่ 1 รู้จักโปรแกรม Construct 2 เบื้องต้น 1. แนะนำโปรแกรม Construct 2 เบื้องต้น โปรแกรม Construct 2 คือ เกมเอ็นจิ้น (Game Engine) ที่ใช้ในการสร้างเกม 2 มิติจุดเด่น คือ ลดการเขียนโปรแกรม โดย ใช้วิธีลากวาง (Drag and Drop) วัตถุต่าง ๆ และสามารถปรับแต่งคุณสมบัติของวัตถุนั้น ๆ ได้ซึ่ง Construct 2 สามารถสร้าง ซอร์สโค้ด (Source code) เป็นภาษา HTML5 ทำให้เกมที่สร้างโดยใช้โปรแกรมนี้สามารถนำไปรันได้บนหลากหลายอุปกรณ์ เช่น คอมพิวเตอร์สมาร์ตโฟน หรือแท็บเล็ต เป็นต้น โดยที่ผู้พัฒนาสร้างเกมเพียงครั้งเดียว โปรแกรม Construct 2 มีไอคอนแสดงดังรูป ที่ 1 รูปที่ 1 ไอคอนโปรแกรม Construct 2 2. คุณสมบัติของโปรแกรม Construct 2 2.1 Quick & Easy การสร้างเกมด้วย Construct 2 สามารถทำได้ง่าย มีขั้นตอนน้อยไม่ซับซ้อน โดยการคลิกลาก และวางวัตถุ (Object) ลง บนหน้าจอเพิ่มพฤติกรรม (Behavior) ให้วัตถุและทำให้วัตถุมีชีวิตด้วยเหตุการณ์(Event) ทั้งนี้ผู้พัฒนาสามารถ Preview เพื่อทดสอบดูผลงานได้ไม่จำกัดจำนวนครั้ง 2.2 Powerful Event System ระบบการเขียนเหตุการณ์ของเกมถูกออกแบบมาให้ดูง่าย และใช้ภาษาที่ใกล้เคียงภาษามนุษย์ เพียงแค่ผู้พัฒนาเข้าใจระบบตรรกะ (Logic) พื้นฐาน จะสามารถสร้างเกมง่าย ๆ ได้โดย Construct 2 จะบังคับให้ผู้พัฒนา เขียนตรรกะของเกมโดยใช้เหตุการณ์เท่านั้น ทำให้ผู้พัฒนาไม่จำเป็นต้องสนใจซอร์สโค้ดของเกม 2.3 Flexible Behaviors โปรแกรม Construct 2 จะเตรียมสิ่งที่เรียกว่า พฤติกรรม หลากหลายรูปแบบ เช่น กระพริบได้เป็น วัตถุทรงตัน (Solid) ขยับได้ 8 ทิศทาง สำหรับเพิ่มให้กับวัตถุในเกม ทำให้ลดขั้นตอนการทำงานลงได้มาก 2.4 Instant Preview ระบบ Preview ในโปรแกรม Construct 2 สามารถทำได้ตลอดเวลา นอกจากนี้ license version ยังมี ระบบ Preview Over WIFI ที่ช่วยให้สามารถ preview เกมจาก Pc ด้วยมือถือหรือ Tablet ผ่าน WIFI ได้ทันที 2.5 Stunning Visual Effects โปรแกรม Construct 2 ได้เตรียม plug-in ที ่เกี ่ยวกับ effect ไว้มากมายเช ่นกัน รวมไปถึง particle plug-in ที่ช่วยให้ผู้พัฒนาสามารถสร้าง effect สวย ๆ ได้ 2.6 Multiplatform Export เพราะใช้ภาษา HTML5 เป็นหลัก Construct 2 จึงสามารถสร้างเกมสำหรับรันบนอุปกรณ์หลาย ประเภท โดยไม่ต้องแก้ไขไฟล์เกมมากนัก ซึ่งการเผยแพร่เกมไปยัง iOS หรือ Android จะต้องใช้โปรแกรมอื่น ๆ เข้ามาช่วย 2.7 Easy Extensibility แม้ว่า Construct 2 จะมีPlug-in มากมายให้เลือกใช้อยู่แล้ว แต่ถ้าผู้พัฒนาต้องการใช้งานมากกว่านั้น ผู้พัฒนา สามารถเขียน Plug-in เพิ่มเอง หรือแบ่งปันกับเพื่อน ๆ นักพัฒนาได้โดยการเขียน Plug-in จำเป็นต้องใช้ความรู้ ทางด้าน Java script หรือ GLSL
2 3. ส่วนประกอบของโปรแกรม Construct 2 โปรแกรม Construct 2 แบ่งส่วนหน้าจอการทำงานออกเป็น 6 ส่วนหลัก แสดงดังรูปที่ 2 รูปที่ 2 หน้าตาของโปรแกรม Construct 2 3.1 ส่วนของแถบคำสั่ง และแถบเครื่องมือ ในส่วนนี้จะรวบรวมคำสั่งในการทำงานต่าง ๆ เอาไว้ให้เรียกใช้งานได้อย่างสะดวก และมีแถบริบบอนของเครื่องมือที่ต้อง ใช้งานบ่อย ๆ ส่วนเครื่องมืออะไร ทำงานอย่างไร เดี๋ยวจะแนะนำในครั้งต่อไป รูปที่3 แถบคำสั่งและแถบเครื่องมือ 3.1.1 แถบคำสั่ง File ในส่วนนี้จะใช้จัดการเกี่ยวไฟล์ของโปรแกรม Construct 2 ซึ่งก็จะคล้ายๆ กับโปรแกรมทั่ว ไป คือ มีการ สร้างไฟล์งานใหม่(New) , การเปิดไฟล์งานที่มีอยู่แล้ว (Open) , การบันทึกไฟล์งานในลักษณะต่าง ๆ เช่น บันทึกแบบ ปกติ(Save) , บันทึกทั้งชิ้นงาน (Save As Project..) , บันทึกทั้งหมดด้วยไฟล์เดียว (Save As Single File..) การบันทึก ไฟล์จะได้ไฟล์นามสกุล .capx ซึ่งต้องเปิดด้วยโปรแกรม Construct 2 เท่านั้น , การส่งออกชิ้นงาน (Export project..) , การปิดแบบปกติ(Close tab), การปิดทั้งชิ้นงาน (Close project) 1 3 2 4 5 6
3 รูปที่ 4 แถบคำสั่ง File 3.1.2 แถบคำสั่ง Home ในส่วนนี้จะรวบรวมคำสั่งในการทำงานต่าง ๆ ไม่ว่าจะเป็นคำ สั่งที่ใช้ในการจัดการคลิปบอร์ดทั่ว ๆ ไป เช่น ตัด, คัดลอก, วาง, เลิกทำ, ทำซ้ำ, ลบ, เลือกทั้งหมด เป็นต้น แต่ก็มีส ่วนที่เพิ่มเติมขึ้นมา คือคำสั่งในตั้งค่าการ แสดงผลชิ้นงาน ซึ่งสามารถกำหนดประเภทของการแสดงผลให้เหมาะสมกับชนิดของอุปกรณ์ หรือซอฟต์แวร์ที่ใช้ที่ Active configurations และ Displaying ที่หัวข้อออนไลน์ (Online) สามารถติดต่อขอคำแนะนำ หรือเรียนรู้การใช้งาน จากผู้ผลิตได้โดยตรงตลอดเวลาที่ Scirra.com หรือ Help นอกจากนั้นยังสามารถแสดงผลชิ้นงานขณะพัฒนาด้วยการ ทดสอบทั ่วไป (Run layout) , แสดงผลชิ้นงานแบบค้นหาจุดบกพร ่อง (Debug layout) และการออกแบบชิ้นงาน (Export project) รูปที่5 แถบคำสั่ง Home 3.1.3 แถบคำสั่ง View ในส่วนนี้จะรวบรวมคำสั่ง ในการกำหนดมุมมองของแถบแสดงคุณสมบัติ (Palette Bar) ต่าง ๆ โดย ส่วนใหญ่จะใช้จัดการวัตถุ (Object) ในหน้า Layout เช่น Status Bar, Properties Bar, Project Bar, Layer Bar, Z Order Bar, Object Bar เป็นต้น และสามารถย่อ-ขยายมุมมองของชนิดงานที่Zoom ไม่ว่าจะเป็น Zoom in, Zoom out, Zoom to 100% เป็นต้น รูปที่ 6 แถบคำสั่ง View
4 3.1.4 แถบคำสั่ง Events ในส่วนนี้จะรวบรวมคำสั่ง ในการจัดการ Event ซึ่งจะใช้งานในหน้า Event Sheet รูปที่7 แถบคำสั่ง Events 3.2 ส่วนของแถบ Properties ในส่วนนี้จะเป็นการกำหนดคุณสมบัติของวัตถุและส่วนประกอบต่าง ๆ ภายในเกมที่เราสร้างขึ้น รูปที่8 แถบ Properties 3.3 ส่วนของแถบ Project ส่วนนี้จะเป็นการกำหนดทรัพยากรของโปรเจคเกมที่เราสร้างขึ้น เช่น ฉากต่าง ๆ (Layouts) เหตุการณ์ที่เกิดขึ้น (Event sheets) เสียงประกอบ ดนตรีประกอบ เป็นต้น รูปที่9 แถบ Project
5 3.4 ส่วนของแถบ Layers ส่วนนี้จะเป็นการกำหนดชั้นของ Layer ที่วางซ้อนทับกันภายในเกม ทำให้วัตถุต่าง ๆ ในเกม มีความเป็นอิสระต่อกัน เปรียบเหมือน แผ่นใสที่ซ้อนกันอยู่ซึ่ง Layer ที่มีลำดับ 0 จะเป็นแผ่นที่อยู่หลังสุด รูปที่10 แถบ Layers 3.5 ส่วนของพื้นที่ของเกมและแผ่นเหตุการณ์ ในส่วนนี้จะใช้ในการออกแบบ จัดวางองค์ประกอบของเกม เมื่อเราออกแบบตัวเกมเป็นอย่างไร เมื่อสั่งให้เกมทำงานก็จะมีหน้าตา เหมือนกับที่เราได้ออกแบบไว้ในส่วนนี้ รูปที่11 พื้นที่ของเกมและแผ่นเหตุการณ์ 3.6 ส่วนของแถบ Objects รูปที่12 แถบ Objects
6 4. เทมเพลตสำหรับสร้างเกม รูปที่13 เทมเพลตที่โปรแกรม Construct 2 มีให้ 5. เกมตัวอย่างที่ Construct 2 เตรียมไว้ให้ Construct 2 เตรียมเกมตัวอย่างไว้ให้มากมายหลายเกม แต่เกมที่เรียกได้ว่าเกือบจะสมบูรณ์มีอยู่ด้วยกัน 2 เกม คือ Space Blaster และ Ghost Shooter แสดงดังรูปที่14 รูปที่14 เมนูProject Examples ในหน้า Start page
7 รูปที่15 โปรเจคเกม Space Blaster รูปที่16 โปรเจคเกม Ghost Shooter
8 ส่วนที่ 2 การใช้งานโปรแกรม Construct 2 เบื้องต้น 1. การสร้างโปรเจคเกม ในหน้า Start page แสดงดังรูปที่ 17 ให้เลือกที่เมนูNew Project ในกลุ่มของ Start หรือสามารถใช้แถบคำสั่ง File แสดงดังรูปที่ 18 โดยเรียกใช้ตามลำดับนี้File -> New จะปรากฏหน้าต่าง Select template or example ขึ้นมา รูปที่17 Start page ของโปรแกรม Construct 2 รูปที่18 เมนูคำสั่ง New ในแถบคำสั่ง File
9 ในการเลือกเทมเพลตนั้นให้พิจารณาจากเกมที่เรากำลังสร้างว่าเป็นเกมแนวตั้งหรือแนวนอน และเหมาะกับจอแบบใด ใน ตัวอย่างนี้เราจะสร้างเกมแนวนอนที่มีขนาด 720p ดังนั้นให้เลือกเป็น New empty HD landscape 720p project ดังรูปที่ 19 จะได้ผลลัพธ์แสดงดังรูปที่ 20 รูปที่19 หน้าต่างเลือกเทมเพลต รูปที่ 20 หน้าตาของโปรแกรมหลังสร้างโปรเจคเสร็จ
10 2. การจัดการ Layout Layout คือส่วนที่ใช้ในการออกแบบหน้าตาของเกม สามารถวางและจัดการวัตถุต่าง ๆ เพื่อแสดงผล รวมไปถึงสามารถ กำหนดขนาดของ game world ให้มีความกว้างและความสูงตามที่ต้องการ 2.1 Window Size Windows Size คือขนาดหน้าจอ หรือกรอบที่ใช้ในการแสดงผล ในรูปที่ 21 หมายเลข 1 แสดงเส้นปะซึ่งเป็นขอบเขตใน การแสดงผลของโปรเจคนี้ถ้าต้องการปรับขนาดของ Window Size สามารถทำได้โดย คลิกที่โฟลเดอร์โปรเจคในแถบ Projects (หมายเลข 2) จากนั้นไปที่แถบ Properties หาคุณสมบัติที่ชื่อว่า Window Size (หมายเลข 3) ให้แก้เป็นขนาดที่ต้องการ รูปที่ 21 การตั้งค่า Window Size 1 2 3
11 2.2 Layout Size Layout Size คือขนาดของโลกของเกม (game world) ในเกม 1 เกม มีได้หลาย Layout ในรูปที่ 22 หมายเลข 1 พื้นที่ สีขาวทั้งหมดเป็นขอบเขตของ game world ในโปรเจคนี้ถ้าต้องการปรับขนาดของ Layout Size สามารถทำได้โดย คลิกที่ Layout ที่ต้องการในแถบ Projects (หมายเลข 2) จากนั้นไปที่แถบ Properties หาคุณสมบัติที่ชื่อว่า Layout Size (หมายเลข 3) ให้แก้เป็นขนาดที่ต้องการ รูปที่ 22 การตั้งค่า Layout Size เมื่อลองเปลี่ยนขนาดของ Layout Size เป็น 1280, 720 ทำให้Layout Size มีขนาดเท่ากับ Window Size เส้นปะจึง หายไป แสดงดังรูปที่ 23 1 2 3
12 รูปที่ 23 การปรับค่า Layout Size 3. การใช้งาน Event sheet Event sheet คือส ่วนที ่ใช้ในการเขียนลอจิก (logic) ต ่าง ๆ ให้เกม ในโปรแกรม Construct 2 ใช้หลักในการเขียน โปรแกรมแบบขับเคลื่อนด้วยเหตุการณ์ (Event-Driven) หมายความว่าใน Event sheetจะคอยดักจับเหตุการณ์ที่ถูกกำหนดไว้ เมื่อเกิดเหตุการณ์ที่กำหนดไว้ขึ้น ก็จะไปทำงานตามที่กำหนดไว้ใน Event sheet โดยเหตุการณ์หนึ่ง ๆ สามารถมีการทำงานได้ มากกว่า 1 งาน เมื่อเปิดหน้า Event sheet ขึ้นมา แสดงดังรูปที่ 24 ผู้พัฒนาสามารถกดปุ่ม Add event (หมายเลข 1) หรือคลิกขวา ตรงที่ว่าง เลือก Add event จะมีหน้าต่างปรากฏขึ้นมา (หมายเลข 2) เพื่อให้เลือกเหตุการณ์ที่เราต้องการจะจัดการ
13 รูปที่ 24 การจัดการ Event sheet เหตุการณ์ที่แสดงดังรูปที่ 25 นี้เป็นเหตุการณ์ของระบบ (System) ยกตัวอย่างเช่น เหตุการณ์On start of layout หมายถึงเหตุการณ์ที่เกิดขึ้นเมื่อ layout ของเราถูกโหลดขึ้นมาทำงาน รูปที่ 25 เหตุการณ์ของระบบ 1 2
14 เมื่อเพิ่มเหตุการณ์เสร็จ ขั้นต่อไปจะเป็นการจัดการทำงานหรือการกระทำที่ต้องการเมื่อเกิดเหตุการณ์ข้างต้นขึ้น ในรูปที่ 26 ให้กดที่ Add action (หมายเลข 1) ด้านหลังเหตุการณ์ที่เราเพิ่มเข้าไปก่อนหน้านี้จะมีหน้าต่าง Add action (หมายเลข 2) ปรากฏขึ้นมา รูปที่ 26 การกระทำหรือการทำงาน (Action) ของระบบ การกระทำที ่แสดงดังรูปที ่ 27 นี้เป็นการกระทำของระบบ (System) ยกตัวอย ่างเช ่น การกระทำ Set layout background color หมายถึงการสั่งให้ระบบเปลี่ยนสีพื้นหลังของฉาก 1 2
15 รูปที่ 27 การกระทำ (Action) ของระบบ เมื่อเลือกการกระทำข้างบนแล้ว ต้องมีการตั้งค่าเพิ่มเติมคือ ต้องกำหนดสีว่าอยากให้สีพื้นหลังเป็นสีอะไร ในรูปที่ 28 ใส่ เป็น 255,0,0 หมายถึงสีแดงนั่นเอง ตามรหัสสีrgb (red-green-blue) เมื่อกรอบเสร็จกดปุ่ม Done รูปที่ 28 การตั้งค่าสีพื้นหลัง เมื่อดำเนินการเสร็จสิ้น จะได้ผลลัพธ์แสดงดังรูปที่ 29 เหตุการณ์จะถูกจับคู่กับการกระทำ โดยสามารถอธิบายความหมาย ได้คือ เมื่อ Layout ถูกโหลดขึ้นมาทำงาน ระบบจะไปทำการเปลี่ยนสีพื้นหลังของฉากเป็นสีแดง รูปที่ 29 เหตุการณ์และการกระทำ ถ้าเราอยากรู้ว่าสิ่งที่เราคิดถูกต้องหรือไม่ ให้ลองรันเกมเพื่อดูผลลัพธ์ที่เกิดขึ้น โดยกดปุ่ม Run layout ในแถบคำสั่ง Home ของโปรแกรม Construct 2 จากการดำเนินการตามขั้นตอนที่ผ่านมา ได้ผลลัพธ์แสดงดังรูปที่ 30 โดยผลลัพธ์จะถูกนำไป รันบนเว็บเบราเซอร์ที่ตั้งไว้
16 รูปที่ 30 ผลรันของเกมบนเว็บเบราเซอร์ 4. การสร้างวัตถุหรือนำเข้าวัตถุแบบต่าง ๆ การสร้างวัตถุต้องทำที่หน้า Layout เท่านั้น จากนั้นดับเบิ้ลคลิกในที่ว่าง หรือคลิกขวาเลือก Insert new object จะ ปรากฏหน้าต่าง Insert New Object ขึ้นมา แสดงดังรูปที่ 31 เลือกวัตถุที่ต้องการสร้าง สำหรับวัตถุที่ใช้เป็นส่วนประกอบในเกม ส่วนใหญ่จะเลือกสร้าง Sprite โดยสามารถนำ artwork ที่เตรียมไว้มาใช้ใน sprite ที่สร้างได้ให้เลือกที่ Sprite และทำการตั้งชื่อให้ Sprite โดยควรใช้ชื่อที่สื่อความหมายชัดเจน รูปที่ 31 หน้าต่าง Insert New Object
17 เมื่อเลือกเสร็จให้คลิกวางไปบน Layout ในตำแหน่งที่ต้องการ (สามารถปรับได้ภายหลัง) จะปรากฏหน้าต่างในการ กำหนดรูปร่างหน้าตาของ Sprite ขึ้นมา แสดงดังรูปที่ 32 โดยเราสามารถวาดเองได้โดยใช้เครื่องมือทางด้านซ้าย หรือจะนำเข้า รูปภาพจากด้านนอกก็ได้โดยใช้เมนูทางด้านบน รูปที่ 32 หน้าต่างกำหนดรูปร่างหน้าตาของ Sprite ใช้เครื่องมือ Brush ในการวาดภาพของ Sprite สามารถเลือกสีได้และสามารถลบแก้ไขได้แสดงดังรูปที่ 33 เมื่อวาด เสร็จให้กดปุ่ม X ที่ขวาบน Sprite จะไปแสดงอยู่ใน Layout รูปที่ 33 การใช้Brush ในการวาดภาพของ Sprite
18 5. การใช้งาน Project panel Project panel แสดงดังรูปที่ 34 มีหน้าที่แสดงไฟล์ต่าง ๆ ที่มีอยู่ในโปรเจค เช่น Layout, Event sheet, วัตถุต่าง ๆ, เสียง และไฟล์อื่น ๆ โดยสามารถดับเบิ้ลคลิกเพื่อเปิดไฟล์ต่าง ๆ ได้ รูปที่ 34 ส่วนของ Project panel 6. การใช้งาน Layers panel Layer panel แสดงดังรูปที่ 35 มีหน้าที่สำหรับแยกชั้นของส่วนประกอบต่าง ๆ ในตัวเกม เพื่อให้ง่ายต่อการจัดวางวัตถุ ต่าง ๆ layerชั้นบนจะทับชั้นล่างตามลำดับ โดยทั่วไปแล้ว นิยมใช้ 3 layer ในการจัดการ 1 layout คือ 1) background layer อยู่ชั้นล่างสุด ใช้สำหรับจัดวางภาพพื้นหลัง รวมไปถึงอุปกรณ์ประกอบฉากต่าง ๆ 2) game layer อยู่ถัดขึ้นมาจาก background layer ใช้สำหรับจัดวางตัวละคร ศัตรูเป็นต้น และ 3) hud layer เป็นชั้นที่อยู่บนสุด มีไว้สำหรับแสดงผลคะแนน หรือคุณสมบัติ ต่าง ๆ ของตัวละคร รวมไปถึงเวลา hud layer นี้จะตามผู้เล่นไปตลอด
19 รูปที่ 35 ส่วนของ Layer panel 7. การใส่พฤติกรรม (Behavior) ให้วัตถุ พฤติกรรมคือลักษณะหรือคุณสมบัติที่เราต้องการใส่ให้วัตถุขั้นตอนในการใส่พฤติกรรมให้วัตถุมีดังนี้ให้คลิกที่วัตถุที่ ต้องการจะใส่พฤติกรรม แสดงดังรูปที่ 36 ให้สังเกตที่Properties panel ทางด้านซ้ายมือ จะแสดงข้อมูลคุณสมบัติต่าง ๆ ของวัตถุ ให้เลือกที่คุณสมบัติที่ชื่อว่า Behaviors เพื่อใส่พฤติกรรมให้วัตถุที่เราเลือก รูปที่ 36 เลือกวัตถุที่ต้องการจะใส่พฤติกรรม
20 เมื่อกดที่ปุ่ม Behaviors จะมีหน้าต่าง Behaviors เด้งขึ้นมา ในหน้าต่างนี้จะแสดงพฤติกรรมทั้งหมดของวัตถุที่ถูกใส่เข้า ถ้าว่างเปล่าแบบในรูปที่ 37 แสดงว่าวัตถุตัวนี้ยังไม่มีพฤติกรรม ให้กดที่ปุ่ม + เพื่อเพิ่มพฤติกรรม รูปที่ 37 เลือกวัตถุที่ต้องการจะใส่พฤติกรรม หลังจากกดปุ่ม + จะมีหน้าต่าง Add behavior ปรากฏขึ้นมาเพื่อให้เราเลือกพฤติกรรมใส่ให้วัตถุของเรา ในรูปที่ 38 จะ สังเกตุเห็นพฤติกรรมที่เราสามารถใส่ให้วัตถุได้มีอยู่มากมายหลายอันด้วยกัน ซึ่งผู้เรียนสามารถศึกษาเพิ่มเติมได้ภายหลัง ใน ตัวอย่างนี้เราจะใส่พฤติกรรมแบบ Platform ให้วัตถุ เพื่อให้วัตถุมีคุณสมบัติเป็น Platform คือสามารถบังคับเดินหน้าถอยหลัง และกระโดดได้ รูปที่ 38 หน้าต่าง Add behavior ที่รวบรวมพฤติกรรมต่าง ๆ ไว้ให้เลือกใช้
21 เมื่อเพิ่มเสร็จพฤติกรรม Platform จะถูกเพิ่มให้Sprite ของเราเรียบร้อยสังเกตได้จากหน้าต่าง Behavior ที่มีพฤติกรรม Platform ปรากฏอยู่แสดงดังรูปที่ 39 รูปที่ 39 หน้าต่าง Behavior แสดงพฤติกรรมที่วัตถุมี 8. การใช้งาน Properties panel Properties panel จะแสดงข้อมูลคุณสมบัติจากวัตถุที่ถูกเลือก โดยเราสามารถปรับแต่งค่าต่าง ๆ ให้วัตถุได้จากส่วนนี้ แสดงดังรูปที่ 40 รูปที่ 40 ส่วนของ Properties panel 9. การใช้งาน Object panel Object panel คือส่วนในการแสดงวัตถุที่เราเคยสร้างไว้ในเกมทั้งหมด สามารถลากออกมาวางบน layout เพิ่มได้ (โดย ปกติสามารถ copy และ paste ได้) แสดงดังรูปที่ 41
22 รูปที่ 41 ส่วนของ Properties panel 10. การรันทดสอบเกม เมื ่ออยากทดลองรันเกมเพื่อดูผลลัพธ์สามารถทำได้โดยกดปุ่ม Run layout แสดงดังรูปที่ 42 โปรแกรมจะทำการ คอมไพล์และเรียกเบราเซอร์ให้รันเกมแบบ HTML5 ขึ้นมา รูปที่ 42 ปุ่ม Run layout
23 รูปที่ 43 เกมที่รันบนเบราเซอร์ 11. การ Export เกมไปยังแพลตฟอร์มต่าง ๆ โปรแกรม Construct 2 สามารถ export เกมไปได้หลากหลายแพลตฟอร์ม แสดงดังรูปที่ 44 แต่สำหรับในเวอร์ชันฟรี สามารถเลือก export ไปได้แพลตฟอร์มเดียว คือ HTML 5 website เลือก และกดปุ่ม Next รูปที่ 44 แพลตฟอร์มที่สามาร export ได้
24 จากนั้นให้เลือกตำแหน่งที่จะ export ไฟล์เกมไปเก็บไว้แสดงดังรูปที่ 45 เสร็จแล้วให้กดปุ่ม Next รูปที่ 45 หน้าต่างเลือกตำแหน่งที่ต้องการจะ export เกมไป ขั้นตอนต่อไปคือการเลือก template ในการ export แสดงดังรูปที่ 46 ให้เลือก Normal style และกดปุ่ม Export รอ สักครู่ให้โปรแกรมทำงานให้เสร็จ รูปที่ 46 เลือกเทมเพลตในการ export เมื่อโปรแกรมทำงานเสร็จ เปิดโฟลเดอร์ที่เราเลือกไว้ขึ้นมา จะเห็นไฟล์ต่าง ๆ แสดงดังรูปที่ 47 สามารถนำไฟล์เหล่านี้ อัปโหลดขึ้นเว็บไซต์เพื่อเผยแพร่ให้ผู้อื่นเล่นได้
25 รูปที่ 47 ไฟล์ที่ได้หลังจาก export เสร็จ
26 ส่วนที่ 3 การสร้างเกมเบื้องต้น (Platformer) 1. ลักษณะของเกม เกมแพลตฟอร์ม (Platformer) คือ เกมแอคชันพื้นฐาน ที่วางฉากไว้บนพื้นที่ขนาดหนึ่ง และให้ผู้เล่นผ่านเกมไปให้ได้ทีละ ด่าน โดยส่วนมากมักจะเน้นให้ผู้เล่นกระโดดข้ามฝั่งจากฝั่งหนึ่งไปอีกฝั่งหนึ่ง มักจะเป็นเกมแบบ2 มิติและมีการควบคุมเดินซ้าย เดิน ขวา และกระโดด เกมประเภทนี้ที่ได้รับความนิยมได้แก่ Contra, Mario และ Donkey Kong เป็นต้น 2. การสร้างโปรเจคเกม 2.1 เลือก File -> New จากนั้นเลือกเทมเพลตแบบ HD landscape 720p กด Open รูปที่ 48 เทมเพลตสำหรับการสร้างโปรเจคใหม่ 2.2 เปลี่ยนชื่อโปรเจคโดยไปที่แถบ Properties ตั้งชื่อใหม่เป็น Platformer รูปที่ 49 การตั้งชื่อโปรเจคใหม่
27 3. ฉาก และพื้นหลัง พื้นหลังไม่ควรเลื่อนไปพร้อมกับตัวละคร ส่วนประกอบฉาก เช่นพื้น สามารถจัดวางได้แบบอิสระ โดยมองหาจุดที่ผู้เล่น ต้องใช้ทักษะในการควบคุมตัวละครบ้าง เพื่อให้เกมยากขึ้น ต้นไม้ก้อนหิน หรืออื่น ๆ สามารถใส่ได้ตามความเหมาะสม 3.1 กำหนดขนาด Layout Size ให้มีความสูงเท่ากับ Window Size ส่วนความกว้างเท่าเดิม เป็น 2560, 720 รูปที่ 50 การปรับ Layout Size 3.2 สร้าง Layer เพิ่มและเปลี่ยนชื่อให้ครบ 3 layer รูปที่51 การสร้าง Layer เพิ่ม
28 3.3 เลือก layer background และเพิ่ม Tile background เข้ามา 1 อัน ตั้งชื่อว่า bg รูปที่ 52 การสร้าง Tile background ตั้งชื่อว่า bg 3.4 สร้างพื้น โดยการสร้าง Tile background หรือ Sprite (ถ้าเลือก Tile background เมื่อยืดวัตถุออกภาพจะไม่เสียสัดส่วน) ตั้ง ชื่อว่า g1 และเลือก artwork เป็นภาพพื้นตามที่ต้องการ รูปที่53 การสร้าง Tile background ตั้งชื่อว่า g1
29 3.5 ใส่พฤติกรรมให้g1 มีพฤติกรรมแบบ Solid จะทำให้วัตถุสามารถยืนบนพื้นนี้ได้โดยไม่ร่วงไปด้านล่าง รูปที่54 การเพิ่มพฤติกรรม Solid ให้Player 3.6 เพิ่มจำนวนพื้น จัดวางพื้นตามความเหมาะสม (level design) รูปที่55 เพิ่ม และจัดวาง g1 ให้เหมาะสม 4. ตัวละคร (การเคลื่อนไหว, แอนิเมชัน) การเคลื่อนไหวมีทั้งหมด 4 รูปแบบคือ 1) เดินไปทางขวา 2) เดินไปทางซ้าย 3) กระโดด และ 4) หมอบ 4.1 เพิ่มตัวละครเข้าในเกมโดยการสร้าง Sprite ตั้งชื่อว่า Player โดยให้สร้างไว้ใน layer game
30 รูปที่ 56 สร้าง Sprite ตั้งชื่อว่า Player 4.2 เลือกรูปภาพใส่ให้Player รูปที่ 57 เลือกรูปภาพให้Player
31 รูปที่ 58 จัดวาง Player ลงใน Layout 4.3 ใส่พฤติกรรมให้Player เป็น Platform และ ScrollTo รูปที่ 59 เพิ่มพฤติกรรม Platform และ ScrollTo ให้ Player
32 4.4 สร้างแอนิเมชันให้กับ Player ด้วยการดับเบิ้ลคลิกที่Player รูปที่ 60 หน้าต่างจัดการรูปภาพและแอนิเมชัน Player 4.5 ที่หน้าต่าง Animation ให้คลิกขวาตรงที่ว่าง เลือก Add Animation ตั้งชื่อว่า Walk รูปที่ 61 การเพิ่มแอนนิเมชัน Walk
33 4.6 ที่หน้าต่าง Animation ให้คลิกขวาตรงที่ว่าง เลือก Add Animation ตั้งชื่อว่า Jump รูปที่ 62 การเพิ่มแอนนิเมชัน Jump 4.7 คลิกเลือก Walk ที่หน้าต่าง Animation แล้วที่หน้าต่าง Animation frames จะแสดงภาพแอนิเมชันของ Walk ให้คลิกขวา ตรงพื้นที่ว่าง และเลือกคำสั่ง Import frames -> From files… รูปที่ 63 หน้าต่าง Animation frames ของแอนิเมชัน Walk รูปที่ 64 การเพิ่มรูปสำหรับการแอนิเมชันให้Walk 4.8 เลือกรูปภาพที่ต้องการเอามาใส่เป็นแอนิเมชัน รูปที่ 65 หน้าต่าง Animation frames ของ Walk หลังจากเลือกรูปภาพ
34 4.9 ลบเฟรมที่ 0 ทิ้ง โดยการคลิกขวาที่เฟรมที่ 0 เลือก Delete หรือคลิกที่เฟรม 0 แล้วกดปุ่ม Delete บนคีย์บอร์ด รูปที่ 66 หน้าต่าง Animation frames ของ Walk หลังจากลบเฟรมที่ 0 4.10 ปรับคุณสมบัติของแอนิเมชัน Walk โดยการไปปรับที่แถบ Properties ทางซ้ายมือ ให้ปรับคุณสมบัติที่ชื่อว่า Loop ให้มีค่า เป็น Yes รูปที่ 67 ปรับคุณสมบัติLoop ของแอนิเมชัน Walk 4.11 คลิกเลือก Jump ที่หน้าต่าง Animation แล้วที่หน้าต่าง Animation frames จะแสดงภาพแอนิเมชันของ Jump ให้คลิกขวา ตรงพื้นที่ว่าง และเลือกคำสั่ง Import frames -> From files… รูปที่ 68 หน้าต่าง Animation frames ของแอนิเมชัน Jump รูปที่ 69 การเพิ่มรูปสำหรับการแอนิเมชันให้Jump
35 4.12 เลือกรูปภาพที่ต้องการเอามาใส่เป็นแอนิเมชัน รูปที่ 70 หน้าต่าง Animation frames ของ Jump หลังจากเลือกรูปภาพ 4.13 ลบเฟรมที่ 0 ทิ้ง โดยการคลิกขวาที่เฟรมที่ 0 เลือก Delete หรือคลิกที่เฟรม 0 แล้วกดปุ่ม Delete บนคีย์บอร์ด รูปที่ 71 หน้าต่าง Animation frames ของ Jump หลังจากลบเฟรมที่ 0 4.14 ที่หน้า Layout ให้เพิ่ม Keyboard เข้ามา รูปที่72 เพิ่ม Keyboard เข้าไปใน Layout 4.14 ไปที่หน้า Event sheet เขียนตรรกะเพิ่มเติมสำหรับการตรวจจับการกดปุ่มของคีย์บอร์ด ดังนี้ 1) เมื่อเกิดเหตุการณ์Player มีการเคลื่อนไหว (On Move) ให้Player แสดงแอนิเมชัน Walk
36 รูปที่ 73 เพิ่มเหตุการณ์เมื่อ Player เคลื่อนไหว ให้เล่นแอนิเมชัน Walk 2) เมื่อเกิดเหตุการณ์Player หยุดการเคลื่อนไหว (On Stop) ให้Player แสดงแอนิเมชัน Default รูปที่74 เพิ่มเหตุการณ์เมื่อ Player หยุดเคลื่อนไหว ให้เล่นแอนิเมชัน Default 3) เมื่อเกิดเหตุการณ์กดปุ่มลูกศรขึ้น ให้Player แสดงแอนิเมชัน Jump รูปที่75 เพิ่มเหตุการณ์คีย์บอร์ด
37 รูปที่76 เพิ่มเหตุการณ์คีย์บอร์ดมีการกด (On key pressed) รูปที่77 หน้าต่างคลิกเลือกปุ่มที่ต้องการจะตรวจจับ รูปที่78 เลือกเป็นปุ่มลูกศรขึ้น
38 รูปที่79 เหตุการณ์เมื่อคีย์บอร์ดถูกกดปุ่มลูกศรขึ้น ให้เล่นแอนิเมชัน Default 4) เมื่อเกิดเหตุการณ์กดปุ่มลูกศรซ้าย ให้Player ทำการ mirror ตัวเองไปอีกด้าน รูปที่ 80 เพิ่มเหตุการณ์เมื่อคีย์บอร์ดถูกกดปุ่มลูกศรซ้าย ให้Mirrored ตัว Player 5) เมื่อเกิดเหตุการณ์กดปุ่มลูกศรขวา ให้Player ไม่ต้อง mirror ตัวเอง (เพราะรูปปกติหันขวาอยู่แล้ว) รูปที่ 81 เพิ่มเหตุการณ์เมื่อคีย์บอร์ดถูกกดปุ่มลูกศรขวา ไม่ให้Mirrored ตัว Player
39 5. อุปสรรค และศัตรู 5.1 การสร้างอุปสรรคแบบอยู่กับที่ ให้เพิ่ม Sprite เข้ามา ตั้งชื่อว่า Obstacle ให้อยู่ใน layout game รูปที่ 82 สร้าง Sprite ตั้งชื่อว่า Obstacle 5.2 เลือกรูปภาพให้อุปสรรค รูปที่ 83 เลือกรูปภาพให้Obstacle
40 5.3 จัดวางอุปสรรคในตำแหน่งที่ต้องการ รูปที่ 84 จัดวาง Obstacle ในตำแหน่งที่เหมาะสม 5.4 เปิด Event sheet ขึ้นมา กำหนดเหตุการณ์ว่า เมื่อ Player ชนกับ (On collision with) Obstacle ให้รีสตาร์ท layout รูปที่ 85 เพิ่มเหตุการณ์การชนกัน (On collision with)
41 รูปที่ 86 เพิ่มเหตุการณ์การชนกันระหว่าง Player และ Obstacle ให้ทำการ restart layout 6. วิธีการชนะเกม ในแต่ละด่าน เกมจะกำหนดภารกิจให้ผู้เล่นจัดการให้สำเร็จ เช่น ต้องเก็บกุญแจที่ถูกซ่อนอยู่ให้ได้เก็บเหรียญให้ครบ 10 เหรียญ ฆ่าศัตรูให้ครบ 10 ตัว เป็นต้น เมื่อผู้เล่นทำภารกิจเหล่านี้สำเร็จ เกมก็จะจบและนำผู้เล่นไปยังด่านต่อไป (ถ้ามี) 6.1 เพิ่มเหรียญเพื่อให้ผู้เล่นเก็บสะสม ใช้ในการผ่านด่าน สร้าง Sprite ตั้งชื่อว่า Coin ให้อยู่ใน layer game หรือ background รูปที่ 87 สร้าง Sprite ตั้งชื่อว่า Coin
42 6.2 เลือกรูปภาพให้Coin รูปที่ 88 เลือกรูปภาพให้Coin รูปที่ 89 จัดวาง Coin ลงใน Layout
43 6.3 ให้ทำการ copy เหรียญและวางให้ครบ 10 เหรียญ จัดวางตำแหน่งให้เหมาะสม รูปที่90 เพิ่ม Coin และจัดวางให้เหมาะสม 7. ส่วนแสดงข้อมูลต่าง ๆ ของเกม (HUD) ขึ้นอยู่กับเป้าหมายของเกม โดยทั่วไป HUD จะประกอบไปด้วย 1) ส่วนแสดงชีวิต 2) ส่วนแสดงคะแนน 3) ส่วนแสดง เวลา และ 4) ส่วนแสดงเป้าหมาย เป็นต้น 7.1 ปรับคุณสมบัติของ layer hud ในคุณสมบัติที่ชื่อว่า Parallax ให้เป็น 0, 0 จะทำให้layer นี้ตาม Player ไปทุกที่ รูปที่ 91 ปรับคุณสมบัติ parallax ของ layer hud 7.2 แสดงเป้าหมายให้ผู้เล่นทราบว่าต้องเก็บเหรียญให้ครบ 10 เหรียญ โดยการเพิ่ม Text ตั้งชื่อว่า Objective เข้าไปใน layer hud
44 รูปที่ 92 สร้าง Text ตั้งชื่อว่า Objective 7.3 เปลี่ยนข้อความเป็น เป้าหมาย: 10 เหรียญ รูปที่ 93 เปลี่ยนข้อความของ Objective
45 7.4 เพิ่ม Text ตั้งชื่อว่า Score เข้าไปใน layer hud เพื่อใช้ในการแสดงเหรียญที่เก็บได้ รูปที่ 94 สร้าง Text ตั้งชื่อว่า Score 7.5 เปลี่ยนข้อความเป็น 0 รูปที่ 95 เปลี่ยนข้อความของ Score
46 7.6 เปิด Event sheet สร้าง Global variable ชื่อว่า score เอาไว้เก็บคะแนนเมื่อผู้เล่นเก็บเหรียญได้ 1 เหรียญ ได้ 1 คะแนน ให้ คลิกขวาตรงพื้นที่ว่าง เลือก Add global variable ตั้งชื่อว่า score เลือก Type เป็น Number และ Initial value หรือค่าเริ่มต้น ให้เป็น 0 รูปที่ 96 สร้างตัวแปรแบบ Global ตั้งชื่อว่า score รูปที่ 97 ตัวแปร score 7.7 เพิ่มเหตุการณ์เมื่อเริ่ม layout ใหม่ (On start of layout) ให้reset ตัวแปรทุกตัว รูปที่ 98 เพิ่มเหตุการณ์เมื่อเริ่ม layout ใหม่ (On start of layout)
47 7.8 เพิ่มเหตุการณ์เมื่อ Player ชนกับ (On collision with) Coin ให้จัดการให้เหรียญหายไป (destroy) รูปที่ 99 เพิ่มเหตุการณ์เมื่อ Player ชนกับ (On collision with) Coin 7.9 เพิ่ม score ขึ้นไป 1 คะแนน โดยเลือก Add event -> System -> Add to -> เลือก score กำหนดค่าที่เพิ่มเป็น 1 รูปที่ 100 เลือก System