วิธีสร้างเกมจาก โปรแกรมสร้างเกม Unity3D ตอนที่ 3 (สร้างเกม 2D ด้วยตัวเอง)

วิธีสร้างเกมจาก โปรแกรมสร้างเกม Unity3D ตอนที่ 3 (สร้างเกม 2D ด้วยตัวเอง)

หลังจากที่ได้ ทำความรู้จัก (ในตอนที่ 1) และทดลอง ปรับแต่งเกมจาก Template ฟรี (ในตอนที่ 2) ที่สามารถดาวน์โหลดได้จากโปรแกรม Unity กันไปแล้ว ในบทความนี้เราจะมาเริ่มสร้างเกมกันตั้งแต่ต้น ไม่ว่าจะเป็นขั้นตอนการนำวัตถุต่างๆ มาใส่ใน Scene รวมไปถึงการเขียนโค้ดเองด้วย และเกมที่เราจะสร้างก็คือเกมแนว Adventure ซึ่งเราจะมาเริ่มสร้างเกมกันตั้งแต่เริ่มต้นจะได้รู้ทุกวิธีการสร้างเกม

ขั้นตอนการเริ่มสร้างเกมจาก โปรแกรมสร้างเกม Unity3D

• เปิดโปรแกรม ตั้งชื่อเกมแล้วเลือก Templates แบบ 2D
• เลือก Template ที่จะใช้ก่อน ซึ่งอาจจะสร้างขึ้นมาเอง หรือจะใช้ Templates ที่โปรแกรม Unity มีให้ดาวน์โหลดก็ได้ หากใครอยากใช้ Templates อื่นๆ นอกจากนี้ก็ดาวน์โหลดมาใช้ได้ ซึ่งบทความนี้เราจะดาวน์โหลดจากเว็บไซต์ Game Art 2D
• เมื่อเข้ามาถึงหน้าโปรแกรม ให้เราไปที่แถบ Project เลือก Asset คลิกขวา → Create → Folder จากนั้นตั้งชื่อโฟล์เดอร์

• นำรูปภาพหรือตัวละครจาก Template ที่เราดาวน์โหลดไว้มาใช้งานในโปรแกรม โดยเลือกโฟล์เดอร์ที่สร้าง คลิกขวา เลือก Import New Asset แล้วเลือกรูปที่ต้องการใช้ แล้วกด Import

ขั้นตอนการทำฉาก

• ให้ลาก Background มาวางใน Scene และปรับขนาดให้พอดีกับเส้นขอบที่มีมาให้ ซึ่งกรอบที่มีให้คือมุมมองของกล้องที่จะมองเห็นในเกม

• ลากวัตถุต่างๆ เข้ามาตกแต่งใน Scene และปรับค่า Order in Layer เป็น 1 สำหรับวัตถุอะไรก็ตามที่ต้องการให้ตัวละครเหยียบหรือชนได้จะต้องใส่ Box Collider 2D
• การสร้าง Box Collider 2D ให้เลือกที่วัตถุนั้น แล้วไปที่ Inspector กด Add Component จากนั้นเลือก Physics2D แล้วเลือก Box Collider 2D

• หากต้องการทำวัตถุเคลื่อนที่ ให้เลือกวัตถุที่ต้องการแล้วลากไปวางใน Scene จากนั้นใส่ Boxcollider2D แล้วก็ไปเพิ่มสคริปใส่โค้ดตามนี้ (ดู Code ใน Spoil) สำหรับการเคลื่อนที่ให้เราไปดูตัวเลขแกน x ที่ แถบ Transform ตรงตำแหน่ง (Position) แล้วลองขยับวัตถุดูว่าเราจะให้เลื่อนไปทางซ้ายเท่าไหร่ และทางขวาเท่าไหร่ จากนั้นเอาตัวเลขมาใส่ในโค้ด โดยทางซ้ายใส่ด้านบน และทางขวาใส่ด้านล่าง ลองกดที่ปุ่ม Play ดู

ขั้นตอนสร้างตัวละคร

• ลากตัวละครเข้าไปวางใน Scene ให้เริ่มจากตัว Idle ซึ่งเป็นตัวที่ยืนเฉยๆ เลือกทุกตัวที่ชื่อ Idle เข้าไปวางใน Scene จะมีหน้าต่างขึ้นมา ให้ตั้งชื่อแล้ว กด Save
• เมื่อเสร็จแล้วจะกดมาหน้า Scene เราจะยังไม่เห็นตัวละคร ให้ไปดูที่ Inspector ปรับ Order in Layer เป็น 2 เพื่อที่จะได้ไม่ไปซ้อนกับวัตถุอื่นๆ

• การที่จะทำให้ตัวละครยืนบนวัตถุอื่นๆ ได้ให้ไปตั้งค่าที่ Inspector → Add Component → เลือก Rigidbody 2D และ Circle Collider 2D

• ต่อไปเราจะมาใส่กำหนดการเคลื่อนไหวให้ตัวละคร ให้เลือกที่ตัวละครก่อน จากนั้นไปที่ Window → Animation → Animation
• ไปคลิกเครื่องหมายที่ Dropdown (▼) เลือก Create New Clip ตั้งชื่อ แล้วกด Save จากนั้นลากตัวละครมาใส่ในแถบ Animation แล้วลองกดเล่นดู ทำให้ครบทั้งวิ่ง และกระโดด 

• เมื่อเสร็จแล้วให้ไปที่ Animator เลือก Parameters เลือกเครื่องหมายบวก แล้วเลือกประเภทของตัวแปร จากนั้นตั้งชื่อ ซึ่งตัวแปรแต่ละประเภทคือ
  • Float ใช้กับตัวเลขที่เป็นทศนิยม
  • Int ใช้กับตัวเลขจำนวนเต็ม
  • Bool ใช้เก็บข้อมูลที่เป็นค่า จริง (True) หรือเท็จ (False) เท่านั้น
• ซึ่งเราจะกำหนดอันแรกเป็น Float ตั้งชื่อเป็น Speed และอันที่สองเป็น Bool ตั้งชื่อว่า Jump

• จากนั้นเราจะมากำหนดตัวละครว่าจะให้เดิน หรือกระโดดตอนไหน ในกรอบสีส้ม (Cat_Idle) จะเป็นท่าเริ่มต้นของตัวละคร ซึ่งเราสามารถเลือกได้ว่าจะให้ท่าไหนเป็นท่าเริ่มต้น โดยคลิกขวาที่กรอบที่ต้องการ เลือก Set as Layer Default State 
• ไปที่ Animator หน้านี้จะเป็นการบอกว่าเราจะเดินเมื่อไหร่ กระโดดตอนไหน ก่อนอื่นเราจะเชื่อมเส้นก่อน ให้คลิกขวาที่ ตัว Idle → Mask Transition → คลิกที่ Run และเมื่อหยุดวิ่งให้กลับไปที่ท่าเริ่มเหมือนเดิม ก็คลิกขวาที่ Run → Mask Transition → คลิกที่ Idle
• ต่อไปจะทำให้กระโดดเราจะเชื่อม Jump กับ Any State ซึ่ง Any State คือท่าปัจจุบันที่เราทำอยู่อาจจะเป็นตัวละครวิ่งอยู่ หรือยืนอยู่เฉยๆ คลิกขวาที่ Any State → Mask Transition → คลิกที่ Jump ต่อไปเมื่อหยุดกระโดดให้กลับไปท่ายืนเหมือนเดิมเราก็คลิกขวาที่ Jump → Mask Transition เลือก Idle

• เลือกที่ Any State → Jump แล้วไปที่ Inspector ดูที่ List Empty กดเครื่องหมายบวก จะมีช่องมาให้แบบนี้ ช่องแรกให้เลือกเป็น Jump ช่องถัดไปเป็น True ส่วนอีกเส้นจาก Jump ไป Idle ก็ทำเหมือนเดิม กดเครื่องหมายบวก ที่ List Empty ช่องแรกเป็น Jump แต่ช่องถัดไปเปลี่ยนเป็น False
• ต่อไปเราจะมากำหนดเงื่อนไขการวิ่งและกระโดดกัน เลือกที่เส้น เพื่อกำหนดเงื่อนไข ไปที่ Inspector ดูตรง Conditions → List Empty จากนั้นจะเลือก Speed ที่เราสร้างไว้ ตั้งเป็น Greater จากนั้นใส่ค่า 0 จะเป็นการกำหนดว่าถ้าความเร็วมากกว่า 0 ให้ตัวละครวิ่ง ส่วนการกำหนดให้ตัวละครหยุดวิ่ง ช่องที่สองให้ตั้งเป็น Less จากนั้นใส่ 0.001 

• ทำให้ตัวละครยืนบนวัตถุอื่นๆ ได้ ให้เลือกตัวละครไปที่ Inspector → Add Component → เลือก Rigidbody 2D และ Circle Collider 2D

• ไปที่ Rigidbody2D → Constraints ให้เลือกแกน Z แล้ว จากนั้นปรับลดค่า Redius ลงเพื่อไม่ให้ตัวละครลอย โดยให้ไปที่ Circle Collider 2D

• เพิ่มความสมูทเวลาเดิน หรือชนวัตถุให้ตัวละคร โดยคลิกขวาที่ Asset ในแถบ Project เลือก Create → Physics Material2D จากนั้นจะได้ New Physics Material2D จากนั้นเลือกแล้วปรับค่า Friction เป็น 0 แล้วไปเลือกที่ตัวละครแล้วลาก New Physics Material2D ไปใส่ที่ช่อง Material ที่ Circle Collider2D

• ขั้นตอนต่อไปคือการทำให้ตัวละครเคลื่อนที่ไปข้างหน้าโดยเราจะต้องเขียนโค้ด ให้ไปที่ Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

• จะได้ช่อง Speed เพิ่มมา ให้ใส่ค่าที่มากกว่า 0 ลงไป

• จากนั้นเราจะทำให้กล้องเคลื่อนที่ตามตัวละคร ให้ไปเลือก Main Camera ให้ไปที่ Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

• กลับไปหน้าเกมด้านล่างช่อง Script จะมีช่องเพิ่มมาให้ลาก Object ตัวละคร ในแถบ Hierarchy ไปใส่

ขั้นตอนการทำให้เก็บไอเทม และนับคะแนน

เก็บไอเทม

• เลือกไปที่ไอเทมหนึ่งอัน จากนั้นไปที่ Inspector → Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

การนับคะแนน

• ไปที่แถบ Hierarchy → คลิกขวา UI → Canvas จากนั้นจะได้ Object Canvas ให้คลิกขวาที่ Canvas → UI → Text 

• จากนั้นตั้งค่าใส่ข้อความให้เรียบร้อย แล้วไปที่แถบ Project คลิกขวา → Create → C#Script → ตั้งชื่อ จากนั้นดับเบิลคลิกเข้าไป แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

ขั้นตอนการใส่เสียง

สำหรับไฟล์เสียงสามารถดาวน์โหลดได้ที่ Youtube Studio (studio.youtube.com/channel/UCoeAw0k9BMEG-1gIOl8unrg/music) ซึ่งจะมีให้เลือกเยอะมาก

ใส่เสียงตอนเก็บไอเทม

• เลือกที่ไอเทม ดับเบิลคลิกเข้าไปที่ Script แล้วเพิ่มโค้ด Audio เข้าไป 

• กลับไปที่หน้าโปรแกรมคลิกเลือกไอเทมแล้วลากเสียงไปใส่ที่แถบ Inspector แล้วเอา Play on Awake ออก

ใส่เสียง Background ในเกม

• เลือกเสียงแล้วลากมาใส่ที่ Main Camera เนื่องจากเพลงและเกมของเราอาจมีความยาวไม่เท่ากันดังนั้นให้เราเลือก Loop เพื่อให้เพลงวนเรื่อยๆ จนจบเกม 

ขั้นตอนการสร้างหน้าเริ่มและปุ่ม Play

• สร้างโฟลเดอร์ และ Import New Asset แล้วเลือกรูปปุ่มกดที่เราดาวน์โหลด

• จากนั้นเลือกที่รูป ไปที่ Inspector → Sprite Mode เปลี่ยนเป็น Multiple กดที่ Sprite Editor จะมีหน้าต่างขึ้นมา ให้กด Dropdown (▼) กด Slice กดปิดหน้าต่างเลือกกด Apply เราจะได้ปุ่มที่แยกชิ้นออกมา

• ต่อไปเลือกที่ File → New Scene ให้เลือกภาพพื้นหลังแล้วลากมาวางใน Scene 

• คลิกขวาในแถบ Hierarchy เลือก UI → Canvas ไปเลือก Canvas → คลิกขวา → UI → Button

• เราจะได้ปุ่มมา ให้ปรับตำแหน่งว่าจะวางไว้บริเวณใด จากนั้นไปที่แถบ Project เปิดโฟลเดอร์ปุ่ม แล้วลากรูปไปใส่ที่ Source Image 
• เปลี่ยนข้อความบนปุ่ม โดยเปลี่ยนที่ช่อง Text ในแถบ Inspector ซึ่งสามารถปรับสีและขนาดได้ตามชอบ

• ต่อไปเราจะมาใส่คำสั่งให้ปุ่ม ไปที่แถบ Hierarchy คลิกขวา Create Empty ตั้งชื่อ ไปเลือก Add Component → New Script → ตั้งชื่อ → Create and Add → เขียนโค้ด (ดู Code ใน Spoil)

• กลับไปเลือกที่ปุ่มของเรา ดูที่ Inspector → On Click ll กดไปที่ช่อง Missing จะมีหน้าต่างขึ้นมาให้เราเลือก Object ที่เราเพิ่งสร้างไป ไปที่ช่อง No Function เลือก MenuController → LoadScene (String) จะมีช่องเพิ่มมาให้เราใส่ชื่อ Scene ที่เป็นหน้าเกมเรา

• จากนั้นไป File → Save → ตั้งชื่อ แล้วกลับไปที่ Scene แรกของเรา

ขั้นตอนการทำ Game Over

• เลือกวัตถุที่จะทำให้ชนแล้ว Game Over จากนั้นไปที่ Inspector → Add Component → Physics2D → Box Collider 2D แล้วเลือก In Trigger  
• ต่อไปเขียนโค้ดคำสั่งให้ตัวละครชนวัตถุแล้วขึ้น Game Over ไปที่ Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

• จากนั้นเริ่มทำหน้า Game Over โดยการไปที่ File → NewScene เลือกภาพพื้นหลังแล้วลากมาวางใน Scene 

•  คลิกขวาในแถบ Hierarchy เลือก UI → Canvas ไปเลือก Canvas → คลิกขวา → UI →Text 

• เขียนข้อความ Game Over ที่ช่อง Text ในแถบ Inspector แล้วไปเลือก Canvas → คลิกขวา → UI → Button เลือกรูปปุ่มไปใส่ที่ Source Image เปลี่ยนข้อความบนปุ่มเป็น Restart เพิ่ม Button อีกอันเพื่อทำเป็นปุ่ม Exit เพื่อออกจากเกม

• ไปที่แถบ Hierarchy คลิกขวา Create Empty จากนั้นเปลี่ยนชื่อ ให้ไปที่ Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

• กลับไปเลือกที่ปุ่มของเรา ดูที่ Inspector → On Click ll กดไปที่ช่อง Missing จะมีหน้าต่างขึ้นมาให้เราเลือก Object ที่เราเพิ่งสร้างไป ไปที่ช่อง No Function เลือก GameOvercontrol → LoadScene (String) จะมีช่องเพิ่มมาให้เราใส่ชื่อ Scene ที่เป็นหน้าเกมเรา
• ปุ่ม Exit ทำเหมือนเดิม แต่ช่อง No Function ให้เลือก ExitGame

• เสร็จแล้ว Save จากนั้นกลับมาหน้า Scene เกมของเรา ดูที่ Inspector ที่ช่องด้านล่าง Script จะมีช่อง Scene Name ให้เราใส่ชื่อ Scene ที่เราสร้างไว้ 

• ทำแบบนี้กับทุกวัตถุที่เราจะให้ชนแล้วตาย

ขั้นตอนทำให้ขึ้นว่าชนะแล้ว

• เลือกวัตถุมาหนึ่งอันจากนั้นไปที่ Inspector → Add Component → Physics2D → Box Collider 2D แล้วเลือก In Trigger  
• ต่อไปเขียนโค้ดคำสั่งเมื่อตัวละครชนวัตถุแล้วจะจบเกม ไปที่ Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

• จากนั้นเริ่มทำหน้า Winner โดยการไปที่ File → NewScene คลิกขวาในแถบ Hierarchy เลือก UI →Text จากนั้นเลือกภาพพื้นหลังแล้วลากมาวางใน Scene 

• เขียนข้อความ You Win ในช่อง Text ต่อไปเลือก Canvas → คลิกขวา → UI → Button เลือกรูปปุ่มไปใส่ที่ Source Image เปลี่ยนข้อความบนปุ่มเป็น Next สำหรับไปด้านต่อไป และปุ่ม Exit 

• คลิกขวาที่ Hierarchy เลือก Create Empty จากนั้นเปลี่ยนชื่อเป็น winnercontrol ไปที่ Add Component → New Script → ตั้งชื่อ Script → Create and Add จากนั้นดับเบิลคลิก ตรง Script แล้วเริ่มเขียนโค้ด (ดู Code ใน Spoil)

• กลับไปเลือกที่ปุ่ม Next ของเรา ดูที่ Inspector → On Click ll กดไปที่ช่อง Missing จะมีหน้าต่างขึ้นมาให้เราเลือก Object ที่เราเพิ่งสร้างไป ไปที่ช่อง No Function เลือก winnercontrol → LoadScene (String) จะมีช่องเพิ่มมาให้เราใส่ชื่อ Scene ที่เป็นด้านถัดไปของเกม ปุ่ม Exit เลือกช่อง No Function ให้เลือก ExitGame

• เสร็จแล้ว Save จากนั้นกลับมาหน้า Scene เกมของเรา ดูที่ Inspector ที่ช่องด้านล่าง Script จะมีช่อง Scene Name ให้เราใส่ Scene winner ที่เราสร้างไว้ 

ขั้นตอนการ Build เกมสำหรับเล่นในคอมของเรา

• ไปที่ File → Build Setting → เลือก Platform ที่ต้องการ
• ลาก Scene ทั้งหมด ไปใส่ในช่อง Scenes in Build
• แล้วกด Build and Run
• สร้างโฟลเดอร์สำหรับเก็บ Project แล้วกด Select Folder

ตัวอย่างการสร้างเกมด้วยโปรแกรม Unity3D