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

หนงั สือเรียนรายวชิ า การสรา้ งเกม ๒ ช้นั มัธยมศึกษาปีที่ ๖ โครงการบม่ เพาะและพัฒนาอาชีพเชงิ บรู ณาการ ดา้ นเทคโนโลยสี ารสนเทศและสอ่ื สาร ภายใต้โครงดารปฏิรปู หลกั สูตรการศกึ ษา พทุ ธศักราช ๒๕๕๕

ค�ำ นำ� สำ�นักงานคณะกรรมการการอุดมศกึ ษา กระทรวงศกึ ษาธกิ าร ไดม้ ขี อ้ ตกลงความรว่ มมอื กับมหา วิทยาลยั พะเยา ภายใตโ้ ครงการปฏริ ปู หลกั สูตรการศกึ ษาแห่งชาติ ไดใ้ หม้ กี ารพัฒนาหลักสูตรและแผนการ สอน เอกสารประกอบการสอน คมู่ อื ครู ที่บูรณาการความรดู้ า้ นเทคโนโลยีสารสนเทศและการสื่อสารกับ กล่มุ อาชีพ เพอื่ ใช้ประกอบการเรยี นการสอนของสถานศึกษาที่เข้าร่วมโครงการ เอกสารประกอบการสอนรายวชิ า การสรา้ งเกม ๒ มเี นอื้ หาสาระเก่ยี วกับ การสร้างเกมดว้ ย โปรแกรม Construct 2 ได้แก่ Platform Game การออกแบบ Platform Game ฉากหลงั ของ Platform Game การเคล่ือนทแี่ บบ Sine และ Rotate Frame Animations การจดั การชุด Animation การจดั การ ตัวละครของผู้เล่น ระบบ AI การจัดการการแสดงผล HUD บนเกม Platform และ การจัดการการเชอื่ มโยง ระหวา่ ง Layout ผ้จู ัดท�ำ เลม่ คู่มอื ครหู วังเป็นอยา่ งย่งิ วา่ คูม่ อื เลม่ นี้จะเปน็ แนวทางให้ครผู ู้สอนใชเ้ ปน็ แนวทางในการ วางแผนการจัดการเรียนรู้ให้บรรลุวัตถุประสงค์ท่ีต้ังไว้และสามารถนำ�ไปจัดการเรียนการสอนตามความ เหมาะสมและความพร้อมของโรงเรียน ซึ่งจะเป็นประโยชนต์ อ่ ผู้เรียนและผู้ที่เกี่ยวข้อง เพ่ือพัฒนาทักษะ กระบวนการเรียนรใู้ หส้ ามารถน�ำ ไปประยุกต์ใชค้ วามรู้ได้อยา่ งมปี ระสทิ ธิภาพ ขอขอบคุณบุคคลและหน่วย งานตา่ งๆ ทมี่ สี ว่ นเกยี่ วขอ้ งในการจัดท�ำ ไว้ ณ โอกาสนี้ ผ้จู ดั ท�ำ อรรถชยั ดาดี 12 กมุ ภาพันธ์ 2557

สารบัญ บทท่ี 1 Platform Game 1 1 Platform Game 2 1 2 Behavior พ้นื ฐานของเกม Platform 3 1 3 ทดลองสร้างเกม Platform 4 บทที่ 2 การออกแบบ Platform Game 2 1 การออกแบบเกม Bunny Kick 10 2 2 ออกแบบตัวละคร 12 2 3 ออกแบบ Layout 14 บทที่ 3 ฉากหลงั ของ Platform Game 3 1 ฉากในเกมแพลตฟอร์ม 18 3 2 เริม่ ตน้ สร้างเกม Bunny Kick 20 3 3 สร้างฉากให้เลเอาท์ Level 1 Layout 22 3 4 เพิ่ม Object แพลตฟอร์ม 27 3 5 สัง่ ใหห้ น้าจอเกมโฟกสั ไปท่ี Object ผ้เู ลน่ 29 3 6 สร้างความรสู้ กึ แบบ 3 มิติ บนเกม 2 มิติ 30 บทท่ี 4 การเคล่ือนท่ีแบบ Sine และ Rotate 4 1 เมือ่ พ้ืนเคล่อื นไหวได้ 32 4 2 สรา้ งวตั ถุแพลตฟอรม์ ท่เี คลอ่ื นไหวได้ 33 บทที่ 5 Frame Animations 5 1 ภาพเคล่อื นไหว 2 มติ ิ 36 5 2 จากเฟรมสภู่ าพเคลอ่ื นไหวบน Construct 2 37 5 3 Collision 40 5 4 ก�ำ หนดพืน้ ที่ Collison 41 บทที่ 6 การจัดการชดุ Animation 6 1 การจดั การชดุ Animation 46 6 2 เพมิ่ ชดุ Animation ใหก้ บั Object Bunny 47 6 3 เขียน Event ควบคมุ ชุด Animation 50 6 4 เขยี น Event กลบั ด้านชุด Animation 56

บทท่ี 7 การจัดการตวั ละครของผ้เู ลน่ 7 1 จัดการตวั ละครของผู้เล่นกบั ไอเทม 60 7 2 จดั การตัวละครของผูเ้ ล่นเมอ่ื Live มากกวา่ 2 61 7 3 จัดการตวั ละครของผูเ้ ล่นใหส้ ามารถเตะได้ 64 7 4 จัดการตวั ละครของผ้เู ลน่ เมอื่ ได้รบั บาดเจบ็ 70 บทท่ี 8 ระบบ AI 8 1 ความส�ำ คญั ของระบบ AI 74 8 2 เขียน Event เพื่อจดั การ AI ของ Object GreenTurtle 75 8 3 เขียน Event เพื่อจัดการการตอบโต้ระหว่างผ้เู ล่นกบั Object GreenBullet 77 8 4 เขยี น Event เพือ่ ให้มีการสุ่มไอเทมหลงั จัดการกบั Object GreenTurtle 81 8 5 เขียน Event เพ่อื จัดการ AI ของ Object Boss 83 8 6 เขยี น Event เพื่อจัดการการตอบโต้ระหวา่ งผเู้ ล่นกับ Object Boss 86 บทที่ 9 การจัดการการแสดงผล HUD บนเกม Platform 9 1 การจัดการการแสดงผล HUD บนเกม Platform 90 บทที่ 10 การจดั การการเชอ่ื มโยงระหว่าง Layout 10 1 การจัดการการเชอื่ มโยงระหว่าง Layout 94 10 2 การจดั การการเช่อื มโยงระหว่าง Layout ของเลเอาท์ Main Layout 95 10 3 การจัดการการเชอ่ื มโยงระหว่าง Layout ของเลเอาท์ Level 1 Layout 97 10 4 การจัดการการเชื่อมโยงระหวา่ ง Layout ของเลเอาท์ Level 2 Layout 98 10 5 การจัดการการเชอื่ มโยงระหว่าง Layout ของเลเอาท์ You Won Layout และ Game 99 Over Layout

บทท่ี 1 Platform Game

บทที่ 1 Platform Game 1.1 Platform Game Platform หมายถึงแท่นทยี่ ่นื ออกมาให้เราเหยียบ หรอื ยนื บนนัน่ ดังน้นั Platform Game จึงหมาย ถึงเกมทผี่ ูเ้ ล่นจะตอ้ งควบคุมตวั ละครของเกมใหว้ งิ่ ไปบน Platform หรือกระโดดจาก Platform หนง่ึ ไปยัง อีก Platform หน่งึ โดยไมต่ กลงไปด้านล่าง บางเกม ผเู้ ล่นจะตอ้ งพบกับอุปสรรคตา่ งๆ เช่นตัวละครที่เปน็ ศตั รู กับดกั หรอื ปรศิ นาท่ีต้องแกไ้ ข เพื่อท่จี ะผา่ นไปยงั จุดหมายของเกมให้ได้ โดยสว่ นใหญ่แลว้ Platform Game มักจะเป็นมุมมองจากดา้ นข้าง (2 มติ )ิ ซง่ึ Construct 2 มี ปลัก๊ อนิ มากมายทสี่ ามารถช่วยสรา้ งเกมประเภทนีไ้ ดง้ ่ายๆ โดยมี Behavior พืน้ ฐานทจี่ ำ�เปน็ ต่อการสร้างเกม ประเภทนี้ ไดแ้ ก่ Platform Movement, Solid และ Jump-thru รปู ท่ี 1.1 การท�ำ งานของ Behavior Platform Movement และ Behavior Solid 2

1.2 Behavior พื้นฐานของเกม Platform 1) Platform Movement ทำ�ใหว้ ตั ถุสามารถกระโดด หรอื วง่ิ ไปบนวัตถอุ ่นื ๆ ทม่ี ี Behavior Solid หรอื Jump thru ได้ 2) Solid ท�ำ ให้วัตถุอนื่ ๆ ท่ีมี Platform Movement ทะลุผา่ นไม่ได้ 3) Jump thru ทำ�ใหว้ ตั ถุอ่นื ๆ ท่มี ี Platform Movement ทะลผุ า่ นจากด้านใตไ้ ดเ้ ทา่ น้ัน รปู ที่ 1.2 การท�ำ งานของ Behavior Platform Movement และ Behavior Jump-Thru 3

1.3 ทดลองสรา้ งเกม Platform 1) เร่ิมต้นสร้าง Project เปล่า โดยการเปดิ โปรแกรม Construct 2 แล้วเลอื กคำ�สัง่ New Project จากหนา้ Start Page หรอื Menu File จากนั้นสรา้ ง Project เปล่าโดยการเลือกหัวขอ้ New empty Project แล้วคลิก Open รูปท่ี 1.3 สร้าง Project เปล่าโดยการเลอื กหวั ข้อ New empty project 2) ท่ี Layout 1 ใหเ้ ราลากไฟลภ์ าพ jump-thru.png Solid.png และ Player.png จากหน้าต่าง Explorer ลงไปวางบนพ้นื ที่ทำ�งานทีละภาพ ไฟลภ์ าพทง้ั 3 เราจะใช้แทนสง่ิ ต่างๆ ในเกมแพลตฟอร์ม • jump-thru.png แทนวัตถุทีม่ ี Behavior Jump-thru • Solid.png แทนวัตถทุ ม่ี ี Behavior Solid • Player.png แทนวตั ถทุ ีม่ ี Behavior Plattorm 4 รปู ท่ี 1.4 ลากไฟลภ์ าพลงไปวางบนพ้นื ทท่ี �ำ งานทีละภาพ

3) เลือก Object Player (สีแดง) สังเกตทีห่ นา้ ต่าง Properties ทางด้านซ้ายจะแสดงคณุ สมบตั ิ ของ Object Player ให้คลกิ ที่ Add/edit Behavior จะปรากฎหน้าตา่ ง Player Behaviors รูปท่ี 1.5 หนา้ ต่าง Properties ทางด้านซ้ายแสดงคุณสมบัตขิ อง Object Player 4) ในตอนน้ี Object Player ยงั ไมม่ ี Behavior ใดๆ ใหเ้ ราคลิกท่ไี อคอนบวก (Add new) เพอ่ื เข้าสู่ ขน้ั ตอนการเพิ่ม Behavior ใหก้ ับ Object Player รูปท่ี 1.6 หนา้ ต่างแสดง Behavior ทั้งหมดของ Object Player 5

5) หน้าตา่ ง Add Behavior จะปรากฎข้ึนมา ให้เราเลอื ก Platforms และคลกิ ท่ีปมุ่ Add เปน็ การ เสร็จส้ินขน้ั ตอนการเพม่ิ Platform Behavior ใหก้ บั วตั ถุ Player รูปที่ 1.7 เพ่มิ Behavior ให้กับ Object Player (สีแดง) 6) เพม่ิ Behavior ใหก้ บั อีกสอง Object ท่เี หลอื ดว้ ยวิธีเดียวกนั รูปที่ 1.8 เพ่ิม Behavior Solid ใหว้ ตั ถุ Solid (สีดำ�) รูปที่ 1.9 เพ่ิม Behavior Jump-thru ใหว้ ัตถุ Jumpthru (สีฟ้า) 6

7) ทำ�การยดื และคัดลอกวตั ถุ Solid กบั Jumpthru น�ำ ไปวางภายในบริเวณเสน้ ประตามชอบ เมอ่ื จดั แจงเสรจ็ แลว้ ใหท้ ดลอง Run Layout เพ่อื ดผู ลงานของเราบนบราวเซอร์ รูปท่ี 1.10 ทดลองจัดวางและรันเลเอาท์ 8) ทดสอบการการควบคุมวตั ถุ Player โดยใช้ปุ่มลูกศรต่างๆ บนคยี บ์ อร์ด จะเห็นไดว้ ่า Player จะ สามารถเคลอ่ื นไหวและกระโดดตามการควบคมุ จากคียบ์ อรด์ สามารถยืนบนวตั ถุ Solid และ Jumpthru ได้ และสามารถกระโดดทะลุวัตถุ Jumpthru จากด้านล่างได้ รปู ที่ 1.11 ทดสอบการท�ำ งานของ Behavior พน้ื ฐานของเกมแพลตฟอร์ม 7



บทท่ี 2 การออกแบบ Platform Game

บทที่ 2 การออกแบบ Platform Game 2.1 การออกแบบเกม Bunny Kick การออกแบบเกมแพลตฟอร์มมีหลายแนวทาง ท้ังการเริม่ ต้นจากการออกแบบตัวละครกอ่ น หรอื การเริ่มตน้ จากเกมเพลย์ก่อน ส�ำ หรบั เกม Bunny kick จะเร่มิ จากการออกแบบเกมเพลยท์ ่เี ข้าใจงา่ ย และมี ความซบั ซอ้ นในระดับหนง่ึ เพือ่ ใหผ้ ู้เรียนสามารถนำ�ไปประยุกต์และพัฒนาเกมของตนเองตอ่ ไป 1) Gameplay เกม Bunny kick จะเปน็ เกมแนว Platform กระตา่ ยไลเ่ ตะเตา่ ผเู้ ล่นจะได้บงั คบั ตัวละครกระต่าย ทช่ี ือ่ Bunny เดิน กระโดด และผ่านศัตรูไปยังเสน้ ชัย ซ่ึงมีหัวหนา้ เตา่ รออยู่ มไี อเทมส�ำ หรับเกบ็ เพม่ิ คะแนน และไอเทมสำ�หรบั เพ่มิ พลังชวี ิต และผเู้ ล่นตอ้ งมีพลงั ชวี ิตถึงระดับหนึง่ ถึงจะสามารถบงั คบั ใหต้ ัวละครเตะได้ รปู ที่ 2.1 ตวั ละครและรายละเอยี ดต่างๆ รูปที่ 2.2 Bunny 2) Character 2.1 Bunny • เปน็ Player ทีผ่ เู้ ลน่ ควบคมุ • ถา้ มพี ลงั ชวี ิตมากกวา่ 2 ขึ้นไป จะมแี ขนขางอกออกมา แต่ถ้า น้อยกวา่ หรอื เทา่ กับ 2 จะมแี ค่ส่วนหวั • ถา้ มแี ขนขา จะสามารถเตะได้ • หากชนกับเต่าเขยี ว (ทีย่ งั มีชีวติ อย)ู่ พลังชีวิตจะลดลง 1 คะแนน • หากกระโดดทับเต่าเขยี ว เต่าเขยี วจะตายเหลอื แตก่ ระดอง • ถ้าเตะเต่าเขียว (ไมว่ า่ จะตายแล้วหรอื ว่ามชี ีวิตอยู่) เต่าเขยี วจะ ตายและปลิว • เต่าเขียวที่ปลิวแลว้ ถ้าไปถกู เต่าเขยี วตวั อนื่ (ไม่วา่ จะตายแล้ว หรือว่ามชี วี ิตอยู่) เตา่ เขียวตวั ทีถ่ ูกชนจะหายไป 10

2.2 พ้นื • Solid ใช้เป็นพื้นหิน • Jump-thru ใช้เป็นเมฆ ผ้สู ามารถกดปุ่มลูกศรลง เพือ่ ลงจากเมฆได้ • เมฆบางก้อน อาจขยบั ไปมาได้ รปู ท่ี 2.3 พืน้ Solid และ Jump-thru รูปที่ 2.4 Green Turtle 2.3 เตา่ เขียว 2.4 ไอเทม • เป็นศตั รเู ดินไปเดินมาบนพ้ืน • ดาว ให้คะแนน 200 คะแนน • ถ้าถูกเหยยี บ จะอยู่นิ่งๆ • แครอท ให้พลังชีวติ 1 คะแนน • ถา้ ตาย จะสุม่ ไอเทมดาว หรือ แครอทให้ รูปที่ 2.5 Star Item & Carrot Item 2.5 หวั หน้าเตา่ • รออยทู่ ี่ Level 2 (อีก Layout ) • โผลเ่ ฉพาะสว่ นหวั ออกมาโจมตี • โจมตโี ดยการปลอ่ ยกระดองเต่าสแี ดง • ถา้ ผ้เู ล่นแตะถกู กระดองเตา่ สแี ดง พลงั ชีวิตจะลดลง 2 คะแนน • ผ้เู ลน่ โจมตีหวั หนา้ เตา่ ดว้ ยการเตะ หรอื เตะเตา่ เขยี วใส่ • เมอ่ื โจมตีครบ 10 ครง้ั หัวหนา้ เตา่ จะตาย ถอื เปน็ การชนะเกมน้ี รปู ที่ 2.6 Boss Turtle & Red Turtle 11

3) Storytelling รปู ที่ 2.7 Storytelling “Bunny kick all turtles for no reason” เน่อื งจาก Bunny kick จะเป็นเกมขนาดเลก็ ทส่ี ามารถเล่นจบไดใ้ นระยะเวลาสัน้ ๆ Story telling จงึ ไม่จำ�เป็นตอ้ งยดื ยาว เพียงแค่บอกให้รู้วา่ ท�ำ ไม Bunny ถงึ ตอ้ งไลเ่ ตะเหลา่ เตา่ กเ็ พยี งพอแลว้ 2.2 ออกแบบตวั ละคร ออกแบบตวั ละคร และวาดภาพท่าทางตา่ งๆ ส�ำ หรับใช้ในเกม รูปท่ี 2.8 Bunny ขณะมีแตห่ ัว และขณะได้รบั บาดเจ็บ 12

รปู ท่ี 2.9 Bunny ขณะก�ำ ลงั ยนื เฉยๆ ขณะไดร้ ับบาดเจบ็ และขณะกระโดด รปู ที่ 2.10 Bunny ขณะเตะ และขณะกระโดดเตะ รปู ท่ี 2.11 Bunny ขณะก�ำ ลังเดิน รปู ท่ี 2.12 Green Turtle ขณะมชี ีวติ และหลังจากตายแลว้ 13

2.3 ออกแบบ Layout ออกแบบหนา้ เลเอาท์ต่างๆ ของเกม ต้งั แต่หนา้ เมนู (Main Menu Layout) ซงึ่ มีปุม่ Play เพอื่ ไปยัง เลเอาทถ์ ัดไป รปู ที่ 2.13 Main Menu Layout หน้าเลเอาท์ของเกมด่านแรก (Level 1 Layout) เป็นภาพรวมของทงั้ ดา่ น วางแผนให้เห็นถงึ เส้น ทาง และอปุ สรรค ตั้งแตจ่ ุดเร่มิ ตน้ ไปจนถงึ เส้นชัย (ขวาบน) 14 รูปที่ 2.14 Level 1 Layout

เม่อื ไปถึงเส้นชยั แล้ว เกมจะพาผเู้ ล่นไปยงั ด่านถัดไป (Level 2 Layout) เป็นเลเอาท์ท่ีมหี วั หนา้ เตา่ ปรากฏตวั และผู้เลน่ จะตอ้ งเอาชนะหัวหน้าเต่าใหไ้ ด้ รูปที่ 2.15 Level 2 Layout หากเอาชนะหัวหนา้ เต่าไดแ้ ลว้ เกมก็จะพาผู้เลน่ ไปทห่ี นา้ You Won (Game Win Layout) พร้อม แสดงคะแนน แต่ถา้ ผู้เล่นแพ้ เกมจะพาผูเ้ ลน่ ไปท่หี น้า Game Over (Game Over Layout) รปู ที่ 2.16 Game Win Layout และ Game Over Layout 15



บทท่ี 3 ฉากหลงั ของ Platform Game

บทท่ี 3 ฉากหลังของ Platform Game 3.1 ฉากในเกมแพลตฟอร์ม สง่ิ ที่เพิ่มข้ึนในการสร้างฉากของเกมแพลตฟอร์มก็คือ ขนาดของเลเอาท์ทอ่ี าจจะมีขนาดใหญก่ ว่า พน้ื ท่ีแสดงผล เพือ่ ให้ผู้เล่นได้มพี ้ืนทีส่ ำ�หรบั การกระโดดไปมามากขึน้ โดย Construct 2 จะมี Behavior ท่ี ช่วยให้จอภาพขยบั ตามตำ�แหนง่ ของตวั ละครได้ ท�ำ ใหผ้ ู้เล่นเหน็ ตวั ละครของตนเองอยกู่ ลางจอตลอดเวลา ซง่ึ สง่ิ ทีเ่ ราต้องกงั วลก็คอื การสิ้นเปลอื งทรพั ยากรหนว่ ยความจำ�ของเกม (Resource) ฉากของเกม แพลตฟอร์มจึงไมค่ วรใช้ไฟล์ขนาดใหญ่ไฟล์เดียว แต่ควรใชภ้ าพเดมิ หรอื ไฟลภ์ าพเล็กๆ เรยี งต่อกันเปน็ ตาราง หรือที่เรียกวา่ Tile background น่นั เอง รปู ท่ี 3.1 แสดงบลอ็ กของภาพ (ภาพบน) และการน�ำ มาเรียงต่อกันภายในเกม (ภาพลา่ ง) เพอื่ การประหยัดทรพั ยากรหนว่ ยความจ�ำ ของเครอ่ื ง 18

รปู ที่ 3.2 แสดงการใชภ้ าพเดมิ ในการสรา้ งฉากภายในเกม Rayman รูปที่ 3.3 แสดงตวั อย่างการใชภ้ าพเดมิ ในการสรา้ งฉากภายในเกม 19

3.2 เรมิ่ ต้นสรา้ งเกม Bunny Kick 1) ให้เราสรา้ ง Project เปล่าขนึ้ มา โดยการไปที่เมนู > New เลอื ก New empty project แล้วคลิก Open รปู ที่ 3.4 สร้าง Project เปล่า 2) ทห่ี น้าต่าง Project ทางดา้ นขวา คลิกขวาทีโ่ ฟลเดอร์ New Project เลอื ก Rename และเปลี่ยน ชอ่ื เปน็ Bunny Kick • คลกิ ขวาทเ่ี ลเยอร์ Layout 1 เลอื ก Rename และเปล่ยี นชือ่ เปน็ Level 1 Layout • คลิกขวาทเี่ ลเยอร์ Event Sheet 1 เลอื ก Rename และเปล่ยี นชอ่ื เปน็ Gameplay Event sheet หมายเหตุ - นอกจากการเลือกค�ำ สง่ั Rename จากการคลกิ ขวาแล้ว เรายังสามารถแก้ไขชือ่ ได้ดว้ ย การกดปุ่ม F2 บนคียบ์ อรด์ หรือคลกิ ท่เี ครอ่ื งหมายดินสอจากเมนูด้านบนในบางกรณกี ไ็ ด้ 20 รูปที่ 3.5 เปลย่ี นชอ่ื Project เลเอาท์ และ Event sheet

3) ทหี่ นา้ ตา่ ง Layer ทางดา้ นขวา คลกิ ทีเ่ ครอ่ื งหมาย + สามคร้งั เพ่อื สร้างเลเยอร์ขึ้นมาอกี สามช้ัน เปลยี่ นชอื่ เลเยอร์ทั้งสามเปน็ HUD, MAIN TOP, MAIN BOTTOM และ BG ตามล�ำ ดบั รปู ท่ี 3.6 เพิม่ และเปล่ยี นชื่อเลเยอร์ในเลเอาท์ Level 1 Layout 4) กดปมุ่ Ctrl+S บนคยี ์บอร์ด แลว้ บนั ทกึ ไฟล์ Project ในชอื่ Bunny Kick รปู ท่ี 3.7 บนั ทึกไฟล์ Project ในชอ่ื Bunny Kick 21

3.3 สร้างฉากให้เลเอาท์ Level 1 Layout 1) ที่หน้าตา่ ง Properties ทางด้านซ้าย แกไ้ ข Layout size ให้เป็น 4000, 3000 รปู ท่ี 3.8 แก้ไข Layout size ใหเ้ ปน็ 4000x3000 พกิ เซล 2) คลกิ ทเ่ี ลเยอร์ BG เพอ่ื ใหม้ ั่นใจว่าเราก�ำ ลังท�ำ งานอยูใ่ นเลเยอร์ BG จากนั้นจึงคลิกบนทวี่ า่ ง บนพน้ื ท่ที �ำ งาน (Level 1 Layout) รปู ที่ 3.9 คลกิ เพื่อเลอื กท�ำ งานท่ีเลเยอร์ BG 3) คลกิ ขวาท่พี ืน้ ทท่ี �ำ งาน (Level 1 Layout) เลอื ก Insert new object หรอื ดบั เบล้ิ คลิกทพี่ ้นื ท่ี ท�ำ งานเพือ่ เปดิ หน้าตา่ ง Insert New Object ขนึ้ มา รปู ท่ี 3.10 Insert new object 22

4) ทีห่ น้าต่าง Insert New Object ใหเ้ ลอื ก Tiled Background แล้วคลิก Insert หน้าตา่ งดงั กลา่ ว จะถูกปิดไป ใหเ้ ราคลกิ บนพ้ืนที่ทำ�งานเพื่อวาง Object ลงไป หนา้ ตา่ ง Edit image: TiledBackground จะ ปรากฎข้ึน รปู ท่ี 3.11 หน้าต่าง Insert New Object 5) ที่หน้าตา่ ง Edit image: TiledBackground ใหเ้ ราคลิกทีไ่ อคอนรูปแฟ้ม (Load an Image frome a file) หนา้ ตา่ ง Open จะปรากฎข้นึ มา รูปที่ 3.12 หน้าตา่ ง Edit image: TiledBackground 23

6) ที่หนา้ ตา่ ง Open ให้เลือกไฟล์ TiledBackground.png แล้วคลกิ Open รปู ที่ 3.13 ที่หนา้ ตา่ ง Open ให้เลือกไฟล์ TiledBackground.png 7) ปิดหน้าต่าง Edit image: TiledBackground เพอ่ื กลับมาทีพ่ ื้นทที่ ำ�งาน จะเหน็ Object Tiled Background ปรากฏขึ้น 24รูปที่ 3.14 ภาพ TiledBackground.png จะปรากฏบนหนา้ ต่าง Edit image: TiledBackground

รปู ท่ี 3.15 ภาพ TiledBackground.png จะถกู เรียงเต็ม Object TiledBackground 8) คลิกที่ Object TiledBackground ไปทีห่ นา้ ตา่ ง Properties ทางด้านซา้ ย ขยาย Object ให้ เตม็ พน้ื ทโ่ี ดยการ • ต้งั คา่ Position ให้เปน็ 0, 0 • ตั้งค่า Size ให้เป็น 4000, 3000 (เทา่ กบั ขนาดของ Layout Level 1 Layout) รปู ที่ 3.16 ตงั้ คา่ Position และ Size ให้ Object TiledBackground 25

9) ท่ีหนา้ ต่าง Layer ทางด้านขวา คลิกท่ีขวาท่เี ลเยอร์ BG เลอื ก Lock หรอื คลิกทีไ่ อคอนรปู กุญแจ (Toggle layer locked) เพอื่ lock ไม่ให้มกี ารเคล่ือนยา้ ย Object ในเลเยอร์ BG อกี รูปที่ 3.17 การ lock เลเยอร์ 10) ทดลองรันเลเอาทเ์ พอื่ ดผู ลงานบนบราวเซอร์ จะเห็นไดว้ ่าภาพ TiledBackground จะถูกน�ำ มา เรยี งตอ่ ๆ กันเตม็ พน้ื ทแ่ี ล้ว รปู ท่ี 3.18 ภาพ TiledBackground.png ถกู น�ำ มาเรยี งเตม็ พนื้ ท่ี (Object TiledBackground) 26

3.4 เพิม่ Object แพลตฟอร์ม 1) ทหี่ นา้ ต่าง Layers คลกิ ท่เี ลเยอร์ MAIN BOTTOM เพือ่ เลือกท�ำ งานบนเลเยอร์ดงั กล่าว รูปท่ี 3.19 คลกิ เพื่อเลอื กทำ�งานท่เี ลเยอร์ MAIN BOTTOM 2) ลากไฟลภ์ าพ jump-thru.png Solid.png และ Player.png เขา้ มาวางบนพ้นื ที่ท�ำ งานทีละภาพ เพือ่ แทนแพลตฟอรม์ Object ตา่ งๆ รูปที่ 3.20 ลากไฟลภ์ าพ jump-thru.png Solid.png และ Player.png เข้ามาวางบนพ้นื ที่ท�ำ งาน 3) เพ่ิม Behavior ใหแ้ ต่ละ Object ดังน้ี (วิธีการเช่นเดยี วกับในบทท่ี 1) • เพมิ่ Behavior Platform ให้วตั ถุ Player (สแี ดง) • เพิ่ม Behavior Solid ให้วตั ถุ Solid (สีด�ำ ) • เพม่ิ Behavior Jumpthru ใหว้ ตั ถุ Jumpthru (สฟี ้า) รูปที่ 3.21 เพิ่ม Behavior ใหแ้ ต่ละ Object 27

4) ทดลองจัดวาง Object ตา่ งๆ ภายในพน้ื ท่เี สน้ ประ (ซา้ ยบนของเลเอาท)์ รปู ที่ 3.22 ทดลองจัดวาง Object ตา่ งๆ ภายในพืน้ ท่ีเส้นประ 5) ทดลองรนั เลเอาท์ แล้วลองกดป่มุ ลกู ศรบนคีย์บอรด์ เพอื่ ควบคมุ Object Player ใหอ้ อกนอก พื้นทีจ่ อ และสงั เกตผลลพั ธท์ ี่เกดิ ข้ึน 28 รูปที่ 3.23 ผลลพั ธ์การเพมิ่ Object แพลตฟอร์ม

3.5 ส่ังใหห้ นา้ จอเกมโฟกสั ไปที่ Object ผ้เู ลน่ 1) จากการทดลองรันเลเอาท์ในโครงงานก่อนหนา้ จะเหน็ ได้ว่า Player ของเราเม่ือเดนิ ออกจาก พ้ืนทจ่ี อ ก็จะหายจากจอไป เราสามารถทำ�ใหภ้ าพโฟกสั ตามตัวละครไดง้ า่ ยๆ โดยการเพิ่ม Behavior Scroll To ใหก้ บั Object Player รปู ที่ 3.24 เพม่ิ Behavior Scroll To ให้กับ Object Player 2) ทดลองรันเลเอาท์อีกครัง้ คราวนี้จะเห็นได้ว่าภาพจะโฟกสั ไปท่ี Object Player ไปจนกว่า Object Player จะหลุดออกจากพน้ื ท่ีเลเอาท์ รปู ที่ 3.25 ผลลัพธก์ ารเพมิ่ Behavior Scroll To ให้กบั Object Player 29

3.6 สรา้ งความรสู้ กึ แบบ 3 มติ ิ บนเกม 2 มติ ิ เกมของเราตอนนี้ ภาพฉากหลัง (เลเยอร์ BG) จะเคลอื่ นที่ไปพร้อมๆ กบั จอภาพ ท�ำ ให้โลกของ Bunny Kick ดูแบน ไร้มิติ วิธีการต่อจากนี้ จะทำ�ให้ภาพฉากหลังเคลือ่ นทีช่ า้ กว่าจอภาพ ทำ�ให้ฉากหลงั ดูเหมือนวตั ถุท่ีอยหู่ ่าง ไกลออกไป และทำ�ใหเ้ กมดมู ีมติ ดิ ้านความลึกมากข้นึ 1) ทหี่ น้าตา่ ง Layer ทางด้านขวา คลกิ ท่ีขวาท่เี ลเยอร์ BG เพือ่ กลบั ไปทำ�งานที่เลเยอร์ BG อีกครง้ั รูปที่ 3.26 คลิกเพอ่ื เลือกท�ำ งานที่เลเยอร์ BG 2) ทีห่ นา้ ตา่ ง Properties ทางด้านซา้ ย ต้งั คา่ Parallax ท่ี 50, 50 รูปที่ 3.27 ตงั้ คา่ Parallax ที่ 50, 50 3) จากนน้ั ให้ทดลองรัน Project เพอื่ สังเกตการเคลื่อนทขี่ องฉากหลัง (อาจจัดวางหรอื วัตถบุ นฉาก หลังใหม่ เพื่อให้ Player ได้กระโดดไปรอบๆ เลเอาทไ์ ด้ไกลขึ้น) 30

บทที่ 4 การเคล่ือนท่ีแบบ Sine และ Rotate

บทที่ 4 การเคล่อื นทแี่ บบ Sine และ Rotate 4.1 เมื่อพื้นเคลอ่ื นไหวได้ ความสนกุ ของเกมแพลตฟอร์มคือการกระโดดข้าม หรอื หลบสง่ิ กดี ขวางตา่ งๆ เพอ่ื ไปใหถ้ งึ เส้นชยั และอกี หนึ่งอุปสรรคทีข่ าดไมไ่ ดก้ ็คือ พ้ืนวตั ถทุ ี่สามารถเคลื่อนไหวได้ ซึ่งโปรแกรม Construct 2 จะมี Behavior กลมุ่ Movement เขา้ มาชว่ ยในส่วนนี้ โดย Behavior ทน่ี า่ สนใจไดแ้ ก่ Sine และ Rotate • Behavior Sine เปน็ การสรา้ งรปู แบบการเคล่อื นไหวในแบบรูปคลนื่ Sine ใหก้ ับ Object นน้ั ๆ กล่าวคือ ขยบั ซ้าย สลบั ขวา ขยบั ขึน้ สลบั ลง หรือหมุนตามเข็มสลบั ทวนเขม็ ขน้ึ อยู่กบั คา่ ท่เี รากำ�หนดไว้ รปู ที่ 4.1 การเคล่อื นไหวในแบบรปู คลืน่ Sine (ขึน้ ลง) • Behavior Rotate เปน็ Behavior เพื่อท�ำ ให้ Object สามารถหมนุ ได้ โดยจุดหมนุ จะอ้างองิ จดุ Origin ของ Object นั้นๆ เปน็ หลกั 32 รปู ท่ี 4.2 การเคล่ือนไหวในแบบ Rotate

4.2 สร้างวัตถแุ พลตฟอร์มทเี่ คล่ือนไหวได้ ทั้ง Behavior Sine และ Rotate สามารถเพ่มิ ให้ Object ใดๆ ก็ได้ ซงึ่ ในโครงงานนี้เราจะทำ�การ ทดลองเพิม่ Behavior ใหก้ บั Object ทเ่ี ปน็ Solid 1) เริ่มต้นจากการเพิม่ Object เข้ามาอีกสองตัว โดยการไปทแี่ ท็บ Projects ทางด้านขวา คลกิ ขวา ที่ Object Solid แล้วเลือก Clone ซึ่งจะทำ�ใหเ้ ราได้ Object ใหมช่ ื่อ Solid2 ท่ีมีคณุ สมบตั หิ ลายอยา่ ง (เช่น Solid) เหมือนกบั Object ตน้ แบบในขณะนนั้ เปน็ การลดข้ันตอนการสร้างเกม 2) ทำ�การ Clone Object Solid ขึ้นมาสองคร้งั แลว้ จดั การเปล่ยี นชอ่ื Object ใหม่ท้งั สองเป็น SolidSine และ SolidRotate รูปที่ 4.3 Clone Object ที่มอี ยแู่ ลว้ ได้ Object ตัวใหม่ชอ่ื SolidSine และ SolidRotate 3) ลาก Object ใหมท่ ้งั สองเข้ามาในเลเอาท์ Level 1 Layout (เลเยอร์ Main Bottom) จาก นนั้ ให้ท�ำ การเพิ่ม Behavior Sine ให้กับ Object SolidSine และเพม่ิ Behavior Rotate ให้กับ Object SolidRotate รูปที่ 4.4 ได้ Object ตัวใหมช่ อ่ื SolidSine และ SolidRotate 33

4) ทำ�การยืด Object SolidSine และ Object SolidRotate แล้วทดลองรนั เลเอาทเ์ พอื่ สงั เกตผลท่ี เกิดข้ึน จะพบวา่ Object ทงั้ สองมกี ารเคลอ่ื นไหวแลว้ รูปที่ 4.5 ทดลองจดั วาง Object ต่างๆ 5) จะเหน็ ไดว้ า่ Object ทัง้ สองนั้นมีการเคล่อื นทแ่ี ล้ว ซึ่งเราสามารถต้ังคา่ Properties ของ Object เพือ่ กำ�หนดการเคลื่อนไหวต่างๆ ได้ และ Object ทถ่ี กู Copy ภายในเลเอาทแ์ ตล่ ะ Object จะ สามารถก�ำ หนดคา่ Properties ของมนั เพื่อการเคลอ่ื นท่ีท่แี ตกตา่ งกนั ได้ รูปท่ี 4.6 ผลลัพธ์การท�ำ ใหว้ ัตถเุ คลื่อนไหว 34

บทท่ี 5 Frame Animations

บทที่ 5 Frame Animations 5.1 ภาพเคลื่อนไหว 2 มิติ ด้วยหลักการเดยี วกันของการสรา้ ง Animation 2 มติ ิ เราจะต้องจัดเตรียมเฟรมภาพต่างๆ เอาไว้ ส�ำ หรับท�ำ เปน็ ภาพ Animation ภายในเกม บาง Object กอ็ าจจะต้องใช้ Animation หลายชุด เช่น ยืน เดิน กระโดด ฯลฯ เพ่อื ใช้แสดงตามเกม รูปท่ี 5.1 Sprite Sheet สำ�หรับทำ�ภาพเคลื่อนไหวในเกม Rockman (Capcom) โดย Costruct 2 สามารถจัดการเฟรมแอนเิ มชนั่ ของ Object ไดท้ หี่ น้าต่าง Edit Image ดังโครง งานทดลองต่อไปนี้ 36

5.2 จากเฟรมส่ภู าพเคลื่อนไหวบน Construct 2 1) โครงงานนี้ เราจะเรม่ิ จากสร้าง Project เปลา่ ขน้ึ มา เพอ่ื ใชท้ ดลองทดสอบการท�ำ งานของเฟรม Animation โดยเฉพาะ รปู ท่ี 5.2 สร้าง Project ใหม่ 2) เปดิ โฟลเดอร์ทมี่ ีชุดไฟลภ์ าพเฟรม Animation ท่ตี อ้ งการ เลือกทุกไฟล์ (ไฟลภ์ าพ Test0001. png - Test0002.png) แลว้ ลากเข้าสู่พน้ื ทีท่ ำ�งาน การลากไฟล์ภาพทลี ะหลายไฟล์เขา้ สพู่ ื้นทีท่ ำ�งานพร้อมๆ แบบน้ี Construct 2 จะสร้าง Object ให้เพยี งตวั เดียว แต่จะเกบ็ เฟรมภาพทั้งหมดไวเ้ ปน็ Animation 1 ชุด รูปท่ี 5.3 การนำ�เขา้ ภาพเฟรม Animation ให้นำ�เขา้ ทลี ะชุด 37

3) ดบั เบล้ิ คลกิ ท่ี Object Test จะปรากฎหนา้ ต่าง Image Editer: Test (Default, frame 0) โดย Test เป็นช่ือของ Object Default เปน็ ชอื่ ของชุด Animation ท่ีก�ำ ลังแกไ้ ข (แสดงผลในหน้าตา่ งย่อยทาง ขวา) และเฟรม 0 คอื ล�ำ ดับเฟรมของชดุ Animation ดังกล่าว ทกี่ �ำ ลงั แสดงผล (แสดงผลทห่ี น้าต่างยอ่ ย ด้านลา่ ง) รูปท่ี 5.4 แสดงหนา้ ตา่ ง Animations และหน้าต่าง Animation frames 4) คลกิ ท่ชี ุด Animation Defalult จากหน้าต่าง Animation ทีแ่ ทบ็ Properties จะปรากฏ คณุ สมบัตขิ องชดุ Animation Defalult ใหเ้ ราตงั้ คา่ Speed เปน็ 12 และ Loop เป็น Yes จากน้นั จึง ทดลองรันเลเอาทเ์ พ่ือสังเกตผล จะพบวา่ Object แสดงภาพเปน็ ภาพเคลือ่ นไหว รปู ที่ 5.5 ตงั้ ค่า Speed เปน็ 12 และ Loop เปน็ Yes 38

5.3 Collision Collision คอื พน้ื ทีส่ ำ�หรับตรวจสอบการชนกัน (ซอ้ นทบั กัน) ของ Object ตา่ งๆ ในเบื้องตน้ Construct 2 จะท�ำ การสร้างพืน้ ท่ี Collision ใหโ้ ดยอตั โนมตั ิ ซงึ่ นั่นอาจจะไมต่ รงตามท่ีเราต้องการ ก็ได้ อย่างไรกต็ าม construct 2 สามารถทีจ่ ะแก้ไขพืน้ ท่ี Collision ของแต่ละ Object ได้ ในโหมด Edit Collision ของหนา้ ต่าง Edit Image เราสามารถใชป้ ระโยชน์จาก Collision ได้สองทาง ทางแรกคือ เป็นตัวก�ำ หนดพน้ื ทีข่ อง Behavior Solid และ JumpThru ทางท่ีสองคอื ใชเ้ ปน็ เงื่อนไขในการจัดการ Event (จะกล่าวถึงในบทเรยี นถัดไป) รูปท่ี 5.6 Object ที่ Behavior Platfrom ยนื อยูบ่ นอีกวัตถทุ มี่ ี Behavior Jumpthru โดยการอ้างอิงพ้นื ท่ี Collision รูปท่ี 5.7 สมมตุ วิ า่ เมื่อทง้ั สอง Object มกี ารซ้อนทับกัน เราจะเขยี น Event เพอื่ สั่งให้ Object ทัง้ สองหายไป 39

5.4 ก�ำ หนดพ้ืนที่ Collison 1) ทเี่ ลเอาท์ Level 1 Layout คลกิ ที่ Object Cloud เพ่ือเปดิ หนา้ ตา่ ง Edit image: Cloud รปู ที่ 5.8 หน้าตา่ ง Edit image: Cloud 2) คลิกทไ่ี อคอน Set Collision polygon เพอื่ เข้าสู่โหมดแก้ไขพื้นท่ี Collision ในโหมดน้ี หน้าตา่ ง Edit Image จะปรากฏพนื้ ที่ Collision ของ Object Cloud ซง่ึ ประกอบไปด้วยจุดอ้างองิ ไมเ่ กนิ 8 จดุ ซ่ึงถา้ ย่งิ มีจุดอ้างอิง Collision น้อยเท่าไหร่ กจ็ ะยิ่งประหยดั ทรพั ยากรระบบมากข้นึ เทา่ นั้น 40 รปู ที่ 5.9 โหมด Set Collision polygon

3) เม่อื เราคลิกทจี่ ุดอา้ งอิงสแี ดงจุดใดจุดหน่งึ จดุ อ้างองิ นน้ั จะกลายเป็นสเี หลือง และแถบสถานะ X,Y จะแสดงพิกดั x,y โดยนบั จากมุมซ้ายบนของภาพ (ในภาพเปน็ 29, 29) รปู ท่ี 5.10 แถบสถานะแสดงตำ�แหน่งของจุดอ้างองิ 4) เราสามารถย้ายจดุ อ้างองิ เหลา่ นไี้ ด้โดยการคลิกเมาสท์ ่จี ดุ อา้ งอิงค้างไว้ แล้วลากไปปล่อยยังพกิ ดั ทตี่ อ้ งการ หรือไมเ่ รากส็ ามารถกรอกตวั เลขลงในช่องสถานะโดยตรง เราสามารถลบจุดอ้างอิงดงั กล่าวไดโ้ ดย การกดปมุ่ Delete หรอื คลิกขวาแลว้ เลือกค�ำ สัง่ Delete เราสามารถเพม่ิ จดุ อา้ งองิ ได้โดยการ ดบั เบลิ คลิกที่ จดุ อ้างอิง หรือคลกิ ขวาแลว้ เลอื กค�ำ สั่ง Add point รูปที่ 5.11 การยา้ ย ลบ และเพิ่มจดุ อ้างอิง 41

5) ในทนี่ ้ี ให้เราลบ และแกไ้ ขจดุ อ้างอิงให้เหมาะกบั การเป็นพืน้ ให้ตัวละครเหยยี บดังภาพ รปู ที่ 5.12 แกไ้ ขจุดอา้ งองิ ใหเ้ หมาะกบั การเปน็ พ้ืนให้ตวั ละครเหยียบ 6) จดุ อ้างอิงนจี้ ะใชไ้ ดก้ บั เฟรม 0 เพยี งเฟรมเดยี วเทา่ นนั้ เราจะคลกิ ขวาที่ภาพแล้วเลือกคำ�สง่ั Apply to whole Animation เพื่อใหท้ กุ เฟรมใน Animation ชดุ น้ี (Default) ใชจ้ ดุ อา้ งอิง Collision ตรงกัน รูปที่ 5.13 คำ�สง่ั Apply to whole Animation 7) ลาก Object Cloud เขา้ มาในพนื้ ที่แสดงผลของเกม ทดลองรันเลเอาท์ จะพบว่า Object Play- er จะสามารถขน้ึ ไปยืนบน Object Cloud ตาม Collision ท่เี ราตง้ั คา่ ไว้ 42 รูปที่ 5.14 ผลลพั ธก์ ารแกไ้ ข Collision

บทท่ี 6 การจัดการชุด Animation

บทที่ 6 การจัดการชดุ Animation 6.1 การจดั การชดุ Animation แตล่ ะ Object ใน Construct 2 จะสามารถสรา้ งชุด Animation ไดไ้ มจ่ ำ�กัด เช่น ชดุ Animation ตอนที่ Object ยืนบนพน้ื ชดุ Animation ตอนท่ี Object กระโดด ชดุ Animation ตอนที่ Object เดิน โดย เราจะเตรยี มชุด Animation ท้งั หมดไวใ้ น Object และเรียกใช้โดยการเขยี น Event เช่น เม่อื Object ผเู้ ล่น ชนกับ Object ศตั รู ให้ Object ผู้เล่นแสดงชุด Animation บาดเจบ็ เปน็ ต้น รปู ท่ี 6.1 ชุด Animation สำ�หรบั การยืนบนพื้น และชดุ Animation ส�ำ หรบั การเดนิ รูปที่ 6.2 ชุด Animation ส�ำ หรับการกระโดด ชุด Animation สำ�หรับการกระโดดเตะ และชุด Animation ส�ำ หรับการไดร้ บั บาดเจบ็ 44

6.2 เพม่ิ ชุด Animation ใหก้ ับ Object Bunny 1) ทเ่ี ลเอาท์ Level 1 ดบั เบลิ คลิกท่ี Object Bunny เพอื่ เปิดหน้าตา่ ง Edit image: Bunny รูปท่ี 6.3 เปิดหนา้ ตา่ ง Edit image: Bunny 2) ทห่ี นา้ ต่าง Animations ทางดา้ นขวา คลิกขวาทช่ี ดุ Animation Default เลอื กค�ำ สัง่ Rename แล้วแก้ไขช่อื ให้เปน็ Head รูปที่ 6.4 การเปลย่ี นชื่อชุด Animation 3) คลิกขวาบนท่วี ่างในหน้าต่าง Animations ทางด้านขวา เลือกคำ�ส่งั Add Animation แล้วต้งั ช่ือ ชดุ Animation ใหม่เปน็ HeadGotDamage รูปท่ี 6.5 การเพิ่มชุด Animation 45

4) คลกิ ท่ีชดุ Animation HeadGotDamage เพอื่ ทำ�งานบน Animation ดังกลา่ ว แล้วคลิกขวาบน ท่วี า่ งในหน้าต่าง Animation frames ทางด้านล่างเลือกค�ำ สั่ง import frames... รปู ที่ 6.6 คำ�ส่งั import frames... 5) เลอื กภาพ BunnyHeadGotDamage.png แลว้ คลิกปุ่ม Open รูปที่ 6.7 เลือกภาพ BunnyHeadGotDamage.png 6) ท่หี น้าตา่ ง Animation frames ดา้ นล่าง คลิกขวาท่ีเฟรม 0 (เฟรมวา่ ง) แลว้ เลอื กค�ำ ส่ัง Delete เพือ่ ลบเฟรมดังกลา่ วออก เป็นการเสร็จสนิ้ ข้นั ตอนการสร้างชุด Animation HeadGotDamage (แม้ว่าจะมี เพยี งเฟรมเดยี ว) รปู ท่ี 6.8 การลบเฟรม Animation 46