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

รูปท่ี 7.21 ลบ Action Cannon.SpawnObject(Bullet, 1, 1) รูปที่ 7.22 เพ่มิ Action Cannon.SpawnObject(Bullet, 1, 1) และ Cannon.SpawnObject(SuperBullet, 1, 1) ในแตล่ ะ Event ย่อย 4) เพิ่ม Event เพ่อื ใหม้ กี ารยิงอาวธุ ใส่ไอเทมเพื่อเกบ็ ไอเทมภายในเกมได้ เร่มิ จาก Object Bullet. IsCollisionWith(Object ItemYellowCannon) ซ่ึงจะมี Action 3 ตวั คอื ลดค่า Health (substract) ของ Object ทัง้ สองลง 1 คา่ และต้ังคา่ ตัวแปร Weapon ใหเ้ ป็น 0 ส่วนอีก Event Bullet.IsCollisionWith ( Object ItemRedCannon) ก็คลา้ ยๆ กัน ต่างกันตรงท่ี Object ทจ่ี ะลดค่า Health และต้ังคา่ ตวั แปร Weapon ให้เปน็ 1 รูปที่ 7.23 เพ่มิ Event Bullet.IsCollisionWith(ItemYellowCannon) 97 >> Bullet.Substract(Bullet.Health, 1) >> ItemYellowCannon.Substract(ItemYellowCannon.Health, 1) >> System.SetValue(Weapon, 0) และ Event Bullet.IsCollisionWith(ItemRedCannon) >> Bullet.Substract(Bullet.Health, 1) >> ItemRedCannon.Substract(ItemRedCannon.Health, 1) >> System.SetValue(Weapon, 1)

5) เพ่มิ Event เมอื่ เกดิ การชนกันกับไอเทมใหก้ ับ Object SuperBullet โดยใหล้ ดคา่ Health ของ ตน และตั้งคา่ Weapon เชน่ เดยี วกนั รปู ท่ี 7.24 เพิ่ม Event SuperBullet.IsCollisionWith(ItemYellowCannon) >> SuperBullet.Substract(SuperBullet.Health, 1) >> ItemYellowCannon.Substract(ItemYellowCannon.Health, 1) >> System.SetValue(Weapon, 0) และ Event SuperBullet.IsCollisionWith(ItemRedCannon) >> SuperBullet.Substract(SuperBullet.Health, 1) >> ItemRedCannon.Substract(ItemRedCannon.Health, 1) >> System.SetValue(Weapon, 1) 6) รวมไปถงึ การเพ่มิ Event เมือ่ เกิดการชนกันกับ Object UFO ของ SuperBullet ดว้ ย โดยจะ ลดคา่ Health ของ Object SuperBullet ลงไป UFO.Health ซง่ึ หมายถึง ค่า Health ท่เี หลืออย่ขู อง Object UFO และลดค่า Health ของให้ Object UFO ลงไป 5 รูปท่ี 7.25 เพ่มิ Event SuperBullet.IsCollisionWith(UFO) >> SuperBullet.Substract(SuperBullet.Health, UFO.Health) >> UFO.Substract(UFO.Health, 5) 7) อย่าลมื เพ่มิ Event เพือ่ ให้ Object ต่างๆ ถูกทำ�ลายเมื่อคา่ Health น้อยกว่าหรือเทา่ กบั 0 รูปที่ 7.26 ItemYellowCannon.CompareVariable(Health, LessOrEqual, 0) >> ItemYellowCannon.Destroy() ItemRedCannon.CompareVariable(Health, LessOrEqual, 0) >> ItemRedCannon.Destroy() 98 SuperBullet.CompareVariable(Health, LessOrEqual, 0) >> SuperBullet.Destroy()

8) รวมไปถงึ การเพิ่ม Event เพื่อทำ�ลาย Object ไอเทม เมื่อมนั ออกนอกจอ รูปที่ 7.27 ItemYellowCannon.IsOutSideLayout() >> ItemYellowCannon.Destroy() ItemRedCannon.IsOutSideLayout() >> ItemRedCannon.Destroy() SuperBullet.IsOutSideLayout() >> SuperBullet.Destroy() 9) ทดลองรันเลเอาท์ และเกบ็ ไอเทมเกมท่เี ราเพิ่งเขยี น Event ให้ จะพบวา่ เราสามารถยิงไอเทมเพ่ือ เปลย่ี นอาวธุ ได้แล้ว รปู ที่ 7.28 ผลลพั ธก์ ารเปลยี่ นอาวธุ 99



บทที่ 8 HUD

บทที่ 8 HUD 8.1 ส่วนแสดงผลสถานะของเกม ดงั ท่ีเคยกล่าวถงึ ในบทเรียนการออกแบบเกมวา่ เกมท่ีดคี วรจะท�ำ ใหผ้ ้เู ลน่ รู้ตวั อยเู่ สมอว่าตอนน้ีเกม ไดด้ �ำ เนินไปถึงไหนแลว้ ในบทเรยี นนีเ้ ราจึงเตรียมโครงงานไวส้ �ำ หรับการเพม่ิ ตัวบอกสถานะของเกม ได้แก่ ระดับความยาก (Level) คะแนน (Score) และ เวลาทเี่ หลืออยู่ (Time) โดยจะมกี ารเขยี น Event เพิ่มเติม เพอ่ื จัดการสถานะ และการแสดงผลของคา่ เหล่านี้ ซ่งึ การแสดงผลสถานะของเกมจะปรากฏบนหนา้ จออยู่ ในรปู แบบของ HUD (Head-up Display) นน่ั เอง 102รปู ท่ี 8.1 ตัวอยา่ งส่วนแสดงสถานะของเเกม Need For Speed Most Wanted และ The Sim 3

8.2 เพมิ่ สว่ นแสดงผล HUD 1) ข้อมลู ทเ่ี ราจะนำ�ไปแสดงไดแ้ ก่ ระดบั ความยาก (Level) คะแนน (Score) และ เวลาทเี่ หลอื อยู่ (Time) ดงั นั้นในขั้นตอนแรก เราก็ต้องสร้างตัวแปรเหลา่ น้ี โดยเป็นตัวแปรแบบโกลบอลทสี่ ามารถเขา้ ถึงได้ จากทุกทบี่ น Event Sheet • ตัวแปรชอ่ื GameLevel ประเภท Number ค่าเรม่ิ ต้น 1 • ตัวแปรชอ่ื Score ประเภท Number คา่ เริ่มตน้ 0 • ตวั แปรช่อื TimeLeft ประเภท Number ค่าเรม่ิ ตน้ 60 รปู ท่ี 8.2 สร้าง Global Variable ส�ำ หรับเก็บค่าสถานะท่จี ะน�ำ มาแสดง 2) กลับไปทเ่ี ลเอาท์ Gameplay Layout คลกิ ทเ่ี ลเยอร์ HUD จากแท็บ Layers เพื่อทำ�งานท่ี เลเยอร์ HUD รูปที่ 8.3 คลิกเพอ่ื ทำ�งานท่เี ลเยอร์ HUD 3) double คลิกบนทีว่ า่ งบนพ้ืนที่ท�ำ งานเพ่ือเปดิ หน้าต่าง Insert New Object เลอื กสรา้ ง Object Text ตงั้ ช่ือวา่ Hudtext รูปที่ 8.4 สรา้ ง Object Text ต้งั ช่ือว่า Hudtext 103

4) นำ� Object HudText ไปวางตามต�ำ แหน่งในภาพ และขยายกรอบส่เี หลย่ี มให้เตม็ พ้ืนที่ HUD รูปท่ี 8.5 จัดวาง Object Hudtext 5) กลับไปท่ี Event Sheet Gameplay Event sheet เพ่ิม Action ให้บลอ็ ก Event System. EveryTick เปน็ Object Hudtext.SetText แลว้ พิมพข์ อ้ ความลงในกล่องขอ้ ความว่า “LV. “ & GameLevel & “ Time left: “ & TimeLeft & “ Score: “ & Score รูปท่ี 8.6 Action Hudtext.SetText(ขอ้ ความ) 6) เมือ่ ทดลองรนั เลเอาท์ จะพบวา่ มีข้อความปรากฏขึ้นบน ObjectHudtext ตามทีเ่ ราได้สง่ั SetText เอาไว้ โดยข้อความทอี่ ยู่ใน “ “ (สีแดง) จะปรากฏตามนนั้ ส่วนข้อความทเ่ี ป็นสดี �ำ ก็คือช่ือของ ตัวแปรซงึ่ เมอ่ื แสดงผลในเกมกจ็ ะแสดงคา่ ของมนั และเครือ่ งหมาย & (สีฟ้า) จะใช้ค่ันระหวา่ งขอ้ ความและ ตวั แปร 104 รปู ท่ี 8.7 ผลลพั ธ์การเพมิ่ สว่ นแสดงผล HUD

8.3 จัดการ Gameplay นบั จากช่วงนีไ้ ปจะเป็นโค้งสดุ ท้ายของการสรา้ งเกม Alian Attack แล้ว งานทเ่ี หลอื อยู่ในสว่ นของ เกมเพลย์ ไดแ้ ก่ 1) จัดการ Event ส�ำ หรบั Object ItemTimePlus • ลดค่า Health 1 ค่า เมอ่ื ชนกบั Object Bullet (ลดทั้งสอง Object ) รปู ที่ 8.8 Bullet.OnCollisionWithAnotherObject(ItemTimePlus) >> Bullet.SubtractFrom(Health, 1) ItemTimePlus.SubtractFrom(Health, 1) • ลดค่า Health 1 คา่ เม่อื ชนกบั Object SuperBullet (ลดทั้งสอง Object ) รปู ท่ี 8.9 SuperBullet.OnCollisionWithAnotherObject(ItemTimePlus) >> SuperBullet.SubtractFrom(Health, 1) ItemTimePlus.SubtractFrom(Health, 1) • ถูกทำ�ลาย และเพ่มิ เวลา 10 ค่า เมือ่ ค่า Health น้อยกวา่ 0 รปู ท่ี 8.10 ItemTimePlus.CompareInstanceVariable(Health, LessOrEqual, 0) >> System.AddTo(TimeLeft, 10) ItemTimePlus.Destroy() • ถกู ท�ำ ลายเม่อื ออกจากหนา้ จอ รูปที่ 8.11 ItemTimePlus.IsOutSideLayout() >> ItemTimePlus.Destroy() 2) จัดการการเพมิ่ -ลดคะแนน (ตัวแปร Score) • เพม่ิ 200 คะแนนเมอ่ื Object UFO ถูกท�ำ ลายโดยการยิง (UFO.Health<=0) รูปที่ 8.12 (บล็อก Event เดิม) >> System.AddTo(Score, 200) 105

• เพ่ิม 5000 คะแนนเม่ือ Object Shark ถกู ทำ�ลายโดยการยงิ (Shark.Health<=0) รปู ท่ี 8.13 (บลอ็ ก Event เดิม) >> System.AddTo(Score, 5000) 3) จดั การการเพม่ิ ลด-เวลา (ตวั แปร TimeLeft) • ลด 1 ค่า ทกุ ๆ 1 วนิ าที รูปที่ 8.14 (บลอ็ ก Event เดิม) >> System.AddTo(Score, 5000) • ลด 1 คา่ เมือ่ Object UFO ผ่านพ้นหนา้ จอทางด้านซา้ ย (UFO.X<=-75) รปู ท่ี 8.15 (บลอ็ ก Event เดมิ ) >> System.SubstractFrom(TimeLeft, 1) • ลด 5 ค่า เมือ่ Object Shark ผ่านพ้นหน้าจอทางดา้ นซ้าย (Shark.X<=-130) รปู ที่ 8.15 (บล็อก Event เดิม) >> System.SubstractFrom(TimeLeft, 1) 4) จดั การ Event เมอ่ื เกมจบ • ไปยงั เลยเ์ อาท์ Game Over Layout เมอื่ เวลาหมด (TimeLeft<=0) รปู ที่ 8.16 System.CompareVariable(TimeLeft, LessOrEqual, 0) >> System.GoToLayOut(GameOverLayout) 5) รีเซต็ ค่าของตวั แปรโกลบอลเม่อื เริม่ เลเอาท์ รปู ที่ 8.17 (บล็อก Event เดมิ ) >> System.ResetGlobalVariables() 6) ทดลองรนั เลเอาทเ์ พ่อื สังเกตผลการเปลยี่ นแปลง 106

8.4 จดั การระดับความยากของเกม ในข้ันตอนน้ี เราจะดดั แปลงให้เกมมรี ะดบั ความยากเพม่ิ ขน้ึ โดยเม่ือผเู้ ลน่ สามารถทำ�คะแนนได้ถึง ระดบั ทกี่ ำ�หนดไว ้ Object UFO และ Object Shark ถกู สร้างด้วยความถที่ เี่ รว็ ขึ้นตาม 1) สรา้ งตวั แปรโกลบอล UFOTick (ประเภท Number ค่าเร่ิมต้น 3) และ SharkTick (ประเภท Number ค่าเร่มิ ต้น 30) ส�ำ หรบั ใช้เป็นเวลาอา้ งองิ ส�ำ หรบั การสรา้ ง Object UFO และ Object Shark ตาม ลำ�ดบั รูปที่ 8.18 ตัวแปร UFOTick และ SharkTick 2) แกไ้ ขบล็อก Event การสรา้ ง Object ท้งั สอง โดยใส่คา่ เปน็ ตัวแปรท่เี ราเพ่ิงสรา้ งข้นึ มาใหมแ่ ทน รูปที่ 8.19 System.EveryXSeconds(UFOTick) >> ( Action เดิม) System.EveryXSeconds(SharkTick) >> ( Action เดิม) 3) สร้างตวั แปรโกลบอล NextScoreLevel (ประเภท Number คา่ เริม่ ตน้ 10000) ส�ำ หรบั เกบ็ คา่ เปรยี บเทยี บกบั ตวั แปร Score เพ่อื เพิม่ ระดบั ความยากของเกม รูปที่ 8.20 ตัวแปร NextScoreLevel 4) เขียน Event เพือ่ จดั การระดบั ความยากของเกมเม่ือคะแนนของผเู้ ล่นถึงทีค่ ่ากำ�หนด • เพม่ิ ค่า GameLevel ขึ้น 1 ค่า • ลดคา่ ของ UFOTick ลงเหลอื 80% จากค่าเดิม • ลดคา่ ของ SharckTick ลงเหลอื 80% จากคา่ เดิม • กำ�หนดคะแนนทจ่ี ะเพม่ิ ระดับของเกมในครง้ั ตอ่ ไป รปู ที่ 8.21 System.CompareVariable(Score, GreaterOrEqual, NextScoreLevel) >> System.AddTo(GameLevel, 1) System.SetValue(SharkTick, SharkTick*0.8) System.SetValue(UFOTick, UFOTick*0.8) System.AddTo(NextScoreLevel, 10000) 5) ทดลองรันเลเอาทเ์ พ่อื สงั เกตผลการเปล่ยี นแปลง 107

8.5 เพิ่มเอฟเฟกต์ Object SFX และ Object TOOM ได้ท�ำ การเพมิ่ Behavior Fade out ไวก้ อ่ นหน้าแล้ว เมอ่ื เรา สร้าง Object ทง้ั สองขนึ้ มาเม่อื ใด Object ที่ถกู สร้างขึน้ มาจะปรากฏข้นึ มาชว่ งระยะเวลาหนึง่ ตามทตี่ งั้ คา่ Properties ไว้ แลว้ จะหายไปเอง 1) สรา้ ง Object SFX เมอื่ Object Bullet หรอื Object SuperBullet ถูกทำ�ลาย รปู ท่ี 8.22 (บลอ็ ก Event เดิม) >> Bullet.SpawnAnotherObject(SFX, 2, 0) รูปที่ 8.22 (บลอ็ ก Event เดมิ ) >> SuperBullet.SpawnAnotherObject(SFX, 2, 0) 2) สรา้ ง Object TOOM เมอื่ Object UFO หรือ Object Shark ถูกทำ�ลาย รูปที่ 8.23 (บลอ็ ก Event เดิม) >> UFO.SpawnAnotherObject(TOOM, 2, 0) รูปท่ี 8.24 (บลอ็ ก Event เดิม) >> Shark.SpawnAnotherObject(TOOM, 2, 0) 3) ทดลองรันเลเอาท์เพื่อสังเกตผลลพั ธ์การเพิ่มเอฟเฟกต์ จะเห็นว่า Object TOOM กลับหวั เรา อาจแกไ้ ขไดท้ โี่ หมดแก้ไขรูปภาพ หรอื เขยี น Event เพอื่ หมนุ ภาพก็ได้ 108 รปู ท่ี 8.25 ผลลัพธก์ ารเพมิ่ เอฟเฟกต์

8.6 จดั การเลเอาท์ Main Menu Layout และเลเอาท์ Game Over Layout 1) เปดิ เลเอาท์ Main Menu Layout ท่เี ลเยอร์ HUD สร้าง Object ชนิด Text ต้ังชือ่ วา่ PlayText แลว้ น�ำ ไปจดั วางยงั ตำ�แหนง่ ตามภาพ แลว้ กำ�หนดขนาดและรูปแบบตัวอักษรตามชอบ รูปท่ี 8.26 สรา้ งและจัดวาง Object PlayText 2) คลกิ ที่ Object PlayText ไปทห่ี น้าต่าง Properties ทางดา้ นซา้ ยมือ แก้ชอ่ ง Text ให้เป็น Play รูปที่ 8.27 แกไ้ ขค่า Properties ของ Object PlayText 3) คัดลอก Object PlayText ไปวางทีเ่ ลเยอร์ HUD ของเลเอาท์ Game Over Layout ดังภาพ รปู ที่ 8.28 คัดลอก Object Playtext ไปวางบนเลเอาท์ Game Over Layout 109

4) ที่เลเอาท์ Game Over Layout สรา้ ง Object Text ข้นึ มาอกี 1 Object ตั้งชือ่ ว่า GameOver Text วางไวบ้ นเลเยอร์ HUD จัดวางตามภาพ รูปท่ี 8.29 สร้างและจัดวาง Object GameOverText 5) สร้าง Event ชือ่ ว่า Menu Event Sheet แลว้ ทำ�การเพ่มิ Event ส�ำ หรับแสดงผลคะแนน และ Event สำ�หรบั การคลกิ เพื่อไปยงั เลเอาท์ Gameplay Layout รูปท่ี 8.30 System.OnStartOfLayout() >> GameOverText.SetText(“Lv.” & GameLevel & “ Score : “ & Score & “ Time : “ & TimeGot) Mouse.OnObjectClick(Left, Clicked, PlayText) >> System.GoToLayout(Game Play Layout) 6) สดุ ทา้ ยให้กำ�หนด Event Sheet ใหก้ บั เลเอาท์ Main Menu Layout และเลเอาท์ Game Over Layout ให้เปน็ Event Sheet: Menu Layout จากนั้นจงึ ทดลองรันเลเอาท์ Main Menu Layout เพอ่ื ดู ผลลัพธ์ รปู ท่ี 8.31 กำ�หนด Event Sheet ให้เลเอาท์ 110

บทท่ี 9 การเพม่ิ เสยี งลงในเกม

บทที่ 9 การเพ่ิมเสียงลงในเกม 9.1 การเพม่ิ เสยี งลงใน project เกม ทง้ั เสียงเพลงและเสยี งประกอบใน Construct 2 จะเป็นไฟล์ประเภท Audio (ไฟล์เสียง) ซึ่งเมอื่ เรานำ�เข้าไฟลเ์ สียงเขา้ สู่ Project Construct 2 ก็จะทำ�การแปลงไฟล์ให้เปน็ ไฟล์ Ogg Vorbis (.ogg) และ MPEG-4 AAC (.m4a) เน่อื งจากว่าแต่ละเว็บบราวเซอร์จะสนับสนุนไฟล์เสยี งต่างชนิดกนั ไป โดยข้นั ตอนการเพ่มิ เสยี งลงใน Construct 2 ทำ�ได้ดงั นี้ 1) ท่ีหน้าต่าง Project ทางดา้ นขวา คลกิ ขวาทีโ่ ฟลเดอร์ Sounds หรือโฟลเดอร์ Music เลอื ก Import sounds (หรอื Import music) รปู ท่ี 9.1 ค�ำ สงั่ Import sounds 2) ทีห่ นา้ ตา่ ง Open เลอื กไฟล์ Fire.wav Hit.wav และ Toom.wav คลิก Open รูปที่ 9.2 เลอื กไฟล์ Fire.wav Hit.wav และ Toom.wav 3) ทหี่ นา้ ต่าง Import audio files จะปรากฏไฟล์เสียงท่เี ราเลอื ก และตวั เลอื กการบบี อัดไฟลเ์ สยี ง ในทีน่ ใ้ี หเ้ ราใช้ค่าเดมิ และคลิกที่ Import 112

รูปที่ 9.3 หน้าตา่ ง Import audio files 4) Construct 2 จะเริ่มท�ำ การเขา้ รหสั ไฟลเ์ สียง ซ่ึงถา้ ส�ำ เร็จจะปรากฏขอ้ ความวา่ “Succesfully converted to OGG and ACC” แต่ถา้ ไมส่ �ำ เร็จ เราจำ�เป็นจะต้องหาไฟลเ์ สียงอื่นๆ มาใช้แทน รูปที่ 9.4 การนำ�เขา้ ไฟลเ์ สรจ็ สมบรู ณ์ 5) คลกิ ปมุ่ OK จะเหน็ ไดว้ า่ ทโ่ี ฟลเดอร์ Sounds (หรือ Music) จะมีไฟล์เสียงที่เราเพง่ิ น�ำ เข้า และ ไฟลเ์ สยี งทเ่ี ราแปลงไฟล์แล้ว รูปท่ี 9.5 ไฟลเ์ ขา้ มาอยใู่ นหนา้ ต่าง project 113

9.2 การเรยี กใช้เสยี งใน Construct 2 เม่อื เรานำ�เข้าไฟลเ์ สียงทเ่ี ราต้องการเขา้ มาใน Project แลว้ แนน่ อนวา่ เราตอ้ งเพิ่ม Object ข้นึ มา อีกตวั หนึ่ง เพอื่ จัดการไฟลเ์ สยี งเหลา่ นีด้ ้วย 1) กลับไปท�ำ งานท่เี ลเอาท์ใดเลเอาท์หน่งึ ดับเบิล้ คลกิ บนพ้นื ทวี่ า่ งเพือ่ เรยี กหน้าต่าง Insert New Object เลอื กเพ่มิ Object Audio รูปที่ 9.6 เพม่ิ Object Audio 2) กลับไป Event Sheet Gameplay Event sheet ท�ำ การเพมิ่ Action ส�ำ หรับเล่นไฟล์เสียงลง ใน Event ที่มเี งือ่ นไขต่างๆ ดังต่อไปน้ี • เลน่ เสยี ง Fire เมอื่ มกี ารยิงกระสนุ รปู ที่ 9.7 หนา้ ต่างพารามิเตอรข์ อง Action Audio.Play() โดย -10 หมายถงึ ลดระดับความดังของเสียง 114 รูปที่ 9.8 (บลอ็ ค Event เดมิ ) >> Audio.Play(Fire, NotLooping, -10, ““)

• เลน่ เสยี ง Hit เม่ือมกี ระสุนกระทบกับ Object UFO หรอื Object Shark รปู ท่ี 9.9 (บล็อก Event เดิม) >> Audio.Play(Hit, NotLooping, -10, ““) • เลน่ เสียง Toom เมอ่ื Object UFO หรือ Object Shark ถูกท�ำ ลายจากการยิง รูปท่ี 9.10 (บล็อค Event เดมิ ) >> Audio.Play(Toom, NotLooping, -10, ““) 3) ทดลองรนั เลเอาทเ์ พอื่ ฟงั ผลลพั ธ์การเพ่มิ เสียงลงในเกม Alians Attack 115



บทท่ี 10 การส่งออกเกม

บทท่ี 10 การสง่ ออกเกม 10.1 รปู แบบของการส่งออกเกมดว้ ย Construct 2 การสง่ ออกเกม หมายถงึ การท�ำ ใหเ้ กมท่สี ร้างเสรจ็ แลว้ ใหอ้ ยูใ่ นรปู แบบทีเ่ หมาะสมกบั แพลตฟอร์ม ต่างๆ ของผ้เู ล่นกลมุ่ เป้าหมาย เนื่องจากวา่ แตล่ ะแพลตฟอร์มจะมีเทคโนโลยีและขอ้ กำ�หนดปลกี ยอ่ ยทแี่ ตก ตา่ งกนั ไป โดยแพลตฟอรม์ ท่ี Construct 2 สามารถสง่ ออกได้มีดงั น้ี 118 รูปที่ 10.1 หนา้ ต่าง Choose platform to export to พร้อมตวั เลอื กแพลตฟอรม์ ตา่ งๆ

1) กลุม่ Web • HTML 5 Web site คือการสร้างไฟล์สำ�หรับส่งออกเกมไปยังเว็บเซิร์ฟเวอร์ของเราเองโดยให้ผู้เล่นเล่นเกมของเราผ่าน หนา้ เวบ็ ไซต์ของเรา ตวั เลอื กน้สี ามารถใช้ไดก้ บั การส่งออกเกมไปยงั iOs Web Apps และ Facebook Games ดว้ ย • Chorme Web Store คอื การสร้างไฟล์สำ�หรบั สง่ ออกเกมไปยงั เว็บเซิร์ฟเวอร์ของ Chrome Web Store ผู้เล่นท่ใี ช้ บราวเซอร์ Chrome หรอื ใช้ระบบปฏบิ ตั ิการ Chrome OS จะสามารถดาวนโ์ หลดและติดต้ังเกมของเราลงสู่ เคร่อื งได้ รูปท่ี 10.2 Chorme Web Store • Scirra Arcade คอื การสร้างไฟล์ส�ำ หรับส่งออกเกมไปยงั เวบ็ เซริ ์ฟเวอร์ของ Scirra Arcade ผพู้ ัฒนาโปรแกรม Construct 2 ซ่ึงเปน็ เซริ ์ฟเวอร์ฟรสี ำ�หรับให้ผ้พู ฒั นามอื ใหมอ่ ัพโหลดเกมทตี่ นสร้างขึ้นไปให้ทั้งเพ่ือนๆ ผู้ พัฒนาดว้ ยกนั และผ้เู ลน่ ได้เขา้ มาเล่นและติชม รูปที่ 10.3 Scirra Arcade 119

• Kongregate คือการสร้างไฟลส์ �ำ หรบั สง่ ออกเกมไปยังเว็บเซริ ์ฟเวอรข์ อง Kongregate ซ่งึ เปน็ เวบ็ ไซต์รวมผู้ พฒั นาเกมทง้ั มอื อาชีพและมอื สมคั รเล่น รปู ท่ี 10.4 Kongregate 2) กลมุ่ Moblie • PhoneGap คือการส่งออกเกมใหเ้ ปน็ aplication บนมือถอื ดว้ ยตวั แปลงไฟล์ PhoneGap ซงึ่ สามารถสร้างแอพ พลเิ คชัน่ บนไดม้ ือถือหลายแพลตฟอร์ม • Intel XDK คอื การส่งออกเกมให้เป็น aplication บน iOS (ผลิตภัณฑ์ของ Apple) ดว้ ยตัวแปลงไฟล์ Intel XDK เพือ่ ใหส้ ามารถเรยี กใช้ทรัพยากรของ iOS ให้เกดิ ประโยชนส์ งู สุด • CocoonJS คือการสง่ ออกเกมใหเ้ ป็น aplication บน iOS และ Android ดว้ ยตัวแปลงไฟล์ Ludei’s Cocoon JS เพอ่ื ใหส้ ามารถเรียกใช้ทรพั ยากรของ iOS หรือ Android ใหเ้ กดิ ประโยชน์สงู สดุ • Windows Phone 8 คือการส่งออกเกมใหเ้ ป็น aplication บน Windows Phone 8 • Blackberry 10 คือการสง่ ออกเกมใหเ้ ป็น aplication บน Blackberry ต้งั แต่ version 10 เปน็ ตน้ ไป • Tizen คือการสง่ ออกเกมให้เปน็ aplication บนระบบปฏบิ ัตกิ าร Tizan 120

รูปที่ 10.5 Google play ของ Android 3) กลุ่ม Mobile & Desktopรปู ที่ 10.6 iTunes ของ Apple • Windows 8 คือการสร้างไฟล์ส�ำ หรบั สง่ ออกเกมไปยงั Windows 8 Store ผเู้ ลน่ ท่ีใชร้ ะบบปฏิบัติการ Windows 8 (ไมน่ ับ Windows 8 Phone) จะสามารถดาวนโ์ หลดและตดิ ต้งั เกมของเราลงสเู่ คร่ืองได้ • Open Web App คอื การสรา้ งไฟล์สำ�หรับส่งออกเกมไปยัง Web Store ท่วั ไป เชน่ Firefox Marketplace 4) กลมุ่ Desktop • Node-Webkit คือการส่งออกเกมให้เปน็ aplication บนเคร่อื ง desktop ทง้ั Windows และ Mac ด้วยตวั แปลง ไฟล์ Node-Webkit 121

10.2 การเตรยี มไฟล์เกมสำ�หรบั สง่ ออกไปยัง Scirra Arcade Scirra Arcade เปน็ พ้นื ที่สำ�หรบั นักพฒั นาทั้งหน้าเก่าและหน้าใหมไ่ ดเ้ ขา้ รว่ มแลกเปลี่ยนความคิด เหน็ กัน ในหวั ข้อนี้จะเปน็ ตวั อยา่ งการส่งออกเกม Alians Attack ไปยงั Scirra Arcade ถา้ หากผเู้ รียนตอ้ ง การทดลองท�ำ ตามหวั ขอ้ นี้ ขอใหส้ ร้างเกมใหม่ขึน้ มาเองเพอ่ื ความเปน็ ระเบยี บเรยี บร้อยของ Scirra Arcade 1) เปดิ project เกม Alians Attack ไปทีเ่ มนูทางดา้ นซ้ายบน เลอื กค�ำ สั่ง Export project... รูปท่ี 10.7 ค�ำ ส่ัง Export project... 2) เลอื กปลายทางสำ�หรับเก็บไฟลท์ เี่ ราก�ำ ลังจะสร้าง ส่วนอ่ืนๆ ให้ใช้คา่ ตามเดมิ เมอื่ เสร็จเรียบร้อย แล้ว ให้คลิก Export 122 รูปท่ี 10.8 หน้าต่าง Export option

3) รอสักครู่ เมือ่ Construct 2 เตรยี มไฟลส์ ำ�เรจ็ แลว้ จะปรากฏหนา้ ต่างตัวเลอื กดังภาพ ใหเ้ ราเลือก Open destination folder เพอื่ เข้าไปดไู ฟลท์ ่ี Construct 2 สรา้ งให้ รปู ที่ 10.9 ตัวเลือกหลังการ export เสรจ็ ส้ิน 4) ไฟล์ game.zip จะถกู สร้างเกบ็ ไว้ที่ต�ำ แหน่งตามทีเ่ ราตั้งค่าไว้ เราจะใชไ้ ฟลน์ ใ้ี นการอัพโหลดข้ึนสู่ เซิร์ฟเวอรข์ อง Scirra Arcade ในขนั้ ตอนตอ่ ไป รปู ที่ 10.10 ไฟล์ท่ถี ูกสร้างขึน้ รปู ท่ี 10.11 ภานในไฟล์ game.zip 123

10.3 การสง่ ออกไฟล์เกมไปยัง Scirra Arcade 1) ไปท่ีหนา้ เว็บไซต์ http://www.scirra.com/arcade ทำ�การลอ็ กอนิ จากนน้ั จงึ มองหาและคลิก ที่ Link Upload a Game (หรือตรงเขา้ ไปที่ http://www.scirra.com/arcade/submit) รปู ที่ 10.12 หนา้ แรกของ Scirra Arcade 2) ท่หี น้า Submit a new Game Step 1 จะพบกบั ข้อตกลงและเง่อื นไขตา่ งๆ ให้เราเริม่ ทำ�การ อปั โหลดเกมโดยการคลิกท่ีปุ่ม Upload Game 124 รูปที่ 10.13 หนา้ Submit a new Game

3) หน้าตา่ งปอ๊ บอพั Upload your game จะปรากฏขน้ึ มา ใหเ้ ราเลือกไฟล์ game.zip ทเ่ี ราสรา้ ง ไว้ในขน้ั ตอนกอ่ นหน้า จากนั้นจึงรอให้เกมถกู อพั โหลดขึ้นเซริ ์ฟเวอร์จนเสรจ็ รูปที่ 10.14 หน้าตา่ งปอ๊ บอพั Upload your game 4) เม่อื เสรจ็ แลว้ หากวา่ เกิดปญั หา เชน่ เราไมไ่ ดใ้ ช้ Construct 2 รุ่นล่าสดุ ใหเ้ ราปฏบิ ตั ติ ามค�ำ แนะ นำ�ของทางเวบ็ ไซต์ รปู ที่ 10.15 กรุณาดาวนโ์ หลด version ล่าสุด ทำ�การ export แล้วกลบั มาทน่ี ี่อกี ครั้ง 5) แตถ่ า้ ไมเ่ กดิ ปัญหาใดๆ เราจะเข้าส่หู นา้ Step 2 ซง่ึ เป็นการกรอกขอ้ มูลของเกมเรา เชน่ ชือ่ เกม วิธีการเลน่ ภาพตัวอยา่ งของเกม รปู ท่ี 10.16 หนา้ Step 2 กรอกรายละเอยี ดของเกม 125

รปู ท่ี 10.17 กรอกรายละเอยี ดของเกมใหค้ รบถว้ น 6) เมอ่ื กรอกรายละเอยี ดของเกมเสรจ็ เรยี บรอ้ ยแลว้ ใหค้ ลกิ ที่ Submit เกม Alians Attack กจ็ ะไป อยู่บน Scirra Arcade พร้อมใหผ้ ู้เลน่ จากทั่วโลกได้ทดลองเลน่ และแสดงความเหน็ เกย่ี วกับเกม 126

รปู ที่ 10.18 เกม Alians Attack บนเวบ็ Scirra Arcade 127

Candy Meleon เกมส์บน iOS ฝีมอื คนไทยไปไกลระดับโลก ยอดดาวน์โหลด 5 แสนภายใน 4 วนั รูปท่ี 10.19 CandyMeleon โดย LevelLoop (จัดจำ�หนา่ ยโดย Bulkypix) เกม “แคนด้เี มเลี่ยน (Candy Meleon)” หรือทห่ี ลายคนเรียกกันว่าเกมสก์ ิ้งก่ากนิ ขนม เป็นเกมส์ แนวแอ็คชน่ั ท่ีใหผ้ ู้เลน่ บงั คับกิ้งกา่ ใหก้ นิ ขนมหวานท่ลี อยออกมา พร้อมอุปสรรคมากมายทจี่ ะทำ�ใหผ้ เู้ ล่นหมด พลงั หวั ใจไปได้ ไมว่ ่าจะเป็นลกู ระเบิด แมงมมุ แมลงเตา่ ทอง และปลายกั ษท์ ี่กระโดดมาไล่กนิ ผู้เลน่ ทเี ผลอ จดุ เดน่ ของเกมส์น้ีคอื กราฟฟิคทส่ี วยงาม ล่ืนไหล และมคี วามอนิ เตอรถ์ ึงขนาดรองรบั มากกว่า 10 ภาษา รวมฟีเจอร์ใน Social Network มากมาย พร้อมทง้ั มี In-App Purchase ทีส่ ามารถทำ�รายได้เปน็ กอบเป็นกำ�ให้กบั ทมี งาน LevelLoop ผพู้ ัฒนาเกมส์คนไทย Candy Meleon โดง่ ดังในตลาดโลกจนติดอนั ดบั Top 50 ในหลาย App Store ทวั่ โลก รวมไปถึง ตลาดทโ่ี หดหนิ ที่สดุ อย่างสหรฐั อเมรกิ า ด้วยความแรง 5 แสนดาวน์โหลดภายใน 4 วนั พรอ้ มยังถกู เลอื กจาก ทมี งาน App Store ให้ข้นึ เปน็ เกมแนะนำ�อีกดว้ ย บรษิ ัท LevelLoop มที มี งานเ 2 คน ไดแ้ ก่คณุ ธนภณ พีธาพนั ธไ์ุ พบูลย์ (ท็อป) และ สทิ ธิศักด์ิ เจียม พจมาน (นอ๊ ต) ใชเ้ วลาพัฒนาเกม Candy Meleon เปน็ เวลา 1 ปี 128

รปู ท่ี 10.19 ทีมงานบริษทั LevelLoop ผู้สรา้ งแอพ Candy Meleon สทิ ธศิ ักดิ์ เจียมพจมาน (นอ๊ ต) - Animator, Graphic Design ธนภณ พธี าพันธไ์ุ พบูลย์ (ทอ็ ป) - Developer, Game Design 129

บรรณานุกรม เกม. สืบคน้ เมือ่ 24 กรกฎาคม 2556 จาก (http://th.wikipedia.org/wiki/เกม) ธนั ยา นวลละออง.(2550).สร้างเกมง่ายๆ ดว้ ย Game Maker กรงุ เทพฯ: ซเี อด็ ยเู คชัน่ . Waterfall Model. สืบคน้ เมอ่ื 24 กรกฎาคม 2556 จาก (http://en.wikipedia.org/wiki/Water- fall_model) Construct 2. ผลติ ภณั ฑจ์ าก Scirra Ltd (https://www.scirra.com/construct2) Construct 2 Licenses. สบื คน้ เม่ือ 24 กรกฎาคม 2556 จาก (http://www.scirra.com/store/ construct-2) Construct 2 Interface. สืบค้นเมือ่ 24 กรกฎาคม 2556 จาก (https://www.scirra.com/man- ual/13/the-interface) Construct 2 Layouts สืบคน้ เม่อื 24 กรกฎาคม 2556 จาก (https://www.scirra.com/manu- al/67/layouts) Construct 2 Layers สบื คน้ เมื่อ 24 กรกฎาคม 2556 จาก (https://www.scirra.com/manu- al/85/Layers) Construct 2 Instance-variables. สบื คน้ เม่ือ 24 กรกฎาคม 2556 จาก (https://www.scirra. com/manual/73/instance-variables) Construct 2 Behaviors. สบื คน้ เม่ือ 24 กรกฎาคม 2556 จาก (https://www.scirra.com/man- ual/72/Behaviors) Construct 2 Events. สบื ค้นเมอ่ื 24 กรกฎาคม 2556 จาก (https://www.scirra.com/manu- al/74/Events) Collision detection. สบื ค้นเมื่อ 24 กรกฎาคม 2556 จาก (http://en.wikipedia.org/wiki/Col- lision_detection) Construct 2 Audio. สบื คน้ เมอื่ 24 กรกฎาคม 2556 จาก (https://www.scirra.com/manu- al/109/audio) Candy Meleon เกมส์บน iOS ฝมี ือคนไทยไปไกลระดบั โลก ยอดดาวนโ์ หลด 5 แสนภายใน 4 วัน. สืบคน้ เมอ่ื 18 สิงหาคม 2556 จาก (http://www.macthai.com/2013/05/07/candy-meleon-ios- games-from-thai-developer-top-app-store-world-wide/) เอกสารเพิม่ เตมิ ไฟลป์ ระกอบการเรยี นทั้งหมด สามารถดาวน์โหลดได้ที่ https://www.dropbox.com/s/nds9cmwlpynrdap/ไฟลป์ ระกอบแบบเรยี น.rar

คณะกรรมการดำ�เนินงานพฒั นาเอกสารประกอบการสอนรายวชิ าการสรา้ งเกม ๑ นายอรรถชัย ดาดี คณะบรรณาธิการ คณะกรรมการฝา่ ยเสริมวิชาการ

ส�ำ นกั งานคณะกรรมการอดุ มศึกษา กระทรวงศกึ ษาธกิ าร