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

รูปที่ 4.20 Layout Properties และ Project Setting เราสามารถเข้าไปแกไ้ ขขนาดของหนา้ จอเกม และขนาด ของเลเอาท์ได้ ขอบเขตของเสน้ ประท่ีเราเห็นในรปู ท่ี 4.18 กค็ อื ขนาดหน้าจอของเกม เราสามารถเข้าไปตั้งคา่ ขนาดหน้าจอของเกมของเราได้โดยการคลิกท่วี ่างบนพน้ื ทที่ ำ�งานเพื่อแสดง Layer Properties ทีแ่ ถบ ดา้ นซ้ายของจอ จากนัน้ คลกิ ท่ี Project Properties View แถบดา้ นซ้ายจะกลายเป็นหน้าต่าง Project Properties และเราสามารถแก้ไขขนาดหนา้ จอทีช่ อ่ ง Windows Size โดยการต้ังค่าขนาดหน้าต่างของเกมนั้นขึ้นอยู่กับอุปกรณ์ท่ีจะใช้เล่นเกมว่าสนับสนุนท่ีขนาดหน้าจอ เท่าไรบ้าง บางคร้ังเรากจ็ �ำ เป็นตอ้ งออกแบบหนา้ จอเผอ่ื ไวส้ �ำ หรับอุปกรณท์ ีม่ ีขนาดหนา้ จอแตกต่างกนั ขนาด ของหน้าตา่ งจึงเปน็ สิง่ ทตี่ อ้ งกำ�หนดตงั้ แต่เรมิ่ แรก อยา่ งไรก็ตาม ในเกม Alians Attack จะใช้ขนาดหนา้ ต่างทีค่ ่าเดมิ กค็ ือ 640x480 พิกเซล รูปท่ี 4.21 แถบสถานะแสดงพกิ ัด x-y ของเคอร์เซอร์ ส่วนต�ำ แหนง่ พกิ ดั หรือ Position ใน Construct 2 นัน้ จะเริ่มจากต�ำ แหน่ง 0, 0 ท่มี ุมซา้ ยบนของ เลเยอร์ และเพ่มิ ขนึ้ ตามแนวแกน x และแกน y ตามภาพ ซึ่งทแ่ี ถบสถานะดา้ นลา่ ง จะแสดงต�ำ แหนง่ พกิ ัด ปัจจุบนั ของเคอรเ์ ซอร์ของเราดว้ ย

8) คลิกบนพืน้ ทว่ี า่ งเพือ่ กลับมาที่หน้าต่าง Layer Properties จากลักษณะของเกม Alians Attack ที่เป็นภาพน่ิงอยกู่ บั ที่ ไมม่ กี ารขยบั โฟกัสไปยังสว่ นอนื่ ๆ ของเลเยอร์ ดงั นัน้ เราจงึ ทำ�การเปลยี่ นค่า Layer Size ให้เป็น 640, 480 เทา่ กบั ขนาดของหน้าต่าง เพือ่ ไมใ่ ห้เครือ่ งเล่นของผเู้ ลน่ สิ้นเปลอื งหน่วยความจำ� ไปกบั พืน้ ที่ทีไ่ มไ่ ดแ้ สดงผลโดยใชเ่ หตุ รปู ที่ 4.22 ต้ังคา่ ขนาดของเลเอาทเ์ ปน็ 640x480 พิกเซล รปู ที่ 4.23 ผลลพั ธก์ ารตง้ั คา่ ขนาดของเลเอาท์ 48

9) ท�ำ การย้าย Object Cover ไปไวต้ รงกลางภาพโดยการคลิกแล้วลากไปยังต�ำ แหนง่ ที่ต้องการ หรอื ใช้ปุ่มลูกศรบนคียบ์ อรด์ หรอื ตงั้ ค่า Position ในหน้าต่าง Object type Properties ใหเ้ ปน็ 320, 240 ซ่ึงหมายถงึ การกำ�หนดจุดกึ่งกลางภาพไปทตี่ ำ�แหน่ง x320 y240 (ซึง่ เป็นจุดกึ่งกลางของเลเอาท์ด้วย) รูปที่ 4.24 นำ�ภาพ Cover มาไวต้ รงกลางเลเอาท์ 10) กลบั ไปท่ี Active Layer HUD โดยการคลิกท่เี ลเยอร์ HUD จากหน้าต่างด้านขวา จากนน้ั จงึ ลาก ภาพ Title.png และ Play.png เข้ามาในพืน้ ที่ท�ำ งานทีละภาพ จากนน้ั จงึ จัดวางต�ำ แหน่งตามภาพ ถอื เป็น การเสรจ็ ส้นิ การเตรยี มเลเยอร์ Main Menu รูปท่ี 4.25 ผลลพั ธก์ ารจัดการเลเอาท์ Main Menu Layout 49



บทท่ี 5 Game Object และ Behavior

บทท่ี 5 Game Object และ Behavior 5.1 ภาพรวมของการเขียนโปรแกรมเชงิ วัตถุ การเขียนโปรแกรมโดยหลกั จะมอี ยู่สองแบบ กค็ ือการเขยี นโปรแกรมเชงิ โครงสร้าง และการเขยี น โปรแกรมเชงิ วตั ถุ ส�ำ หรบั การเขียนโปรแกรมเชิงโครงสร้าง การทำ�งานของโปรแกรมจะเรียงลำ�ดบั และกำ�หนดทิศทาง โดยโค้ดโปรแกรม แต่ในการเขยี นโปรแกรมเชงิ วัตถซุ ่ึงเปน็ การเขยี นโปรแกรมยคุ ใหม่ โดยมีวิธมี องการทำ�งาน ของโปรแกรมจะต่างออกไป กล่าวคอื เราจะมองทุกอย่างในโปรแกรมเปน็ วัตถุ (Object) ท่มี ขี ้อมูลส่วนตวั (Attribute) และความสามารถ (Methods) โดยการทำ�งานของโปรแกรม ก็คือการติดต่อเรยี กใช้ขอ้ มลู หรอื ความสามารถของวตั ถตุ ่างๆ ใน โปรแกรม Object UFO ข้อมูลสว่ นตัว • Health • Position • etc. ความสามารถ • Destroy • Move • etc. รปู ที่ 5.1 ตัวอยา่ งแสดง Attribute และ Methods ของ Object UFO Object ในโปรแกรม Costruct 2 จะมี Attribute และ Methods มากมายเตรยี มพร้อมสำ�หรับให้ 52เราเลือกดงึ ไปใช้งาน ซ่งึ เราเพียงแต่ต้องเลอื กใชใ้ หถ้ ูกงานเท่านั้น

UFO.Health 2 จา้ (Health ของนาย เหลือเท่าไหร?) Object UFO Object System ถา้ ไม่มีอะไรแล้วก็ ............. ไปล่ะจา้ UFO.Health 0 จา้ (Health ของนาย เหลอื เทา่ ไหร?) Object UFO อกี Object หน่งึ UFO.Destroy (ทำ�ลายตัวเองซะ) รปู ที่ 5.2 การติดตอ่ กนั ระหวา่ ง Object 53

5.2 Variable Variable หรอื ภาษาโปรแกรมกค็ ือ ตัวแปร หมายถึงส่ิงที่ใชเ้ กบ็ ค่า (Value) ท่ีสามารถเปลี่ยนแปลง ได้ ในระหวา่ งที่เกมกำ�ลังด�ำ เนนิ อยู่ เชน่ คะแนนทจี่ ะเพม่ิ ทุกคร้งั เมอ่ื ทำ�ลายศตั รไู ด้ เวลาทจ่ี ะลดลงทุกๆ 1 วนิ าที ในโปรแกรม Construct 2 เราสามารถเพม่ิ ตวั แปร (ใชเ้ ป็นคณุ สมบัต)ิ ใหก้ บั Object แต่ละ Object ได้ ประเภทของตวั แปรในโปรแกรม Construct 2 จะมีหลกั ๆ อย่แู ค่ 3 ชนิด คือ Boolean สำ�หรับเกบ็ ข้อมลู ตรรกะ Number สำ�หรับเก็บตัวเลข และ Text ส�ำ หรบั เก็บขอ้ ความ และถา้ จะแบง่ ตามขอบเขตของตวั แปร จะสามารถแบ่งไดเ้ ปน็ Instance Variable คือตัวแปรของ แต่ละ Object และ Global Variable สำ�หรบั ตวั แปรกลางของเกมท่ี Object ใดๆ สามารถเข้ามาแก้ไขค่าได้ 1) Boolean จะมคี ่าทเ่ี ป็นไปได้เพยี งแต่ 2 ค่าคอื จริง (True) และ เท็จ (False) ยกตวั อยา่ งการใชง้ าน เช่น สมมตุ ถิ า้ ค่าของตัวแปร Alive เป็น True เราจะเขยี นคำ�ส่งั ให้ Object ยงั เดินตอ่ ไป แตถ่ ้าค่าของตัวแปร Alive เปน็ False เราจะเขยี นคำ�สงั่ ให้ Object หยุดเดิน และแสดงภาพ Dead เปน็ ต้น Alive=True Alive=False รปู ที่ 5.3 ตวั อย่างการใชง้ านตวั แปรประเภท Boolean 54

2) Number สามารถเก็บค่าท่เี ป็นจำ�นวนทั้งจ�ำ นวนเตม็ และจำ�นวนทศนิยม ยกตวั อย่างการใช้ เชน่ ใช้เก็บค่าพลังชวี ติ (Heal Point) ของออปเจกตศตั รู ใช้เกบ็ ค่าคะแนน ค่าเวลา ฯลฯ ค่าเหลา่ นเ้ี ราสามารถ เขียนคำ�สั่งเพิม่ ลดโดยวิธกี ารด�ำ เนินการทางคณิตศาสตรไ์ ด้ Health -1 Health -1 Time -1 Score +100 รูปท่ี 5.4 ตัวอย่างการใชง้ านตัวแปรประเภท Number 3) Text สามารถเก็บคา่ ท่เี ปน็ ขอ้ ความไดท้ ุกประเภท ยกตวั อย่างการใช้ เชน่ ใช้เกบ็ ช่ือผูเ้ ลน่ ข้อมูล จากภายนอกเกมท่ีเป็นขอ้ ความ โปรแกรม Construct 2 จะมี Object สำ�หรับแสดงข้อความโดยเฉพาะดว้ ย ซง่ึ จะกลา่ วถงึ อีกคร้ังในบทเรียนที่ 8 ของหนงั สือเลม่ นี้ สวัสดี (ตวั แปร Text ชอื่ ของผเู้ ล่น) ระวงั ตวั เอาไว้ใหด้ ีนะจะ๊ รูปท่ี 5.5 ตัวอยา่ งการใชง้ านตวั แปรประเภท Text 55

5.3 เพมิ่ Instane Variable ใหก้ บั Object UFO 1) ทีพ่ ืน่ ทีท่ �ำ งานของเลเอาท์ Gameplay Layout ใหค้ ลิกท่ี Object UFO รูปท่ี 5.6 คลิกท่ี Object UFO 2) ทหี่ นา้ ต่าง Properties ทางด้านซ้าย คลกิ ท่ี Add / Edit Instance Variables รูปที่ 5.7 เมนู Add / Edit Instance Variables 3) หน้าต่าง UFO: Instance Variables จะปรากฏข้นึ มาพรอ้ ม Instance Variables ของ Object นน้ั ๆ (ถ้าม)ี เราสามารถเพม่ิ /ลด/แกไ้ ข ตัวแปรเหลา่ นีไ้ ด้จากหนา้ ต่างนี้ รูปที่ 5.8 หน้าตา่ ง UFO: Instance Variables 56

4) คลิกทีไ่ อคอน + (Add new) จะปรากฏหน้าต่าง New instance variable ข้ึนมา ให้เราเพม่ิ ตวั แปร Health เปน็ ตัวแปรประเภท Number และมคี ่าเร่มิ ตน้ เปน็ 2 โดยการกรอกขอ้ มลู ตามภาพด้านล่าง รปู ท่ี 5.9 หนา้ ตา่ ง New instance variable 5) คลกิ ปุม่ OK เราจะพบตัวแปรทเี่ ราเพ่ิงสรา้ งท่ีหน้าต่าง UFO: Instance Variables ให้เราปิด หนา้ ต่างนี้ไป เราก็จะพบตัวแปรดงั กลา่ วไปปรากฏทหี่ น้าตา่ ง Properties (ของ Object UFO) ทางด้านซา้ ย ด้วย เป็นการเสรจ็ ขัน้ ตอนการเพ่มิ ตวั แปร Health (ค่าเรม่ิ ตน้ 2) ให้กบั Object UFO รปู ที่ 5.10 ผลลพั ธก์ ารเพ่มิ ตวั แปร Health (คา่ เร่มิ ต้น 2) ให้กบั Object UFO 57

5.4 Behavior Behavior (แปลวา่ พฤติกรรม) คอื Plug-in ต่างๆ ส�ำ หรบั Object ในเกมทส่ี รา้ งด้วยโปรแกรม Construct 2 ซึ่งในโปรแกรม Construct 2 มปี ลัก๊ อนิ ตา่ งๆ ท่ชี ่วยอำ�นวยความสะดวกในการสร้างเกม มากมาย รปู ที่ 5.11 Behavior ทงั้ หมดของ Construct 2 ซง่ึ แต่ละ Behavior จะเหมาะสมกบั การใชง้ านท่แี ตกต่างกนั ออกไป ส�ำ หรบั เกม Alians Attack จะ ใช้ Behavior สองตัว คือ Bullet สำ�หรบั วัตถุทีเ่ คลอ่ื นทไ่ี ปในทิศทางเดียว และ Fade สำ�หรบั วตั ถุทที่ �ำ ลาย ตัวเองโดยการจางหายไป 58

5.5 กำ�หนดพฤติกรรมใหก้ ับ Object UFO 1) ที่พ่นื ท่ที �ำ งานของเลเอาท์ Gameplay Layout ให้คลิกที่ Object UFO รปู ที่ 5.12 คลกิ ที่ Object UFO 2) ท่ีหนา้ ต่าง Properties ทางดา้ นซา้ ย คลิกท่ี Add / Edit Behaviors รปู ท่ี 5.13 เมนู Add / Edit Behaviors 3) หน้าตา่ ง UFO: Behaviors จะปรากฏขนึ้ มาพร้อม Behavior ของ Object นน้ั ๆ (ถ้าม)ี เรา สามารถเพมิ่ /ลด/แกไ้ ข ตวั แปรเหลา่ น้ีได้จากหน้าตา่ งนไ้ี ด้เช่นกนั รปู ท่ี 5.14 หนา้ ตา่ ง UFO: Behaviors 59

4) คลกิ ทไ่ี อคอน + (Add new) จะปรากฏหน้าตา่ ง Add Behavior ข้ึนมา ใหเ้ ราเลือก Bullet แลว้ คลกิ Add รปู ที่ 5.15 หน้าต่าง Add Behavior 5) เราจะกลบั มาทหี่ นา้ ตา่ ง UFO: Behaviors ให้เราปดิ หน้าต่างนีไ้ ป เราก็จะพบตัวแปรดังกลา่ วไป ปรากฏทีห่ น้าตา่ ง Properties (ของ Object UFO) ทางด้านซา้ ยด้วย (รปู ท่ี 5.17) รปู ที่ 5.16 ผลลพั ธก์ ารเพิ่ม Behavior Bullet ให้กับ Object UFO 6) ท่หี นา้ ต่าง Properties (ของ Object UFO ) ทางด้านซา้ ย แก้ไขชอ่ ง Speed ให้เปน็ 200 รูปที่ 5.17 แกไ้ ข Speed ใหเ้ ปน็ 200 60

7) ลาก Object UFO มาไวบ้ นพน้ื ท่หี นา้ จอ ทดลองรันเลย์เอาทเ์ พื่อสังเกตผล จะสังเกตว่า Object UFO ว่ิงไปทางขวา ซง่ึ ยังไมใ่ ชท่ ศิ ทางท่ีเราตอ้ งการ รูปท่ี 5.18 Object UFO ว่งิ ไปทางขวา 8) กลับไปท่ีพนื้ ทที่ ำ�งาน คลกิ ที่ Object UFO หน้าตา่ ง Properties ทางด้านซ้ายจะแสดงค่าของ Object UFO แกไ้ ขค่า Angle ใหเ้ ปน็ 180 เปน็ การปรบั ทิศทางการเคล่ือนทข่ี อง Object UFO ให้เคลื่อนท่ี ไปทางดา้ นตรงขา้ ม (ทางซ้าย) รปู ที่ 5.19 หมุน Object UFO 180 องศา 9) ดบั คลิกที่ Object UFO หนา้ ต่าง Edit Image: UFO จะเด้งขน้ึ มา ในท่นี ี่เราจะยงั ไม่สนใจ หน้าตา่ งอืน่ ๆ ให้เราคลิกท่ีไอคอน Mirror (ลกู ศรชี้ A) 1 ครั้ง และคลิกทไ่ี อคอน Flip (ลูกศรช้ี B) อกี หน่ึงคร้งั หรอื ทดลองคลกิ ไอคอนทั้งสองไปเรอื่ ยๆ จนไดต้ ามภาพ รูปท่ี 5.20 กลับภาพ Object UFO ใหต้ รงกบั ทิศทางท่วี ง่ิ ไป 10) ปดิ หน้าต่าง Edit Image: UFO เพื่อกลบั ส่พู ้นื ทที่ �ำ งาน จะเห็นได้ว่า Object UFO หันไปใน ทิศทางทถ่ี กู ตอ้ งแลว้ และเม่ือทดลองรันเลเอาท์ดูจะพบวา่ Object UFO จะเคล่อื นทไี่ ปทางซา้ ยด้วย เป็น การเสร็จส้ินการเพมิ่ Behavior ใหก้ บั Object UFO 61



บทที่ 6 Event

บทที่ 6 Event 6.1 การควบคุมทศิ ทางของเกมใน Construct 2 การควบคมุ การทำ�งานของเกมให้ได้อยา่ งท่ตี อ้ งการ ตอ้ งอาศยั การตรวจสอบเงือ่ นไข การค�ำ นวณ การตดิ ต่อ การสั่งการ ท�ำ ให้ทกั ษะการเขียนโปรแกรมเป็นสง่ิ ท่ขี าดไม่ได้ แม้วา่ มนั จะดูเปน็ เร่ืองยาก แต่การ เขียนโปรแกรมเพอ่ื ควบคุมทิศทาง จะมหี ลกั การทเี่ รียบง่ายดงั แผนภาพ Flow Chart ดา้ นล่าง คำ�ส่ัง ค�ำ ส่ัง เงอื่ นไข คำ�สั่ง จริง เทจ็ ค�ำ ส่ัง คำ�สงั่ ยอ่ ย ค�ำ สั่ง ค�ำ ส่งั รปู ท่ี 6.1 Flow Chart แสดงทศิ ทางการทำ�งานของโปรแกรมใดๆ แผนภาพได้แสดงใหเ้ ห็นถงึ สงิ่ ที่เกดิ ขน้ึ ในระหวา่ งการท�ำ งานของเกม ซ่ึงเกมจะทยอยท�ำ งานตาม ค�ำ สั่งตา่ งๆ เรยี งตามลำ�ดับบรรทัด ซ่ึงในทกุ ๆ คำ�ส่ังจะมีการตรวจสอบเงอ่ื นไข (Conditions) ก่อนทกุ ครั้ง ถ้า เงื่อนไขตรงตามที่กำ�หนด (เง่ือนไขเปน็ จริง) เกมกจ็ ะทำ�งานตามคำ�สั่งย่อยของค�ำ สง่ั นน้ั ๆ ตามล�ำ ดบั ก่อนท่จี ะ เข้าสคู่ �ำ สัง่ อ่ืนๆ ตามลำ�ดับต่อไป แต่ถา้ เงือ่ นไขไม่ตรงตามที่กำ�หนด (เงอื่ นไขเป็นเท็จ) เกมก็จะขา้ มค�ำ สงั่ ยอ่ ย ดงั กลา่ วออกไปตรวจสอบคำ�ส่ังอ่นื ๆ ตามล�ำ ดบั ต่อไป อนึง่ คำ�สั่งอืน่ ๆ กจ็ ะต้องถกู ตรวจสอบเงื่อนไขกอ่ นทำ�ตามคำ�สัง่ เช่นกัน 64

อย่างไรก็ตาม Construct 2 ได้ช่วยทำ�ใหก้ ารเขียนค�ำ ส่งั ควบคุมเกมเปน็ เรอ่ื งทง่ี า่ ย แต่มปี ระสทิ ธภิ าพ ทั้งยังใชภ้ าษา (องั กฤษ) ทเ่ี ขา้ ใจงา่ ย และเชค็ ข้อผดิ พลาดทางภาษา (Syntax Error) ตั้งแต่ขั้นตอนการเขยี น โดยใชส้ ิ่งท่เี รียกวา่ Event รูปที่ 6.2 สว่ นประกอบและหน้าตาของ Event ใน Construct 2 หนา้ ตาของ Event ใน Construct 2 จะประกอบไปด้วย 2 ส่วนสำ�คญั คือ Conditions และ Action จากภาพด้านบนจะตีความได้ว่า “ถา้ Object System ได้เริม่ ตน้ เลเอาทเ์ ป็นคร้ังแรก ให้ Object System ตั้งคา่ ตวั แปร time scale ใหเ้ ป็น 0.5” ซงึ่ เขียนเปน็ แผนภาพ Flow Chart ไดด้ ังนี้ Event 7 Event 8 ถา้ Object System จริง ได้เร่ิมต้นเลเอาทเ์ ปน็ ครง้ั แรก เท็จ Object System ตั้งคา่ ตวั แปร time scale ให้เป็น 0.5 Event 9 รปู ที่ 6.3 Flow Chart แสดงการทำ�งานของ Event ใดๆ หมายเหตุ - สว่ นของ Margin เป็นพนื้ ทวี่ า่ งส�ำ หรับการลากยา้ ยเปลี่ยนล�ำ ดบั Event หรอื คลกิ ขวา เพื่อแสดงคำ�สั่งต่างๆ สำ�หรับจัดการ Event นัน้ ๆ เชน่ ลบ Event 65

6.2 เริม่ ต้นการใชง้ าน Event Sheet ด้วยการควบคุมมุมยงิ ด้วยตำ�แหนง่ เมาส์ 1) ก่อนท่ีจะเริ่มต้นเขยี น Event ทมี่ เี มาสเ์ ขา้ มาเก่ียวข้อง เราตอ้ งทำ�การเพิ่ม Object Mouse เข้าไป ใน Project ของเราก่อน ซึง่ ท�ำ ไดโ้ ดยการดบั เบ้ิลคลกิ บนทีว่ า่ งบนพน้ื ทท่ี ำ�งานของเลเอาท์ หรอื ไม่ก็คลิกขวา ที่ข้อความ Object Types บนหนา้ ต่าง Projects แล้วเลอื ก Insert new object รปู ท่ี 6.4 คำ�สง่ั เพิ่ม Object 2) หน้าต่าง Insert New Objet จะปรากฏขนึ้ มา ให้เราเลอื ก Mouse แล้วคลกิ Insert เป็นการ เสรจ็ สน้ิ ข้นั ตอนการเพิม่ Object เมาสใ์ หก้ ับ Project หลังจากนเี้ ราจะสามารถเรยี กใช้ค�ำ สง่ั หรือข้อมลู ท่ี เกยี่ วกบั เมาส์จาก Object ตวั นี้ได้ 66 รูปท่ี 6.5 หน้าตา่ ง Insert New Objet

3) ทีห่ น้าตา่ ง Projects ทางดา้ นขวา เปลี่ยนชือ่ Event Sheet 1 ใหเ้ ปน็ Gameplay Event sheet รูปท่ี 6.6 เปลย่ี นชื่อเป็น Gameplay Event sheet 4) ท่หี นา้ ตา่ ง Projects ดบั เบลิ้ คลกิ ที่ Gameplay Event sheet เพอ่ื เปดิ Event Sheet ดังกลา่ ว ขึ้นมาบนพื้นท่ีทำ�งาน เราจะกับพบ Event Sheet เปลา่ ๆ ทย่ี งั ไม่มี Event ใดๆ รูปท่ี 6.7 หน้า Event Sheet เปลา่ 5) ทำ�การเพ่ิม Event โดยการคลกิ ทีข่ ้อความ Add event หรอื ดบั เบลิ คลิก หรอื คลิกขวาแลว้ เลอื ก Add event กไ็ ด้ รูปที่ 6.8 คำ�สั่ง Add event 67

6) หน้าต่าง Add event แรกจะปรากฏข้นึ พรอ้ มกับ Object ที่เราจะเลือกใช้สรา้ งเงือ่ นไข ใหเ้ รา เลือก Object System แลว้ คลิก Next หรือดับเบิลคลิกที่ Object System เพื่อเข้าสูข่ ัน้ ตอนต่อไป รปู ที่ 6.9 ค�ำ สงั่ Add event 7) หนา้ ต่าง Add Event ที่สองจะปรากฏขึ้น พรอ้ มกบั ตวั เลอื กเงอ่ื นไขทไ่ี ด้จาก Object System ให้ เราเลอื กท่ี Every Tick ซึง่ หมายถึง “ตลอดเวลา” แล้วคลิก Done รูปที่ 6.10 เลอื กเงอื่ นไข Every Tick 8) บลอ็ ก Event แรกของเราก็จะถกู สร้างข้นึ บน Event Sheet แต่ตอนน้ียังมีเพียงเงอื่ นไข “ตลอด เวลา” เท่านั้น ยงั ไมม่ ชี ดุ คำ�สั่งใด ใหเ้ ราทำ�การเพมิ่ ค�ำ สัง่ โดยการคลกิ ทข่ี อ้ ความ Add action ท้ายบล็อก ดังกล่าว 68 รปู ท่ี 6.11 ผลลัพธ์การสร้างเงอ่ื นไขของ Event

9) หน้าตา่ ง Add action แรกจะปรากฏขึน้ มาพรอ้ มตัวเลือก Object ทเี่ ราตอ้ งการให้เกดิ Action ในทีน่ ้ใี ห้เราเลือก Object Cannon รูปท่ี 6.12 หน้าต่าง Add action 10) หน้าตา่ ง Add action ที่สองจะปรากฏขึ้นมาพรอ้ มตัวเลือก Action ท่สี ามารถสร้างจาก Object นนั้ ๆ ได้ ในท่นี ใ้ี ห้เราเลอื ก Action > Set angle toward position ซง่ึ หมายถึงต้งั ค่ามมุ ใหช้ ้ีไปที่ ต�ำ แหนง่ ทต่ี ้องการ รูปที่ 6.13 หน้าตา่ ง Add action 69

11) จะมหี นา้ ต่างปรากฏข้นึ มา 2 หน้าต่าง หนา้ ต่างดา้ นบนคือรายการ Object ส�ำ หรับเรียกใช้ ข้อมลู ต่างๆ จาก Object หน้าตา่ งดา้ นลา่ งจะเป็นคา่ ท่ีจะใสล่ งไปในค�ำ สงั่ Set angle toward position รูปท่ี 6.14 หนา้ ต่างแสดง Object ท่สี ามารถเรียกใช้ได้ และหน้าตา่ งส�ำ หรับกรอกค่า (Parameter) ให้คำ�สง่ั Set angle toward position 12) เราต้องการให้ Object Cannon ชไ้ี ปยังตำ�แหน่งของเมาส์ ให้เราดับเบ้ลิ คลิกที่ Object Mouse จากรายการของหน้าต่างดา้ นบน หนา้ ต่างจะเปลี่ยนไปเป็นดังภาพดา้ นลา่ ง ซงึ่ จะแสดงรายการคุณสมบัติ และชุดคำ�ส่ังตา่ งๆ ของ Object Mouse ทีเ่ ราสามารถเรยี กใช้งานได้ 70 รูปที่ 6.15 หนา้ ตา่ ง ‘Mouse‘ expressions

13) หากว่าเราดบั เบิลคลกิ ลงบนรายการใดๆ ค่าของคุณสมบตั ิดงั กลา่ วจะไปปรากฏทตี่ ำ�แหนง่ เคอเซอร์ของแบบฟอรม์ ในหน้าต่างด้านล่าง แต่ในที่นใ้ี ห้เราใช้วิธีกรอกขอ้ มลู ลงไปยงั แบบฟอรม์ โดยตรง โดย ให้ชอ่ ง X เป็น Mouse.X และช่อง Y เป็น Mouse.Y หมายเหตุ - Mouse.X หมายความวา่ Mouse คือชอ่ื ของ Object จดุ เปน็ เปน็ ตวั เชอื่ มทบ่ี อกว่า เป็นการใชค้ ุณสมบัตขิ อง Object Mouse โดยในท่ีน้กี ค็ ือคณุ สมบัติ X ซึง่ กค็ ือพิกดั X ปจั จุบันของเมาส์บน หน้าจอเทียบกบั เลเยอรน์ ั่นเอง ตามค�ำ อธิบายจากหน้าต่าง Mouse Expreessions รปู ที่ 6.16 ใส่ค่าด้วยต�ำ แหนง่ ของ Object Mouse 14) เพอื่ กรอกแบบฟอรม์ เสรจ็ ตามภาพแลว้ ให้คลิกปุ่ม Done กจ็ ะเปน็ การเสรจ็ สิน้ การสรา้ ง Event ท่ีส่งั ให้ Object Cannon ปรบั มมุ ให้ชีไ้ ปยังพกิ ัดของเมาสต์ ลอดเวลา รูปที่ 6.17 เสรจ็ สน้ิ การสรา้ ง Event ทีส่ งั่ ให้ Object Cannon 71 ปรับมมุ ใหช้ ไ้ี ปยงั พิกดั ของเมาส์ตลอดเวลา

15) ขณะนี้ Event Sheet: Gameplay Event sheet พรอ้ มทดลองใชง้ านแล้ว แตเ่ รายงั ไมไ่ ด้ ตั้งค่าใหเ้ ลเอาท์ Gameplay Layout ให้เช่ือมต่อกับ Event Sheet ใดๆ ใหเ้ รากลับไปท�ำ งานท่เี ลเอาท์ Gameplay Layout คลิกต�ำ แหน่งที่ว่างบนพนื้ ท่ีทำ�งานเพอ่ื ใหห้ น้าต่าง Properties ทางด้านซา้ ยแสดง คุณสมบตั ขิ องเลเอาท์นี้ จากนั้นจงึ ตงั้ ค่าในช่อง Event sheet ให้เป็น Gameplay Event sheet ดงั ภาพ รูปท่ี 6.18 ก�ำ หนด Event sheet ใหเ้ ลเอาท์ 16) ใหท้ ดลองรนั เลเอาทเ์ พอ่ื ทดสอบการท�ำ งานของ Event เราจะพบวา่ Object Cannon จะช ี้ ไปตามต�ำ แหนง่ ของเมาสแ์ ลว้ แตย่ ังมอี กี ปญั หาท่ตี อ้ งแกไ้ ข ซง่ึ ก็คือตำ�แหน่งจดุ หมนุ ของ Object Cannon น่นั เอง รูปที่ 6.19 จดุ หมนุ ของกระบอกปืนไมถ่ กู ตอ้ ง 17) กลับไปท�ำ งานที่เลเยอร์ Gamplay Layout คลิกที่ Object Cannon เราจะเหน็ จุดสองจดุ ตรง กลาง จุดเล็กคือจดุ หมนุ (Origin) และจดุ ใหญ่สีขาวแสดงทิศทาง (Angle) ของ Object Cannon รูปที่ 6.20 แสดงจุดหมุนของ Object Cannon 72

18) ดบั เบลิ คลกิ ท่ี Object Cannon เพ่อื เปดิ หน้าต่าง Edit image: Cannon คลิกทีไ่ อคอน Set Orgin and Image Point ทางดา้ นซา้ ย เพื่อเปิดโหมดแก้ไข Origin (ถ้าโหมดน้ยี งั ไม่ไดเ้ ปิด) รปู ที่ 6.21 โหมดแก้ไข Origin 19) คลกิ ทต่ี �ำ แหนง่ สว่ นต้นของกระบอกปืนดงั ภาพด้านลา่ งเพ่อื ก�ำ หนดให้จดุ นั้นเป็นจดุ หมุน เมอ่ื เสร็จแล้วให้ปิดหน้าตา่ ง Edit image นไ้ี ป ขยับต�ำ แหน่ง Object เลเอาทบ์ นหนา้ จอใหมใ่ หเ้ หมาะสม สุดทา้ ย ให้รันเลเอาท์เพ่อื ทดลองผล ถอื เป็นการเสรจ็ สนิ้ การเขยี น Event เพ่ือควบคมุ ตำ�แหน่งของเมาส์ รปู ที่ 6.22 กำ�หนดตำ�แหน่ง Origin ใหม่ให้ Object Cannon 73

6.3 การสรา้ ง Event ให้ Object Cannon สามารถยิงกระสนุ Object Bullet ได้ ขนั้ ตอนน้จี ะเป็นการสร้าง Event ให้ Object Cannon สามารถปลอ่ ย (Spaw) Object Bullet ได้ โดย Object Bullet ทถี่ ูกสร้างข้นึ ณ จดุ ปลายของปากกระบอกปืน ( Object Cannon) จะว่งิ ไปตามทศิ ทาง ของกระบอกปนื ดว้ ย Behavior Bullet ของมันเอง 1) ไปท�ำ งานที่แทบ็ Gameplay Event sheet ท�ำ การเพมิ่ Event โดยใช้ Object Mouse เปน็ ตวั สร้างเงอื่ นไข รปู ท่ี 6.23 เพม่ิ Event โดยใช้ Object Mouse เป็นตวั สรา้ งเง่อื นไข 2) หนา้ ต่าง Add event ทสี่ อง ให้เลือก On click ซ่ึงหมายถึง เมอ่ื เมาสถ์ กู คลิก รปู ท่ี 6.24 เลือก On click 74

3) หน้าตา่ งส�ำ หรับป้อนคา่ (Parameters) จะปรากฎขนึ้ มา ใหเ้ ราเลือก Mouse button เปน็ Left และเลอื ก Click Type เป็น Clicked ซึ่งหมายถงึ การคลกิ ซ้าย 1 ครงั้ เสรจ็ แล้วใหค้ ลกิ Done บลอ็ กเงือ่ นไข จะถกู สรา้ งขนึ้ รูปท่ี 6.25 ต้งั คา่ ใหก้ บั เง่อื นไข On click 4) ขั้นตอนต่อไป ใหท้ ำ�การ Add Action โดยใช้เงอื่ นไขจาก Object Cannon รูปท่ี 6.26 เพมิ่ Action โดยใชเ้ ง่อื นไขจาก Object Cannon 5) เลือกค�ำ ส่ังเปน็ Spawn another object ซึง่ หมายถงึ การสร้าง Object อืน่ ๆ ขึ้นมา รูปท่ี 6.27 ตัง้ ค่าให้กับเงือ่ นไข On click 75

6) ท่ีหน้าต่างพารามิเตอร์ ใหเ้ ลือก Object เป็น Object Bullet ตง้ั คา่ Layer เปน็ 1 และตงั้ ค่า Image Point เป็น 0 จากน้ันให้คลกิ Done เป็นการเสรจ็ สน้ิ การสร้าง Event เพ่อื ให้ Object Cannon สามารถยิงกระสนุ ได้ รปู ท่ี 6.28 ต้ังคา่ พารามิเตอรใ์ ห้กับค�ำ สัง่ Spawn another Object 7) ทดลองรนั เลเอาท์ เราจะพบวา่ มีบางอย่างทีย่ งั ไม่สมบูรณ์ เพราะวา่ ตอนนีก้ ระสุนน้ันถกู ยิงจาก จุดหมุนของ Object Cannon น่ันเอง ท้ังน้ี เพราะค่าเริม่ ตน้ ของต�ำ แหนง่ ทใ่ี ช้อา้ งองิ เปน็ จดุ Spawn Object กค็ อื ต�ำ แหน่ง origin หรือ จดุ หมุนนัน่ เอง ดังน้ันถา้ เราต้องการให้ลกู กระสนุ ถูกปลอ่ ยจากต�ำ แหนง่ ปลายปากกระบอกปืน เรากต็ ้องสรา้ ง จุดอ้างอิงเพิม่ น่นั ก็คือส่งิ ทเ่ี รยี กวา่ Image point นน่ั เอง รปู ที่ 6.29 กระสุนไม่ไดถ้ กู ยงิ จากตำ�แหนง่ ปลายกระบอกปืน 76

8) ใหเ้ รากลบั ไปทำ�งานท่เี ลเยอร์ Gameplay Layer ดบั เบิ้ลคลิกที่ Object Cannon เพอ่ื เปิด หนา้ ตา่ ง Edit image: Cannon 9) เข้าโหมด Set Origin and Image Point (คลิกทไ่ี อคอน Set Origin and Image Point ตาม ภาพ) เราจะเห็นหนา้ ต่าง Image points ปรากฏขึ้นท่ดี ้านขวาล่าง รูปท่ี 6.30 หน้าตา่ ง Image points ปรากฏขึ้นทดี่ ้านขวาล่าง 10) ที่หน้าต่าง Image points ให้เราท�ำ การเพ่มิ จุดอ้างอิงโดยการคลิกท่ีไอคอนรปู เครือ่ งหมายบวก จะได้จดุ อ้างอิงใหมช่ อื่ Imagepoint 1 (สามารถเปลี่ยนชอื่ ได้) และเปน็ Image Point หมายเลข 1 รูปที่ 6.31 เพ่ิมจุดอา้ งอิงใหม่ช่ือ Imagepoint 1 77

11) ในระหว่างท่ีหน้าต่าง Image points ก�ำ ลังเลอื ก Imagepoint 1 อยู่ (ดังภาพบน) เราสามารถ คลิกบนรูปภาพในหน้าตา่ ง Edit image เพื่อกำ�หนดตำ�แหนง่ ของ Imagepoint 1 ได้ทนั ที ในที่นีเ้ ราจะ กำ�หนดให้อยตู่ รงปลายของกระบอกปนื เสรจ็ แลว้ ให้ปดิ หน้าต่างนไ้ี ป รูปที่ 6.32 แสดงตำ�แหน่งของ Imagepoint ท่กี ำ�ลงั เลอื กอยู่ 12) กลับไปทำ�งานท่ี Gameplay Event sheet ใหค้ ลกิ ขวาที่สว่ น Action ของค�ำ ส่ังปล่อยกระสุน โดยการคลิกขวาท่ี Action ดงั กล่าวแล้วเลือก Edit รูปที่ 6.33 การแกไ้ ข Action 13) แก้ไขฟอร์มในชอ่ ง Image point ให้เป็น 1 ตามหมายเลขของจุดอา้ งองิ ใหมท่ เี่ ราเพงิ่ สรา้ งขนึ้ รปู ท่ี 6.34 แกไ้ ขคา่ พารามเิ ตอร์ 78

14) เมือ่ ทดลองรนั เลเอาทด์ ู เราจะพบว่าลูกกระสุนได้ถูกปล่อยจากปลายจรวดแลว้ รูปที่ 6.35 กระสุนถกู ยงิ จากต�ำ แหนง่ Image point 1 15) แต่วา่ ลกู กระสุนเหล่านจี้ ะวิ่งไปตลอดการรันโปรแกรม ซึง่ นนั่ ถอื เป็นการสิน้ เปลืองทรพั ยากร หนว่ ยความจำ�อย่างใช่เหตุ ดังนน้ั เราจะเพ่มิ Event ทีใ่ ชท้ ำ�ลาย Object ลูกกระสนุ เหล่านี้ เม่อื มันวงิ่ พ้นจาก หนา้ จอ โดยการ Add Event ใหม่ โดยให้เงื่อนไขคอื Object Bullet.IsOutsideLayout และ Action คอื Object Bullet.Destroy เปน็ การจัดการกับคำ�สงั่ ในการยงิ กระสนุ ในเบอ้ื งตน้ ของเกม Alians Attack ได้อยา่ งสมบรู ณ์ รปู ที่ 6.36 เพ่ิม Event เพ่ือท�ำ ลาย Object Bullet เมอ่ื พ้นจากพื้นท่ี Layout 79

6.4 การสรา้ ง Event เพ่ือกำ�หนดการเคลอ่ื นท่ขี อง Object UFO และ Object Shark แผนการของกองทัพเอเลียนเกม Alians Attack กค็ อื บินจากทางดา้ นขวาของจอผา่ นการป้องกนั จากมนุษย์โลก และเดนิ ทางไปให้ถงึ สดุ จอทางด้านซ้ายให้ได้ UFO ปล่อยตวั ทิง้ หา่ งกัน 3 วินาที ยาน Shark ปล่อยตัวท้ิงหา่ งกัน 30 วนิ าที ระดับความสงู และความเร็วเป็นแบบสุ่ม 1) เมือ่ ตกลงกนั ไดแ้ ล้ว เรากเ็ รม่ิ เขยี น Event ปลอ่ ยตัวกองทพั เอเลยี นกนั เร่ิมจากการก�ำ หนด เง่อื นไข “ทุกๆ 3 วินาท”ี โดยการ Add Event เลอื ก Object System และเลอื กคำ�ส่ังเปน็ Every X second ใสค่ า่ พารามเิ ตอร์เป็น 3 รปู ท่ี 6.37 System.EveryXScecond(3) 2) ในสว่ นของ Action ให้เลือก Object System ค�ำ ส่งั เป็น Create Object กรอกค่าพารามิเตอร์ ตา่ งๆ ดงั นี้ • Object to create : คลิกแล้วเลอื ก Object UFO • Layer : 1 (เลเยอร์เดียวกบั ลูกกระสนุ ) • พิกดั X : 700 • พิกัด Y : random(30, 200) รปู ท่ี 6.38 System.CreateObject(UFO, 1, 700, random(30, 200)) 80

“ Object.ค�ำ ส่งั () Object.คำ�สง่ั (พารามิเตอร์ 1) Object.คำ�สั่ง(พารามิเตอร์ 1, พารามิเตอร์ 2, ...) “ หลงั จากตรงน้ี เนือ้ ในบทเรียนอาจจะลดขั้นตอนการอธบิ ายการสรา้ ง Event ลง โดยให้ผู้เรยี นเขา้ ใจ ว่าการสรา้ งเงอ่ื นไขและ Action ทกุ ครง้ั จะเรม่ิ ต้นจากการเลอื ก “Object” ตามดว้ ยการเลือก “ค�ำ สั่ง” ซง่ึ อาจจะมี “พารามิเตอร”์ หลายตัวหรือจะไมม่ ีเลยก็ได้ โดยการอธบิ ายการสรา้ งเง่ือนไขและ Action จะถกู เขียนอยใู่ นรปู แบบ Object.คำ�ส่งั (พารามเิ ตอร์) ดังที่แสดงในรปู ที่ 6.39 System.EveryXScecond(3) System.CreateObject(UFO, 1, 700, random(30, 200)) System.EveryXScecond(3) >> System.CreateObject(UFO, 1, 700, random(30, 200)) รปู ท่ี 6.39 ตวั อย่างการเขียน Event เปน็ ภาษาโปรแกรม 81

3) เสร็จแลว้ ให้ Add Event อกี Event หนึ่ง ใหเ้ งือ่ นไขเปน็ System.Every X seconds ใส่ พารามิเตอร์ 30 Action เป็น System.Create Object กรอกค่าพารามเิ ตอร์ต่างๆ ดังนี้ • Object to create : คลกิ แล้วเลอื ก Object Shark • Layer : 1 • พกิ ัด X : 800 • พกิ ัด Y : 740 หมายเหตุ - ในกรณที ่มี ี Event ท่ใี ช้เงือ่ นไขเดียวกัน เราสามารถรวมใหอ้ ยใู่ นบลอ็ กเดยี วกันได้ โดย การ Add Action เพิม่ เติมที่ Event ใด Event หน่ึง แลว้ ลบอกี Event ท้งิ ซึ่งการลบ Event ทำ�ไดโ้ ดยการ คลกิ ขวาทสี่ ว่ นหวั (ซ้ายสดุ ) ของบลอ็ ก Event ท่จี ะลบ แลว้ เลอื กค�ำ สั่ง Delete รปู ที่ 6.40 System.EveryXScecond(5) > System.CreateObject(Shark, 1, 800, 140) 4) เมอื่ ทดลองรันเลเอาท์ Gameplay Layout เราจะพบว่าทุกๆ 3 วนิ าที Object UFO จะถูกสร้าง ข้ึนทพ่ี ิกัด x ท่ี 700 ส่วนพกิ ัด y จะถกู สุ่มข้นึ มาระหว่าง 30-200 และในทกุ 30 วนิ าท ี Object Shark จะถูก สรา้ งขนึ้ ท่ีพกิ ัด x800 y 140 ตามภาพด้านลา่ ง โดยทง้ั สอง Object จะถูกสรา้ งข้นึ เลเยอร์ 1 (Main Behind) หมายเหตุ - ค�ำ สัง่ random(a, b) หมายถงึ ให้โปรแกรมสุ่มค่าท่ีอยรู่ ะหวา่ งคา่ a กบั คา่ b ออกมา หน่ึงคา่ น่ันเอง รปู ที่ 6.41 แสดงต�ำ แหน่งการสร้าง Object UFO และ Shark 82

6.5 เกบ็ รายละเอยี ดงาน ทีน้ี ส�ำ หรบั การเคลอ่ื นท่ีของ Object ต่างดาว ยังมจี ุดทตี่ ้องเขียน Event เพ่อื แกไ้ ขข้อบกพร่อง อีกเลก็ น้อย 1) อยา่ งแรก Object UFO และ Object Shark ทเ่ี ราวางไวบ้ นพื้นทที่ �ำ งานจะถูกสร้างขน้ึ ณ ต�ำ แหน่งนนั้ ๆ ตอนเรม่ิ เกมดว้ ย ซ่งึ เราไม่ตอ้ งการเพราะเราได้สรา้ ง Event เพือ่ ควบคมุ การเกดิ ของ Object เหลา่ นไี้ ปแลว้ ดังน้ันเราจะเพมิ่ Add Event ท่ี Gameplay Event sheet เพ่อื ท�ำ ลาย Object ดงั กล่าวใน ตอนเร่มิ เกมดว้ ยเงอ่ื นไข System.OnStartOfLayout Action เป็น UFO.Destroy และ System.OnStart OfLayout Action เป็น Shark.Destroy รูปที่ 6.42 System.OnStartOfLayout() > UFO.Destroy() และ System.OnStartOfLayout() > Shark.Destroy() หมายเหตุ - ในกรณีทมี่ ี Event ที่ใชเ้ ง่ือนไขเดียวกัน เราสามารถรวมใหอ้ ยใู่ นบล็อกเดยี วกนั ได้ โดย การ Add Action เพ่ิมเตมิ ที่ Event ใด Event หนง่ึ แลว้ ลบอีก Event ทิ้ง ซ่งึ การลบ Event ทำ�ได้โดยการ คลิกขวาท่ีสว่ นหัว (ซ้ายสุด) ของบล็อก Event ที่จะลบ แลว้ เลอื กคำ�สั่ง Delete รปู ที่ 6.43 ตัวอย่างการเขยี น Event เป็นภาษาโปรแกรม 83

2) อยา่ งที่สอง Object UFO และ Object Shark จะไมถ่ ูกท�ำ ลายเมื่อเคลอ่ื นผา่ นพน้ จอทางด้าน ซ้ายไปซง่ึ น่นั หมายถงึ การส้ินเปลืองทรัพยากรหนว่ ยความจำ� ให้ Add Event ด้วยเง่อื นไข UFO.CompareX กรอกพารามิเตอรเ์ ปน็ Less or Equal -75 (ลบเจ็ดสบิ ห้า) Action เปน็ UFO.Destroy และ Add Event ดว้ ยเงื่อนไข Shark.CompareX กรอกพารามเิ ตอร์เปน็ Less or Equal -130 (ลบหนึง่ ร้อยสามสบิ ) Action เป็น Shark.Destroy รปู ที่ 6.44 UFO.CompareX(X <= -75) > UFO.Destroy() และ Shark.CompareX(X <= -130) > Shark.Destroy() 84

รูปที่ 6.45 แสดงต�ำ แหนง่ การทำ�ลาย Object UFO และ Shark ณ ตอนน้ี Object UFO และ Shark จะถกู เคลยี รใ์ นตอนเริม่ แรก และ Object ทั้งสองจะถกู ลบไป เม่ือเคล่ือนไปทางซา้ ยจนต�ำ แหน่งพกิ ัด X ของมันมีค่าน้อยกว่าคา่ ทีก่ ำ�หนดไว้ หมายเหตุ - ตำ�แหน่งของ Object จะอา้ งองิ จากตำ�แหนง่ Origin ของ Object ซง่ึ ค่าเดิมของมนั ก็ คอื จดุ กง่ึ กลางของภาพน่นั เอง 85



บทที่ 7 Collision

บทท่ี 7 Collision 7.1 ความสำ�คัญของการตรวจสอบการชนกันของ Object เกม Collision แปลตรงตัวก็คือ การชนกัน แต่ถา้ หากแปลตามความหมายของนักพฒั นาเกมแลว้ Colision กจ็ ะหมายถงึ การซ้อนทับกันของภาพ และความส�ำ คัญของการตรวจสอบการซ้อนทบั กันของภาพ ก็คือ การนำ�มาใช้เปน็ เง่อื นไขของ Event เพื่อใหเ้ กมทำ�ตามชดุ ค�ำ สั่ง เชน่ ถา้ ลกู กระสุนซอ้ นทับกบั ศตั รู เรา ก็จะเขียนค�ำ สัง่ ให้ศัตรสู ูญเสียพลงั ชีวติ เปน็ ตน้ ดงั น้นั การตรวจสอบการชนกนั จึงถอื เป็นส่ิงสำ�คัญในการ สรา้ งเกมแนว Action รูปที่ 7.1 การซ้อนทับของ Object รปู ทรงเรขาคณิต การเขียนเกมในยุคแรกๆ การตรวจสอบการชนกนั จะใช้สมการทางคณติ ศาสตร์เขา้ มาช่วย แต่ สำ�หรับการสรา้ งเกมด้วย Construct 2 โปรแกรมจะท�ำ การสร้าง Polygon Collision หรือพน้ื ทอี่ า้ งองิ ส�ำ หรับการตรวจสอบการชนกันให้กบั Object ประเภท Sprite ทกุ ๆ Object ใหโ้ ดยอัตโนมัติ (ภาพล่าง) ซ่ึง เราสามารถเขา้ ไปแกไ้ ขโพลีกอนดังกลา่ วไดใ้ นหนา้ ต่าง Edit Image แต่นีย่ ังไม่ใช่สิ่งจ�ำ เปน็ ส�ำ หรับการสร้าง เกม Alians Attack น้ี รปู ท่ี 7.2 Polygon Collision ท่ี Constuct 2 สร้างให้กบั Object Bullet และ Object UFO 88

7.2 เขียน Event เพ่ือจดั การการชนกนั ของ Object Bullet และ Object UFO ในบทเรียนท่ี 5 เราได้ทำ�การเพิ่มตวั แปร Health ให้กับ Object UFO, Shark, Bullet SuperBullet และ Object ไอเทมทง้ั 3 แลว้ ในโครงงานน้ี เราจะใชเ้ งื่อนไขการชนกนั Object Bullet กบั Object UFO เพือ่ ใหเ้ กิดคำ�สัง่ ลดคา่ Health ของ Object ดงั กลา่ ว ซึ่งถ้าค่า Health ของ Object ไหนเหลือ 0 หรอื นอ้ ยกว่า กจ็ ะถกู ท�ำ ลาย 1) ไปที่ Event Sheet: Gamaplay Event sheet ท�ำ การ Add Event โดยให้เงือ่ นไขเป็น Object Bullet.OnColisionWithAnotherObject แล้วเลือก Object เปน็ Object UFO รูปที่ 7.3 เงอื่ นไข Bullet.OnColisionWithAnotherObject(UFO) 2) Add Action เปน็ UFO.SubtractFrom ซึ่งหมายถึงการลดคา่ ตวั แปร ใหเ้ ราต้ังพารามิเตอรเ์ ปน็ ตวั แปร Health ค่าท่ีจะลดเปน็ 1 ( Object UFO) รปู ท่ี 7.4 Bullet.OnColisionWithAnotherObject(UFO) >> UFO.SubtractFrom(Health, 1) 3) Add Action ทบ่ี ลอ็ กเงือ่ นไขตัวเดมิ โดยแอดเป็น Bullet.SubtractFrom ต้ังพารามิเตอรเ์ ป็น ตวั แปร Health คา่ ที่จะลดเปน็ 1 ( Object Bullet) รูปที่ 7.5 Bullet.OnColisionWithAnotherObject(UFO) >> 89 UFO.SubtractFrom(UFO.Health, 1) และ Bullet.SubtractFrom(Bullet.Health, 1)

4) ตอนน้ีค่า Health ของทั้งสอง Object จะลดลงทีละ 1 เมื่อทัง้ สอง Object ชนกัน เราจะเขียน Event ขนึ้ มาอกี สอง Event เพอื่ ใหเ้ ห็นผลชัดเจนขนึ้ โดย Event แรกให้เงื่อนไขเปน็ Object Bullet. CompareInstanceVariable ตั้งค่าพารามเิ ตอร์ตวั แปรเปน็ ตวั แปร Health ของมนั เอง ตวั ด�ำ เนนิ การ เปรียบเทยี บ (Comparison) เปน็ Less or equal ใสค่ า่ เป็น 0 เพิ่ม Action เปน็ Bullet.Destroy() 5) และ Event ทสี่ องก็เป็นของ Object UFO ทีใ่ หเ้ งอื่ นไขเปน็ ถา้ UFO.Health นอ้ ยกว่าหรอื เทา่ กบั 0 ให้ Destroy ตวั เองทิง้ เช่นเดียวกัน เม่อื Add Event ทง้ั สองแลว้ ให้ทดลองรันเลเอาท์ จะเห็นไดว้ ่า ถ้ายงิ กระสนู ไปถกู UFO กระสนุ จะหายไป และ UFO ท่ีถกู ยงิ ครบ 2 ครั้ง จะหายไปเช่นเดียวกัน รูปที่ 7.6 Bullet.CompareInstanceVariable(LessOrEqual, 0) >> Bullet.Destroy() UFO.CompareInstanceVariable(LessOrEqual, 0) >> UFO.Destroy() รปู ที่ 7.7 ทดลองยงิ Object UFO 90

7.3 การเขยี น Event เพือ่ สมุ่ Object ไอเทม แม้วา่ Construct 2 สามารถสุม่ Object ใด Object หนึ่งจาก Object ทจี่ ัดกลุม่ ไว้ใน Family ได้ แต่ Family ก็ไม่สามารถใช้งานไดใ้ น Construct 2 version ฟรี ในโครงงานน้ีเราจงึ ใช้ฟงั ก์ชัน System. Random(0, 100) เพือ่ ให้ Object System ส่มุ ตัวเลข ระหว่าง 1-100 ขึ้นมา แลว้ ใชค้ ่าทสี่ ุม่ ได้เป็นเงอื่ นไข ในการส่มุ Object ไอเทม ซ่ึงวิธีการนีจ้ ะท�ำ ใหเ้ ราามารถก�ำ หนดโอกาสในการเกดิ ไอเทมต่างๆ ให้แตกต่างกัน ไดอ้ ีกดว้ ย (แสดงการท�ำ งานดังรูปท่ี 7.8) ถ้าสุม่ ไดน้ อ้ ยกวา่ 10 จริง สร้าง Object ItemTimePlus เทจ็ จรงิ สรา้ ง Object ItemRedCannon ถา้ สมุ่ ได้ระหว่าง 10-30 เท็จ จริง สรา้ ง Object ItemYellowCannon ถา้ สุม่ ไดร้ ะหว่าง 30-60 เท็จ รปู ที่ 7.8 Flow Chart แสดงการทำ�งานของเงอ่ื นไขการส่มุ Object 1) สรา้ งตวั แปร Global ซึง่ เปน็ ตัวแปรกลางเก็บไว้ใน Object System เพื่อให้ Object ใดๆ สามารถแกไ้ ขได้ การสรา้ งทำ�ได้โดยคลกิ ขวาบนที่ว่างของ Event Sheet เลือกค�ำ สง่ั Add global variable ต้ังชอ่ื เปน็ RandomItem ประเภท Number คา่ เร่มิ ต้นเป็น 0 รูปที่ 7.9 การสรา้ งตวั แปร RandomItem 91

2) ทำ�การส่มุ คา่ ตัวเลขจาก 0-100 ไปใหต้ ัวแปร RandomItem ตลอดเวลา โดยการ Add Action ท่ี Event System.EveryTick ที่เคยสรา้ งไว้แล้ว เลอื ก Object System.SetValue ใสต่ ัวแปรเป็น Random Item ใสค่ า่ เป็น Random(0, 100) รปู ที่ 7.10 Action System.SetVaule(RandomItem, Random(0, 100)) 3) ไปที่บล็อก Event UFO.Health <= 0 เราจะท�ำ การเพิ่ม Event ยอ่ ย (Sub-event) ซงึ่ จะเป็น Event ท่จี ะถูกตรวจสอบก็ตอ่ เม่ือเงอื่ นไข Event หลกั ของมัน (UFO.Health <= 0) เปน็ จรงิ ก่อน ให้เรา คลิกขวาที่ทีว่ า่ งด้านหน้า (หรอื ด้านลา่ ง) ของบล็อก Event ดงั กลา่ ว เลือกคำ�ส่ัง Add > Add Sub-event รปู ท่ี 7.11 การสร้าง Sub-event 4) ให้เงอ่ื นไขเป็น Object System.CompareVariable เลือกตัวแปรทีจ่ ะเปรียบเทยี บคา่ เปน็ ตวั แปร RandomItem ตวั ด�ำ เนินการเปรียบเทยี บเป็น Less or equal และค่าเปน็ 10 92

รปู ที่ 7.12 System.CompareVariable(RandomItem, LessOrEqual, 10) 5) สร้าง Event ย่อยขน้ึ มาอกี 1 ตวั คราวนใี้ ห้เง่ือนไขเป็น Object System.CompareVariable เลอื กตัวแปรทจ่ี ะเปรียบเทยี บคา่ เป็นตวั แปร RandomItem การเปรียบเทยี บเปน็ Greater than และค่า เป็น 10 6) คลิกขวาที่ Event ยอ่ ย System.RandomItem > 10 ที่เพง่ิ สร้างขึน้ มา เลือกคำ�ส่งั Add another condition ให้เงอ่ื นไขเป็น Object System.CompareVariable เลอื กตัวแปรที่จะเปรียบเทยี บคา่ เป็นตวั แปร RandomItem การเปรียบเทยี บเปน็ Less or equal และคา่ เป็น 30 รูปท่ี 7.13 ค�ำ สง่ั Add another condition 7) สร้าง Event ยอ่ ยขน้ึ มาอีก 1 ชุดด้วยวธิ กี ารเดยี วกนั โดยใหเ้ ง่ือนไขเป็น System.RandomItem > 30 และ System.RandomItem <= 60 ได้ผลลพั ธด์ งั รูปที่ 7.14 รูปที่ 7.14 ถ้า UFO.Health <= 0 เงือ่ นไขของทัง้ สามบลอ็ กดา้ นล่างจะถกู ตรวจสอบ ถา้ เงื่อนไขในบล็อกใดเปน็ จรงิ (เชน่ RandomItem = 11 จะท�ำ ให้เงือ่ นไขของบล็อกทส่ี องเป็นจรงิ ) เกมจะท�ำ ตาม Action ของบล็อกนั้นๆ 93

8) ทำ�การแอด Action ให้แต่ละ Event ย่อย โดยเลือก Object UFO.SpawnAnotherObject แลว้ เลือกไอเทม ItemTimePlus, ItemRedCannon และ ItemYellowCannon ตามลำ�ดบั (ทกุ Action ตงั้ ค่า Layer เป็น 1) รปู ที่ 7.15 เพม่ิ Action ให้แตล่ ะบล็อก UFO.SpawnAnotherObject(ItemTimePlus) UFO.SpawnAnotherObject(ItemRedCannon) และ UFO.SpawnAnotherObject(ItemYellowCannon) 9) ทดลองรนั เลเอาท์ Gameplay Layout จะเห็นวา่ เมอื่ ไดท้ ่ี UFO มีค่า Health น้อยกว่าหรอื เท่ากบั 0 กจ็ ะเข้าสู่เงอื่ นไขการสุ่ม Object ไอเทมแล้ว แตไ่ อเทมกลบั ลอยไปยังทิศทางเดยี วกับ UFO ดังนน้ั เราจึงตอ้ งเพิม่ Action เพื่อแกไ้ ขจุดนี้อีก รปู ท่ี 7.16 ไอเทมจะลอยไปทางซา้ ย ซึ่งนนั่ ไมใ่ ชส่ ิ่งท่ีเราต้องการ 94

หมายเหตุ - สาเหตุทเ่ี ง่ือนไขหน่งึ ใชต้ วั เปรยี บเทยี บเป็น Less or equal 10 แต่อีกเงอ่ื นไขหนึ่งไม่ ได้ใช้ Greater or equal 10 กเ็ พราะว่า ถา้ คา่ ที่ส่มุ ได้เปน็ 10 กจ็ ะทำ�ใหค้ ำ�สงั่ ของทั้งสองเงอื่ นไขท�ำ งานทั้งคู่ และไอเทมจะโผลม่ าท้งั สองไอเทมน่ันเอง 10) ทำ�การเพม่ิ Action ใหก้ บั ทั้งสาม Action โดยเลอื ก Object เป็นไอเทมน้นั ๆ .SetAngle ต้ังค่า เปน็ 90 รูปที่ 7.17 เพม่ิ Action ให้แต่ละบล็อก ItemTimePlus.SetAngle(90) ItemRedCannon .SetAngle(90) และ ItemYellowCannon .SetAngle(90) ตามล�ำ ดบั 11) ทดลองรนั เลเอาท์ จะเห็นว่าไอเทมจะหล่นลงดา้ นล่างแลว้ รปู ที่ 7.18 ผลลพั ธก์ ารส่มุ Object ไอเทม 95

7.4 การเขียน Event เพือ่ ใหผ้ ูเ้ ล่นสามารถเปลย่ี นอาวธุ ได้ ในเกม Alians Attack น้ี ผู้เลน่ จะมอี าวุธสองชนดิ คือ Bullet และ SuperBullet โดยวธิ เี ปลย่ี น อาวุธกค็ ือการยิงไอเทม ItemYellowCannon ส�ำ หรบั อาวุธ Bullet และยิงไอเทม ItemRedCannon ส�ำ หรับ SuperBullet และสง่ิ ทีเ่ ป็นเง่ือนไขในการเลอื กวา่ ผู้เล่นจะยงิ Bullet และ SuperBullet กค็ อื ตวั แปร โกลบอลทีเ่ ราสร้างข้นึ มาใหมน่ ั่นเอง 1) ท่ี Event Sheet : Gameplay Event sheet ใหเ้ พ่ิมตัวแปร Global Variable ตง้ั ชอื่ วา่ Weapon ประเภท Number คา่ เริ่มต้นเปน็ 0 รปู ท่ี 7.19 เพิ่มตวั แปร Weapon ประเภท Number คา่ เรมิ่ ต้นเปน็ 0 2) ไปท่บี ล็อก Event OnLeftButtonClicked สร้าง Sub-event ขน้ึ มาสอง Event ย่อย โดย Event ย่อยแรกใช้เง่อื นไขว่า System.CompareVariable (Weapon=0) และ Event ยอ่ ยท่ีสองใช้เงือ่ นไข ว่า System.CompareVariable (Weapon=1) รปู ท่ี 7.20 เพมิ่ Sub-event โดยใช้เง่อื นไข System.CompareVariable (Weapon=0) และ System.CompareVariable (Weapon=1) 3) ลบ Action Cannon.SpawnObject(Bullet, 1, 1) ของ Event หลักออกโดยการคลกิ ขวาแลว้ เลือก Delete แล้วแอด Action ท่ี Event ยอ่ ยทัง้ สองแทน คือ Cannon.SpawnObject( Object Bullet, Layer 1, Image point 1) สำ�หรบั Event ยอ่ ยแรก และ Cannon.SpawnObject( Object SuperBullet, 1, 1) ในขน้ั ตอนน้ี การเลอื กอาวุธจะถูกควบคุมโดยตวั แปร Weapon แลว้ 96