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

ขั้นต่อไปจะเป็นการกำหนดให้เปลี่ยนหน้าของเกมเมื่อกดปุ่ม Start เพื่อเปลี่ยนไปยังหน้าเล่นเกม และการออกจากเกมเมื่อมีการกดปุ่ม Exit

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

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

เลือกการคลิก Mouse button เป็น Left คือ เมื่อมีการคลิกปุ่มซ้ายของ Mouse
ลักษณะ Click type  เลือกเป็น Clicked
วัตถุที่มีเหตุการณ์เกิด Object clicked เลือกตัว Spite ที่เป็นปุ่ม Start สำหรับเริ่มเกม

เมื่อกดปุ่ม Done จะกลับมาที่หน้า event sheet ทำการเพิ่ม action สำหรับการคลิกที่วัตถุ Start
เลือกวัตถุแบบ System  แล้วคลิกปุ่ม Next

ต่อไปทำการเลือกคำสั่งในหมวด General คือ Go to layout เพื่อให้เปลี่ยนไปยัง layout ของเกม คลิกปุ่ม Next

เลือก Layout ที่จะให้เกมเปลี่ยนไปทำงาน ในที่นี้คือ Layout ของเกมที่เคยได้สร้างเอาไว้แล้ว ชื่อ PlayGame

ที่หน้า event sheet จะได้เหตุการณ์เมื่อคลิกที่ตัววัตถุ Start

ต่อไปเป็นการกำหนดการดำเนินการกับเกมเมื่อกดปุ่ม Exit  จะให้ทำการปิดหน้าเว็บที่แสดงเกม (ที่ใช้การปิดหน้าเว็บเพราะว่าผมใช้โปรแกรมแบบฟรีนะครับ ทำงานได้เฉพาะบนเว็บ) ต้องเพิ่มวัตถุแบบ Browser เพื่อนำมาควบคุมการทำงานของตัวเว็บ โดยการคลิกขวา เลือกคำสั่ง Insert New Object ที่หมวด Web เลือกวัตถุ Browser แล้วกดปุ่ม Insert

ต่อไปเพิ่มเหตุการณ์เมื่อมีการคลิกเมาส์ที่ปุ่ม Exit ทำเช่นเดียวกับปุ่ม Start แต่ในขั้นตอนการ Add action นั้น ให้ดำเนินการตามนี้
คลิก Add action แล้วเลือกวัตถุ Browser แล้วคลิกปุ่ม Next

เลือกคำสั่งในหมวด Window คือ Close แล้วคลิกปุ่ม Done

คำสั่งที่ได้ใน event sheet จะมีการทำงานเมื่อคลิกที่วัตถุ Exit จะทำการปิด Browser ออกจากเกม

ในขณะนี้เราได้กำหนดการทำงานทั้งหมดในหน้าแรกของเกมเสร็จเรียบร้อยแล้ว คำสั่งทั้งหมดจะเป็นดังนี้

ต่อไปจะเป็นการสร้างตัวเกม จะทำงานใน Layout ที่สอง คือ PlayGame จะได้กล่าวในตอนต่อไป

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 : Animations ตอนที่ 3

การกำหนดท่าทางเคลื่อนไหวให้สัมพันธ์กับการควบคุม

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




อันดับแรกต้องเพิ่มตัววัตถุแบบ keyboard เข้ามาในเกมก่อน โดยการ Insert New Object และเลือก Keyboard

เปิดไปที่หน้า Event sheet แล้วคลิกคำสั่ง Add event เลือกวัตถุ Keyboard แล้วคลิกปุ่ม Next

เลือกเหตุการณ์ On key pressed  แล้วคลิกปุ่ม Next

คลิกที่ช่อง Key เพื่อเลือกปุ่มของ Keyboard ที่ต้องการ โดยการกดปุ่ม เช่น ต้องการใช้ปุ่มลูกศรด้านซ้าย เมื่อกด จะขึ้นปุ่มเป็น Left arrow แล้วกดปุ่ม OK และปุ่ม Done ตามลำดับ

จะได้เหตุการณ์ที่เกิดเมื่อมีการกดลูกศรด้านซ้าย  ต่อไปจะกำหนดการกระทำเมื่อลูกศรซ้ายถูกกด โดยการ Add action แล้วเลือก ตัวละครที่เราได้กำหนดการเคลื่อนไหวเอาไว้  แล้วกด Next

เลือกคำสั่ง Set animation และกดปุ่ม Next

กำหนดภาพเคลื่อนไหวให้กับตัวละคร เมื่อมีการกดลูกศรด้านซ้าย ในที่นี้ผมกำหนดเป็น “walk” ขึ้นอยู่กับเกมที่สร้างขึ้นและการกำหนดชื่อของการเคลื่อนไหวนะครับ อาจจะเป็นชื่ออื่นได้  แล้ว กดปุ่ม Done

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

ทดสอบเกมของเรา จะพบว่า เมื่อกดปุ่มลูกศรซ้าย หรือขวา ตัวละครของเราจะแสดงท่าทางการเคลื่อนไหวตามต้องการ แต่บางครั้งเมื่อเราปล่อยมือจากปุ่ม ตัวละครของเราจะแสดงท่าทางแปลกๆ คือ อาจจะก้าวขาค้างไว้ กรณีแบบนี้เราสามารถกำหนดเหตุการณ์เมื่อมีการปล่อยมือจากปุ่ม ให้ตัวละครของเราแสดงท่าทางยืนหรือหยุดนิ่ง โดยใช้เหตุการณ์ On any key released แล้วกำหนดเป็นการเคลื่อนไหวตามที่ต้องการ เช่น ท่ายืน

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

Construct 2 : Animations ตอนที่ 2

การสร้างภาพเคลื่อนไหวท่าเดิน

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

เพิ่มภาพเคลื่อนไหวใหม่ ตั้งชื่อเป็น walk

ทำการเพิ่มไฟล์ภาพเข้ามาที่ Animation frames ด้วยการคลิกขวา เลือกคำสั่ง Import frames และ Form files

เลือกภาพที่จะใช้เป็นท่าทางการเคลื่อนไหวของการเดิน การเลือกหลายไฟล์ ทำได้โดยการกดปุ่ม Ctrl ค้างไว้ในขณะที่เลือกภาพ เมื่อเลือกภาพครบแล้ว คลิกปุ่ม Open

ลบเฟรมภาพที่ 0 ทิ้งไป เพราะที่เฟรมดังกล่าวเราไม่ได้กำหนดภาพที่ใช้ในการเคลื่อนไหวเอาไว้

จะได้ลำดับของภาพเคลื่อนไหว ดังนี้

เมื่อเลือกคำสั่ง preview จะได้ท่าทางการเดินของตัวละคร