FeaturedGame DevelopmentGame DevelopmentGame EnginePinnedUnity 3D

สร้างเกม First Person Shooting ด้วย Unity 3D

Tutorial การสร้างเกมด้วย Unity 3D ตัวนี้เหมาะสำหรับนักพัฒนาเกมมือใหม่ที่ต้องการฝึกหัดให้เข้าใจ Concept ของเกมแนว First Person Shooting (FPS)

ก่อนอื่นเรามาวาง Story Line & Flows กันหน่อย เกมนี้จะประกอบไปด้วย

  • ผู้เล่นในมุมมองบุคคลที่ 1 (First Person) มีปืนเป็นอาวุธ เงื่อนไขคือเดินไปมาในสนามฝึกยิงปืน
  • มีกล่องหล่นลงมาจากท้องฟ้าในฉาก
  • กล่องจะระเบิดเมื่อมีการชนกับกระสุนจากปืนของเราที่พุ่งออกไป
  • กล่องใหม่จะสุ่มหล่นลงมาเรื่อยๆ ให้เรายิงไปเรื่อยๆ ทีละกล่อง

เริ่มต้นให้สร้าง Project 3D ขึ้นมาใหม่ ออกแบบฉาก สนามฝึกซ้อมตามตัวอย่าง หรือใครจะออกแบบด้วย Terrain ก็ไม่ว่าอะไรครับ

gt2

ยังไม่ต้องห่วงเรื่องของ Main Camera นะครับ ระหว่างนี้ ตั้งค่า  Material และ Light ให้โอเคก่อน ถ้าทำไม่เป็นให้ไปอ่านบทความเก่าๆ http://www.daydev.com/2014/unity-temple-run-tutorial.html

สร้างและออกแบบ Material ให้เรียบร้อย
สร้างและออกแบบ Material ให้เรียบร้อย

วาง Character ของเราลงไปในเกม

เนื่องจาก Tutorial นี้จะเป็นการทำเกมแนว First Person ก็คงไม่จำเป็นที่จะต้องเขียน code คำสั่งการควบคุมมุมกล้องให้เหนื่อย (ตรงนี้ขอบ่น: โปรแกรมเมอร์หลายคนเก่ง เลือกที่จะพัฒนาส่วนนี้เอง หรือถ้าเป็นงานเว็บก็มักจะพัฒนา CMS เอง ทั้งที่มีระบบ CMS ทำแล้วมากมาย อย่าเสียเวลากับสิ่งที่ปัจจุบันมันดีและมีให้แล้วเลยครับ) ตั้งชื่อว่า “Player” ใน Heirarchy

ทำการ Inport Asset เลือก Character Controller ลงไป
ทำการ Inport Asset เลือก Character Controller ลงไป
เอา First Person ไปวางในฉากนะครับ
เอา First Person ไปวางในฉากนะครับ

สังเกตุจะเห็นว่า Main Camera จะมีเพิ่มมาเป็น Local ที่อยู่ใน ส่วนของ Character Controller ของเราครับ

Main Camera ใน Player
Main Camera ใน Player

สร้าง Cube ขึ้นมาตั้งชื่อว่า “Boxes1” และ “Boxes2” หา Texture สวยๆ มาใส่

สร้าง GameObject แบบ cube มา 2 ตัวชื่อ "Boxes1" และ "Boxes2"
สร้าง GameObject แบบ cube มา 2 ตัวชื่อ “Boxes1” และ “Boxes2”

สร้าง Prefab มาใหม่ ทำการ Clone ตัว Boxes1 และ Boxes2 ให้เรียบร้อย

สร้าง Prefab ขึ้นมา
สร้าง Prefab ขึ้นมา
ลากวัตถุต้นแบบจาก Hierarchy มาวางที่ Prefabs
ลากวัตถุต้นแบบจาก Hierarchy มาวางที่ Prefabs

หมายเหตุ: เมื่อมีการสร้

สร้าง Prefab ขึ้นมา
สร้าง Prefab ขึ้นมา
ลากวัตถุต้นแบบจาก Hierarchy มาวางที่ Prefabs
ลากวัตถุต้นแบบจาก Hierarchy มาวางที่ Prefabs

หมายเหตุ: เมื่อมีการสร้าง Prefabs แล้ว ให้ลบวัตถุต้นแบบออกไปเลยทุกครั้งเพื่อลบความสับสน

ต่อมาให้เราไปหา Model 3มิติ รูปปื่นมาสัก 1 ตัวครับ เมื่อหาได้แล้วก็ให้สร้าง Prefabs มา โคลนตัวปืนเราเข้าไปแล้วลากไปวางไว้ที่ Player ของเราใสส่วน Main Camera

ลากปืนไปไว้ใน Main Camera ของ Players จัดตำแหน่งดีๆ
ลากปืนไปไว้ใน Main Camera ของ Players จัดตำแหน่งดีๆ

ตั้ง Inspector ของปืนตามที่ตัวอย่างตั้งไว้ก็ได้

ตั้ง Inspector
ตั้ง Inspector

ลอง Run ดู Game View ของเราก่อน

ปืนอยู่ตำแหน่งที่เราต้องการ
ปืนอยู่ตำแหน่งที่เราต้องการ

สร้าง GameObject ที่เป็น Sphere ขึ้นมา 1 ตัว ตั้งค่าขนาด ใน Inspector ตามตัวอย่างก่อน (ในตัวอย่างต้องการให้กระสุนเห็นชัดๆ ว่ามันไปโดนเลยตั้งให้ใหญ่เล็กน้อยจะได้เห็นภาพ) กำหนดตำแหน่งอยู่ตรงหน้าจอกลางๆ ระหว่าง Capsule ของ Character เรา

ตั้ง Sphere แล้วจับลง Prefabs ตั้งชื่อว่า "Bullet"
ตั้ง Sphere แล้วจับลง Prefabs ตั้งชื่อว่า “Bullet”

สร้าง Prefabs ว่า “Bullet” ลากเจ้า Sphere ของเราไปโคลนซะ (ลบวัตถุต้นแบบออก)

เขียน Java Script สำหรับ ระบบปืน และกระสุน

สร้าง Javascript ขึ้นมา 1 ไฟล์ตั้งชื่อว่า “bullet.js” และ “gun.js” ขึ้นมาเปิด Prefabs ของ “Bullet” ทำการ Add component ของ Scripts เข้าไปเลือก bullet.js

ลาก bullet.js ไปวางที่ Prefab ของ "Bullet"
ลาก bullet.js ไปวางที่ Prefab ของ “Bullet”

เลือก Player ของเราเช่นกัน ในส่วนของปืนใน Main Camera ให้ใส่ script ชื่อ “gun.js” เข้าไป

ลาก Script "gun.js" ไปวางใน Gun
ลาก Script “gun.js” ไปวางใน Gun

Code ส่วนของ gun.js คือ

ตั้งตัวแปร Bullet ขึ้นมา กำหนดถ้าคลิก mouse ปุ่มซ้าย (“Fire1”) คือโจมตีให้เรียกฟังก์ชัน Fire() ยิงกระสุน ใช้คำสั่ง Clone Prefab ออกมาเรื่อยๆ ตามตำแหน่งมุมกล้องที่เราควบคุม Code ง่ายดีใช่ไหมครับ

เมื่อใส่ Script gun.js ลงไปแล้วจะมีช่อง Bullet ว่างอยู่เป็น none ให้ลาก Prefab ของ Bullet ไปวางซะ

ลาก Prefab "Bullet" ไปวางในช่อง
ลาก Prefab “Bullet” ไปวางในช่อง

เขียน Code กันได้แล้ว ไฟล์ buller.js ให้เราใส่ code ต่อไปนี้

สำหรับ Bullet แล้วกระสุนถ้าเราไม่ใส่ฟังก์ชัน

เข้าไป หรือลองไป comment ดูแล้วยิงลงพื้นดินครับ จะเห็นทันทีว่า กระสุนมันเด้งไปมา ดังนั้นต้องเขียนดักว่าถ้ากระสุนชนอะไรก็ตามให้ Destroy ตัวเองซะ

ส่วนเวลา ตั้งค่า speed ความเร็วกระสุนที่ 2 วินาทีครับ โดยมีค่า หน่วงอยู่ที่ 10f ไม่นานมาก ถ้ายิงกระสุนออกไปแล้ว ค่าหน่วงเมื่อครบเวลามันจะเคลียร์ Prefab ที่ Clone ตัวนี้ออกไปจากเกม กรณี ยิงแล้วกระสุนวิ่งออกนอกฉากไม่เกิดประโยชน์ในฟังก์ชันนี้

ต่อมาสร้าง Code ที่ชื่อว่า “Prefabs.js” ขึ้นมา เพื่อสร้างฟังก์ชันการสุ่มตำแหน่งของกล่องที่เราจะให้มันตกลงมา

สร้างตัวแปรชื่อ boxes1,boxes2 ขึ้นมาเพื่อรับค่า GameObject ตั้งตัวแปรกำหนดเวลาสุ่มปรากฏ ให้ clone ตัว Prefabs ขึ้นมา โดยอ้าง boxes1 และ boxes2 กระจาย Range ที่ (-3,4)

ลองทดสอบโดยการ Run แล้วยิงปืนเล่นๆ ดูครับจะเห็นว่ากระสุนพุ่งออกไปแล้ว (กระสุนใหญ่ ค่อยไปปรับขนาดใน Prefab ทีหลังนะ)

เป็นอันเสร็จครับ Code ไล่ง่ายไม่ยากไม่มีอะไร ต้องงง กลับไปที่ Project ของเราช่อง Heirarchy ให้เราสร้าง GameObject เปล่าหรือ EmptyObject ขึ้นมาตั้งชื่อว่า “GamePlay”

สร้าง Create Empty
สร้าง Create Empty
ตั้งชื่อ "GamePlay"
ตั้งชื่อ “GamePlay”

ใส่ Scripts “Prefabs.js” ลงไปใน GamePlay

จะมีช่อง boxes1, boxes2 ว่างอยู่
จะมีช่อง boxes1, boxes2 ว่างอยู่
ลาก Prefabs ของ Boxes1 ไปใส่ใน boxes1, Boxes2 ไปใส่่ใน boxes2
ลาก Prefabs ของ Boxes1 ไปใส่ใน boxes1, Boxes2 ไปใส่่ใน boxes2

ไปที่ Prefabs ใน Projects ของเรา แก้ไข ตัว Boxes ของเราเล็กน้อยให้มี RidgidBody และเพิ่ม Script ของ Collision Detection ให้กับกล่องเมื่อชนกับกระสุน

เพิ่ม RidgidBody ลงไป
เพิ่ม RidgidBody ลงไป

เซ็ตค่า Position ของแกน Y ให้อยู่สูงๆ จากพื้นดิน (เดาว่าให้เราลากไปบนฟ้าเลย) ต่อจากนั้นเขียน Code Javascript ชื่อ BoxDestroy,js ขึ้นมา

ไม่มีอะไรมากแค่อธิบายว่า ถ้าลังโดน GameObject ที่ชื่อ “Bullet(Clone)” จะ Destroy ตัวเองออกไปแค่นั้น สังเกตดีๆ ในตัวอย่าง code เราจะสร้างตัวแปรหนึ่งขึ้นมาคือ fires ไว้ลาก Particle system เข้ามาวาง เราเลยต้องไปสร้าง Particle Systems ก่อน ในตัวอย่างผมหา Texture png แบบ Transparent เป็นเปลวไฟ ไว้แล้ว

หา Texture รูปเปลวไฟ png แบบ transparent มา
หา Texture รูปเปลวไฟ png แบบ transparent มา

สร้าง Material ขึ้นมาแล้วใส่ Texture ของ เปลวไฟลงไป

gt25

ปรับค่าของ Material ตัวนี้เล็กน้อย เป็น Alpha Blender จะได้เปลวไฟสวยๆ เวลานำไปใช้

gt26

สร้าง Particle System ต้นแบบขึ้นมาบน Scene  View

สร้าง Particle system ขึ้นมา
สร้าง Particle system ขึ้นมา

สร้าง Prefab ชื่อ fires ขึ้นมาแล้วทำการโคลนตัว Particle System ไปไว้ใน Prefab

สร้าง Prefabs ใหม่
สร้าง Prefabs ใหม่

ไปที่ Inspector ของ Prefabs ชื่อ fires กำหนดค่าตามนี้

ตั้งค่า Particle ใน Prefabs
ตั้งค่า Particle ใน Prefabs

เพิ่ม Component ใหม่เข้าไปคือ Add Component > Effects > Legacy Partic >Ellipsoid Particle Emitter

gt30

ตั้งค่า Ellipsoid Particle Emitter ดังนี้

gt32

เปิด Prefabs ของ กล่อง ที่มี Script “BoxDestroy.js” จะเห็นช่องให้ใส่ Fires เป็น none อยู่ ให้ลาก Prefabs ของ “fires” ไปใส่ในช่องนั้น

 

ลาก Prefabs ของ Particle ไปวางใน BoxDestroy.js
ลาก Prefabs ของ Particle ไปวางใน BoxDestroy.js

ทำขั้นตอนนี้เช่นเดียวกันใน Prefabs ของ Boxes2

ทำการ “Run” เกมของเราแล้วลองเล่นดู จะเห็นว่าเราได้ FPS Game ง่ายๆ มาแล้วเกมนึง

gt1

วีดีโอตัวอย่างของ Game นี้ที่ทำเสร็จแล้ว

Source code: https://drive.google.com/file/d/0B1kwQ1abTIRrUzJwY0U2b0lCY2s/view?usp=sharing

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน