แสดงบทความที่มีป้ายกำกับ เก็บคะแนน แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ เก็บคะแนน แสดงบทความทั้งหมด

วันพุธที่ 17 สิงหาคม พ.ศ. 2559

construct 2 : แสดงคะแนนเกม

จากคำถามของคุณ TOOMTAM TV.  ที่อยากทราบว่า "วิธีทำให้คะแนนอยู่กับหน้าจอตลอดทำยังไงครับผมทำให้มีคะแนนแล้ว แต่เวลาเล่นผลสกอ มันไม่ติดอยู่กับหน้าจอ"  ผมขอตอบคำถามในลักษณะของการสร้างเกมและต้องการให้วัตถุบางตัวแสดงตลอดเวลา แม้จะมีการเคลื่อนหน้าจอของเกม วิธีการสามารถทำได้หลายวิธี แต่ขอแนะนำ เพียง 2 วิธี

วิธีที่ 1 คือการกำหนดค่า parallax ให้กับ layout ให้มีค่าเป็น 0  จะทำให้ layout นั้น ไม่เคลื่อนที่ไปกับตำแหน่งของวัตถุในเกม ผมได้นำเสนอไปแล้วในบทความ Parallax effect
ซึ่งการคงตำแหน่งของ layout มีข้อดี คือ วัตถุต่าง ๆ ใน layout จะไม่เคลื่อนที่ไปด้วย เมื่อเราเพิ่มวัตถุใหม่เข้ามาใน layout ก็จำเป็นต้องกำหนดวัตถุให้ตรึงตำแหน่งเดิม เพราะ layout กำหนดไว้ให้แล้ว

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



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

ทดลองใช้งาน และเลือกให้เหมาะสมกับเกมที่สร้างนะครับ จะใช้วิธีไหน ไม่มีข้อบังคับที่แน่นอน ขอให้สนุกกับการสร้างเกม

วันอาทิตย์ที่ 25 ตุลาคม พ.ศ. 2558

Construct 2 : พลังชีวิต Health

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

ขั้นแรกสร้างแถบพลังชีวิตขึ้นมาก่อน health bar ในตัวอย่างผมสร้างขึ้นมา 2 แถบ เป็นแบบ sprite คือแถบของพลังชีวิตสูงสุด ให้เป็นแถบสีแดง กำหนดชื่อ barMaxHP กับแถบพลังชีวิตที่เหลือ ให้เป็นแถบสีเขียว กำหนดชื่อ barHP ที่สำคัญกำหนดค่า origin point ของแกน x เป็น 0 ด้วย



จะได้แถบพลังชีวิต 2แถบ กำหนดขนาดเป็น 200 x 20 ดังนี้


ย้ายแถบสีเขียวไปทับแถบสีแดง จนมองเห็นเป็นแถบเดียวกัน



สร้างตัวแปรขึ้นมาเพื่อเก็บค่าพลังชีวิต



สร้างเหตุการณ์เมื่อตัวละครของเราไปชนกับอุปสรรค ให้พลังชีวิตลดลง ในตัวอย่างผมขอใช้ตัวละครเด็กฮาโลวีนที่ได้เคยสร้างไว้แล้วเป็นฮีโร่ กับผีน้อยน่ารักเป็นตัวอุปสรรค (การเพิ่มตัวละคร ดูได้จากบทความที่ผ่านมา)



กำหนดเหตุการณ์เมื่อเด็กน้อยเดินไปชนผี ให้ลดค่าพลังชีวิตลง เลือก Add event แล้วเลือก Sprite ของตัวละคร


เลือกเหตุการณ์ On collision with another object


จะได้หน้าต่าง สำหรับเลือกวัตถุที่จะชน


เลือกวัตถุตัวผีน้อย



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


เลือก Subtract from


เลือกตัวแปรที่จะลบค่า คือ health1  กำหนดให้ลดลงทีละ 15


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



การกำหนดความยาวของแถบชีวิต
เมื่อพลังชีวิตลดลง แถบของพลังชีวิตก็จะลดลงด้วย ในการลดความยาวของแถบ จะต้องคำนวณร้อยละของพลังชีวิตที่เหลืออยู่
  ร้อยละของพลังชีวิตที่เหลืออยู่ = (พลังชีวิตที่เหลือ / พลังชีวิตสูงสุด) x 100

คำนวณหาความยาวของแถบชีวิตได้จาก
ความยาวของแถบพลังชีวิต = ร้อยละของพลังชีวิตที่เหลืออยู่ x ความยาวของแถบพลังชีวิตสูงสุด

คำสั่งในการคำนวณตามสูตร คือ
barHP.Width = (HP / maxHP) * barMaxHP.Width

คลิกที่ Add action แล้วเลือก barHP



เลือกคำสั่ง Set width



กำหนดค่าความกว้าง (health1/100)*barMaxHP.Width



คำสั่งที่ได้เป็นดังนี้


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



กำหนดให้ตัวละครของเราหายไป เมื่อพลังชีวิตลดลงต่ำกว่า 0


แล้วเพิ่มการกระทำให้ตัวละครหายไป


คำสั่งทั้งหมดเป็นดังนี้





วันศุกร์ที่ 23 ตุลาคม พ.ศ. 2558

Construct 2 : สร้างเกม เล่น 2 คน

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


สร้างโปรเจคใหม่ขึ้นมา กำหนด window Size เท่ากับ 850 x 700



สร้างฉากหลังของเกม โดยจะเป็นลักษณะของการวิ่งเก็บของและยิงผี จะสร้างในแบบของตัวเองก็ได้ ผมไปขอยืมพื้นหลังมาจาก http://www.deviantart.com/tag/halloween ดูหลอนดีเหมือนกัน



สร้างทางเดินภายในเกม ด้วยการสร้าง sprite


กำหนด behavior เป็นแบบ Jump-thru


วางทางเดินภายในเกม ด้วยการคัดลอก และวาง sprite ที่สร้างขึ้นต่อกันเป็นชั้น ตามต้องการ



เมื่อได้ฉากแล้ว ต้องหาตัวละครของเรา จะวาดเองหรือขอยืมจากคนอื่นมาใช้ก่อนก็ได้นะครับ
ตัวแรกผมออกแบบเป็นเด็กชาย เพิ่ม sprite ใหม่ แล้วลงมือวาดกันเลย


กำหนด behavior เป็นแบบ Platform


วางตัวละครของเราบนตำแหน่งของทางเดินในเกม ย่อ-ขยาย ตัวละครให้เหมาะสมกับขนาดของเกม
ทดสอบการทำงานของเกม ด้วยการคลิกที่ปุ่ม run layout เกมจะเปิดหน้าเว็บขึ้นมา


 ถ้ากำหนดถูกต้อง ตัวละครของเราจะสามารถเดินได้ กระโดดได้ เมื่อกดปุ่มลูกศรในการควบคุม

เพิ่มตัวละครตัวที่สอง เป็นเด็กผู้หญิง เพิ่ม sprite ใหม่ แล้วลงมือวาดกันเลย


กำหนด behavior เป็นแบบ Platform เช่นเดียวกันกับตัวละครตัวแรก  ที่แถบกำหนดค่าของ behavior เปลี่ยนค่า Default controls เป็น No เพื่อไม่ให้ใช้การควบคุมตัวละครตามค่าเริ่มต้น คือการใช้ปุ่มลูกศร (ซึ่งเราได้กำหนดให้ตัวละครตัวแรกไปแล้ว) มาเป็นค่าที่เรากำหนดเอง



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



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



เลือกเหตุการณ์ที่เกิดในเกม เมื่อมีการกดปุ่ม (Key is down)




เลือกปุ่มที่ใช้ในการควบคุมตัวละคร ในกรณีนี้ใช้ ปุ่ม W ให้ควบคุมการกระโดด



เพิ่มการกระทำ เมื่อมีการกดปุ่ม W โดยเลือกการควบคุมสำหรับตัวละครตัวที่ 2


เลือกกำหนดค่าเป็น Simulate control


กำหนดการเคลื่อนที่เป็น Jump


กำหนดค่าสำหรับการเดินไปทางซ้าย และทางขวา ด้วยปุ่ม A และ D เช่นเดียวกับปุ่ม W ดังนี้


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

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

วันอังคารที่ 8 กันยายน พ.ศ. 2558

Construct 2 : เกมจับคู่ภาพกับคำ ตอนที่ 10 สรุปคะแนน

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


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


กำหนดการทำงานให้กับปุ่มทั้งสอง (sprite6 = restart, sprite7 = exit ) ดังนี้


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


กำหนดให้แสดงคะแนนเมื่อเริ่มแสดง layout ดังนี้


กำหนดการทำงานของปุ่ม restart และปุ่ม exit ซึ่งจะต้องกำหนดค่าของตัวแปร array ที่เราได้ลบข้อมูลออกไปในตอนที่เล่นเกม  ดังนี้


ทดสอบการทำงานของเกมทั้งหมด ซึ่งในขณะนี้ถือว่าสมบูรณ์แล้ว (สมบูรณ์ คือ มีการทำงานครบถ้วนนะครับ)  ซึ่งเป็นแนวทางในการประยุกต์ทำเกมหรือสื่อการสอนที่มีลักษณะของการจับคู่คำ จับคู่ภาพได้  ถ้าหากจะพัฒนาต่อให้มีความน่าสนใจมากขึ้น ต้องทำให้มีคำศัพท์ที่หลากหลาย และมีหลายฉาก สามารถเลือกได้ว่าจะเล่นฉากไหน หรือจัดเป็นฉากตามหมวดหมู่ของคำศัพท์  สุดท้ายก็ขอให้สนุกกับการสร้างเกมนะครับ

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 ในกรณีที่แถวลำดับของคำว่าง คือ คลิกภาพครบทุกคำแล้ว ให้ไปยังหน้าสรุปคะแนน


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