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

ต่อไปกำหนดการทำงานเริ่มต้นของปุ่มเมื่อมีการเปิด Layout ขึ้นมาทำงาน ไปที่ tab event sheet1 แล้วเลือก Add event หลังจากนั้นเลือกวัตถุแบบ System แล้วกด next

ขั้นต่อไป เลือกคำสั่งในหมวด Start & end คือ On start of layout แล้วคลิกปุ่ม Done

จะได้เหตุการณ์ดังนี้

คลิกเลือก Add action แล้วเลือกวัตถุที่เป็นปุ่ม Start แล้วกด Next

เลือก action แบบ Set animation แล้วกด Next

พิมพ์ชื่อ animation ที่ต้องการแสดง ในกรณีนี้เป็น normal คือ ภาพเริ่มต้นของปุ่ม เมื่อไม่มีการเอาเมาส์ไปชี้ แล้วกด Done

เพิ่ม action สำหรับปุ่ม exit เช่นเดียวกันกับปุ่ม start

เมื่อกำหนดค่าเริ่มต้นของปุ่มแล้ว ลำดับต่อไปเราจะกำหนดเหตุการณ์เมื่อมีการนำเมาส์ไปคลิกที่ปุ่มต่าง ๆ อันดับแรกต้องเพิ่มวัตถุ Mouse โดยเลือก Insert New Object แล้วเลือกหมวด Input และเลือก Mouse แล้วคลิกปุ่ม Insert

ขั้นต่อไป ทำการเพิ่มเหตุการณ์เมื่อมีการกดปุ่มของ Mouse โดยไปที่ event sheet1 คลิกที่ Add event  แล้วเลือกวัตถุ Mouse  และคลิกปุ่ม Next

เลือกเหตุการณ์ Cursor is over object ที่อยู่ในหมวด Mouse แล้วคลิกปุ่ม Next

เลือกวัตถุที่จะเกิดเหตุการณ์ เลือกตัว Spite ของปุ่ม Start กดปุ่ม OK แล้วตามด้วยปุ่ม Done

กำหนดการกระทำเมื่อเมาส์ไปชี้บนปุ่ม Start โดยการ Add action เลือกวัตถุที่เป็นปุ่ม Start แล้วกด Next

เลือกการกระทำกับภาพเคลื่อนไหว Set animation  แล้วกด Next

พิมพ์ชื่อภาพเคลื่อนไหวที่ต้องการแสดงลงในช่อง Animation  คือ over ตามที่ได้ตั้งชื่อไว้ แล้วกด Done

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

ทำการกำหนดการเคลื่อนไหวของปุ่ม Start ให้ไปที่ภาพเคลื่อนไหว normal  จะได้การกำหนดค่า ดังนี้

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

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

หลายครั้งที่เราพบเกมที่ใช้เป็นสื่อในการเรียนรู้ หรือเล่นไปได้ความรู้ไปด้วย อย่างเกมที่ผมจะมานำเสนอในบทความครั้งนี้คือเกมที่จับคู่ภาพกับคำศัพท์ เกมลักษณะนี้จะส่งเสริมการเรียนรู้ได้ดีกว่าการท่องศัพท์โดยตรง เพราะคนเราจะจำภาพได้ดีกว่าตัวอักษร
ขั้นแรกต้องออกแบบตัวเกมก่อน  ผมกำหนดให้เกมมี 3 ฉาก คือ ฉากเริ่มต้นของเกม ฉากเกม และฉากสรุปคะแนน ขั้นตอนแรกสร้างโปรเจคของเกมด้วยโปรแกรม Construct 2 ก่อนนะครับ ผมตั้งชื่อว่า PicAndWord

และกำหนดขนาดของเกมเป็น 800 x 480

สร้าง Layout ของเกมขึ้นมา 3 ตัว เพื่อเป็นฉากเกมตามที่ได้วางแผนไว้ ตั้งชื่อเป็น StartGame, PlayGame, EndGame โดยให้จับคู่กับ Event sheet 1, Event sheet 2, Event sheet 3 ตามลำดับ

ออกแบบหน้าตาของหน้าแรกใน Layout StartGame ในกรณีนี้ผมสร้างเป็นภาพจากโปรแกรมตกแต่งภาพแล้วนำมาใช้งานในเกม

สร้างปุ่มด้วย sprite ขึ้นมา 2 ปุ่ม คือ Start  และ Exit สำหรับเริ่มเกมและออกจากเกม

                                                     แสดงปกติ          เมื่อนำเมาส์ไปคลิก

การสร้างปุ่มจะเพิ่มแบบ Sprite โดยการ Insert new Object แล้วเลือกภาพแบบเคลื่อนไหว ด้วยการคลิกขวา เลือกคำสั่ง Import frames -> From files...  เลือกภาพปุ่ม start ภาพที่หนึ่งเข้ามา คือภาพที่แสดงปกติ

เปลี่ยนชื่อภาพเคลื่อนไหวเป็น normal 

เพิ่มภาพเคลื่อนไหวอีกครั้งโดยใช้ชื่อว่า over แล้วเพิ่มภาพของปุ่ม start มาทั้งสองภาพ

กำหนดให้แสดงแบบวนซ้ำ เวลาแสดงจะเหมือนปุ่มมีการกระพริบ

เพิ่มปุ่มอีกหนึ่งปุ่ม คือ Exit  กำหนดค่าเช่นเดียวกันกับปุ่ม Start แล้วจัดตำแหน่งของปุ่มให้อยู่ตรงกลางของหน้าเกม

Construct 2 : การสร้างทางเดิน

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

การสร้างทางเดิน ในตัวอย่างนี้จะเป็นการสร้างชั้นหินของน้ำตก  เริ่มด้วยการคลิกขวาที่บริเวณการสร้างเกม จะปรากฏหน้าต่างคำสั่งขึ้นมา เลือก Insert new object

จะได้หน้าต่าง Insert new object ซึ่งมีวัตถุแบบต่าง ๆ ที่เราจำเป็นต้องใช้ในการสร้างเกม

เลื่อนลงมาจนเจอแถบ General เลือกวัตถุแบบ Sprite คือ การสร้างตัวละคร  หลังจากนั้น คลิกที่ปุ่ม Insert โปรแกรมจะเปลี่ยนกลับมาที่หน้าต่างออกแบบเกมเหมือนเดิม หลังจากนั้นคลิกตรงตำแหน่งที่เราจะแทรกวัตถุ จะปรากฏหน้าต่าง  Edit image : Sprite ขึ้นมา

ต่อไปก็เป็นการแสดงฝีมือในการวาดภาพ แล้วแต่ใครจะออกแบบครับ ถามว่าไม่วาดเองได้ไหม ตอบว่าได้ครับ คลิกเพื่อเปิดเอาภาพจากคอมพิวเตอร์ของเราก็ได้ เหมือนกับการสร้างภาพพื้นหลังเกมครับ  แต่ในตัวอย่างนี้ผมขอวาดเองนะครับ เอาแบบง่าย ๆ มีชั้นหินและหญ้า ประมาณนี้ครับ

หลังจากนั้นกดปิดหน้าต่าง Edit image ก็จะได้ภาพที่เราวาดปรากฏบนหน้าเกมของเราครับ แต่ตอนนี้ขนาดจะใหญ่เกินกว่าที่เราต้องการ ต้องปรับลดขนาดให้เล็กลง

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

ในขั้นตอนต่อไป จะต้องกำหนดคุณสมบัติให้กับทางเดินทางเราเสียก่อน ไม่อย่างนั้นตัวละครต่าง ๆ ในเกมของเราจะไม่สามารถยืนบนทางเดินได้ จะหล่นลงไปด้านล่าง  การกำหนดคุณสมบัติสามารถทำได้โดย คลิกที่ sprite ที่เป็นภาพทางเดินของเกมตัวใดตัวหนึ่ง หลังจากนั้นให้ไปที่แถบ properties หาคำสั่งในกลุ่ม Behaviors แล้วคลิกที่ Add/edit Behaviors

จะปรากฏหน้าต่าง Add/edit Behaviors  ขึ้นมา คลิกที่เครื่องหมายบวก เพื่อเพิ่มพฤติกรรมให้กับวัตถุที่เป็นทางเดินของเรา

ในหน้าต่าง Add behavior ในกลุ่ม Attributes เลือกพฤติกรรมแบบ Solid คือทำวัตถุของเราให้เป็นของแข็ง ตัวละครจะไม่สามารถทะลุผ่านได้ ทำให้ตัวละครของเรายืนบนทางเดินที่เราสร้างขึ้นได้นั่นเอง  แล้วคลิกที่ปุ่ม Add

ในหน้าต่าง Behaviors ก็จะปรากฏพฤติกรรมของวัตถุ แบบ Solid ให้สำหรับวัตถุทางเดินทางเรา ปิดแล้วกลับไปที่เกมของเรา

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

Construct 2 : สร้างฉากเกม ตอนที่ 3

การสร้างฉากหลังด้วยภาพขนาดเล็ก
เริ่มด้วยการคลิกขวาที่บริเวณการสร้างเกม จะปรากฏหน้าต่างคำสั่งขึ้นมา เลือก Insert new object

จะได้หน้าต่าง Insert new object ซึ่งมีวัตถุแบบต่าง ๆ ที่เราจำเป็นต้องใช้ในการสร้างเกม

ในแถบ General เลือกวัตถุแบบ Tiled Background หลังจากนั้น คลิกที่ปุ่ม Insert โปรแกรมจะเปลี่ยนกลับมาที่หน้าต่างออกแบบเกมเหมือนเดิม หลังจากนั้นคลิกตรงตำแหน่งที่เราจะแทรกวัตถุ จะปรากฏหน้าต่าง  Edit image : Tiled Bankground ขึ้นมา คลิกที่ปุ่ม Open เพื่อเลือกภาพฉากหลังที่ต้องการ

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

ภาพพื้นหลังที่ปรากฏในเกม เมื่อเราย่อหรือขยาย ภาพพื้นหลังของเราจะแสดงเรียงต่อกันไปทั้งในแนวตั้งและแนวนอน

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

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

ต่อไปสร้าง Layer ใหม่ขึ้นมาเพื่อใช้สำหรับสร้างเกมในส่วนอื่นๆ โดยคลิกที่ เครื่องหมายบวก จะได้ Layer1 เพิ่มขึ้นมา ซึ่งจะอยู่ด้านบนของ Layer0 คลิกเลือก ที่ Layer1 เพื่อทำงานต่อไป

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

Construct 2 : สร้างฉากเกม ตอนที่ 2

การสร้างฉากหลังด้วยภาพขนาดใหญ่
เริ่มด้วยการคลิกขวาที่บริเวณการสร้างเกม จะปรากฏหน้าต่างคำสั่งขึ้นมา เลือก Insert new object

จะได้หน้าต่าง Insert new object ซึ่งมีวัตถุแบบต่าง ๆ ที่เราจำเป็นต้องใช้ในการสร้างเกม 

ในแถบ General เลือกวัตถุแบบ Sprite คือการสร้างพื้นหลังแบบตัวละคร  หลังจากนั้น คลิกที่ปุ่ม Insert โปรแกรมจะเปลี่ยนกลับมาที่หน้าต่างออกแบบเกมเหมือนเดิม หลังจากนั้นคลิกตรงตำแหน่งที่เราจะแทรกวัตถุ จะปรากฏหน้าต่าง  Edit image : Sprite ขึ้นมา

คลิกที่ปุ่ม Open เพื่อเลือกภาพฉากหลังที่ต้องการ

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

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

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

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

ต่อไปสร้าง Layer ใหม่ขึ้นมาเพื่อใช้สำหรับสร้างเกมในส่วนอื่นๆ โดยคลิกที่ เครื่องหมายบวก จะได้ Layer1 เพิ่มขึ้นมา ซึ่งจะอยู่ด้านบนของ Layer0 คลิกเลือก ที่ Layer1 เพื่อทำงานต่อไป

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