Construct 2 : ปุ่มเดียว เสียวทุกเมนู

วันนี้มาในแนวเสียวๆ ครับ ไม่ใช่อะไรหรอกครับ ไปเจอน้องคนหนึ่ง เขาเอาโปรแกรม Construct 2 ที่สร้างเกมมาให้ดู บอกว่า ตัวอย่างเขาทำปุ่มเป็น family แต่อยากเลียนแบบบ้าง แต่ของเรามันของฟรี จะไปทำอะไรเสียวๆ แบบเขาก็ไม่ได้ ผมก็เลยขำก๊ากเลยทีเดียว ที่แท้ก็อยากทำเสียวแบบเขานั่นเอง เลยเป็นที่มาของชื่อบทความในวันนี้

อันที่จริงแล้ว การสร้างปุ่มในลักษณะของ family นั่น มีจุดประสงค์เพื่อให้สามารถสั่งงานเมื่อคลิกปุ่มด้วยคำสั่งหรือ event เดียว ให้ครอบคลุมการทำงานของปุ่มทุกปุ่ม แล้วทำไมต้องรวมกลุ่มแต่ละปุ่มแต่ละปุ่มไว้ด้วยกันล่ะ ผมจะยกตัวอย่างให้ดูว่า ถ้าแยก จะต้องเขียนคำสั่งมากขนาดไหน

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

สิ่งที่ต้องรู้ก่อนที่จะทำตามเนื้อหาในบทความนี้
1. การทำ sprite แบบ animation คลิกกลับไปอ่านบทความ
2. การใช้งาน function ในโปรแกรม Construct 2  (ค้นหาอ่านจาก google ก่อนนะครับ ยังไม่ได้เขียน)

ลงมือกันเลย
ขั้นแรก ให้รวมเมนูต่าง ๆ เข้าเป็นปุ่มเดียวในลักษณะของ animation ก่อนนะครับ กำหนด speed ของ animation เป็น 0 เพื่อไม่ใช้ animation ของปุ่มทำงาน

นำปุ่มมาวางในหน้าเกม ตามจำนวนปุ่มหรือเมนูที่ต้องการ  และกำหนด instance variable ให้กับปุ่ม เพื่อใช้แสดงภาพ frame ปุ่มตามค่าของ buttonID เปลี่ยนค่าไปเรื่อยๆ ตามหมายเลขของภาพใน frame ของ animation

กำหนดค่าให้แสดงปุ่ม เมื่อเริ่มทำงานทุกครั้งที่ load layout

เมื่อทดสอบการทำงานของปุ่มที่วางไว้ แสดงผลถูกต้องตามต้องการ ขั้นต่อไป ต้องเพิ่ม instance variable อีกหนึ่งตัว เพื่อใช้เก็บค่าชื่อ function ที่จะถูกเรียกใช้เมื่อปุ่มถูกคลิกให้ทำงาน

เปลี่ยนค่าของ instance variable ให้เป็นชื่อ function ที่ต้องการเรียกใช้ ตรงตามปุ่มแต่ละปุ่ม

กำหนดคำสั่งสำหรับการทำงาน เมื่อคลิกที่ปุ่มต่าง ๆ ที่เราได้วางไว้ในเกมแล้ว โดยอาศัยการทำงานคุณสมบัติของ Function คือ Function.Call  โดยอาศัยชื่อ function ที่ส่งมาจากค่า instance variable ที่ชื่อ callback

ถ้าปุ่มที่กด เป็นค่า playback การทำงานของ function "callback"  จะไปเรียกใช้งาน function "playback" อีกต่อหนึ่ง

เป็นอันเรียบร้อย เขียนการทำงานของ function ให้ครบทุกปุ่ม แค่นี้ ปุ่มเดียวของเราก็ทำเสียวไปได้ทุกเมนูแล้วครับ ไม่ต้องใช้คุณสมบัติของ family ก็สามารถทำงานได้เช่นเดียวกัน ขอให้สนุกกับการสร้างเกมนะครับ

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 9 เก็บคะแนน

ขั้นต่อไปจะเป็นการเก็บคะแนนของเกม เงื่อนไขการให้คะแนน  จะขึ้นกับความเร็วในการคลิกภาพที่คู่กับคำศัพท์  แล้วนำเวลาที่ใช้ไปมาหารคะแนนเต็มของคำแต่ละคำ
ขั้นแรกกำหนดตัวแปร ดังนี้

เพิ่มวัตถุแบบ Text ขึ้นมา 2 ตัวสำหรับแสดงคะแนน (score_txt) และแสดงเวลาของเกม (time_txt)

เพิ่มเหตุการณ์ใหม่ เพื่อใช้สำหรับนับเวลาในการคลิกภาพ  เป็นแบบ System  และเหตุการณ์ Every X seconds

กำหนดให้ทำงานทุกๆ 0.1 วินาที

กำหนดคำสั่งให้ทำงาน คือ เพิ่มค่าให้ตัวแปร time1  เป็นแบบ System  และเหตุการณ์  Add to

เพิ่มค่าให้ตัวแปร time1 ทีละ 1

เพิ่มคำสั่งสำหรับเหตุการณ์นี้อีกหนึ่งค่า คือ กำหนดให้ time_txt แสดงเวลาที่เพิ่มขึ้น

เลือก Set text

กำหนดค่าให้เท่ากับตัวแปร time1

เพิ่มคำสั่งใหม่เข้าไปใน function wordmatch  สองคำสั่ง คือ
System --> Add floor(MAX_SCORE / time1) to score คำนวณคำแนนแล้วบวกเพิ่ม
System --> Set time1 to 0  กำหนดค่าเวลาให้เริ่มนับใหม่

กำหนดคำสั่งให้ทำงาน เป็นแบบ System  และเหตุการณ์  Add to  เลือกตัวแปร score
การคำนวณคะแนนคือ เอาค่าคะแนนเต็ม (MAX_SCORE) หารด้วยเวลาที่ผ่านไป (time1) และปัดลงเป็นจำนวนเต็ม

กำหนดคำสั่งให้ทำงาน เป็นแบบ System  และเหตุการณ์  Set value  กำหนดค่า time1 = 0

เพิ่มเงื่อนไข else ในกรณีที่แถวลำดับของคำว่าง คือ คลิกภาพครบทุกคำแล้ว ให้ไปยังหน้าสรุปคะแนน

ทดสอบเล่นเกม จะพบว่าเมื่อคลิกภาพที่ตรงกับคำศัพท์ คะแนนจะเพิ่มขึ้นเรื่อยๆ เมื่อคลิกภาพด้วยความรวดเร็วจะได้คะแนนสูงกว่าการเล่นที่คลิกภาพช้า

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 8

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

ขั้นตอนแรกต้องสร้างฟังก์ชัน (function) สำหรับการตรวจสอบขึ้นมาก่อน โดยเพิ่มวัตถุแบบ Function

เพิ่มเหตุการณ์ใหม่ Add event แบบ function

เลือกเหตุการณ์แบบ On function

ตั้งชื่อ function ว่า wordmath

เพิ่มเหตุการณ์ย่อยภายใต้เหตุการณ์ของ Function wordmath โดยเลือกแบบ Temp_arr

เลือกเงื่อนไข คือ Contains value เป็นการตรวจสอบว่าคำศัพท์ที่ส่งเข้ามา มีอยู่ในรายการคำศัพท์ที่เลือกไว้หรือไม่

กำหนดเงื่อนไขคือ ค่าที่ส่งเข้ามาให้กับ Function ลำดับที่ 0  กำหนดค่า ดังนี้ Function.Param(0)

เพิ่ม action เมื่อคำที่ส่งมา มีอยู่ในรายการคำของ Temp_arr โดยการลบคำนั้นออกจากรายการ

เลือกคำสั่ง Delete

กำหนดตำแหน่งของคำที่จะลบด้วยคำสั่ง Temp_arr.IndexOf(Function.Param(0))

จะได้คำสั่ง ดังนี้

ต่อไปจะเพิ่มคำสั่งให้ลบภาพออกจากเกม เมื่อภาพนั้นตรงกับคำศัพท์ที่มีในรายการคำที่ได้เลือกไว้
โดยเลือกเหตุการณ์แบบ System

เลือกเหตุการณ์ Compare two values คือการเปรียบเทียบค่า

กำหนดค่าการเปรียบเทียบสองค่าคือ Function.Param(1)  กับหมายเลขของภาพที่กำหนดไว้คู่กับคำ

กำหนดคำสั่งให้ลบภาพที่ตรงกับหมายเลขที่กำหนด ในตัวอย่างนี้ คือลบภาพหมายเลข 1

เลือกคำสั่งเป็น Destroy

เพิ่มคำสั่งย่อยให้ครบทุกภาพที่ได้กำหนดไว้ในเกมของเรา ดังนี้

ต่อไปจะกำหนดเหตุการณ์สำหรับการคลิก Mouse บนวัตถุภาพของเราที่ได้กำหนดไว้
จะต้องเพิ่มวัตถุแบบ Mouse เข้ามาในเกมก่อน

เพิ่มเหตุการณ์เมื่อมีการคลิก Mouse บนวัตถุ

เลือกเหตุการณ์ On object clicked

เลือกวัตถุที่เกิดเหตุการณ์เมื่อคลิก mouse ในครั้งนี้เลือกเป็น pic1

กำหนดคำสั่ง โดยเรียกใช้ Function wordmatch

เลือกคำสั่ง Call function

กำหนดชื่อ Function ที่เรียกใช้ คือ wordmatch  กำหนดค่าที่ส่งให้  Function สองค่าคือ Parameter 0 = คำศัพท์ที่ตรงกับภาพ ในกรณีนี้คือ "pencil" และ Parameter 0 = 1 คือ คู่กับภาพที่ 1

กำหนดการคลิก Mouse ให้ครบทุกภาพ ดังนี้

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