สร้างเกมส์ด้วย HTML5 ง่ายๆ (part3-2)
Oct 8th
หลังจากที่ได้ปล่อย Part3 ตอนที่ 1 ออกไป คาดว่าหลายคนคงเริ่มเมาๆบ้าง แต่อย่าพึ่งเซครับ เพราะยังไม่หมด ในตอนที่ 2 จะมาพูดถึงอีกครึ่งที่เหลือ ซึ่งเป็นส่วนสำคัญของกลไกในเกมส์ ซึ่งผมจะพยายามอธิบายให้ง่ายที่สุดครับ (บางคนเริ่มปวดหัว จายเย็นๆครับ ^^)
เอาละครับ มาดูกันต่อจาก Part3 ตอนที่ 1 กันนะครับ ^^
D : กำหนดเงื่อนไข การสร้างไฟโลกันต์
Add Event
System : varCreateFire= 0
เงื่อนไขนี้จะเอาไว้เช็คว่า ตอนนี้ เจ้า BigMonster ถูกกระตื้บตายเรียบร้อยแล้วหรือยัง ในเงื่อนไขนี้ ถ้ายังไม่ตาย ค่าตัวแปรจึงถูกกำหนดเป็น varCreateFire= 0 ก็จะเข้าไปสร้างไฟออกมาจากปาก BigMonster ต่อไป แต่ถ้าตาย varCreateFire = 1 ซึ่งค่า =1 จะถูกกำหนดใน Group Jump Kill ครับ
D1 : สร้างไฟ
System : Every 2 seconds เป็นการกำหนดให้ทุกๆ 2 วินาทีนั้น ให้ระบบทำอะไรสักอย่างหนึ่ง ซึ่งในที่นี้ก็คือ การสร้าง Object Fire
Add Action
System : Create object (Fire) on Layer 0 at (758.405,286.8) การสร้าง Object Fire ที่ Layer:0 ตำแหน่ง X=758.405,Y=286.8 (อันนี้ผมลองลาก Fire ไปวางตรงปากเจ้า Big Monster และดูตำแหน่ง X,Y ตรง Properties เอาคับ คุณสามารถเปลี่ยนเป็นตำแหน่งอื่นก็ได้นะ ตามใจชอบ แต่ที่ซีเรียสคือ ตำแหน่ง Layer:0 ครับ อย่าสร้าง Object Fire อยู่ Layer บนสุด เพราะเรา Set Paralax ไว้ มันจะลอยไปกับฉาก เหมือนพวก Text ที่บอกคะแนน หรือ พลังชีวิตนะครับ)
Fire : Set angle to Random(180,200) degrees เป็นสุ่มมุม ที่จะให้ Fire พ่นออกไปจากปากของ BigMonster การหามุมที่ต้องการนั้น ง่ายๆครับ ให้ลองกำหนดจุดแล้วหมุนดู จะเห็นองศาขึ้นที่แถบ Properties ด้านซ้ายตรง Common น่ะครับ
D2 : กำหนดเงื่อนไข เมื่อ Fire ชนกับ Player
Fire : On collision with Player กำหนด Event เมื่อมีการชนของ Fire กับ Player
Add Action
System : Wait 1.0 seconds หน่วงเวลา 1 วิ
Player : Subtract 1 from health ลบค่าพลังชีวิต ของ Player -1
ตอนนี้เราได้กำหนดส่วนของการกำเนิด Fire และก็การชน(Collision) เป็นที่เรียบร้อย ต่อไปจะเป็นส่วนสุดท้ายครับ นั่นคือ Group ของการ กระโดดตื้บ Monster และเก็บ Items ต่างๆ ยาวนิดนึง แต่ไม่ยากหรอกครับ มาดูวิธีกันเลย
E : กำหนดเงื่อนไขการกระโดดเก็บ Items และ Monster
E1 : กำหนดเงื่อนไข การกระโดดขึ้นบน Bar2(Solid)
Add Event
Player : On collision with Bar2 ตัว Bar2 เป็น Solid ที่วางไว้บนหัวของ Big Monster แล้วกำหนดค่า Opacity =0 ไม่ให้มองเห็น เอาไว้รับการสัมผัสของ Player ที่กระโดดขึ้นมายืนบนหัว
Player : Platform is on floor ต้องใช้ onFloor แทน onFalling เพราะเป็นการกระโดดจากพื้นขึ้นมายืนบน Solid แล้วให้มีการกระตื้บ 3 ที เราจะจับ Event การกระโดดลงบน Solid ก็เลยมองว่า Solid เป็น Floor มันถึงจะจับ Event การสัมผัส Solid แล้ว -1 พลังชีวิต Big Monster ได้น่ะครับ
Add Action
bigMonster : Subtract 1 from bigMonsterHealth เมื่อ Player โดดตื้บ Big Monster สำเร็จ ให้ -1 พลังชีวิตของ Big Monster
E2 : ตรวจสอบพลังชีวิต Big Monster
Add Event
bigMonster : bigMonsterHealth =0 ถ้าค่าพลังชีวิต Big Monster เป็น 0 แสดงว่ามันตายแล้วหละ
Add Action
bigMonster : Destroy ทำลาย Object Big Monster ทิ้ง
Fire : Destroy ทำลาย Object Fire ด้วย ไม่งั้น ไฟมันจะยังติดอยู่ เพราะ Fire กับ Big Monster มันคนละ Object กันนะครับ
txtBigMonster : Set Invisible ปิด Text ที่แสดงค่าพลังชีวิต Big Monster
System : Set varCreateFire to 1 กำหนดให้ตัวแปร การ Create Fire มีค่าเป็น 1 แสดงว่าเจ้า Big Monster ตายแล้ว ให้ออกจากเงื่อนไข varCreateFire = 0
System : Add 10 to varScore เพิ่มคะแนน +10 ลงในตัวแปร Global variable : varScore คะแนนนี้จะถูกส่งขึ้นด้านบนสุด แล้วส่งไปจุดต่างๆที่ดึงคะแนนนี้ไปแสดง
Bar2 : Destroy ทำลาย Object Solid ที่วางอยู่บนหัว Big Monster เพื่อไม่ให้ Player กระโดดขึ้นไปลอยกลางอากาศได้ครับ
System : Add 1 to varCountKill ให้เพิ่มจำนวน Item ที่เก็บได้ +1 ที่ตัวแปร Global variable : varCountKill
E3 : ตรวจสอบพลังชีวิต Little Monster
Add Event
Player : On collision with littleMonster ตรวจสอบการชนจากการเดินไปชนของ Player ที่เดินไปชนเจ้า Little Monster ตรงๆ
Add Action
Player : Subtract 1 from health ถ้าชนจริง ก็ให้ -1 ค่าพลังชีวิตของ Player
E4 : ตรวจสอบการชน Bar (Solid)
Add Event
Player : On collision with Bar ตรวจสอบการชนของ Player ที่กระโดด ขึ้นบน Bar ที่อยู่บนหัว Little Monster
Player : Platfrom is falling ตรวจสอบการชน จากการกระโดด
Add Action
littleMonster : Destroy ถ้าหากโดน Bar ที่อยู่บนหัว Little Monster เพียงครั้งเดียวให้ทำลาย Little Monster
Bar : Destroy ทำลาย Bar(Solid) ที่วางอยู่บนหัว Little Monster
System : Add 5 to varScore เพิ่มคะแนนให้กับ Player เมื่อทำลายเจ้า Little Monster ได้
System : Add 1 to varCountKill เพิ่มจำนวนการเก็บ Item
E5 : ตรวจสอบการชน iPhone
Add Event
Player : On collision with iPhone ตรวจสอบการชน iPhone
Add Action
iPhone : Set Invisible ถ้าชน iPhone จริงให้ปิดการแสดงภาพ
System : Add 100 to var Score คะแนนโบนัสพิเศษ 100 คะแนน
System : Add 1 to varCountKill เพิ่มจำนวนการเก็บ Item
iPhone : Destroy ทำลาย Object : iPhone ทิ้ง
E6 : ตรวจสอบการชน Bar (Solid)
Add Event
Player : On collision with macAir ตรวจสอบการชน Mac Book
Add Action
macAir : Set Invisible ถ้าชน Mac Book จริงให้ปิดการแสดงภาพ
System : Add 50 to varScore คะแนนโบนัสพิเศษ 50 คะแนน
System : Add 1 to varCountKill เพิ่มจำนวนการเก็บ Item
macAir : Destroy ทำลาย Object : Mac Book ทิ้ง
เอาละครับ ถ้าใครตามมาทัน ก็จะสามารถ Run Game นี้เล่นได้แล้ว แต่ถ้าใครไม่ทัน ผมมีไฟล์ให้ให้ดาวน์โหลดไปศึกษากัน
Download : testDemo.capx
View game demo
ส่วนใครยัง งงๆ ก็ลองทำบ่อยๆครับ ตัวอย่างทั้งหมด อาจจะไม่ใช่แนวทางการสร้าง Logic ที่ถูกต้อง และดีที่สุด อาจจะมีวิธีอื่นๆที่ง่าย และสั้นกว่า แต่อย่างน้อยความเข้าใจพื้นฐานที่ผมพยายามแนะนำนี้ ก็จะช่วยเริ่มต้นให้กับผู้สนใจได้ไม่มากก็ได้ครับ ในตอนสุดท้าย ไม่มีไรต้องซีเรียสแล้ว เราจะมาสนุกกับการใส่ Sound เป็นอันจบ Part3 อย่างสมบูรณ์ครับ ^^ เจอกันใหม่ตอนหน้าครับ
Recent Comments