Construct 3 : สร้างเกมแนว Trivia game

สวัสดีครับวันนี้เราจะมาเรียนรู้การใช้ Construct 3 สร้างเกมแนว Trivia game กันนะครับ เนื่องจากมีเพื่อนสมาชิก หลายท่านถามเกี่ยวกับการใช้ ฟังก์ชัน(function)ใน Construct 3 เนื่องจากดูคลิปที่สอนด้วย Construct 2 พอนำมาทำใน Construct 3 แล้วปรากฏว่าไม่เหมือนกันจึงทำต่อไม่ได้ และนี่คือที่มาของการนำเกมนี้มาเขียนบทความแนะนำการสร้างเกมในบทความนี้ครับ
1. ก่อนอื่นเราต้องเข้าไปยังเว็บไซต์ https://editor.construct.net/ อย่าลืมสมัครสมาชิก แล้วทำการ login ด้วยนะครับ ท่านจะได้ใช้งานเพิ่มขึ้นจากเดิม 25 event เป็น 50 event เลยที่เดียว
2. เปิดโปรเจกต์ใหม่ขึ้นมา



3. เพิ่มสไปร์ทพื้นหลังดังรูป


4. เพิ่มวัตถุ Text จำนวน 6 ชิ้น ตั้งชื่อและจัดวางในตำแหน่งดังรูป


5. เพิ่มวัตถุ Touch


6. เพิ่มวัตถุ Array


7. เปิดแถบ Event Sheet จากนั้น คลิกที่ Add… เพิ่มตัวแปร 2 ตัวแปร ดังนี้

  •  ตัวแปรชื่อ score ประเภท Number ตั้งค่าเริ่มต้นที่ 0

  •  ตัวแปรชื่อ Answer ประเภท String ตั้งค่าเริ่มต้นที่ ว่าง

8. Add event >> System >> On start of layout

  •  Add action >> Array >> load >> JSON
    "{
    ""c2array"": true,
    ""size"": [5,6,1],
    ""data"": [
    [[""qqqq1""],[""a1-1""],[""a1-2""],[""a1-3""],[""a1-4""],[""a1-1""]],
    [[""qqqq2""],[""a2-1""],[""a2-2""],[""a2-3""],[""a2-4""],[""a2-2""]],
    [[""qqqq3""],[""a3-1""],[""a3-2""],[""a3-3""],[""a3-4""],[""a3-3""]],
    [[""qqqq4""],[""a4-1""],[""a4-2""],[""a4-3""],[""a4-4""],[""a4-4""]],
    [[""qqqq5""],[""a5-1""],[""a5-2""],[""a5-3""],[""a5-4""],[""a5-4""]]
    ]
    }"

9. คลิกที่ Add… เพิ่ม Function ตั้งชื่อว่า loading

  • ตั้งชื่อฟังก์ชั่นว่า loading


10. คลิกขวาที่ On function loading >> Add parameter >> ตั้งชื่อ arrayIndex  >> ประเภท Number >> Default value >> 0


11. คลิกขวาที่ On function loading >> Add >> Add sub-event >> Array >> Is empty


12. คลิกขวาที่ Array | Is empty >> invert

  • เพิ่มแอคชั่น Add action >> System >> Set value >> arrayIndex >> int(random(Array.width))

  • เพิ่มแอคชั่น Add action >> TextQ >> Set text >> Array.At(arrayIndex,0)
  • เพิ่มแอคชั่น Add action >> Text_1 >> Set text >> Array.At(arrayIndex,1)
  • เพิ่มแอคชั่น Add action >> Text_2 >> Set text >> Array.At(arrayIndex,2)
  • เพิ่มแอคชั่น Add action >> Text_3 >> Set text >> Array.At(arrayIndex,3)
  • เพิ่มแอคชั่น Add action >> Text_4 >> Set text >> Array.At(arrayIndex,4)
  • เพิ่มแอคชั่น Add action >> System >> Set value >> Answer >> Array.At(arrayIndex,5)

13. คลิกขวาที่ Array | Is empty >> Add >> Add ‘Else’

  •  เพิ่มแอคชั่นดังรูป

14. คลิกที่ Add… เพิ่ม Function ตั้งชื่อว่า checkAns
15. คลิกขวาที่ On function checkAns >> Add parameter >> ตั้งชื่อ choice ประเภท String


16. คลิกขวาที่ On function checkAns >> Add >> Add sub-event >> System >> Compare variable >>
Answer=choice

  •  เพิ่มแอคชั่น Add action >> System >> Add to >> score >> 1

  •  เพิ่มแอคชั่น Add action >> Function >> loading >> arrayIndex >> 0

17. คลิกขวาที่ System | Answer=choice >> Add >> Add ‘Else’

  • เพิ่มแอคชั่นดังรูป

18. ที่ System | On start of layout เพิ่มแอคชั่น Add action >> Function >> loading >> arrayIndex >> 0


19. Add event >> Touch >> On touched object >> Text_1

  • Add action >> Function >> checkAns >> choice >> Text_1.Text

20.  Add event >> Touch >> On touched object >> Text_2

  • Add action >> Function >> checkAns >> choice >> Text_2.Text

21. Add event >> Touch >> On touched object >> Text_3

  •  Add action >> Function >> checkAns >> choice >> Text_3.Text

22. Add event >> Touch >> On touched object >> Text_4

  •  Add action >> Function >> checkAns >> choice >> Text_4.Text

23. Add event >> System >> Every tick

  • Add action >> TextScore >> Set text >> “Score : “&score

24. ลองทดสอบ Preview ดูนะครับ

[ Download file .c3p ]

มีข้อสงสัยหรือติดปัญหาตรงไหนฝากข้อความไว้นะครับ

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

สวัสดีครับ