Construct 2 : เกม Wheel of Fortune

สวัสดีครับวันนี้เราจะมาเรียนรู้พื้นฐานการสร้างเกมวงล้อมหาสมบัติกันครับ เกมลักษณะนี้เราสามารถนำไปประยุกต์ทำเป็นสื่อการสอนหรือเกมต่างๆได้มากมาย เช่น ทำเป็นวงล้อสะกดคำ วงล้อสูตรคูณ วงล้อคำศัพท์ภาษาอังกฤษ เป็นต้น

หลัการทำงานของเกม จะใช้การสุ่มความเร็วการหมุนของวัตถุ (Rotate Speed) กี่องศาต่อวินาที เป็นตัวควบคุมการสุ่มตำแหน่งของวงล้อ โดยมีเงื่อนไขดังนี้

  • ผู้เล่นมีโอกาสได้หมุนวงล้อ 5 ครั้ง
  • ถ้าวงล้อหยุดอยู่ในตำแหน่งใด จะได้เงินรางวัลในตำแหน่งนั้น

ก่อนลงมือทำให้จัดเตรียมทรัพยากรให้ครบถ้วน โดยเข้าไป  ดาวน์โหลดทรัพยากรสำหรับสร้างเกมได้ที่นี่  เมื่อมีทรัพยากรพร้อมแล้วเรามาเริ่มลงมือสร้างกันเลยครับ

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

2. เพิ่มเลเยอร์ 4 ชั้น ตั้งชื่อเลเยอร์แต่ละชั้นดังรูป

3. เลเยอร์ชั้น bg เพิ่ม Sprite ชื่อ bg1 ดังรูป

4. เลเยอร์ชั้น wheel เพิ่ม Sprite ชื่อ wheel ดังรูป

  • เพิ่ม Behaviors Rotate ให้กับวัตถุ

5. เลเยอร์ชั้น wheel เพิ่ม Sprite ชื่อ checkpoint และตั้งค่าต่างๆ ให้กับสไปรท์  checkpoint ดังนี้

  • ปรับขนาดของสไปรท์  checkpoint เป็น 10 x 10
  • เพิ่ม Instance Variable ประเภท Number ชื่อ Coin ตั้งค่าเริ่มต้นเป็น 0
  • เพิ่ม Behaviors Pin ให้กับสไปรท์  checkpoint
  • ตั้งค่า Initial visibility เป็น Invisible

6. คัดลอกสไปรท์  checkpoint จำนวน 10 ชิ้น จัดวางตำแหน่งดังรูป

7. ตั้งค่า coin ของสไปรท์ checkpoint ตามค่าในวงล้อที่ซ้อนทับ

8. เลเยอร์ชั้น button เพิ่ม Sprite ชื่อ pin ดังรูป

  • ตั้งค่าจุด Origin ไว้ที่มุมแหลมของรูปสามเหลี่ยม ดังรูป

9. เลเยอร์ชั้น button เพิ่ม Sprite ชื่อ spinBtn ดังรูป

  • ตั้งค่าคุณสมบัติของภาพเคลื่อนไหว (Animations) Speed เป็น 0 ดังรูป

  • เพิ่ม Instance Variable ประเภท Boolean ชื่อ spinning ตั้งค่าเริ่มต้นเป็น false

10. ที่เลเยอร์ HUD เพิ่ม Text จำนวน 2 ชิ้น ชื่อ txtScore และ txtRemain ตั้งค่าขนาดตัวอักษรและสีให้เหมาะสมกับกรอบตัวอักษร

  • เพิ่ม Behaviors Flash ให้กับ Text ชื่อ txtScore

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

12. เพิ่มเลย์เอาต์ gameOver โดยไม่ต้องเพิ่ม Event Sheet

13. เชื่อมโยงเลย์เอาต์เข้ากับ Event Sheet ชื่อ EventGame

14. เพิ่ม Sprite ชื่อ bg2 ลงบนเลย์เอาต์ gameOver ดังรูป

15. เพิ่ม Sprite ชื่อ replayBtn ลงบนเลย์เอาต์ ดังรูป

16. นำ txtScore มาวางบนหน้าเลย์เอาต์

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

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

19. เปิดแท็ป Event Sheet ขึ้นมา เขียนคำสั่งดังนี้

  • เพิ่ม Global Variable ประเภท Number ชื่อ remain ตั้งค่าเริ่มต้นที่ 5
  • เพิ่ม Global Variable ประเภท Number ชื่อ score ตั้งค่าเริ่มต้นที่ 0
  • Event 1 ระบบจะทำการตั้งค่าเริ่มต้นเมื่อโหลดเลย์เอาต์

  • Event 2 ควบคุมการหมุนของวงล้อด้วยการแตะที่ปุ่ม spinBtn
  • Event 3 แสดงค่าคะแนนที่ได้เมื่อสิ้นสุดการหมุน(checkpoint.coin) แสดงค่าคะแนนทั้งหมด (score) และจำนวนครั้งของการหมุนที่เหลืออยู่ (remain)
  • Event 4 เมื่อ remain มีค่าเท่ากับ 0 จะแสดงหน้าสิ้นสุดการเล่น (gameOver)

  • Event5 เริ่มเล่นใหม่ เมื่อแตะปุ่ม replayBtn และทำการตั้งค่าเริ่มต้นใหม่ทั้งหมด

ตัวอย่างเกม wheel of fortune
https://semicon.github.io/roulette/index.html

ตัวอย่างไฟล์ capx
https://drive.google.com/file/…..

 

ขอให้สนุกและมีความสุขกับการนำไปประยุกต์ใช้นะครับ

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

สวัสดีครับ