Construct 3 : สร้างแป้นพิมพ์ให้เกม

วันนี้เราจะมาเรียนรู้การสร้างแป้นพิมพ์ให้กับเกมของเรา โดยใช้ loop for ของ Construct 3 กันนะครับ

1. เริ่มแรกก็เปิดหน้าเพจ Construct 3 ขึ้นมานะครับ ตั้งค่า window และ layout เป็น กว้าง 480 พิกเซล สูง 854 พิกเซล

2. เพิ่ม sprite ปุ่ม ตั้งชื่อ “Letter” นำเข้ารูปภาพแต่ละเฟรมดังรูป

  • ตั้ง Animation speed เป็น 0

3. ตั้งคุณสมบัติให้กับ sprite ชื่อ “Letter” ดังนี้

  • ปรับขนาดของเป็น กว้าง 65 พิกเซล สูง 65 พิกเซล
  • เพิ่ม Instance variable
    • Name : Letter
    • Type : String

4. เพิ่ม Text ลงในหน้า Layout จัดตำแหน่งและปรับค่าตามต้องการ

5. เพิ่ม Touch ลงบน Layout

6. เพิ่ม Array ลงบน Layout

7. เปิดแถบ Event Sheet ขึ้นมา

8. เพิ่ม Global variable

  • Name : Shift
  • Type : Boolean
  • Initial value : false

9.  Add Event > System > On start of layout

  • Add Action > Array > Load
"{""c2array"":true,""size"":[27,1,1],""data"":[[[""A""]],[[""B""]],[[""C""]],[[""D""]],[[""E""]],[[""F""]],[[""G""]],[[""H""]],[[""I""]],[[""J""]],[[""K""]],[[""L""]],[[""M""]],[[""N""]],[[""O""]],[[""P""]],[[""Q""]],[[""R""]],[[""S""]],[[""T""]],[[""U""]],[[""V""]],[[""W""]],[[""X""]],[[""Y""]],[[""Z""]],[["".""]]]}"

10. Add … > Add function > Name : CreateObj

  • Event On function CreateObj > Add another parameter
    • Name : frame
    • Type : Number
    • Default value : 0
  • Event On function CreateObj > Add sub-event  > System > for
    • Name : “y”
    • Start index : 1
    • End index : 6
  • Sub-event System | for “y” > Add sub-event  > System > for
    • Name : “x”
    • Start index : 1
    • End index : 5
  • Sub-event System | for “x”
    • Add action > System > Create object
      • Object to create : Letter
      • Layer : 0
      • X : loopindex(“x”)*80
      • Y : 200+loopindex(“y”)*80
    • Add action > Letter > Set frame > Frame number : 0
    • Add action > Letter > Set value
      • Instance variable : letter (string)
      • Value : Array.At(frame)
    • Add action > System > Add to
      • Variable : frame
      • Value : 1

11. Event System | On start of layout

  • Add action > Functions > CreateObj
    • frame : 0

12. เพิ่มเหตุการณ์การแตะปุ่มต่างๆ ดังรูป

13. เพิ่มเหตุการณ์เมื่อแตะปุ่ม Shift

DEMO : New project (semicon.github.io)

Download file

แล้วพบกันใหม่

สวัสดีครับ