Construct 2 : ทำเมนูแบบซ่อนด้วย Effect Mask

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

1. สร้างโปรเจ็คใหม่ขึ้นมา กำหนด window size และ layout size เป็น 854, 480

2. เพิ่มเลเยอร์ 3 ชั้น ดังนี้

  • ชั้นที่ 0 ตั้งชื่อ Main ใช้สำหรับวางวัตถุของเกม
  • ชั้นที่ 1 ตั้งชื่อ Mask ใช้สำหรับวางแถบเลื่อนและปุ่มต่างๆ ของ Option เช่น Music, Sound, Help
  • ชั้นที่ 2 ตั้งชื่อ HUD ใช้สำหรับวางปุ่ม Option

layer1

3. ที่เลเยอร์ Mask กำหนดค่า Force own texture เป็น Yes และ Transparent เป็น Yes

layer

4. ที่เลเยอร์ Mask เพิ่ม Sprite Obj. ดังนี้

  • เพิ่ม Sprite Obj. ชื่อ bar กำหนด Image points ไว้ที่ Left

bar

  • เพิ่ม Sprite Obj. ชื่อ btn_help, btn_music, btn_sound ไว้บนแถบ bar

button

5. เพิ่ม Behaviors Pin ให้กับปุ่ม btn_help, btn_music, btn_sound

pin

6. ที่เลเยอร์ HUD เพิ่ม Sprite Obj. ชื่อ btn_opt

optx

7. ที่เลเยอร์ Mask เพิ่ม Sprite Obj. ชื่อ masking วางไว้ในส่วนที่เราต้องการปิดไม่ให้มองเห็น

masking

  • Masking Obj. กำหนดค่า Effects > Blend mode เป็น “Destination out”

effect

8. เปิดแท็ป Event Sheet ขึ้นมา กำหนดเหตุการณ์และการกระทำดังนี้

  • เพิ่มตัวแปร Global variable ชื่อ moving ชนิด Number กำหนดค่าเป็น 0

e1

  • กำหนดเหตุการณ์พื้นฐานเมื่อเริ่มต้นเลย์เอาท์ โดยให้ปุ่ม help, music, sound ผูกติดกับแถบเลื่อน (bar) และตั้งค่าตำแหน่ง X จุดเริ่มต้นของแถบ bar

e2

  • กำหนดค่าตัวแปร moving เมื่อผู้เล่นสัมผัส หรือแตะปุ่ม opt

e3

  • ระบุตำแหน่งค่า X ของหน้าจอ เพื่อกำหนดระยะของการเลื่อนเข้า – ออก ของแถบเลื่อน
    • 820 ตำแหน่งพิเซล สิ้นสุดการเลื่อนเข้า (ดูจากตำแหน่ง X ของ btn _opt)
    • 630 ตำแหน่งพิเซล สิ้นสุดการเลื่อนออก (ดูจากตำแหน่ง X ของแถบเลื่อน)

swip

เหตุการณ์ควบคุมการเลื่อนของแถบ bar

e4

ตัวอย่าง