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

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

ฉากของเกมผมได้ออกแบบให้มี 3 layers คือ
gamescene สำหรับแสดงฉากหลังของสถานที่ที่มีสิ่งของในเกมปรากฏอยู่ เช่น ฉากห้องเรียน ห้องครัว ห้องน้ำ เป็นต้น
mask  สำหรับสร้างกรอบของตัวเกม
pic_word  ให้แสดงรูปภาพให้ซ่อนอยู่ในสถานที่ตามเกม และแสดงคำศัพท์ที่คู่กับภาพ

สร้างหน้ากากของเกมด้วยโปรแกรมตกแต่งภาพ โดยเจาะช่องตรงกลางไว้เพื่อให้สามารถแสดงฉากหลังของเกมได้
คลิกเลือก layers mask แล้วเพิ่มวัตถุใหม่เข้ามาเป็นแบบ Sprite

แล้วเลือกภาพหน้ากากของเกมที่ได้สร้างเอาไว้แล้ว ดังตัวอย่างนี้ (ควร lock layers ด้วย ป้องกันการคลิกแล้ววัตถุเคลื่อนโดยไม่ได้ตั้งใจ)

ขั้นต่อไปออกแบบฉากหลังของเกมโดยแทรกวัตถุเข้ามาที่ layers gamescene กรณีนี้ผมยกตัวอย่างเป็นฉากของห้องเรียน ที่มีโต๊ะนักเรียน มีชั้นหนังสือ ดังนี้

ขั้นต่อไปจะเป็นการนำภาพกับคำศัพท์เข้ามาวางในฉากของเกม ผมขอยกตัวอย่างจำนวน 8 ภาพนะครับ ได้แก่

pencil

pen

eraser

map

ruler

soccer

train

car

เมื่อเตรียมภาพเรียบร้อยแล้ว ต่อไปก็แทรกภาพเป็นวัตถุเข้ามาใน Layers pic_word และตั้งชื่อ sprite เป็น pic1 , pic2 ตามลำดับจนครบทั้ง 8 ภาพ

เลือกภาพเข้ามาตามที่ได้วางแผนไว้ คือ ภาพดินสอ คลิกแก้ไขจุดภาพให้มีเส้นตามรูปร่างของภาพมากที่สุด

นำภาพไปวางในตำแหน่งที่เข้ากับฉากหลังของเกม

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

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

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

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

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

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

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

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

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

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