Construct 2 : การสร้างเกมเศรษฐีเงินล้าน(Millionaire Quiz) ตอนที่ 3.1

สวัสดีครับ ในบทความนี้เราจะมาเรียนรู้การสร้างหน้าคำถาม ในเกมเศรษฐีกันนะครับ ซึ่งการสร้างคำถามในลักษณะนี้ มีผู้เขียน และทำคลิปสอนไว้มากมาย แต่สำหรับบทความนี้ ขอนำรูปแบบการสร้างมาจากบทความ “สร้างข้อสอบแบบสุ่มข้อคำถามและตำแหน่งตัวเลือกคำตอบ” ซึ่งเคยนำเสนอไปก่อนหน้านี้แล้ว นำมาประยุกต์ใช้ในบทความนี้อีกครั้งหนึ่ง ขั้นตอนวิธีการมีดังนี้ครับ

1. เปิด Layout question ขึ้นมา

2. เพิ่ม Sprite ตั้งชื่อ bgQ นำเข้ารูปภาพ ดังรูป

3. เพิ่ม Sprite ตั้งชื่อ bgTimer นำเข้ารูปภาพ ดังรูป

  • ปรับขนาด Sprite bgTimer เป็น 80 x 80 พิกเซล

4. นำ Sprite changQ, cutChoice, twoTime จาก Object type มาวางในเลย์เอาต์ ปรับขนาดของ Sprite ทั้งสามชิ้น ให้มีขนาด 90 x 50 พิกเซล และจัดวางในตำแหน่งดังรูป ดังรูป

5. เพิ่ม Sprite ตั้งชื่อ qBar นำเข้ารูปภาพ ดังรูป

  • จัดวาง qBar ในตำแหน่งดังรูป

6. เพิ่ม Text object ตั้งชื่อ textQuestion ตั้งค่าและนำไปวางในตำแหน่ง ดังรูป

7. เพิ่ม Sprite ตั้งชื่อ choiceBar นำเข้ารูปภาพและกำหนดขอบเขตการชน ดังรูป

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

  • คัดลอก choice จำนวน 4 ชิ้น จัดวางในตำแหน่งดังรูป

8. เพิ่ม Text object ตั้งชื่อ textChioce ตั้งค่าและนำไปวางไว้นอก Layout ดังรูป

9. เปิดแท็ป Layer ขึ้นมา ให้ล็อค  Leyer 0 และเพิ่ม Layer ขึ้นมาใหม่หนึ่งชั้น เปลี่ยนชื่อเป็น report

10. ตั้งแต่ข้อนี้ไปเราจะทำงานบน  Leyer report

11. เพิ่ม Sprite ตั้งชื่อ  bgPopup นำเข้ารูปภาพ ดังรูป

12. เพิ่ม Text object ตั้งชื่อ textPop0 ตั้งค่าและนำไปวางในตำแหน่ง ดังรูป

13. เพิ่ม Text object ตั้งชื่อ textPop1 ตั้งค่าและนำไปวางในตำแหน่ง ดังรูป

14. เพิ่ม Text object ตั้งชื่อ textPop2 ตั้งค่าและนำไปวางในตำแหน่ง ดังรูป

15. เพิ่ม Text object ตั้งชื่อ textPop3 ตั้งค่าและนำไปวางในตำแหน่ง ดังรูป

16. เพิ่ม Sprite ตั้งชื่อ btnConfirm นำเข้ารูปภาพและกำหนดขอบเขตการชน ดังรูป

  • ตั้งค่าการมองเห็น เป็น Invisible

17. เพิ่ม Sprite ตั้งชื่อ btnChang นำเข้ารูปภาพและกำหนดขอบเขตการชน ดังรูป

  • ตั้งค่าการมองเห็น เป็น Invisible

18. จัดวางปุ่มทั้งสองในตำแหน่งดังรูป

19. เพิ่ม Sprite ตั้งชื่อ btnNextQ นำเข้ารูปภาพและกำหนดขอบเขตการชน ดังรูป

  • ตั้งค่าการมองเห็น เป็น Invisible

20. เพิ่ม Sprite ตั้งชื่อ btnStopGame นำเข้ารูปภาพและกำหนดขอบเขตการชน ดังรูป

  • ตั้งค่าการมองเห็น เป็น Invisible

21. นำไปวางซ้อนทับปุ่ม btnConfirm และ ปุ่ม btnChang ที่วางไว้แล้ว ดังรูปทั้งสองในตำแหน่งดังรูป

22. เพิ่ม Layout ใหม่ขึ้นมา พร้อมกับเพิ่ม Event Sheet เปลี่ยนชื่อ Layout เป็น  finish และ เปลี่ยนชื่อ Event Sheet เป็น  EventFinish

  • ตั้งขนาดเลย์เอาต์ (Layout Size) เป็น 480 x 854 พิกเซล
  • ตั้งค่า Event Sheet ไปที่ EventFinish

เป็นอันว่าเราได้เตรียมทรัพยากรต่างๆของหน้าแบบทดสอบไว้ทั้งหมดเรียบร้อยแล้ว

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

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

สวัสดีครับ