Construct 2 : การสร้างเกมลากวางแบบ Puzzle

สวัสดีครับวันนี้เราจะมาเรียนรู้การสร้างเกมลากวางแบบ Puzzle กันครับ โดยเกมที่จะสร้างนี้เพื่อนสมาชิกต้องการให้เป็นแบบนี้ครับ

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

จากเงื่อนไขดังกล่าวข้างต้น ผู้เขียนได้ปรับเปลี่ยนรูปแบบ แต่ยังคงแนวคิดเดิมไว้ เพื่อให้เกมดูดีและง่ายต่อการสร้างยิ่งขึ้น ดังตัวอย่างเกมที่สร้างเสร็จในเว็บไซต์นี้ https://semicon.github.io/puzzle/

สิ่งที่ต้องเตรียม

1. จัดเตรียมทรัพยากรทั้งหมดที่ใช้ในการสร้างเกม สามารถดาวน์โหลดได้ที่นี่ >> ดาวน์โหลดไฟล์รูปภาพทั้งหมด

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

เมื่อเตรียมทรัพยากรเรียบร้อยแล้ว เรามาดูขั้นตอนวิธีการทำกันเลยครับ

1. เพิ่ม Sprite ชื่อ mainState สำหรับใช้แสดงภาพต้นแบบและตำแหน่งต่างๆ ของวัตถุแต่ละชิ้น

2. เพิ่ม Sprite ชื่อ triState สำหรับกำหนดตำแหน่งและพื้นที่การซ้อนทับของรูปสามเหลี่ยม

2.1 เพิ่ม Instance variable 2 ตัว

    • ชื่อ stateAngle ประเภท Number ตั้งค่าเริ่มต้นเป็น 0 เพื่อใช้สำหรับเก็บค่ามุมที่ต้องการของวัตถุนั้นๆ
    • ชื่อ overlapping ประเภท Boolean ตั้งค่าเริ่มต้นเป็น false เพื่อใช้สำหรับเก็บค่าการซ้อนทับของวัตถุอื่น

2.2 คัดลอกวางบนเลย์เอาต์  จำนวน 4 ชิ้น และตั้งค่าคุณสมบัติต่างๆ ดังนี้

    • ปรับมุมของวัตถุสามเหลี่ยมแต่ละชิ้นตามต้องการ โดยเข้าไปที่ Properties Common ตั้งค่า Angle ของวัตถุแต่ละชิ้นเป็น 0, 90, 180, 270
    • ตั้งค่าตัวแปร stateAngle ของวัตถุให้ตรงกับค่า Angle ของวัตถุนั้นๆ ได้แก่ 0, 90, 180, 270

2.3 ตั้งค่า Initial visibility เป็น Invisible เพื่อซ่อนการมองเห็นของสิ่งนี้

3. เพิ่ม Sprite ชื่อ sqState สำหรับกำหนดตำแหน่งและพื้นที่การซ้อนทับของรูปสี่เหลี่ยม

3.1 เพิ่ม Instance variable 2 ตัว

    • ชื่อ stateAngle ประเภท Number ตั้งค่าเริ่มต้นเป็น 30 เพื่อใช้สำหรับเก็บค่ามุมที่ต้องการของวัตถุนั้นๆ
    • ชื่อ overlapping ประเภท Boolean ตั้งค่าเริ่มต้นเป็น false เพื่อใช้สำหรับเก็บค่าการซ้อนทับของวัตถุอื่น

3.2 ปรับมุมของวัตถุสี่เหลี่ยมตามต้องการ โดยเข้าไปที่ Properties Common ตั้งค่า Angle เป็น 30

3.3 ตั้งค่า Initial visibility เป็น Invisible เพื่อซ่อนการมองเห็นของสิ่งนี้

4. เพิ่ม Sprite ชื่อ state สำหรับใช้เป็นพื้นที่ในการสร้างวัตถุรูปต่างและหมุนปรับมุมของวัตถุนั้นๆ

  • เพิ่ม Instance variable ชื่อ overlaping ประเภท Boolean ตั้งค่าเริ่มต้นเป็น false เพื่อใช้สำหรับเก็บค่าการซ้อนทับของวัตถุอื่น

5. เพิ่ม Sprite ชื่อ sqBtn สำหรับแตะใช้เพื่อสร้างวัตถุ สี่เหลี่ยม

  • เพิ่ม Instance variable ชื่อ number ประเภท Number ตั้งค่าเริ่มต้นเป็น 0 เพื่อใช้สำหรับเก็บค่าจำนวนวัตถุสี่เหลี่ยมที่สร้างไป

6. เพิ่ม Sprite ชื่อ triBtn สำหรับใช้แตะเพื่อสร้างวัตถุ สามเหลี่ยม

  • เพิ่ม Instance variable ชื่อ number ประเภท Number ตั้งค่าเริ่มต้นเป็น 0 เพื่อใช้สำหรับเก็บค่าจำนวนวัตถุสามเหลี่ยมที่สร้างไป

7. เพิ่ม Sprite ชื่อ rotateL สำหรับใช้แตะเพื่อหมุนปรับมุมของวัตถุทวนเข็มนาฬิกา

8. เพิ่ม Sprite ชื่อ rotateR สำหรับใช้แตะเพื่อหมุนปรับมุมของวัตถุตามเข็มนาฬิกา

9. เพิ่ม Sprite ชื่อ dragTri เป็นวัตถุที่จะนำไปซ้อนทับกับภาพต้นแบบ

  • เพิ่ม Instance variable ชื่อ objAngle ประเภท Number ตั้งค่าเริ่มต้นเป็น 0
  • เพิ่ม Behaviors Drag and Drop ให้กับวัตถุ

10. เพิ่ม Sprite ชื่อ dragSq เป็นวัตถุที่จะนำไปซ้อนทับกับภาพต้นแบบ

  • เพิ่ม Instance variable ชื่อ objAngle ประเภท Number ตั้งค่าเริ่มต้นเป็น 0
  • เพิ่ม Behaviors Drag and Drop ให้กับวัตถุ

11. เพิ่ม Object Text และ Touch

  • Text สำหรับแสดงค่ามุมต่างๆ ในขณะหมุนวัตถุ

12. การจัดวางวัตถุต่างๆ ลงบนเลย์เอาต์

13. เปิดแท็ป Event Sheet ขึ้นมา

14. เพิ่มตัวแปร Global ชื่อ rotateAngles ประเภท Number ตั้งค่าเริ่มต้นเป็น 0 ใช้สำหรับเก็บค่ามุมการหมุนของวัตถุ

15. ตั้งค่าเริ่มต้นต่างๆ ของวัตถุ

16. เมื่อแตะปุ่ม triBtn จะสร้างวัตถุรูปสามเหลี่ยม (dragTri) ที่ตำแหน่งกึ่งกลางวงกลม (state)

17. เมื่อแตะปุ่ม sqBtn จะสร้างวัตถุรูปสี่เหลี่ยม (dragSq) ที่ตำแหน่งกึ่งกลางวงกลม (state)

18. เมื่อแตะ rotateL  ทุกครั้งจะลดค่า rotateAngles ครั้งละ 10 องศา และวัตถุจะหมุนในลักษณะทวนเข็มนาฬิกาตามค่าที่ลดลงของ rotateAngle

19. เมื่อแตะ rotateR  ทุกครั้งจะเพิ่มค่า rotateAngles ครั้งละ 10 องศา และวัตถุจะหมุนในลักษณะตามเข็มนาฬิกาตามค่าที่เพิ่มขึ้นของ rotateAngle

20. ขณะที่รูปสามเหลี่ยม(dragTri) ซ้อนทับอยู่บน state เมื่อมีการเปลี่ยนแปลงค่าของ rotateAngles จะเก็บค่าไว้ใน objAngle ของสามเหลี่ยม dragTri และให้ Text แสดงค่ามุมของ rotateAngles

21. ขณะที่รูปสี่เหลี่ยม(dragSq) ซ้อนทับอยู่บน state เมื่อมีการเปลี่ยนแปลงค่าของ rotateAngles จะเก็บค่าไว้ใน objAngle ของสี่เหลี่ยม dragSq และให้ Text แสดงค่ามุมของ rotateAngles

22. ควบคุมการลากวัตถุสี่เหลี่ยมไปซ้อนทับรูปต้นแบบ และตรวจสอบความถูกต้องของวัตถุที่ซ้อนทับว่าตรงกันหรือไม่ ถ้าถูกต้องตรงกันจะปรับตำแหน่งให้อยู่ในตำแหน่งเดียวกับ sqState ถ้าไม่ถูกต้องให้กลับไปยังที่เดิม (state)

23. ควบคุมการลากวัตถุสามเหลี่ยมไปซ้อนทับรูปต้นแบบ และตรวจสอบความถูกต้องของวัตถุที่ซ้อนทับว่าตรงกันหรือไม่ ถ้าถูกต้องตรงกันจะปรับตำแหน่งให้อยู่ในตำแหน่งเดียวกับ triState ถ้าไม่ถูกต้องให้กลับไปยัง state

เท่านี้ก็เป็นอันเรียบร้อย  ลองทดสอบการทำงานของเกมดูครับ พบปัญหาหรือติดขัดประการใด ฝากข้อความไว้ได้ครับ

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

สวัสดีครับ

ดาวน์โหลดไฟล์ใหม่ในรูปแบบ .capx

ดาวน์โหลดไฟล์รุ่นต้นแบบ .capx