Construct 2 : การวาดเส้นในเกม Gravity Line

สวัสดีครับในบทความนี้เราจะมาเรียนรู้การสร้างเกมโดยนำ Physic Behaviors ร่วมกับการวาดเส้นอิสระ นำมาสร้างเกมในแนว Gravity Line กันนะครับ ท่านสามารถศึกษาการวาดเส้นอิสระเพิ่มเติมได้ที่นี่ครับ

ขั้นตอนการสร้าง

1. ก่อนอื่นต้องจัดเตรียมทรัพยากรสำหรับสร้างเกม ท่านสามารถดาวน์โหลดทรัพยากรในการสร้างเกมที่นี่

2. เปิดโปรแกรม Construct 2 ขึ้นมา

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

4. เพิ่ม Tiled background สำหรับทำพื้นหลัง และปรับขนาดให้พอดีกับเลย์เอาต์

5. เพิ่ม Sprite ชื่อ wall สำหรับทำเป็นกำแพงด้านซ้ายและด้านขวาของจอ

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

  • เพิ่ม Behaviors Physics ให้กับวัตถุ และตั้งค่าคุณสมบัติของ Physics ดังนี้

6. เพิ่ม Sprite ชื่อ ball ลงบนเลย์เอาต์

  • ตั้งจุด Origin ไว้กึ่งกลางภาพ (middle)

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

  • เพิ่ม Behaviors Physics ให้กับวัตถุ และตั้งค่าคุณสมบัติของ Physics ดังนี้

7. เพิ่ม Sprite ชื่อ coin ลงบนเลย์เอาต์

  • ตั้งจุด Origin ไว้กึ่งกลางภาพ (middle)

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

8. เพิ่ม Sprite ชื่อ goal ลงบนเลย์เอาต์

  • ตั้งจุด Origin ไว้กึ่งกลางภาพ (middle)
  • ตั้งขอบเขตการชน (collision polygon) ดังรูป

  • เพิ่ม Behaviors Physics ให้กับวัตถุ และตั้งค่าคุณสมบัติของ Physics ดังนี้

9. เพิ่ม Sprite ชื่อ line ลงบนเลย์เอาต์

  • ปรับขนาดของสไปร์ท เป็น 10 x 10 พิกเซล
  • ตั้งขอบเขตการชน (collision polygon) ดังรูป

  • ตั้งจุด Origin ไว้กึ่งกลาง-ด้านซ้ายภาพ

  • เพิ่ม Behaviors Physics ให้กับวัตถุ และตั้งค่าคุณสมบัติของ Physics ดังนี้

10. เพิ่ม Sprite ชื่อ dot1 และ dot2 ไว้ด้านนอกเลย์เอาต์ ปรับขนาดของสไปร์ตทั้งสองให้มีขนาด 10 x 10 พิกเซล

11. เพิ่ม Text ชื่อ TextShow ลงบนเลย์เอาต์ ปรับขนาด สี และตำแหน่งของตัวอักษรให้เหมาะสมกับหน้าเลย์เอาต์

12. เพิ่ม Touch ลงบนเลย์เอาต์

13. แนวการวางตำแหน่งต่างๆของวัตถุบนหน้าเลย์เอาต์

14. การเขียน Event Sheet และ Action ควบคุมการทำงานของวัตถุต่างๆ

  • Event Sheet 1 เมื่อเริ่มเลย์เอาต์
    • จะทำการลบ line ออกจากหน้าเลย์เอาต์
    • ให้ TextShow แสดงข้อความ Draw a Line

  • Event Sheet 2  เมื่อเริ่มแตะหน้าจอ
    • dot1 จะอยู่ในตำแหน่งที่นิ้วสัมผัสหน้าจอ
    • line2 จะหายไป (เส้นประ)
    • brush จะหายไป (รูปพู่กัน)
    • หน่วงเวลา 1 วินาที
    • คุณสมบัติทางฟิสิกส์ของ ball เริ่มทำงาน

  • Event Sheet 3 ในขณะทุกๆขณะที่แตะหน้าจออยู่
    • dot2 จะอยู่ในตำแหน่งที่นิ้วสัมผัสหน้าจอ
    • สร้างสไปร์ท Line ที่ตำแหน่งของ dot1
    • ปรับมุมของ line ไปยัง dot2
    • กำหนดความกว้างของเส้น (line) ตามระยะห่างของ dot1 และ dot2
    • ย้ายตำแหน่ง dot1 ไปยัง dot2

  • Event Sheet 4 เมื่อ สไปร์ท dot2 ซ้อนทับกับ สไปร์ท line จะทำให้
    • คุณสมบัติทางฟิสิกส์ของ line เริ่มทำงาน
    • dot1 จะย้ายตำแหน่งไปอยู่ในตำแหน่งของ dot2

  • Event Sheet 5  เมื่อ ball ชนกับ coin จะทำให้
    • coin หายไป
    • เพิ่มแต้มให้กับตัวแปร score 5 คะแนน
    • TextShow แสดงค่าของแต้มใน score

ขอให้สนุกกับการประยุกต์ใช้นะครับ

สวัสดีครับ