Construct 2 : สร้างเกม Puzzle แบบเรียงภาพด้วยการแตะ

มีเพื่อนสมาชิกถ่ายคลิปเกมเรียงภาพส่งมาให้ดู บอกว่าต้องการสร้างเกมแนวนี้ พอจะแนะนำวิธีสร้างได้ไหม ? ให้ดูแต่คลิป ไม่ได้บอกรายละเอียดอะไร ก็เลยลองเดามั่วๆ สร้างดู  ผลก็ออกมาแบบนี้ https://semicon.github.io/puzzle001/index.html

วิธีเล่นก็คือ แตะเลือกภาพที่จะเปลี่ยนตำแหน่ง แล้วก็แตะตำแหน่งที่จะเปลี่ยนภาพอีกครั้ง เมื่อเปลี่ยนภาพแล้วถ้าตำแหน่งถูกต้อง พื้นสีแดงจะหายไป

ซึ่งในการสร้างเกมนี้ ผมใช้ Sprite Font มาเป็นพระเอกในการแบ่งภาพเป็นชิ้นๆ สำหรับเรื่องการใช้ Sprite Font สร้างเกม Puzzle ผมเคยเขียนบทความไว้เมื่อนานแล้ว ลองย้อนกลับไปอ่านดูนะครับ ถ้าท่านสนใจอยากจะสร้างเกมแนวนี้บ้าง ลองมาดูวิธีการกันครับ

1. เริ่มจากเปิดโปรเจ็คใหม่ขึ้นมา จากนั้นกำหนดค่าขนาดของวินโดวน์และเลย์เอาต์ตามต้องการ ในบทความนี้ ผมใช้ขนาด 854 x 480

  • เพิ่มเลเยอร์ เป็น 2 เลย์เยอร์ ดังรูป

2. เพิ่ม Sprite Font ไว้นอกเลย์เอ้าต์

  • นำเข้ารูปภาพที่ต้องการเข้ามาแทนรูป Sprite font ของเดิม ดังรูป
  • กำหนดความกว้าง และความสูงของชิ้นภาพ ในบทความนี้ภาพขนาด 510 x 288 พิกเซล แบ่งภาพเป็น 6 ชิ้น แนวนอน 3 ชิ้น และแนวตั้ง 2 แถว จะได้ขนาดภาพ 170 x 144 พิเซล
  • เพิ่ม Instance variable ประเภท Number ชื่อ active และกำหนดค่าเริ่มต้นเป็น 0 ให้กับ Sprite Font
  • ตั้งค่าคุณสมบัติของ Sprite Font ดังนี้

3. เพิ่ม Sprite ชื่อ boxTouch ไว้ด้านนอกเลย์เอาต์ กำหนดขนาดเท่ากับขนาดของชิ้นภาพ (170,144)

  • เพิ่มเฟรมให้ boxTouch เป็น 3 เฟรม เฟรมละสี
  • ตั้ง speed animation ของ boxTouch เป็น 0
  • ตั้ง Opacity ของ boxTouch เป็น 55

4. กำนดค่ากริด ของเลย์เอาต์ดังรูป ซึ่งขนาดของกริดได้มาจากการแบ่งชิ้นส่วนของภาพ (170,144)

  • ความกว้าง 170/10 = 17
  • ความสูง 144/4 = 36

5. เพิ่ม Sprite ชื่อ boxBase กำหนดขนาดเท่ากับขนาด 50 x 50 พิกเซล

  • เพิ่ม Instance variable ประเภท Text ชื่อ nameText ให้กับ Sprite boxBase
  • คัดลอก Sprite boxBase วางโดยมีระยะห่างเท่ากับขนาดของภาพ และกำหนดค่า Instance variable ของแต่ละอันดังรูป

6. เพิ่ม Sprite ตั้งชื่อ image และนำเข้ารูปภาพเดียวกับ Sprit font เข้ามา สำหรับใช้แสดงเป็นภาพตัวอย่าง

7. เพิ่ม Text เข้ามา 3 อัน และตั้งชื่อดังนี้

  • TextTimer และเพิ่ม Instance variable ประเภท Number ชื่อ numb ให้กำหนดค่าเริ่มต้นเป็น 60
  • TextScore และเพิ่ม Instance variable ประเภท Number ชื่อ numb ให้กำหนดค่าเริ่มต้นเป็น 0
  • TextRemain และเพิ่ม Instance variable ประเภท Number ชื่อ numb ให้กำหนดค่าเริ่มต้นเป็น 0

8. จัดวางวัตถุต่างดังนี้

9. และนี่คือรูปสัญลักษณ์ของวัตถุทั้งหมดที่ใช้ในการสร้างเกมนี้

10. การเขียน Event Sheet

Array load JSON

"{""c2array"":true,""size"":[6,1,1],""data"":[[[""A""]],[[""B""]],[[""C""]],[[""D""]],[[""E""]],[[""F""]]]}"

 

ขอให้สนุกกับการสร้างเกมนะครับ

แล้วพบกันใหม่ สวัสดีครับ