Construct 2 : การสร้างเกม Happy Glass

สวัสดีครับ วันนี้เราจะมาเรียนรู้การสร้างเกมแนว Happy Glass กันนะครับ เกมนี้ผู้เล่นจะต้องควบคุมการปล่อยน้ำให้ได้ปริมาณพอดีกับวัตถุที่ใช้รองรับน้ำจึงจะผ่านด่าน ซึ่งการสร้างเกมแนวนี้เราจะใช้ Behaviors ประเภท Physics และ Effects Alpha Clamp เข้ามาช่วยในการสร้างเกม ดังนี้ครับ

1. สร้างโปรเจ็คใหม่ขึ้นมา ตั้งค่าขนาดวินโดว์และขนาดของเลย์เอาต์ ขนาด กว้าง 480 พิกเซล สูง 854 พิกเซล

2. เพิ่มเลเยอร์ 4 ชั้น ดังนี้

  • ชั้น HUD ใช้วาง  txtScore, txtLevel
  • ชั้น item ใช้วาง  leftWall, rightWall, glass, tube, barChecking, barCounter, ground, emotion
  • ชั้น water ใช้วาง  water
  • ชั้น bg ใช้วางภาพพื้นหลัง ชื่อ bg

3. ที่เลเยอร์ bg เพิ่ม Tilebackground  ชื่อ bg

4. ที่เลเยอร์ water เพิ่ม Sprite ชื่อ water โดยใช้เครื่องมือพู่กัน (Brush) ตั้งค่าดังรูป

  • ขยายรูปภาพ Sprite water ให้ใหญ่ที่สุด แล้วตั้งขอบเขตกันชน (collision polygon) ดังรูป

  • เพิ่ม Behaviors Physics ให้กับ Sprite water แล้วตั้งค่าดังรูป

  • คลิกเลือกเลเยอร์ water เพิ่ม Effects Alpha Clamp ให้กับเลเยอร์ water และตั้งค่าดังรูป

5. ที่เลเยอร์ item เพิ่มวัตถุต่างๆ ดังนี้

5.1 เพิ่ม Sprite rightWall และ  leftWall และตั้งขอบเขตกันชน (collision polygon) ดังรูป

  • เพิ่ม Behaviors Physics ให้กับ Sprite rightWall และ  leftWall พร้อมทั้งตั้งค่าคุณสมบัติของ Behaviors Physics ดังรูป

5.2 เพิ่ม Sprite glass เพื่อใช้เป็นวัตถุรองรับน้ำ ในบทความนี้จะใช้ทั้งหมด 3 เฟรม (ท่านสามารถออกแบบได้ตามจำนวนที่ต้องการ)

  • นำเข้ารูปภาพจำนวน 3 เฟรม
  • ตั้งค่า Animation Speed เป็น 0

  • ทุกเฟรมให้ตั้งจุด Origin ไว้ที่ตำแหน่งกึ่งกางด้านล่าง (Bottom)

  • ทุกเฟรมเพิ่ม Imagepoint  และตั้งจุด Imagepoint ไว้ที่ตำแหน่งกึ่งกลางของเส้นประ

  • ทุกเฟรมตั้งขอบเขตกันชน (collision polygon) ดังรูป

  • เพิ่ม Behaviors Physics ให้ Sprite glass พร้อมทั้งตั้งค่าคุณสมบัติของ Behaviors Physics ดังรูป

5.3 เพิ่ม barChecking ใช้สำหรับตรวจสอบปริมาณของน้ำในถ้วยแก้ว

  • ตั้งจุด Origin ไว้ที่ตำแหน่งกึ่งกางด้านล่าง (Bottom)

5.4 เพิ่ม Sprite barCounter ใช้สำหรับตรวจสอบปริมาณของน้ำที่ปล่อยออกมาจากท่อ

  • ตั้งจุด Origin ไว้ที่ตำแหน่งกึ่งกาง (Middle)

5.5 เพิ่ม Sprite tube ใช้ทำท่อปล่อยน้ำ

  •  Sprite tube ตั้งจุด Origin ไว้ที่ตำแหน่งกึ่งกาง (Middle)

  •  Sprite tube ตั้งขอบเขตกันชน (collision polygon) ดังรูป

5.6 เพิ่ม Sprite emotion ใช้แสดงผลเมื่อตรวจสอบระดับน้ำเสร็จเรียบร้อย

  • นำเข้ารูปภาพจำนวน 2 เฟรม
  • ตั้งค่า Animation Speed เป็น 0

6. ที่อยู่ HUD เพิ่ม Text ชื่อ txtScore และ txtLevel

7. เพิ่ม Touch ลงบนเลย์เอาต์ของโปรเจ็ค

8. แนวการวางวัตถุทั้งหมดบนเลย์เอาต์

9. เปิดแท็บ Event Sheet ขึ้นมา

  • เพิ่ม Global variable จำนวน 3 ตัวแปร ดังนี้

  • Event Sheet 1 ตั้งค่าเบื้องต้นของโปรเจ็ค เมื่อเริ่มต้นโหลดเลย์เอาต์

  • Event Sheet 2 ควบคุมการปล่อยน้ำด้วยการแตะที่สไปร์ท tube

  • Event Sheet 3 หยุดการปล่อยน้ำด้วยการเลิกแตะสไปร์ท tube

  • Event Sheet 4 ทำการตรวจสอบปริมาณน้ำ เมื่อน้ำไหลผ่าน barCounter

  • Event Sheet 5 เมื่อน้ำหยุดไหลจะทำการตรวจสอบปริมาณน้ำในแก้ว
  • Event Sheet 6 เมื่อปริมาณน้ำถูกต้อง จะแสดง emotion เฟรม 1 ภาพหน้ายิ้ม
  • Event Sheet 7 ถ้าปริมาณน้ำไม่ถูกต้อง จะแสดง emotion เฟรม 0 ภาพหน้าบึ้ง

  • Event Sheet 8 ตรวจสอบปริมาณน้ำเมื่อล้นออกนอกแก้ว

หวังว่าบทความนี้คงเป็นประโยชน์สำหรับผู้สนใจในการพัฒนาเกมเพื่อการเรียนรู้ สามารถนำไปพัฒนาต่อยอดให้เกิดประโยชน์ยิ่งๆขึ้นไปนะครับ

แล้วพบกันใหม่ในบทความต่อไป

สวัสดีครับ