Construct 2 : สร้างเกมเรียงภาพปริศนา (Photo Puzzle)

วันนี้เราจะมาเรียนรู้การสร้างเกมเรียงภาพปริศนา (Photo Puzzle) ด้วย Sprite Font กันนะครับ เพื่อไม่ให้เป็นการเสียเวลา ว่าแล้วเราก็มาเริ่มกันเลยครับ

1. เตรียมทรัพยากรที่ต้องใช้ดังนี้

  • รูปภาพ Bg ขนาด  w=640px H=640px
    ซึ่งขนาดความกว้างของภาพ เท่ากับ ขนาดความกว้างของชิ้นภาพ คูณด้วย จำนวนชิ้นภาพ และขนาดความสูงของภาพ เท่ากับ ขนาดความสูงของชิ้นภาพ คูณด้วย จำนวนชิ้นภาพ เช่น  128 x 5 = 640 พิกเซล
  • รูปภาพกรอบขนาด W=128, H=128

2. เปิดโปรเจ็คใหม่ ตั้งต่า Window และ Layout ให้มีขนาด W = 768px, H=1280px
3. ตั้งค่า Grid Option และ Grid size W=64, H=64 (ครึ่งหนึ่งของขนาดชิ้นภาพ)

4. เปลี่ยนชื่อ Layer 0 เป็น Bg

5. เพิ่ม Sprite Font ตั้งชื่อ image

6. โหลดรูปภาพที่เตรียมไว้เข้ามาแทนรูป Sprite Font ของเดิม

7. ตั้งค่าต่างๆ ของ Sprite Font ดังนี้

  • ตั้งขนาดชิ้นภาพ (Size) ของ Sprite Font W=128px, H=128px
  • ตั้งขนาดของตัวอักขระ Character width และ Character height เท่ากับ 128px และ เลือกตำแหน่ง Hotspot เป็น Center

8. เพิ่ม Instance Variable ชื่อ imgNumb ประเภท Number ตั้งค่าเริ่มต้นเป็น -1 ให้กับ Sprite Font

9. เพิ่ม Behaviors Drag & Drop ให้กับ Sprite Font

10. คัดลอก Sprite Font วางเป็น 5 แถว แถวละ 5 ชิ้น

11. ตั้งค่า Text ของ Sprite Font แต่ละชิ้น โดยเริ่มจาก A B C … Y ดังรูป

12. เพิ่ม Layer ใหม่ ตั้งชื่อว่า Grid

13. เพิ่ม Sprite ตั้งชื่อว่า Grid ปรับขนาดเป็น W=40px, H=40px

14. เพิ่ม Instance Variable ชื่อ gridNumb ประเภท Number ตั้งค่าเริ่มต้นเป็น -1 ให้กับ Grid

15. ตั้งค่า Initial visibility เป็น Invisible ให้กับ Grid

16. คัดลอก Grid วางในตำแหน่งต่างๆ ดังรูป

17. เพิ่ม Layer ใหม่ ตั้งชื่อว่า Frame

18. เพิ่ม Sprite ตั้งชื่อว่า Frame ปรับขนาดเป็น W=128px, H=128px

19. เพิ่ม Instance Variable ชื่อ frameNumb ประเภท Number ตั้งค่าเริ่มต้นเป็น -1 ให้กับ Frame

20. คัดลอก Frame วางในตำแหน่งดังรูป

21. เพิ่ม Touch ลงในหน้า Layout

22. เปิดหน้าต่าง Event Sheet ขึ้นมา เพิ่ม Event และ Action ดังนี้

ขอให้สนุกกับการสร้างเกมด้วย Construct 2 กันนะครับ

https://www.scirra.com/arcade/puzzle-games/photo-puzzle-21510

[Download capx]