construct 2 : sprite font

sprite font คือ วิธีการหนึ่งในการใช้งาน text แต่มีข้อแตกต่างจากการใช้ตัวอักษรทั่วไป คือการใช้ภาพแทนตัวอักษร ตัวอักษรแต่ละตัวจะแทนด้วยส่วนย่อยของภาพ 1 ส่วน ตัวอักษรแต่ละตัว จะถูกออกแบบและตกแต่งให้มีลักษณะเฉพาะ และเข้ากับเกมที่สร้างขึ้น

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

การใช้ตัวอักษร จะสามารถเปลี่ยนแปลงสีได้เพียงสีเดียว แต่ถ้าหากใช้ spritefont สามารถจะตกแต่งด้วยสีได้ตามต้องการ ตกแต่งได้หลากหลายสี ทำให้เกมที่สร้างขึ้นมานั้นน่าสนใจมากยิ่งขึ้น

เราควรเลือกใช้ sprite font เมื่อ
1. เมื่อต้องการให้การแสดงผลตัวอักษร การจัดแนว เหมือนกันในทุก browser ที่เรียกใช้งาน
2. เมื่อต้องการใช้กราฟิคกับตัวอักษร เช่น fades, outline, drop shadows
3. ใช้ sprite font เมื่อเกิดปัญหาในการส่งออกเกม แล้วไม่สามารถส่งออกแบบอักษรที่ใช้ไปด้วยได้

ควรระวังการใช้งาน sprite font เมื่อ
1. ไม่ควรใช้ sprite font เมื่อมีการเปลี่ยนขนาดของตัวอักษร หรือการจัดรูปแบบที่แตกต่างกันบ่อยๆ เช่น ตัวหนา ตัวเอียง เพราะจะต้องสร้าง sprite font ที่แตกต่างกันจำนวนมาก
2. ไม่ควรใช้ sprite font สำหรับการแสดงข้อความจำนวนมาก เช่น รายละเอียดของเกม หรือเนื้อหา เรื่องราว เนื้อเรื่อง หรือ คำอธิบายเกม การแสดงผลลักษณะนี้ ควรใช้ข้อความที่เป็นตัวอักษรทั่วไปจะเหมาะสมกว่า

หวังว่าหลักการใช้งาน sprite font จะเป็นประโยชน์กับผู้อ่านนะครับ แล้วบทความต่อไป ผมจะนำเสนอวิธีการใช้งาน sprite font และแหล่งข้อมูลในการหา sprite font สวยๆ มาใช้งาน ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : Sprite เดินเอง ตอน 2

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

ขั้นแรกต้องสร้างทางเดินของตัว sprite โดยกำหนดพฤติกรรมเป็นแบบ solid ดังนี้

สร้าง sprite ขึ้นมา เพื่อเป็นตัวละครของเกม กำหนดพฤติกรรมเป็นแบบ platform

เพิ่ม instance variable จากแถบ Properties ของตัวละคร ชื่อ moveRight เป็นชนิด Boolean มีค่าเริ่มต้นเป็น true

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

การคำนวณ ระยะที่ต้องหมุนกลับ เมื่อเดินไปทางด้านขวา ค่า offset แกน x จะคำนวณดังนี้
- (ความกว้างของพื้น)  เช่น  -(wall.Width)

การคำนวณ ระยะที่ต้องหมุนกลับ เมื่อเดินไปทางด้านซ้าย ค่า offset แกน x จะคำนวณดังนี้
ความกว้างของพื้น เช่น  wall.Width


เพิ่มคำสั่งใน event sheet ดังนี้

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

ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : Sprite เดินเอง ตอน 1

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

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

สร้าง sprite ขึ้นมา เพื่อเป็นตัวละครของเกม กำหนดพฤติกรรมเป็นแบบ platform

เพิ่ม instance variable จากแถบ Properties ของตัวละคร ชื่อ moveRight เป็นชนิด Boolean มีค่าเริ่มต้นเป็น true

เพิ่มคำสั่งใน event sheet ดังนี้

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

ขอให้สนุกกับการสร้างเกมนะครับ

Construct 2 : Bullet ยิงกระสุน ตอนที่ 1

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

คุณสมบัติของ Bullet
Speed คือ ความเร็วเริ่มต้นของกระสุน หลายเป็น พิกเซลต่อวินาที
Acceleration คือ อัตราเร่งของกระสุน ถ้ากำหนดเป็น 0 ความเร็วจะคงที่ ถ้ากำหนดเป็นบวกจะเคลื่อนที่ด้วยอัตราเร่งเพิ่มขึ้น  ถ้ากำหนดเป็นลบ จะมีอัตราเร่งลดลง จนความเร็วเป็น 0 และหยุดนิ่ง
Gravity คือ ค่าแรงโน้มถ่วงของโลก ที่จะกระทำกับกระสุนที่เคลื่อนที่ทำให้ความเร่งลดลงและเคลื่อนที่เป็นเส้นโค้งลงพื้นด้านล่าง แต่ถ้ากำหนดเป็น 0 จะไม่มีแรงโน้มถ่วงมากระทำ ทำให้กระสุนเคลื่อนที่ในแนวที่กำหนด
Bounce off solids คือ การกำหนดให้วัตถุแบบ Solid กระเด็นเมื่อโดนกระสุนพุ่งชน
Set angle คือ การกำหนดค่าว่าจะให้ใช้มุมในการเคลื่อนที่ของกระสุนหรือไม่
Initial state คือ การกำหนดว่าจะให้วัตถุทำงานหรือไม่ทำงาน

ทีนี้มาลองสร้างเกมที่ใช้พฤติกรรมแบบ Bullet กันลองดูครับ
สร้างโปรเจคใหม่ขึ้นมา และแทรกพื้นหลังให้เป็นฉากท้องฟ้าครับ โดยการ Insert New Object เลือก Sprite ตั้งชื่อว่า background แล้วคลิก Insert

ผมขอวาดง่าย ๆเลยนะครับ เต็มสีฟ้าลงไปเต็มช่องก็พอ

ปรับขนาดของวัตถุให้เต็มพื้นที่ของเกม แล้วไปที่แทบ layer แล้ว lock ไว้ และเพิ่ม layer ใหม่ขึ้นมา

ต่อไปสร้างจรวดขึ้นมา 1 ลำ ด้วยการ Insert new Object ออกแบบได้ตามต้องการครับ

วางจรวดของเราไว้ตรงกลางของเกม

เพิ่มวัตถุ keyboard เข้ามาในเกม

กำหนดการกระทำที่ event sheet เพิ่ม event ให้ โดยเลือก keyboard

เลือกเหตุการณ์แบบ Key is down

กำหนดเหตุการณ์สำหรับการกดปุ่ม w

เพิ่มการกระทำด้วย add action แล้วเลือกจรวด

เลือกการกระทำเป็น  Move at angle

กำหนดค่ามุม Angle เป็น 270 คือ ให้เคลื่อนที่ขึ้นด้านบน กำหนด Distance ระยะในการเคลื่อนที่ เท่ากับ 5

เพิ่มเหตุการณ์ลักษณะเดียวกัน แต่เป็นการกดปุ่ม s ให้เคลื่อนที่ลง กำหนดมุมเป็น 90

ทดสอบการทำงานของเกม จะพบว่าจรวดจะเคลื่อนที่ขึ้นเมื่อกดปุ่ม w และเคลื่อนที่ลงเมื่อกดปุ่ม s

construct 2 : เคลื่อนกล้องตามตัวละคร

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

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

วิธีการ คือ การเพิ่มพฤติกรรมให้ตัวละครของเรา คลิก  Add behavior  แล้วเลือก Scroll To คลิก Add เพิ่มเข้ามาให้กับตัวละครของเรา

ตัวละครของเราก็จะมีพฤติกรรมเพิ่มเข้ามา

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

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 ตอนที่ 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 แล้วกำหนดเป็นการเคลื่อนไหวตามที่ต้องการ เช่น ท่ายืน

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