หนังสือเรียนรายวิชา การสร้างเกม2 ม.6

7) สร้างชดุ Animation ข้นึ มาอีกชดุ ดว้ ยวธิ ีเดิม คราวนตี้ งั้ ชือ่ ว่า Stand รูปท่ี 6.9 เพ่มิ ชุด Animation Stand 8) import frames... โดยเลอื กภาพ BunnyStand01.png และ BunnyStand01.png รูปท่ี 6.10 เลือกภาพ BunnyStand01.png และ BunnyStand01.png 9) ลบเฟรมเปล่าเฟรมแรกทิง้ ด้วยวิธีเดียวกันกับในข้ันตอนท่ี 6 10) อย่าลมื ตั้งคา่ Properties ของชดุ Animation stand โดยให้ speed เป็น 2 และ Loop เปน็ Yes (ของชดุ Animation HeadGotDamage มีเฟรมเดยี ว จึงไมจ่ ำ�เป็นต้องต้งั คา่ ตรงน้ี) เป็นการเสร็จสิน้ ข้ัน ตอนการสร้างชุด Animation Stand รูปที่ 6.11 ต้งั คา่ Properties ของชุด Animation Stand โดยให้ speed เปน็ 2 และ Loop เปน็ Yes 47

6.3 เขยี น Event ควบคุมชุด Animation ชดุ ค�ำ สั่งท่ีใช้ควบคุมชดุ Animation มมี ากมาย ในโครงงานนี้จะเร่มิ จากการน�ำ Object Bunny ที่ เตรยี มชุด Animation ไวแ้ ต่แรก มาสวมกบั Object Player ทใี่ หผ้ เู้ ลน่ ควบคมุ ได้ 1) ข้นั ตอนแรก ให้ดับเบิลคลิกบนพ้นื ท่ีท�ำ งานของเลเอาท์ใดกไ็ ด้ แลว้ เพ่มิ Object Keyboard เพอ่ื น�ำ มาเรียกใช้ Event ทเ่ี ก่ยี วขอ้ งกับคยี บ์ อร์ด รปู ท่ี 6.12 เพมิ่ Object Keyboard 2) ไปทแี่ ทบ็ Gameplay Event sheet ถ้ายังไม่ได้เปิด Event ฆheet ดงั กล่าวใหด้ บั เบลิ้ คลกิ ท่ี Gameplay Event sheet จากแท็บ Projects ทางดา้ นขวา 48 รูปท่ี 6.13 เปดิ Gameplay Event sheet

3) Add Event โดยใหเ้ งื่อนไขเป็น System.EveryTick() และ Add Action เป็น Bunny.Set PositionToAnotherObject ( Object Player, 0) จะได้ Event ดงั ภาพด้านลา่ ง ซง่ึ หมายถึงสง่ั ให้ Object Bunny เกาะติดอยกู่ ับ Object Player ตลอดเวลา โดยอา้ งองิ ต�ำ แหนง่ Image point 0 รูปท่ี 6.14 System.EveryTick() >> Bunny.SetPositionToAnotherObject ( Object Player, 0) 4) จัดวาง Object ตา่ งๆ ทีเ่ ลเอาท์ Level 1 Layout ดงั รปู ท่ี 6.15 แลว้ ทดลองรนั เลเอาท์ จะพบ วา่ Object Bunny จะขยบั ไปพร้อมๆ กบั Object Player แต่ต�ำ แหน่งยังคงไมถ่ ูกต้อง ทัง้ นี้ก็เพราะวา่ จุดที่ ใช้อา้ งองิ ต�ำ แหน่งกค็ ือจุด Origin (Image point 0) ของท้ังสอง Object นนั่ เอง รูปท่ี 6.15 จดั วาง Object ตา่ งๆ ที่เลเอาท์ Level 1 Layout 49รปู ที่ 6.16 จุดทใ่ี ช้อ้างอิงตำ�แหน่งก็คอื จดุ Origin (Image point 0) ของท้งั สอง Object

5) ดบั เบลิ้ คลิกท่ี Object Player เปดิ โหมดแก้ไข Image point โดยการคลกิ ที่ไอคอน Set origin and imagepoints ทางด้านซา้ ยดงั ภาพ รูปที่ 6.17 เปิดโหมด Set origin and imagepoints 6) ทีห่ นา้ ตา่ ง Image point คลิกขวาที่ Origin เลอื กคำ�สั่ง Quick assign > Bottom เพอ่ื กำ�หนด ใหจ้ ดุ อา้ งอิง Origin ลงไปอย่ดู ้านล่างสุดของภาพ เปน็ การเสรจ็ สิน้ ขัน้ ตอนการก�ำ หนดตำ�แหนง่ Origin ให้ Object Player รูปท่ี 6.18 ก�ำ หนดใหจ้ ดุ อา้ งองิ Origin ลงไปอยดู่ ้านล่างสดุ ของภาพ 50

“ Object.ค�ำ สงั่ () Object.คำ�สั่ง(พารามเิ ตอร์ 1) Object.ค�ำ สงั่ (พารามเิ ตอร์ 1, พารามเิ ตอร์ 2, ...) “ หลังจากตรงน้ี เนือ้ ในบทเรียนอาจจะลดขั้นตอนการอธิบายการสรา้ ง Event ท่ีมคี วามซำ�ซ้ ้อนลง โดยให้ผู้เรยี นเข้าใจวา่ การสร้างเงอื่ นไขและ Action ทุกครง้ั จะเริ่มตน้ จากการเลือก “ Object ” ตามด้วย การเลอื ก “ค�ำ ส่ัง” ซ่งึ อาจจะมี ”พารามเิ ตอร”์ หลายตัวหรอื จะไมม่ ีเลยกไ็ ด้ โดยการอธบิ ายการสรา้ งเงอื่ นไข และ Action จะถูกเขียนอยใู่ นรูปแบบ Object .ค�ำ สัง่ (พารามิเตอร์) ดังท่แี สดงในรูปที่ 6.17 Bunny.SetPositionToAnotherObject (Player, 0) System.EveryTick() >> Bunny.SetPositionToAnotherObject (Player, 0) รปู ที่ 6.19 ตัวอย่างการเขยี น Event เปน็ ภาษาโปรแกรม 51

7) ปิดหนา้ ต่าง Edit Image ของ Object Player แล้ว ดบั เบลิ คลิกที่ Object Bunny เพ่อื เปิด หน้าต่าง Edit image: Bunny และเปิดโหมด Set origin and imagepoints รูปท่ี 6.20 เปิดโหมด Set origin and imagepoints สำ�หรับ Object Bunny 8) คลิกท่ี Oringin จากหนา้ ตา่ ง Image point แลว้ กลบั มาคลกิ ท่ตี �ำ แหน่งใตภ้ าพตัวละคร เพอ่ื กำ�หนดตำ�แหนง่ ของภาพตวั ละครทจี่ ะอยูช่ ิดกับพ้ืน (อา้ งองิ จากต�ำ แหนง่ Origin ของ Object Player ท่ีเป็น Object ทผ่ี ้เู ลน่ ได้ควบคมุ ) รปู ที่ 6.21 การกำ�หนดจดุ อา้ งอิงใหม่โดยการคลกิ ทต่ี ำ�แหนง่ ท่ตี ้องการ 52

9)ขัน้ ตอนก่อนหนา้ นเี้ ปน็ เพยี งการก�ำ หนดจดุ อา้ งอิงOriginใหก้ บั เฟรมเพียงเฟรมเดยี วให้เรากลับไป ท่หี นา้ ต่าง Image point คลกิ ขวาที่ Origin แลว้ เลอื ก Apply to all animations รปู ท่ี 6.22 การกำ�หนดจุดอา้ งอิงใหมให้กับทกุ เฟรมของทุกๆ ชุด Animation โดยอา้ งอิงเฟรมทีก่ ำ�ลงั เปิดอยู่ 10) จะปรากฏหนา้ ต่างป๊อบอพั ถามยืนยนั คำ�ส่ัง เนือ่ งจากว่าเราไดจ้ ดั ตำ�แหนง่ ของตวั ละครในเฟรม ภาพทั้งหมดของ Object Bunny ใหต้ รงกันต้ังแตข่ ้นั ตอนการเตรยี มไฟล์ภาพแล้ว ในทน่ี เ้ี ราจะตอบ Yes ซึง่ จะมีผลทำ�ให้จดุ Origin ของทุกเฟรมทกุ ชดุ Animation ใน Object Bunny ตรงกนั รปู ท่ี 6.23 หนา้ ต่างยนื ยนั คำ�ส่งั Apply to all animations 11) ปดิ หนา้ ต่าง Edit Image แล้วทดลองรันเลเอาทด์ ู จะพบวา่ ตัวละครในเกมสามารถยืนบนพืน้ โดยอา้ งอิงต�ำ แหน่งทถ่ี กู ตอ้ งไดแ้ ลว้ รูปที่ 6.24 ผลลพั ธก์ ารแกไ้ ขจุด Origin 53

6.4 เขยี น Event กลบั ดา้ นชดุ Animation จากโครงงานกอ่ นหน้า จะเห็นได้วา่ ไม่วา่ Object Player จะขยบั ไปทางซา้ ยหรอื ขวา Object Bunny จะหันไปทางดา้ นขวาอย่างเดียวเท่านน้ั เราจะทำ�การเขียน Event เพอื่ สง่ั ให้ Object Buuny หัน หน้าไปยังทศิ ทางที่ Object Player กำ�ลังเคล่ือนท่ไี ป โดยใช้เงอื่ นไขจากการกดปุม่ ซา้ ยขวาบนคยี ์บอรด์ 1) กลับไปที่ Event sheet Gameplay Event sheet รูปที่ 6.25 แทบ็ Gameplay Event sheet 2) ท�ำ การ Add Event โดยให้เง่อื นไขเป็น Object Keyboard.OnKeyPressed จะปรากฏหน้าตา่ ง Parameters for Keyboard: On key pressed ใหค้ ลกิ ทปี่ มุ่ <click to choose> เพ่อื เลือกป่มุ บนคีย์บอรด์ ทจี่ ะใช้ตรวจสอบเง่ือนไขดังกลา่ ว รปู ที่ 6.26 หนา้ ต่าง Parameters for Keyboard: On key pressed 3) หนา้ ตา่ ง Choose a key จะปรากฏข้ึนมา ให้เรากดปุ่มลกู ศร “ขวา” บนคยี ์บอรด์ ช่องดา้ นบน จะปรากฏข้อความ Right arrow คลกิ ท่ีป่มุ OK เพ่อื ปิดหนา้ ต่างนี้ และคลกิ ที่ปมุ่ Done เพื่อเสร็จสิ้นการ สร้างเงอ่ื นไข 54 รปู ท่ี 6.27 หน้าต่าง Choose a key

รปู ที่ 6.28 เงอ่ื นไข Keyboard.OnKeyPressed(RightArrow ) 5) ทำ�การ Add Action ใหก้ ับ Event นี้ โดยเลือก Object Bunny.SetMirored จะมีหนา้ ตา่ งใหใ้ ส่ ค่าพารามเิ ตอร์ ใหเ้ ราเลอื ก Not mirrored รปู ที่ 6.29 หนา้ ต่าง Parameters for Bunny: Set mirored 6) ท�ำ การ Add Event ขน้ึ มาอกี Event สำ�หรบั ปุ่ม Left arrow ด้วยเง่อื นไขเดยี วกนั แต่คราว นเี้ ลอื ก Action เปน็ Bunny.SetMirored เลือก Mirrored เป็นการเสร็จสิน้ กระบวนการ เขียน Event กลับด้านชดุ Animation โดยอิงเง่ือนไขจากการกดคยี บ์ อรด์ เมอื่ เราทดลองรันเลเอาท์ จะเห็นว่า Object Bunny สามารถหนั ซ้ายขวาไดแ้ ลว้ รปู ที่ 6.30 Keyboard.OnKeyPressed(RightArrow ) >> Bunny.SetMirored(NotMirrored ) Keyboard.OnKeyPressed(LeftArrow ) >> Bunny.SetMirored(Mirrored ) รูปท่ี 6.31 ผลลพั ธ์การเขียน Event กลับด้านชุด Animation 55



บทที่ 7 การจัดการตวั ละครของผ้เู ลน่

บทที่ 7 การจัดการตัวละครของผู้เล่น 7.1 จดั การตวั ละครของผูเ้ ลน่ กบั ไอเทม เราจะกำ�หนดให้ชวี ิต (ตวั แปร Live) ของผเู้ ล่น เริม่ ตน้ ท่ี 2 ถ้าผเู้ ล่นชนกบั ไอเทม Carrot จะเพิ่ม พลงั ชวี ิต 1 พลังชวี ิต เพิ่มคะแนน (Score) 100 คะแนน ถ้าผเู้ ล่นชนกบั ไอเทม Star จะเพมิ่ คะแนน 200 คะแนน 1) ท่ี Event sheet Gamepaly Event sheet สร้างตัวแปรแบบโกลบอลประเภท Number 2 ตัว ตวั แปรแรกชือ่ Live ค่าเริม่ ต้น 2 ส�ำ หรบั เก็บค่าพลังชวี ติ ของผเู้ ลน่ และตวั แปรทสี่ องชอื่ Score ค่าเรม่ิ ต้น 0 สำ�หรบั เกบ็ คะแนนของผู้เลน่ รปู ที่ 7.1 สรา้ ง Global variable ช่ือ Live และ Score 2) เขยี น Event จดั การ Live และ Score เมอ่ื ตวั ละครผเู้ ลน่ (Object Player) ชนกับไอเทมตา่ งๆ ตามท่ีได้กำ�หนดไว้ในข้างต้น รปู ท่ี 7.2 Player.OnCollisionWithAnotherObject(Carrot) >> System.AddTo(Live, 1) System.AddTo(Score, 100) Carrot.Destroy() รูปท่ี 7.3 Player.OnCollisionWithAnotherObject(Star) >> System.AddTo(Score, 200) Star.Destroy() 3) ทเ่ี ลเอาท์ Level 1 Layout ทดลองจดั วางไอเทม Carrot และ Star เขา้ ไปในฉาก แล้วทดลองรัน เลเอาท์เพื่อสังเกตผลลัพธ์ 58

7.2 จัดการตัวละครของผเู้ ล่นเมื่อ Live มากกว่า 2 ตามท่เี ราวางแผนไว้ เม่ือคา่ Live มากกวา่ 2 ชุดแอนิชนั ของผเู้ ลน่ ก็จะเป็นชุด Animation ตวั ละคร ทมี่ ีล�ำ ตัว แขนขา และเตะได้ ซึ่งมีหลายชุด Animation ซึ่งจะแสดงตามเงอ่ื นไขท่ีเราก�ำ หนดไว้ 1) เขียน Event เพื่อจดั การชดุ Animation ของ Object Bunny เมอ่ื Live มากกวา่ 2 เราจะใช้ Event น้ีเป็น Event หลัก รปู ท่ี 7.4 System.CompareVariable(Live, GreaterThan, 2) 2) สรา้ ง Sub-event ต่อจาก Event หลักขา้ งตน้ (คลกิ ขวาที่ Event ดังกล่าว แล้วเลอื ก Add > Sub-event) โดยก�ำ หนดเงอ่ื นไขและ Action ดังน้ี • เม่ือผ้เู ล่นยนื อยู่บนพน้ื ให้ใช้ชดุ Animation Stand • เมอ่ื ผู้เลน่ ก�ำ ลังเคล่ือนไหว ใหใ้ ช้ชุด Animation Moving • เมื่อผเู้ ลน่ ก�ำ ลงั กระโดด ใหใ้ ช้ชดุ Animation Jump รปู ที่ 7.5 การสรา้ ง Event ย่อย (Sub-event) รปู ท่ี 7.6 Player.IsOnFloor() >> Bunny.SetAnimation(“Stand”) Player.IsOnMoving() >> Bunny.SetAnimation(“Moving”) Player.IsOnJumping() >> Bunny.SetAnimation(“Jump”) 3) ทดลองรนั เลเอาท์ Level 1 Layout บงั คับใหต้ ัวละครไปเก็บไอเทมแครอทเพือ่ เพ่มิ Live ให ้ ตวั โตขึ้น จากนนั้ ให้สังเกตการท�ำ งานของชุด Animation จะพบว่าบางจุดมีขอ้ ผดิ พลาด เช่น ตวั ละครเดิน โดยไม่เปล่ยี นภาพ Animation ตามชุด Animation Moving ท่เี ราไดต้ ้งั คา่ ไว้ น่นั กเ็ พราะว่าเม่ือผูเ้ ล่นอยู่บน พ้นื และเดิน จะทำ�ให้เงื่อนไขของทั้ง Moving และ Stand เปน็ จรงิ Construct 2 จงึ พยายามเล่นชุดแอนเม ชันทง้ั สองพรอ้ มๆ กนั 59

4) ท�ำ การแก้ไขใหเ้ งือ่ นไขไม่ทบั ซอ้ นกันโดยเรมิ่ จากการคลิกขวาท่ี Event ยอ่ ย (Player.IsOn Floor() >> Bunny.SetAnimation(“Stand”)) เลอื กค�ำ สั่ง Add >> Add Anothetr condition เพ่อื เพ่มิ เง่ือนไขลงในบลอ็ กเงือ่ นไขดังกลา่ ว รปู ท่ี 7.7 การเพ่ิมเงอ่ื นไขในบลอ็ ก Event เดิม 5) หนา้ ต่างสร้างเง่อื นไขจะปรากฏข้นึ มา ใหเ้ ราเพิ่มเง่ือนไขเปน็ Player.IsMoving() รปู ที่ 7.8 เพิม่ เงอื่ นไข Player.IsMoving() 6) คลกิ ขวาทีเ่ ง่อื นไขดงั กล่าว เลือกคำ�ส่งั Invert รูปที่ 7.9 คำ�ส่ัง Invert 60

7) คำ�สงั่ Invert จะท�ำ ใหเ้ งอ่ื นไขเดมิ “เม่ือผเู้ ล่นเคล่ือนท”่ี เปลย่ี นไปเป็น “เม่อื ผเู้ ลน่ ไม่ได้เคลอ่ื นท”่ี ซงึ่ เมอ่ื รวมกับเงอ่ื นไขเดิม เงอื่ นไขของบลอ็ ก Event นี้ (บล็อกท่ี 7 จากรูปที่ 7.9) กจ็ ะกลายเปน็ “เม่ือ ผเู้ ล่นยืนอยูบ่ นพื้นและไมไ่ ด้เคลอื่ นท่ี ให้ใช้ชดุ Animation Stand” ซงึ่ กจ็ ะไมท่ ับซอ้ นกับเงือ่ นไข “เมอ่ื ผเู้ ลน่ เคลือ่ นที่ ใหใ้ ชช้ ุด Animation Moving” อีกต่อไป รูปที่ 7.10 ถ้า Object Player ยืนบนพ้ืน และ [X]เคลอ่ื นที่ >> ใชช้ ุด Animation Stand 8) ทดลองรนั เลเอาทแ์ ละสังเกตผลลัพธ์อีกครั้ง จะเหน็ ได้วา่ ตัวละครเล่นชดุ Animation Moving ตามทต่ี อ้ งการได้แล้ว รูปที่ 7.11 ผลลพั ธก์ ารแสดงผลของชุด Animation Moving 61

7.3 จัดการตัวละครของผู้เลน่ ใหส้ ามารถเตะได้ การท�ำ ใหต้ ัวละครเตะ เรากจ็ �ำ เปน็ จะตอ้ งหาวธิ ตี รวจสอบการชนกันระหวา่ งเทา้ ที่ใช้เตะ กบั ศตั รูที่ จะถกู เตะ ซงึ่ วธิ หี น่ึงทท่ี ำ�ไดง้ ่ายๆ ก็คอื ให้ Object ของผเู้ ลน่ Spawn Object ใหม่ท่ีใชส้ ำ�หรบั ตรวจสอบการ ชนกันกับศัตรู โดย Object ใหมน่ ีจ้ ะหายไปเองด้วยคณุ สมบตั ขิ อง Behavior Fade ทีเ่ ราใสเ่ อาไว้ รูปที่ 7.12 แนวคดิ การสร้าง Collision Polygon ของการเตะ 1) ทีเ่ ลเอาท์ Level 1 เรม่ิ สรา้ ง Object ใหม่ โดยลากไฟลภ์ าพ KickBox เข้ามาวางในพน้ื ทท่ี ำ�งาน เพ่มิ Behavior Fade ตงั้ ค่า Fade out time เปน็ 0.1 รูปท่ี 7.13 Object KickBox และ Behavior Fade 2) จัดการ Object Player โดยจะเพม่ิ ชุด Animation เป็น 2 ชดุ คอื ชดุ Animation Short (PlayerBox01.png) สำ�หรับตอนทีต่ ัวละครยังมแี ต่หวั และชุด Animation Long (PlayerBox02.png) ส�ำ หรบั ตอนท่ีตัวละครมีลำ�ตัวแขนขาแลว้ ซงึ่ จะใช้อ้างองิ ในการตรวจสอบการชนกนั ดว้ ย (สว่ นทางดา้ นชดุ Animation Default ท่เี ปน็ รูปสีเ่ หลี่ยมสีแดงนน้ั เราไมไ่ ด้ใช้แล้ว ใหล้ บทง้ิ ได้เลย) 62

รปู ที่ 7.14 เพมิ่ ชดุ Animation Short และ Long ให้ Object Player 63 ทั้งสองชดุ Animation ให้กำ�หนดจดุ Origin ไวช้ ดิ ด้านลา่ งสดุ ของภาพ

3) ยงั อย่ทู ี่ Object Player ไปทีช่ ดุ Animation Long เปดิ โหมด Set Origin and Image point แล้วเพม่ิ Imagepoint1 ท่ตี �ำ แหน่ง x75 y100 และเพม่ิ Imagepoint2 ท่ีตำ�แหนง่ x-35 y100 รปู ที่ 7.15 เพิม่ Imagepoint ใหก้ บั ชดุ Animation Long ของ Object Player Imagepoint1 ท่ตี �ำ แหน่ง x75 y100 และ Imagepoint2 ทีต่ ำ�แหนง่ x-35 y100 4) Object Player ของบางคนอาจถกู แก้ไขขนาดในตอนกอ่ นหน้านี้ ให้ตรวจสอบให้แนใ่ จว่าขนาด ของ Object Player อย่ทู ่ี 40, 50 (คลิกท่ี Object Player แลว้ ดทู ชี่ อ่ ง Size จากหน้าตา่ ง Properties ทาง ดา้ นซา้ ย 64

รปู ที่ 7.16 ต้ังคา่ Size ของ Object Player ไว้ท่ี 40, 50 5) เม่ือเตรียม Object ทเ่ี กย่ี วข้องเสรจ็ สน้ิ ให้กลบั ไปท�ำ งานท่ี Event Sheet: Gameplay Event sheet อกี ครง้ั ที่บล็อก Event System.CompareVariable(Live, GreaterThan, 2) เพิม่ Sub-event โดยให้เงอ่ื นไขเปน็ Keyboard.KeyIsDown(Space) รูปท่ี 7.17 Event ย่อย Keyboard.KeyIsDown(Space) 6) ที่บลอ็ ก Event Keyboard.KeyIsDown(Space) ใหเ้ พ่ิม Sub-event เขา้ ไปอกี สอง Event โดย จะเป็น Event สงั่ ให้ Object Bunny ใชช้ ุด Animation Kick หรอื JumpKick รปู ท่ี 7.18 Event ยอ่ ย Player.IsOnFloor() >> Bunny.SetAnimation(“Kick”) 65 Event ยอ่ ย Player.[X]IsOnFloor() >> Bunny.SetAnimation(“JumpKick”)

7) ทีบ่ ลอ็ ก Event System.CompareVariable(Live, GreaterThan, 2) เพิ่ม Sub-event Keyboard.OnKeyPressed(Space) และสร้าง Sub-event ต่อจากน้ันอีกสอง Event เพือ่ ใหเ้ กมสรา้ ง Object KickBox ในทศิ ทางทีถ่ กู ตอ้ ง โดยตรวจสอบทศิ ทางจากทิศทางของ Object Bunny รปู ที่ 7.19 System.CompareVariable(Live, GreaterThan, 2) ( Event ยอ่ ย) Bunny.IsMirrored() >> Player.SpawnAnotherObject(KickBox, 1, 2) ( Event ย่อย) Bunny.[X]IsMirrored() >> Player.SpawnAnotherObject(KickBox, 1, 1) 8) จดั การชดุ Animation ของ Object Player ซึง่ จะมีผลกบั การตรวจสอบการชนกนั โดยใหใ้ ชช้ ดุ Animation Long เมื่อกระตา่ ยมลี ำ�ตัวแขนขา (Live > 2) แสดงในรปู ท่ี 7.20 และเพิ่ม Event เพอ่ื ใหก้ ลบั มาใชช้ ดุ Animation Short เม่ือกระตา่ ยเหลือแตห่ วั (Live <= 2) แสดงในรปู ท่ี 7.21 รูปที่ 7.20 ( Event เดิม) >> Player.SetAnimation(“Long”) 66

รูปท่ี 7.21 System.CompareVariable(Live, LessOrEqual, 2) >> Player.SetAnimation(“Short”) Bunny.SetAnimation(“Head”) 9) ทดลองรนั เลเอาท์เพอ่ื สังเกตผลลัพธก์ ารจดั การตัวละครของผู้เลน่ ใหส้ ามารถเตะได้ โดยการเตะ จะมกี ารสรา้ ง Object KickBox ในทิศทางทถ่ี ูกตอ้ งดงั รูปที่ 7.20 รูปที่ 7.22 Keyboard.KeyIsDown(Space) >> Bunny.SetAnimation(“JumpKick”) Keyboard.OnKeyPressed(Space) >> Player.SpawnAnotherObject(KickBox, 1, 1) 67

7.4 จดั การตวั ละครของผเู้ ลน่ เมื่อได้รับบาดเจ็บ เราจะก�ำ หนดให้ตัวละครของผูเ้ ล่นกระพริบและกระโดดเมอ่ื ชนกนั กบั ศัตรู (Object GreenTurtle) โดยการกระพรบิ จะเปน็ คณุ สมบตั ขิ องBehaviorFlashซง่ึ จะท�ำ ใหเ้ ราสามารถก�ำ หนดระยะเวลาการกระพรบิ ของ Object นนั้ ๆ ได้ ในทน่ี เี้ ราจะเพิ่ม Behavior Flash ใหก้ ับ Object Bunny และใหช้ ว่ งท่ี Object Bunny กระพริบแสดงชดุ Animation GotDamage 1) เพมิ่ Behavior Flash ใหก้ ับ Object Bunny รปู ที่ 7.23 เพม่ิ Behavior Flash ใหก้ บั Object Bunny 2) เพิ่ม Event ตรวจสอบการชนกนั ระหว่าง Object Player และ Object GreenTurtle โดยให้ Action เป็นค�ำ สงั่ ใหผ้ ้เู ลน่ กระโดด (ตอ้ งยนื อย่บู น Object ที่เปน็ Solid หรอื Jump-thru) และกระพริบ รปู ที่ 7.24 Player.OnCollisionWithAnotherObject(GreenTurtle) >> Player.SimulateControl(Jump) Bunny.Flash(0.1, 0.1, 2.0) 3) เพ่ิม Event เพอื่ ให้ Object Bunny แสดงชดุ Animation HeadGotDamage ถา้ Live นอ้ ย กวา่ หรือเท่ากับ 2 แสดงในรปู ท่ี 7.25 หรอื แสดงชุด Animation GotDamage ถ้า Live มากกว่า 2 (เม่อื กระพรบิ ) แสดงในรูปที่ 7.26 รปู ท่ี 7.25 Event ยอ่ ย Bunny.IsFlashing() >> Bunny.SetAnimation(“HeadGotDamage“) 68

รูปที่ 7.26 Event ย่อย Bunny.IsFlashing() >> Bunny.SetAnimation(“GotDamage“) 4) ทดลองรนั เลเอาท์ จะพบว่า Object Buny จะกระพรบิ และแสดงชุด Animation บาดเจ็บแลว้ แต่ผ้เู ล่นยงั สามารถเตะ (สรา้ ง Object KickBox) ทั้งๆ ท่กี ำ�ลงั บาดเจบ็ ได้ ซ่ึงเราไมต่ อ้ งการใหเ้ กดิ ขึ้น รูปท่ี 7.27 ผเู้ ล่นยงั สามารถสรา้ ง Object KickBox ได้ ในขณะที่ก�ำ ลงั กระพริบ 69

5) เพม่ิ เง่อื นไข Bunny.[X]IsFlashinng ทีเ่ ง่ือนไข Keyboard.OnKeyPressed(Space) เพื่อให้ ผเู้ ลน่ ไม่สามารถสร้าง Object KickBox ในขณะที่กำ�ลงั กระพริบได้ เป็นการเสรจ็ สิ้นขน้ั ตอนการจดั การ ตวั ละครของผูเ้ ลน่ เมือ่ ได้รับบาดเจ็บ รูปที่ 7.28 เพิม่ เงื่อนไข Bunny.[X]IsFlashinng ที่เงอ่ื นไข Keybpoard.OnKeyPressed(Space) 70

บทที่ 8 ระบบ AI

บทที่ 8 ระบบ AI 8.1 ความส�ำ คัญของระบบ AI AI (Artificial Intelligence หรือปัญญาประดิษฐ)์ โดยทว่ั ไปจะหมายถึง ศาสตรใ์ นการสรา้ ง ความฉลาดเทยี มให้กับส่งิ ประดิษฐ์ การท�ำ ให้สง่ิ ประดิษฐ์สามารถเรียนรู้ คิดวเิ คราะหไ์ ดด้ ้วยตวั เอง หรือ แมก้ ระทงั่ มอี ารมณ์และความรูส้ ึก แตส่ �ำ หรบั AI ของเกมนั้นจะหมายถงึ ความฉลาด หรอื พฤตกิ รรมของตัวละครในเกมทีผ่ ู้เล่นไม่ได้ บงั คบั (Non-Player Character :NPC) ซึง่ มตี ้ังแตช่ ุดค�ำ ส่งั งา่ ยๆ อยา่ งเช่น เดินไปมาโดยไม่ตกขอบ ว่ิงตาม ผ้เู ล่น โจมตีเมอื่ ผเู้ ล่นเขา้ มาใกล้ กระโดดหลบเมื่อผเู้ ล่นเข้าโจมตี ไปจนถงึ ชุดคำ�ส่งั ทซี่ บั ซอ้ นทสี่ ามารถทำ�ให้ ตัวละครสามารถเรียนร้พู ฤติกรรมของผูเ้ ลน่ และเลือกพฤติกรรมที่เหมาะสมท่ีสุดได้ ความฉลาดของ AI มที งั้ ขอ้ ดแี ละข้อเสยี ถ้า AI ฉลาดน้อยเกนิ ไป กอ็ าจจะทำ�ให้ความท้าทายของ เกมลดลง ในทางกลบั กัน ถา้ AI ฉลาดมากเกนิ ไป เกมก็จะยิง่ ทวคี วามยากมากขึน้ ดงั น้ันผู้พัฒนาเกมจำ�เป็น จะต้องค�ำ นงึ ถงึ จุดนี้ และตอ้ งทดสอบเกมหลายครงั้ เพ่อื ใหไ้ ดเ้ กมทสี่ นุก ทา้ ทาย ไมง่ า่ ย และไมย่ ากจนเกินไป รปู ที่ 8.1 เกมแนว Action เชน่ Contra (Konami) AI มักจะใช้ค�ำ ส่ังง่ายๆ เชน่ เดนิ หนา้ ยิงไปทางผ้เู ล่น รปู ที่ 8.2 เกมแนววางแผน เช่น Reversi AI จะตอ้ งใช้ขอ้ มูลจำ�นวนมากในการตัดสินใจ 72

8.2 เขยี น Event เพอ่ื จดั การ AI ของ Object GreenTurtle เราตอ้ งการใหเ้ ต่า (Object GreenTurtle) เดินไปมาบน Object Solid และ Jump-thru โดย ไม่ตกลงมา โดยเทคนคิ ก็คอื การสรา้ ง Object InvisibleBox ขึ้นมาวางบนเสน้ ทางเดินของเตา่ เมอ่ื เตา่ เดิน มาชนกบั Object น้ี มันกจ็ ะเดินกลับไปอีกทาง 1) เพ่มิ Behavior Platform ให้กบั Object GreenTurtle เพอ่ื ให้มนั สามารถเดินบน Object Solid และ Jump-thru ได้ กำ�หนดค่า Properties Max Speed เป็น 50 และ Default controls เป็น No เพ่ือไม่ใหผ้ เู้ ลน่ สามารถควบคมุ Object น้ไี ด้ รูปท่ี 8.3 เพม่ิ Behavior Platform ใหก้ ับ Object GreenTurtle 2) เพิ่ม Instance Variables ให้กบั Object GreenTurtle ตั้งช่อื ว่า IsGoingLeft เป็นตวั แปรชนิด Boolean ค่าเรม่ิ ตน้ true รูปที่ 8.4 เพิ่ม Instance Variables ให้กบั Object GreenTurtle 3) ในขั้นตอนนี้ หากทดลองรันเลเอาท์ จะพบว่า Object GreenTurtle จะรว่ งลงด้านล่าง ตกลงบน Object ที่เป็น Solid หรือ Jump-thru รูปท่ี 8.5 Object GreenTurtle ร่วงลงพ้ืนเชน่ เดียวกับผเู้ ล่น 73

4) ทเ่ี ลเอาท์ Level 1 Layout ลากไฟลภ์ าพ InvisibleBox.png เข้ามาในพนื้ ที่ทำ�งาน (เลเยอร์ MAIN BOTTOM) คัดลอกและจดั วางตำ�แหน่งดังรปู ที่ 8.6 รปู ที่ 8.6 จัดวางต�ำ แหนง่ เพ่ือทดลองค�ำ ส่งั ให้ AI เดินกลบั ไป-มา 5) กลบั ไปท่ี Event Sheet: Gameplay Event sheet เพิม่ Event เพือ่ ส่ังให้ Object GreenTur- tle เดินซา้ ยหรอื ขวา พร้อมกลบั ดา้ นชุด Animation โดยอ้างองิ จากตัวแปร IsGoingLeft รปู ที่ 8.7 GreenTurtle.IsBooleanInstanceVariableSet(IsGoingLeft) >> GreenTurtle.SimulateControl(Left) GreenTurtle.SteMirrored(NotMirrored) GreenTurtle.[X]IsBooleanInstanceVariableSet(IsGoingLeft) >> GreenTurtle.SimulateControl(Right) GreenTurtle.SteMirrored(NotMirrored) 6) เพิ่ม Event เพอ่ื กลบั ค่าตวั แปร IsGoingLeft (จาก true เปน็ false หรอื จาก false เปน็ true) เมอ่ื Object GreenTurtle ชนกบั Object InvisibleBox ซ่งึ นนั่ จะท�ำ ให้ Object GreenTurtle เปลี่ยน ทศิ ทางการเดนิ ตามเงื่อนไขจาก Event ในรูปที่ 8.7 รูปท่ี 8.8 GreenTurtle.OnCollisionWithAnotherObject(InvisibleBox) >> GreenTurtle.ToggleBoolean(IsGoingLeft) 7) ทดลองรนั เลเอาท์เพอ่ื สังเกตผลลัพธ์ Object GreenTurtle จะเดนิ ไปมาระหวา่ ง Object InvisibleBox ทเี่ ราวางกั้นไว้ 74

8.3 เขยี น Event เพือ่ จัดการการตอบโต้ระหวา่ งผเู้ ล่นกับ Object GreenBullet กอ่ นหน้าน้ีถา้ ผเู้ ลน่ ชนเขา้ กบั เต่า ผเู้ ลน่ จะกระพรบิ และแสดงชดุ Animation ว่าไดร้ บั การบาดเจบ็ ในข้นั ตอนน้ี เราจะสามารถท�ำ ใหผ้ ้เู ล่นสามารถกระโดดเหยียบ หรือเตะเต่าไดโ้ ดยไม่ไดร้ บั บาดเจ็บ 1) ท่ีเลเอาท์ Level 1 Layout น�ำ ไฟลภ์ าพ SFX.png และ GreenBullet.png มาวางไวบ้ น พ้นื ท่ีทำ�งาน (เลเยอร์ MAIN BOTTOM) รูปที่ 8.9 Object SFX และ Object GreenBullet 2) เพม่ิ Behavior Fade ให้กบั Object SFX ก�ำ หนด Properties Fade in time เปน็ 0 Wait time เปน็ 0.2 และ Fade out time เป็น 0.01 รูปท่ี 8.10 เพม่ิ Behavior Fade ใหก้ ับ Object SFX 3) เพม่ิ Behavior Bullet และ Destroy outside Layoutให้กบั Object GreenBullet รปู ที่ 8.11 Behavior Bullet ใหก้ ับ Object GreenBullet 4) เพิม่ Behavior Jump-thru ให้กับ Object GreenTurtle เพ่ือให้ Object ผู้เลน่ สามารถเหยียบ บน Object GreenTurtle ได้ รปู ที่ 8.12 เพมิ่ Behavior Jump-thru ใหก้ ับ Object GreenTurtle 75

5) กลับไปที่ Event Gameplay Event sheet ทบี่ ลอ็ ก Event Player.OnCollisionWithA notherObject(GreenTurtle) ให้ลบ Action Bunny.Flash(0.1, 0.1, 2.0) ออก โดยเราจะเพม่ิ Sub- event เขา้ ไปสองตัวคือ Player.CompareY(LessThan, GreenTurtle.Y-5) ซ่ึงหมายถงึ ตำ�แหนง่ ของ Ob- ject Player สงู กวา่ ต�ำ แหน่งของ Object GreenTurtle 5 pixel (ค่า Y น้อยกวา่ คือสูงกว่า และ 5 pixel คอื ความสงู จากตำ�แหนง่ Origin ของเตา่ ที่เราจะถอื ว่าเป็นการเหยยี บ) และ Sub-event อกี ตวั กค็ ือ Player. [X]CompareY(LessThan, GreenTurtle.Y-5) ซ่ึงหมายถงึ ผูเ้ ล่นชนกับเต่าโดยท่ีไมไ่ ดเ้ หยยี บเตา่ ใน sub Event ใหเ้ พิม่ Action เพอ่ื ให้ Object Bunny กระพรบิ และค่า Live ลดลง รปู ท่ี 8.13 ( Event ยอ่ ย) Player.CompareY(LessThan, GreenTurtle.Y-5) >> (ยงั ไม่มี Action ) ( Event ย่อย) Player.[X]CompareY(LessThan, GreenTurtle.Y-5) >> Bunny.Flash(0.1, 0.1, 2.0) System.Subtract(Live, 1) รูปท่ี 8.14 Object Pฺ layer สูงกว่า Object GreenTurtle มากกว่า 5 pixel 6) ดบั เบิลคลิกท่ี Object GreenTurtle เพื่อเปิดหนา้ ต่าง Edit image: GreenTurtle เพิม่ ชดุ Animation เขา้ ไปอีกชดุ ตั้งชื่อวา่ Die ที่ชุด Animation น้ี คลกิ ทไี่ อคอน Load a image from a file แลว้ เลอื กไฟล์ GreenBullet.png ปรบั Collision polygon ตามความเหมาะสม โดยเราจะใชช้ ดุ Animation น้ี 76แสดงภาพเต่าหลังจากตอนทีเ่ ต่าถูกเหยยี บแลว้

รปู ที่ 8.15 เพมิ่ ชุด Animation Die ให้กับ Object GreenTurtle 7) กลบั ไปท่ี Event Gameplay Event sheet ท่ีบล็อก Event ย่อย Player.CompareY(LessThan, GreenTurtle.Y-30) เพิ่ม Action สงั่ ใหเ้ ต่ารอ 0.1 วนิ าที (เพอ่ื ใหผ้ ู้เลน่ ได้กระโดดก่อน) เลน่ Animation Die หยดุ เดนิ และเพิ่มคะแนน 100 คะแนน สว่ นเง่อื นไขของ Event หลัก ใหเ้ พม่ิ เงื่อนไขไมใ่ ห้ผ้เู ลน่ ชนกบั เตา่ ได้อกี ถ้าเตา่ ถกู เหยยี บไปแล้ว (GreenTurtle.[X]IsPlaying(“Die”)) รปู ท่ี 8.16 ( Event ยอ่ ยเดิม) >> System.Wait(0.1) 77 GreenTurtle.SetAnimation(“Die“) GreenTurtle.SetMaxSpeed(0) System.AddTo(Score, 100)

8) เพม่ิ Event เพอื่ ใหก้ ารเตะของผเู้ ล่นมีผลตอ่ Object เตา่ โดยการตรวจสอบการชนกันระหวา่ ง Object KickBox กับ Object GreenTurtle มผี ลท�ำ ให้ Object เตา่ ถกู ท�ำ ลายและสร้าง Object SFX รูปท่ี 8.17 KickBox.OnCollisionWithAnotherObject(GreenTurtle) >> GreenTurtle.Destroy() GreenTurtle.SpawnAnotherObject(SFX, 2, 0) 9) เพมิ่ Event เพือ่ ใหก้ ารเตะ Object เตา่ ทำ�ใหเ้ ต่าปลิว (สรา้ ง Object GreenBullet ซงึ่ เราได้ เตรียม Behavior Bullet ไวก้ ่อนแลว้ ) โดยจะเปน็ 2 Event สำ�หรับการปลิวไปทางซ้ายหรอื ขวาข้นึ อยกู่ บั การหนั หน้าของ Object Bunny รปู ที่ 8.18 ( Event ย่อย) Bunny.[X]IsMirrored() >> GreenTurtle.SpawnAnotherObject(SFX, 1, 0) GreenTurtle.SetSpeed(330) ( Event ยอ่ ย) Bunny.IsMirrored() >> GreenTurtle.SpawnAnotherObject(SFX, 1, 0) GreenTurtle.SetSpeed(-330) GreenTurtle.SetFliped() 10) ทดลองรันเลเอาท์ จะพบวา่ เม่ือผู้เล่นเตะถูกเต่า กระดองเตา่ ก็จะปลวิ ถอื ว่าเปน็ การเสรจ็ ส้ิน การเขียน Event เพอ่ื จัดการการตอบโตร้ ะหว่างผเู้ ลน่ กบั Object GreenBullet รูปที่ 8.19 เตะกระดองเตา่ ปลิว 78

8.4 เขียน Event เพ่ือใหม้ กี ารสมุ่ ไอเทมหลังจดั การกับ Object GreenTurtle หลงั จากท่ีผเู้ ล่นกระโดดเหยียบเต่า หรอื ผูเ้ ล่นเตะเต่าชนใสเ่ ตา่ อกี ตวั เราจะเขยี น Event เพอ่ื ใหม้ ี การสมุ่ ไอเทม Carrot หรอื Star ขึน้ มา 1) ที่ Event sheet Gameplay Event sheet เพ่ิม Global variable ชือ่ Random Item เป็น ตัวแปรประเภท Number และคา่ เริ่มตน้ เป็น 0 ส�ำ หรับใช้ในการอา้ งอิงเพ่อื ส่มุ เลือกไอเทม รูปท่ี 8.20 เพิ่ม Global variable ช่อื Random Item 2) ทบี่ ล็อก Event System.EveryTick() ใหเ้ พม่ิ Action System.SetValue(RandomItem, random(0, 100)) เพ่ือสุ่มค่าตัวเลขระหวา่ ง 0-100 ให้กบั ตัวแปร RandomItem ไปเร่ือยๆ รปู ท่ี 8.21 (บลอ็ ก Event เดมิ ) >> System.SetValue(RandomItem, random(0, 100)) 3) เพ่มิ Behaviors Flash ใหก้ ับ Object Carrot และ Object Star เพอ่ื ใชก้ ารกระพรบิ ถ่วงเวลาให้ ผู้เล่นเห็นไอเทมก่อน ก่อนท่ีผู้เล่นจะเก็บไอเทมได้ รปู ท่ี 8.22 เพ่มิ Behaviors Flash ใหก้ บั Object Carrot และ Object Star 4) ไปท่ี Event Sheet: Gameplay Event sheet เพมิ่ Event ตรวจสอบกรณีทก่ี ระดองเต่าชนกับ เต่า และเพ่มิ Action ท�ำ ลาย Object เต่า สร้างเอฟเฟกต์ และเพม่ิ คะแนน รปู ท่ี 8.23 GreenBullet.OnCollisionWithAnotherObject(GreenTurtle) >> 79 GreenTurtle.Destroy() GreenTurtle.SpawnAnotherObject(SFX, 2, 0) System.AddTo(Score, 100)

5) ทีบ่ ลอ็ ก Event ดังกล่าว เพิ่ม Sub-event เข้าไปสองตวั สำ�หรับการสุ่มไอเทมสองประเภท รูปที่ 8.24 ( Event ย่อยแรก) System.CompareVariable(RandomItem, LessOrEqual, 20) >> GreenTurtle.SpawnAnotherObject(Carrot, 1, 0) Carrot.Flash(0.1, 0.1, 1.0) ( Event ย่อยท่ีสอง) System.CompareVariable(RandomItem, GreaterThan, 20) และ System.CompareVariable(RandomItem, LessOrEqual, 50) >> GreenTurtle.SpawnAnotherObject(Carrot, 1, 0) Carrot.Flash(0.1, 0.1, 1.0) 6) และเพ่ิม Sub-event ส�ำ หรับการส่มุ ไอเทมอกี ทหี่ นง่ึ ซึ่งก็คอื ท่ี Event ตรวจสอบการเหยยี บเตา่ จากนั้นจงึ ทดลองจัดวาง Object และรันเลเอาท์เพอ่ื ตรวจสอบผลการสุ่มไอเทมจากการเหยยี บเตา่ หรือการ เตะเตา่ ปลวิ ใส่เต่าอกี ตัว รปู ท่ี 8.25เพ่มิ Event ยอ่ ยการสุ่มไอเทมทีเ่ งื่อนไข Player.CompareY(Y, GreenTurtle.Y) อีกทหี่ นึ่ง 80

8.5 เขียน Event เพอ่ื จัดการ AI ของ Object Boss ใน Level 2 ผูเ้ ล่นจะได้พบกับบอสเตา่ ซึง่ จะผลุบๆ โผลๆ่ ออกจากเมฆ และยิงกระสุนเต่าแดงออกมา เพือ่ โจมตผี เู้ ล่นผ้เู ลน่ จะตอ้ งใช้จงั หวะท่ีบอสเต่าโผลห่ วั ออกมา เตะหรอื เตะเตา่ เขยี วใส่เพ่ือให้บอสเต่าบาดเจบ็ และแพ้กลบั ไป โดยระหวา่ งน้ันจะมเี ตา่ เขียวหล่นลงมาจากดา้ นบน และมไี อเทมแครอทปรากฏข้ึนเพ่ือคอย เติมพลังใหผ้ ู้เล่น แตท่ ั้งนท้ี งั้ นน้ั เราจะสรา้ ง Event Sheet: Level 1 Event sheet และ Level 2 Event sheet ขึ้น มาใหมส่ �ำ หรบั เลเอาท์ Level 1 Layout และ Level 2 Layout ตามล�ำ ดับ โดยทงั้ สอง Event Sheet จะมี การดึง Event จาก Event Sheet: Gameplay Event sheet มาใช้ และเพ่ิมเติม Event ต่อไปสำ�หรบั ใช้ กับเลเอาทข์ องตนเอง 1) สร้าง Event Sheet ชอ่ื Level 1 Event sheet และ Level 2 Event sheet จากนั้นใหต้ ้งั ค่า Layout properties ช่อง Event sheet ของเลเอาท์ Level 1 Layout และ Level 2 Layout ใหเ้ ป็น Level 1 Event sheet และ Level 2 Event sheet ตามล�ำ ดบั รูปท่ี 8.26 กำ�หนด Event sheet ใหเ้ ลเอาท์ด้วย Event Sheet ใหมท่ ี่สร้างข้ึน 2) ท่ี Event sheet: Level 1 Event Sheet ให้คลิกขวาบนพน้ื ทว่ี ่างแลว้ เลอื กค�ำ สัง่ Include event sheet จะมหี น้าต่างขึ้นมาใหเ้ ลือก Event Sheet ตรงน้ใี ห้เราเลือก Gameplay Event sheet จาก น้ันให้ Include event sheet (เลอื ก Gameplay Event sheet ) ท่ี Event Sheet: Level 2 Event sheet ดว้ ยเชน่ กนั รปู ที่ 8.27 ค�ำ สั่ง Include event sheet เลอื ก Gameplay Event sheet 81

3) ไปที่เลเอาท์ Level 2 Layout เพิม่ Instance variable ใหก้ บั Object Boss ชือ่ ตัวแปรวา่ IsAttacked ประเภท Boolean คา่ เร่มิ ตน้ false และอกี ตวั แปรช่ือ Health ประเภท Number คา่ เรม่ิ ตน้ 5 รูปท่ี 8.28 เพ่มิ Instance variable ให้กับ Object Boss 4) เพ่มิ Behavior Sine ให้กบั Object Boss ตัง้ คา่ Properties Period เปน็ 30 และ Magnitude เป็น 320 รูปท่ี 8.29 เพมิ่ Behavior Sine ใหก้ ับ Object Boss 5) จากนั้น จดั วางต�ำ แหน่ง Object Castle ไวท้ ี่ (420, 240) แล้ว lock เลเยอร์ MAIN TOP เพ่ือที่ เราจะไดไ้ ม่คลกิ ไปถูก Object ในเลเยอรน์ ้ีอกี ในระหว่างการจดั การเลเอาท์ รูปท่ี 8.30 จัดวางตำ�แหนง่ Object Castle ไวท้ ี่ (420, 240) และ lock เลเยอร์ MAIN TOP 82

6) กลับไปที่ Event Sheet: Level 2 Event sheet เพ่ิม Event System.OnStartOfLayout() และเพมิ่ Action เพ่อื ส่มุ ตำ�แหนง่ เร่มิ ตน้ ของ Object Boss (สุม่ เฉพาะแนวต้ัง) ซ่งึ ในขัน้ ตอนนี้จะท�ำ ให้บอส คอ่ ยๆโผล่มาจากดา้ นขวาของจอทุกๆ 30 วินาที ตามคา่ Period ทตี่ ั้งไว้ที่ Object Boss รูปที่ 8.31 System.OnStartOfLayout() >> Boss.SetPosition(900, random(120, 350) 7) เพิม่ Event เพ่ือจัดการใหบ้ อสเปลีย่ นเป็นชดุ Animation Attack และยิงกระสนุ เต่าแดง เมื่อ มันเลื่อนมาถงึ ตำ�แหนง่ ท่กี ำ�หนด (X<=581) ซ่งึ ในข้ันตอนนี้ตวั แปร IsAttacked จะถกู เปล่ยี นเป็นคา่ True เพ่อื ให้เง่ือนไขนี้ถกู ใชง้ านเพยี งคร้ังเดียว รปู ที่ 8.32 Boss.CompareX(LessOrEqual, 581) และ Boss.[X]IsBooleanInstanceVariableSet(IsAttacked) >> Boss.SetBoolean(IsAttacked, true) Boss.SetAnimation(“Attack”) Boss.SpawnAnotherObject(RedTurtle, 1, 0) RedTurtle.MoveToObject(Behind, Boss) 8) เพิ่ม Event เพอ่ื จัดการให้บอสกลบั มาเล่นชดุ Animation Stanby อกี ครั้ง พรอ้ มทั้งสมุ่ ตำ�แหน่ง Y ใหม่อีกรอบ ซงึ่ ในข้นั ตอนนี้ตัวแปร IsAttacked จะถูกเปลย่ี นเป็นค่ากลับเปน็ True เพือ่ ใหเ้ งอ่ื นไขนีถ้ กู ใช้ งานเพียงครง้ั เดยี วเชน่ กนั รปู ท่ี 8.33 Boss.IsOutsideLayout และ Boss.IsBooleanInstanceVariableSet(IsAttacked) >> Boss.SetBoolean(IsAttacked, false) Boss.SetAnimation(“Standby”) Boss.SetY(random(120, 350) 9) ทดลองรันเลเอาท์ Level 2 Layout เราจะเหน็ ว่า Object Boss จะสลับการทำ�งานระหวา่ งข้อท่ี 7 กบั 8 ไปเร่อื ยๆ ถอื เป็นการเสร็จส้นิ การเขียน Event เพ่ือจดั การ AI ของ Object Boss 83

8.6 เขียน Event เพื่อจัดการการตอบโต้ระหวา่ งผเู้ ล่นกับ Object Boss หัวหนา้ เตา่ จะโจมตีผ้เู ลน่ โดยการยงิ กระสนุ เต่าแดงใส่ ส่วนผูเ้ ลน่ จะโจมตหี วั หนา้ เตา่ โดยการเตะเต่า เขียวหรือเตะหวั หนา้ เตา่ โดยตรง ในระหว่างการต่อสู้นัน้ จะมีการสรา้ งไอเทมแครอท และทำ�ใหม้ เี ตา่ เขยี ว หลน่ ลงมาจากดา้ นบนเป็นระยะๆ ด้วย 1) เพิ่ม Event เพ่ือท�ำ ใหก้ ระสุนเต่าสามารถโจมตีผเู้ ลน่ ได้ รปู ท่ี 8.34 Player.OnCollisionWithAnotherObject(RedTurtle) และ Bunny.[X]IsFlashing >> Bunny.Flash(0.1, 0.1, 2) System.SubstractFrom(Live, 2) 2) เพิม่ Event เพ่ือให้กระสุนเตา่ สามารถโจมตหี ัวหนา้ เต่าได้ รปู ที่ 8.35 GreenBullet.OnCollisionWithAnotherObject(Boss) และ Boss.[X]IsFlashing >> GreenBullet.SpawnAnotherObject(SFX, 2, 0) GreenBullet.Destroy() Boss.SubstractFrom(Health, 1) Boss.Flash(0.1, 0.1, 10) 3) เพิม่ Event ใหผ้ ้เู ล่นสามารถเตะหัวหน้าเตา่ ได้ รูปท่ี 8.36 KickBox.OnCollisionWithAnotherObject(Boss) และ Boss.[X]IsFlashing >> KickBox.SpawnAnotherObject(SFX, 2, 0) Boss.SubstractFrom(Health, 1) Boss.Flash(0.1, 0.1, 10) 4) เพม่ิ Event ให้ระบบทำ�การสรา้ งไอเทมแครอททุกๆ 30 วินาที รปู ท่ี 8.37 System.EveryXSeconds(30) >> System.CreateObject(Carrot, 1 ,130, 60) 84 Carrot.Flash(0.1, 0.1, 1)

5) เพม่ิ Event ใหร้ ะบบสรา้ ง Object เต่าท่ดี า้ นบน ทุกๆ 10 วนิ าที รปู ที่ 8.38 System.EveryXSeconds(10) >> System.CreateObject(GreenTurtle, 1, random(250, 570), -60) GreenTurtle.MoveToObject(Behind, Bunny) 6) เพิ่ม Event เพอ่ื ให้หวั หนา้ เต่าตายหลงั จากค่า Health หมด รปู ที่ 8.39 Boss.CompareInstanceVariable(Health, LessOrEqual) >> Boss.SetX(580) Boss.SetAnimationTo(“Dead”) Boss.SetActive(Inactive) 7) ทดลองรันเลเอาท์ Level 2 Layout ในตอนนีผ้ ้เู ลน่ จะสามารถตอ่ ส้กู บั หัวหน้าเต่าไดแ้ ล้ว ถอื เป็นการเสร็จสิน้ การเขยี น Event เพื่อจดั การการตอบโต้ระหวา่ งผู้เลน่ กบั Object Boss รปู ท่ี 8.40 ผ้เู ลน่ สามารถเอาชนะหวั หนา้ เตา่ ได้ส�ำ เรจ็ 85



บทท่ี 9 การจัดการการแสดงผล HUD บนเกม Platform

บทที่ 9 การจดั การการแสดงผล HUD บนเกม Platform 9.1 การจดั การการแสดงผล HUD บนเกม Platform การเพม่ิ HUD ลงในหนา้ เลเอาทท์ ีม่ ีขนาดเลเอาท์ที่ใหญก่ ว่าหนา้ จอ เมอ่ื ผเู้ ล่นขยบั ไปยงั ส่วนอื่นของ หนา้ เลเอาท์ HUD จะไม่ตามไปดว้ ย วิธีแกก้ ค็ อื นำ� HUD ไปวางบนเลเยอรภ์ ายในเสน้ ประแสดงขนาดหน้าจอ แลว้ ตง้ั คา่ Paralax ใหเ้ ป็น (0, 0) ซึ่งนั่นจะทำ�ใหท้ ุก Object ท่อี ย่บู นเลเยอรน์ ้ีคา้ งอยู่บนหนา้ จอ 1) เริ่มท�ำ งานที่เลเอาท์ Level 1 Layout เพม่ิ Object Text ต้ังชอ่ื ว่า HUDText วางบนเลเยอร์ HUD จดั วางท่ตี ำ�แหนง่ มุมขวาลา่ งของเสน้ ประดังรูปที่ 9.1 ตั้งค่ารูปแบบตวั อักษรตามต้องการ รูปท่ี 9.1 จัดวาง Object HUDText ไวภ้ ายในบรเิ วณเส้นประ 2) คลกิ ท่ีเลเยอร์ HUD เพอื่ ให้หนา้ ตา่ ง Properties ทางด้านซ้ายแสดง Properties ของเลเยอร์ดงั กลา่ ว จากน้ันใหแ้ ก้ไขคา่ Parallax ให้เป็น (0, 0) รูปที่ 9.2 ตัง้ ค่า Parallax ของเลเยอร์ ให้เป็น (0, 0) 88

3) คัดลอก Object HUDText ไปวางทเ่ี ลเยอร์ HUD ของเลเอาท์ Level 2 Layout จัดวาง ตำ�แหน่ง ไว้ภายในเสน้ ประดังรปู ท่ี 9.3 รปู ท่ี 9.3 คดั ลอก Object HUDText มาวางบนเลเยอร์ HUD Level 2 Layout 4) ที่เลเอาท์ Level 2 Layout คลกิ ทเ่ี ลเยอร์ HUD เพื่อใหห้ นา้ ต่าง Properties ทางด้านซา้ ยแสดง Properties ของเลเยอร์ดงั กลา่ ว จากนั้นให้แก้ไขค่า Parallax ให้เปน็ (0, 0) เช่นเดยี วกบั กบั เลเยอร์ HUD ของเลเอาท์ Level 1 Layout รปู ท่ี 9.4 ตัง้ คา่ Parallax ของเลเยอร์ ให้เปน็ (0, 0) 89

5) ไปที่ Event Sheet: Gameplay Event sheet เพม่ิ Global Variable ตั้งชือ่ วา่ TimeGot เปน็ ตวั แปรประเภท Number ค่าเรม่ิ ต้นเป็น 0 เราจะใช้สำ�หรับนบั เวลาที่ผเู้ ล่นใช้ในเกมเป็นวินาที รปู ท่ี 9.5 สร้างตวั แปรสำ�หรบั เกบ็ ค่านบั เวลาทผ่ี ู้เลน่ ใช้ในเกมเปน็ วนิ าที 6) เพมิ่ Event เพือ่ เพิ่มคา่ ของตวั แปร TimeGot ทุกๆ 1 วนิ าที รปู ที่ 9.6 System.EveryXSeconds(1.0) >> System.AddTo(TimeGot, 1) 7) ท่ีบลอ็ ก Event System.EverryTick() เพ่ิม Action เพ่ือให้ Object HUDText แสดงค่าตัวแปร ตา่ งๆ รูปท่ี 9.7 (บล็อก Event เดมิ ) >> HUDText.SetText(“Live: “ & Live & “ Score: “ & Score & “ Time: “ & TimeGot & “s” ) 8) ทดลองรันเลเอาท์ จะสงั เกตเหน็ ว่า Object HUDText จะแสดงข้อความตัวแปรตา่ งๆ และจะอยู่ ที่ตำ�แหนง่ เดิมของหน้าจอตลอดเวลาแม้ว่าผูเ้ ลน่ จะขยับไปทใ่ี ดของเลเอาท์ ถือเป็นการเสร็จสน้ิ ขั้นตอนการ จัดการการแสดงผล HUD บนเกม Platform รูปท่ี 9.8 Object HUDText อยู่ที่เดมิ ของหน้าจอตลอดเวลา 90

บทท่ี 10 การจดั การการเชือ่ มโยง ระหว่าง Layout

บทที่ 10 การจัดการการเช่ือมโยงระหวา่ ง Layout 10.1 การจัดการการเช่ือมโยงระหวา่ ง Layout Construct 2 จะมี Action GoToLayout(“ชือ่ เลเอาท์“) สำ�หรบั การพาผเู้ ล่นไปยังหนา้ เลเอาท์ ตา่ งๆ ส่วนเงื่อนไขที่จะใช้ในการเปลีย่ นเลเอาทน์ นั้ ผู้พฒั นาสามารถก�ำ หนดได้อย่างอสิ ระ เชน่ ถา้ ผเู้ ล่นไปถงึ ยงั จดุ หมาย เมื่อผู้เล่นเอาชนะบอสได้ หรือ ผู้เล่นเกบ็ ไอเทมได้ถงึ จ�ำ นวนทกี่ ำ�หนด เป็นต้น ส�ำ หรับเกม Bunny Kick นนั้ จะมเี ง่อื นไขการเปล่ียนเอาทด์ งั รูปที่ 10.1 คลกิ ปุ่ม Back Main Layout คลกิ ปุ่ม Back ตัวละครตาย คลกิ ปุม่ Play Level 1 Layout ตวั ละครไปถึงเสน้ ชยั Level 2 Layout ตัวละครเอาชนะบอสได้ Main Layout Main Layout รปู ท่ี 10.1 การเชอ่ื มโยงระหวา่ ง Layout ของเกม Bunny Kick 92

10.2 การจัดการการเชอื่ มโยงระหวา่ ง Layout ของเลเอาท์ Main Layout เลเอาท์ Main Layout จะเปน็ หน้าแรกของเกมแล้ว เลเอาท์ดงั กล่าวกย็ งั มีหน้าทรี่ เี ซต็ คา่ ของตัวแปร global ด้วย ดังนั้นหากผู้เลน่ เล่นจบเกมไมว่ ่าจะแพ้หรอื ชนะ กต็ อ้ งกลบั มาท่หี น้าเลเอาท์นกี้ ่อนจะกลับไปเร่ิม เล่นเกมท่ีเลเอาท์ Level 1 Layout ทกุ ครง้ั ด้วยการคลกิ ที่ Object PlayText 1) ไปท่ีเลเอาท์ใดกไ็ ด้ เพ่ิม Object Mouse เขา้ สู่ Project รปู ท่ี 10.2 เพมิ่ Object Mouse เขา้ สู่ Project 2) ไปทห่ี น้าต่าง Project สร้าง Event Sheet ชอ่ื Main Event sheet รปู ที่ 10.3 สรา้ ง Event Sheet ช่ือ Main Event sheet 93

3) สรา้ ง Event เพ่อื รีเซต็ ตวั แปร global รปู ที่ 10.4 System.OnStartOfLayout() >> System.ResetGLobalVariables 4) สรา้ ง Event เพือ่ ใหผ้ เู้ ล่นสามารถคลกิ ที่ Object PlayText เพอ่ื ไปสเู่ ลเอาท์ Level 1 Layout ได้ รปู ท่ี 10.5 Mouse.OnObjectClicked(Left, Clicked, PlayText) >> System.GoToLayout(“Level 1 Layout“) 5) ไปท่ีเลเอาท์ Main Layout ตัง้ ค่า Properties Event sheet ให้เปน็ Main Event sheet ทดลอง รนั เลเอาทเ์ พ่ือสังเกตผลลพั ธ์ เปน็ อนั เสร็จสนิ้ ขัน้ ตอนการจดั การการเชอ่ื มโยงระหว่าง Layout ของเลเอาท์ Main Layout รปู ท่ี 10.6 ต้ังคา่ Properties Event Sheet ใหเ้ ป็น Main Event sheet 94

10.3 การจดั การการเชอ่ื มโยงระหว่าง Layout ของเลเอาท์ Level 1 Layout เลเอาท์ Level 1 Layout เปน็ เลเอาท์ทีเ่ ป็นเกมแพลตฟอร์ม ที่ผูเ้ ล่นจะต้องบงั คบั ตัวละครผ่าน อปุ สรรคเพอ่ื ไปให้ถึงปลายทาง ซ่งึ จะพาผเู้ ลน่ ไปยงั เลเอาท์ Level 2 Layout ตอ่ ไป แตถ่ า้ ผเู้ ลน่ พลงั ชีวติ หมดหรอื ตกเหว ผเู้ ล่นจะถกู สง่ ไปท่เี ลเอาท์ Game Over Layout 1) ไปท่ี Event sheet Gameplay Event sheet เพิม่ Event เพอ่ื ใหผ้ เู้ ล่นไปยงั เลเอาท์ Game Over Layout เมื่อผเู้ ลน่ มีพลงั ชวี ิตนอ้ ยกว่าหรือเทา่ กบั 0 รูปที่ 10.7 System.CompareVariable(Live, LessOrEqual, 0) >> System.GoToLayout(“Game Over Layout“) 2) ไปท่ีเลเอาท์ Level 1 Layout น�ำ ภาพ DoorBox.png เขา้ ไปวางบนเลเอาท์ ทเ่ี ลเยอร์ MAIN BOTTOM รปู ที่ 10.8 เพม่ิ Object DoorBox 3) ไปท่ี Event sheet Level 1 Event sheet เพิม่ Event เพอ่ื ให้ผเู้ ลน่ สามารถไปยังเลเอาท์ Level 2 Layout ได้ เมอ่ื ชนกบั Object DoorBox รูปที่ 10.9 Player.OnCollisoinWithAnotherObject >> System.GoToLayout(“Level 2 Layout“) 4) เพิม่ Event เพือ่ ใหผ้ ้เู ลน่ ไปยังเลเอาท์ Game over Layout ถา้ ผเู้ ล่นพลาดตกลงไปด้านลา่ งของ พืน้ ที่เลเอาท์ ทดลองจัดวาง Object DoorBox และรนั เลเอาทเ์ พอื่ สงั เกตผลลัพธ์ เปน็ อนั เสรจ็ สน้ิ ขน้ั ตอน การจดั การการเช่อื มโยงระหวา่ ง Layout ของเลเอาท์ Level 1 Layout รูปที่ 10.10 Player.CompareY(GreaterThan, 3300) >> 95 System.GoToLayout(“Game Over Layout“)

10.4 การจัดการการเช่ือมโยงระหว่าง Layout ของเลเอาท์ Level 2 Layout เลเอาท์ Level 2 Layout เป็นเลเอาท์สุดท้ายทีเ่ ปน็ เกมแพลตฟอรม์ ถ้าผู้เลน่ สามารถเอาชนะหัวหน้า เตา่ ได้ เกมกจ็ ะพาผ้เู ลน่ ไปยัง You Won Layout แต่ถ้าผู้เลน่ พลงั ชวี ิตหมดหรือตกเหว ผเู้ ล่นจะถกู ส่งไปทเี่ ล เอาท์ Game over Layout 1) ไปท่ี Event Sheet: Level 2 Event sheet เพิ่ม Action ตอ่ จาก Event ทีห่ ัวหนา้ เตา่ ตาย 5 วินาที (เผอ่ื เวลาใหผ้ ้เู ล่นไดเ้ ห็นวา่ หัวหน้าเต่าตายแลว้ ) แล้วสง่ ผเู้ ลน่ ไปยังเลเอาท์ You Won Layout เม่อื สามารถเอาชนะหวั หน้าเตา่ ได้ รปู ที่ 10.11 (บลอ็ ก Event เดิม) >> System.Wait(5) System.GoToLayout(“You Won Layout“) 2) เพิม่ Event เพ่อื ให้ผู้เล่นไปยังเลเอาท์ Game Over Layout ถ้าผูเ้ ล่นพลาดตกลงไปด้านล่างของ พ้นื ท่ีเลเอาท์ ทดลองรันเลเอาทเ์ พอื่ สังเกตผลลัพธ์ เป็นอนั เสร็จส้ินขั้นตอนการจดั การการเชื่อมโยงระหวา่ ง Layout ของเลเอาท์ Level 2 Layout ( Event ทีจ่ ดั การส่วนทีผ่ ู้เล่นพลงั ชวี ติ หมด อยูใ่ น Event Sheet: Gameplay Event sheet ก่อนแลว้ ) รูปท่ี 10.12 Player.CompareY(GreaterThan, 800) >> System.GoToLayout(“Game Over Layout“) 96