Construct 2 : Pet Fish Game (1)

ในบทความนี้ เราจะมาสร้างเกมบวกเลขสำหรับเด็กน้อยกันครับ เกมนี้เป็นการสร้างเลียนแบบแนวคิดของเกมการศึกษาในเว็บต่างประเทศ วิธีเล่นก็เล่นง่าย ๆ โดยผู้เล่นลากปลาไปวางในตู้ปลาทั้งสอง ตามจำนวนที่โจทย์ปัญหากำหนด แล้วคลิกปุ่ม ตกลง ถ้าจำนวนถูกต้อง เกมจะไปเล่นขั้นตอนที่ 2 ซึ่งจะแปลงโจทย์ปัญหาเป็นประโยคสัญลักษณ์ ผู้เล่นคลิกปุ่มหมายเลขเพื่อป้อนคำตอบ แล้วคลิกปุ่ม ตกลง เกมจะเฉลยว่าถูกหรือผิด ลองเล่นเกมต้นแบบได้ที่ลิงก์นี้ครับ => https://semicon.github.io/petfish/index.html ในส่วนของวิธีการสร้างก็ไม่มีอะไรซับซ้อนมากนัก เรามาดูกันครับ

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

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

  • เลเยอร์ 0 ชื่อ bg
  • เลเยอร์ 1 ชื่อ step1
  • เลเยอร์ 2 ชื่อ step2
  • เลเยอร์ 3 ชื่อ HUD

Layer 0 (bg)

3. เพิ่ม sprite ชื่อ bg เพิ่มรูปภาพ bg.png เข้ามา ดังรูป

4. เพิ่ม sprite ชื่อ bowl เพิ่มรูปภาพ bowl.png เข้ามา ดังรูป

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

  • เพิ่ม instance variable ประเภท Text ชื่อ name ตั้งค่าเป็น “girl”

5. คัดลอก sprite bowl เพิ่มอีก 1 ชิ้น ดังรูป

  • แก้ไข instance variable ชื่อ name ตั้งค่าเป็น “boy”

  • จัดวางวัตถุดังรูป

6. เพิ่ม sprite btn เพิ่มรูปภาพ btn.png เข้ามา ดังรูป

  • เพิ่ม instance variable ประเภท Number ชื่อ step ตั้งค่าเป็น 0

7. เพิ่ม sprite symbol

  • เปลี่ยน ชื่อ Animation จาก Default เป็น true
  • เพิ่มรูปภาพจากไฟล์ (import frames > from files) symbol1.png เข้ามาดังรูป

  • ตั้งค่าคุณสมบัติของ Animation true ดังนี้

  • เพิ่ม Animation ตั้งชื่อ false เพิ่มรูปภาพจากไฟล์ (import frames > from files) symbol2.png เข้ามาดังรูป

  • ตั้งค่าคุณสมบัติของ Animation false เช่นเดียวกับ Animation  true

8. เพิ่ม sprite girl เพิ่มรูปภาพ girl.png เข้ามา ดังรูป

  • เพิ่ม instance variable ประเภท Number ชื่อ fishCount ตั้งค่าเป็น 0

9. เพิ่ม sprite boy เพิ่มรูปภาพ boy.png เข้ามา ดังรูป

  • เพิ่ม instance variable ประเภท Number ชื่อ fishCount ตั้งค่าเป็น 0 เช่นเดียวกับ sprite girl

10. จัดวางวัตถุในตำแหน่งดังรูป

Layer 1 (step1)

11. เพิ่ม sprite ชื่อ fish

  • เพิ่มรูปภาพจากไฟล์ (import frames > from files) 1.png ถึง 6.png เข้ามาดังรูป

  • ตั้งค่าคุณสมบัติของ Animation fish ดังนี้

  • เพิ่ม instance variable ประเภท Text ชื่อ name ตั้งค่าเป็น ว่าง

  • เพิ่ม behaviors Drang and Drop และตั้งค่าคุณสมบัติ ดังรูป

12. เพิ่ม sprite ชื่อ TextQ1 เพิ่มรูปภาพ textq1.png เข้ามา ดังรูป

13. เพิ่ม Text ตั้งชื่อ TextNumb1 ตั้งค่าคุณสมบัติดังรูป

14. เพิ่ม Text ตั้งชื่อ TextNumb2 ตั้งค่าคุณสมบัติเช่นเดียวกับ TextNumb1

15. จัดวางวัตถุในตำแหน่งดังรูป

Layer 2 (step2)

16. เพิ่ม Text ชื่อ TextQ2 ตั้งค่าคุณสมบัติดังรูป

17. เพิ่ม Text ตั้งชื่อ TextAns ตั้งค่าคุณสมบัติดังรูป

18. เพิ่ม sprite ชื่อ key

  • เพิ่มรูปภาพจากไฟล์ (import frames > from files) key.png เข้ามาดังรูป

  • ตั้งค่าคุณสมบัติของ Animation key ดังนี้

  • เพิ่ม instance variable ประเภท Number ชื่อ id ตั้งค่าเป็น 0

19. เพิ่ม Text ตั้งชื่อ TextKey ตั้งค่าคุณสมบัติดังรูป

20. จัดวางวัตถุในตำแหน่งดังรูป

Layer 3 (HUD)

21. เพิ่ม sprite ชื่อ popup

  • เพิ่มรูปภาพจากไฟล์ (import frames > from files) popup.png เข้ามาดังรูป

22. เพิ่ม Text ชื่อ TextScore ตั้งค่าคุณสมบัติดังรูป

23. จัดวางวัตถุในตำแหน่งดังรูป

สำหรับบทความนี้ขอจบเพียงเท่านี้นะครับ พบกับการเขียนคำสั่งต่างๆของเกมในบทความหน้าครับ

สวัสดีครับ

Downloads NOW!