Home / Developer  / Game Development  / 2D Game Development  / การสร้างเกม 2D Platform Action ด้วย Unity

การสร้างเกม 2D Platform Action ด้วย Unity

บทเรียนต่อไปนี้จะเป็นการสร้างเกม 2 มิติด้วย Unity ประเภท 2D Action Platform-Side Scrolling Game โดยทฤษฏีที่ใช้ทั้งหมดคือ Collision Detection, Physic Engine และภาษา C# 

บทเรียนการพัฒนาเกม 2 มิติย้อนหลัง

ตัวอย่างในบทเรียนนี้เราจะใช้ คำสั่ง GameCamera.cs สำหรับติดตามกล้อง และ GameLogic.cs ในการสร้างเงื่อนไขของเกมให้จบเกมหรือได้คะแนนแบบเดิมครับ

เปิด New Project ขึ้นมา สร้างเกม 2D แล้วใช้ Resources ที่ตัวละครคือไฟล์ต่อไปนี้

ไฟล์ player.png

ไฟล์ player.png

ไฟล์ Bullet

ไฟล์ Bullet

ไฟล์ red.png

ไฟล์ red.png

ไฟล์ Display Player

ไฟล์ Display Player

ไปที่ เมนู Windows -> Asset Store เราจะไปทำการดาวน์โหลด Asset ที่จำเป็นเล็กน้อยของตัวเกมนี้ ประกอบไปด้วย Asset  สำหรับการออกแบบฉาก Asset สำหรับ Effect การระเบิด ให้ไปดาวน์โหลด Assets ที่กำหนดไว้ข้างล่างนี้ครับ

https://www.assetstore.unity3d.com/en/#!/content/60458

99c40234-b6ee-45f4-9a79-84183659d87b_scaled

https://www.assetstore.unity3d.com/en/#!/content/3045

screen-shot-2016-09-17-at-9-00-36-am

สร้าง Scene ใหม่ขึ้นมาทำการออกแบบฉากให้เรียบร้อยโดยใช้ Asset Magic Cliffs ในการวาง Level Design ครับเบื้องต้นรูปแบบของฉากมีการ Slice ไว้ให้เรียบร้อยแล้ว ทำให้เราลดเวลาในการสร้างเกมลงได้ไปเยอะในตัวอย่างนี้

screen-shot-2016-09-17-at-9-03-55-am

screen-shot-2016-09-17-at-9-04-01-am

ลากไปวางใน Hierarchy พร้อมกำหนด RigidBody2D (ตั้งค่า Gravity Scale เป็น 0 น้ำหนัก mass ที่ 10,000) พร้อมควบคุม Detect ของ Collision ด้วย Box Collider2D (ไม่ต้องมี is Trigger)

screen-shot-2016-09-17-at-9-05-51-am

ให้สร้าง Empty GameObject ขึ้นมาตั้งชื่อว่า “danger” ปรับ Scale ให้ยาวทั่วแผนที่ของเรา แล้ววางในตำแหน่งที่อยู่ล่างสุดของเกมเป็นการกำหนดว่า ถ้าตัวละครตกฉากกระทบกับ danger จะเกิดเหตุการ Game Over ทันทีเพราะถ้าไม่มี ตัวละครจะหล่นไปเรื่อยๆ ไม่มีสิ้นสุด ดังนั้น danger ต้องกำหนด is Trigger ด้วยให้ Click ที่ช่องเพื่อเลือกให้มี is Trigger

screen-shot-2016-09-17-at-9-08-17-am

เปิดไฟล์ player.png ขึ้นมาทำการ Slice รูปภาพแบบ Auto เพื่อแยก Frame ของการเคลื่อนไหวตัวละครออกอย่างละเอียด (ให้ศึกษาบทความเก่าก่อนหน้า)

screen-shot-2016-09-17-at-9-10-15-am

จัดการเซ็ตท่า Animation ที่จำเป็นจากภาพข้างบนให้เป็นชุด โดย Animation ที่ต้องใช้นั้นคือ Idle, Run, Attack, Jump และ Death ทั้งหมด 5 State เมื่อเสร็จแล้วให้สร้าง Animator Controller (ศึกษาจากบทเรียน Unity2D การนำ Sprite Sheets ไปสร้าง Animation ในเกม)

screen-shot-2016-09-17-at-9-13-15-amสร้าง Parameters ขึ้นมาประกอบไปด้วย

  • Speed เป็น float เพื่อรับค่าปุ่มการเดินไปทางซ้ายหรือขวา
  • Grounded เป็น bool เพื่อตรวจสอบว่าการกระทำอยู่บนพื้นหรือเปล่า (ในเกมเป็น True ทุกกรณี)
  • Attack เป็น bool เช็คสถานะว่าเกิดการโจมตี
  • Jump เป็น bool เช็คสถานะว่าเกิดการกระโดด
  • Death เป็น Trigger สั่งให้เกิดการตาย

การโยงเส้น Transition ถูกกำหนดดังนี้ Idle ไป Run กำหนด Has Exit Time ออกไป เพิ่ม Condition คือ Speed Great 0.1 และ Grounded เป็น true ส่วนเส้น Run ไป Idle ให้เอา Has Exit Time ออก เพิ่อม condition คือ Speed less 0.1 และ Grounded เป็น true

สำหรับ Jump  และ Attack กำหนดค่า Transition ไปและกลับดังนี้ เส้นไป true เส้นกลับเป็น false

screen-shot-2016-09-17-at-9-18-43-am

ส่วนทุกสถานะโยงไปที่ Death เส้นเดียวแล้วตั้งค่า Trigger เป็น Death ก็จบครับ เมื่อพร้อมก็ลาก Animator Controller ไปใส่ใน Player ของเราครับ

กำหนด RigidBody2D ให้กับ Player กาง Constraints ออกเลือก Freeze Rotation Z และ ใส่ BoxCollider2D ให้กับ Player 2 ตัว โดยใน 1 ตัวกำหนด is Trigger เป็นเครื่องหมายถูกไว้

screen-shot-2016-09-17-at-9-20-48-am

สร้างไฟล์ Player.cs ขึ้นมาประกาศตัวแปรกำหนดค่าเบื้องต้นไว้บน Header ของ Class Player() ดังนี้

โดยตัวแปรที่ใช้คือส่วนของการเคลื่อนไหว การกำหนดระยะของการกระโดดไม่ให้กระโดดได้ต่อเนื่อง และเพิ่มคำสั่งของการรับค่า GameLogic.cs ไฟล์เกมแบบ OOP มาเก็บในตัวแปร control ต่อมาคำสั่งที่เหมือนจำลองปากกระบอกปืนไว้ที่ตัวละครสำหรับยิงกระสุน คือ HitArea ให้ประกาศเป็น GameObject ส่วนสุดท้ายคือ heathBar คือแถบพลังของตัวละครเริ่มต้นที่ 100

รับค่า Component ของ RigidBody2D และ AnimatorController ของ Player เรามาเก็บไว้ในตัวแปรสำหรับเรียกใช้ให้สั้นลงผ่าน anim, rigidbody2d

ไปที่เมธอด Update() เขียนคำสั่งในการควบคุมตัวละคร เพิ่มเข้ามา

เมื่อมีการรับค่าปุ่ม Keyboard แนวระนาบไปทางซ้าย หรือปุ่ม “A” ระบบ Unity จะส่ง Default floating system เป็น -0.1f มาให้

สอดคล้องกับ Speed ใน animator ของเรา และเราก็เพียงแค่ เลื่อนตัวละครของเราไปทางซ้าย พร้อม Rotate ภาพ Player เราให้หันซ้ายไป 180 องศาทันที

ถ้าหันไปทางขวาก็จะเป็น

กระโดด และโจมตีจะมีเงื่อนไขการควบคุมด้วยระยะเวลารับค่าปุ่มเมื่อไม่ให้เกิดการยิงรัวๆ แบบ Flood หรือกระโดดรัวๆ จนเหาะได้

กดปุ่ม P จะมีการไปเรียกเมธอดที่ชื่อว่า Fire(); ให้เราเขียนเมธอดใหม่เข้าไปว่า Fire() ครับก่อนปิดปีกกาสุดท้ายหรือ ก่อนจบ Class Player()

เราได้ประกาศ HitArea นั่นคือกระสุนที่จะไปเรียก GameObject มาเก็บไว้สำหรับดีดมันออกไปข้างหน้า Fire() คือเมธอดที่ใช้ในการดีดเจ้า GameObject ที่ชื่อ HitArea นี้พุ่งออกไปครับ

สุเดท้ายก็เงื่อนไขการวิ่งชนอะไรเกิดเหตุการอะไรหน่อยแล้วกัน ส่วนใหญ่จะทำงาร่วมกับไฟล์ GameLogic ให้เราเพิ่มใน Player.cs ก่อนปิด Class Player() อีกเช่นเคย

พอพลังหมด หรือชน พื้น danger จะเรียก

ซึ่งจะวิ่งไปที่

นั่นคือการหน่วงเวลาแสดง Animation ตอน Death 2 วินาที ส่วนของ แถบพลัง นั้นผมใช้ onGUI()

ไที่ Hierarchy ของ Unity สร้าง Empty GameObject ขึ้นมาตั้งชื่อว่า GameSystem แล้วใส่ GameLogic.cs ลงไป

screen-shot-2016-09-17-at-9-39-39-am

ไฟล์ GameLogic.cs นั้นเป็นการกำหนด เงื่อนไขของเกมเช่น GameOver หน้าจอ Windows เงื่อนไขของพลังหมดไปจนถึงชนะเกม

ลาก GameObject ชื่อ GameSystem ไปวางใน control ของ Player บน Inspector

screen-shot-2016-09-17-at-9-43-41-am

สร้าง Bullet กันสำหรับนำไปวางใน HitArea เราจะใช้ กราฟิก Bullet มาเป็นตัวกระสุน กำหนด Circle Collider2D ใส่ is Trigger ให้พร้อมสำหรับยิงออกไป เพิ่ม C# ขึ้นมาว่า Bullet.cs

screen-shot-2016-09-17-at-9-45-19-am

เก็บการเขียนคำสั่งให้กระสุนพุ่งไปทิศข้างหน้าของจุดปล่อยไม่ว่าจะซ้ายหรือขวา ด้วยความเร็ว 6f และจะอยู่ในฉากแค่ 0.16f  นั่นคือสักพักก็จะทำลายตัวเอง ตามคำสั่งข้างล่าง

ไปที่ Hierarchy คลิกขวา เลือก UI->Image

ui

นำภาพใบหน้าตัวละครไปวางไว้แล้ว กดที่ Canvas ใน Hierarchy เลือกการปรับหน้าจอให้เป็น Responsive

ui2

ต่อมาให้เราสร้าง Enemy(Clone) สำหรับเป็น AI ตัวศัตรูเดินไปมาในฉาก และจะระเบิดไปเมื่อโดนกระสุนหรือ Bullet(Clone) ของเรา และถ้าเราวิ่งไปชนก็จะลดค่า healthBar จาก 100 ออกไป 20

enemyyทำการตั้งค่า Enemy(Clone) ตัวนี้โดยการ Slice เป็น Automatic นำ frame ทั้งหมดไปสร้างไฟล์ Animation และ Animator ให้เรียบร้อย ใส่ component ส่วนของ RigidBody2D สร้าง Constraint เป็น Freeze Rotation Z ให้เรียบร้อย เพิ่ม BoxCollider2D 2ค่า โดตัวใดตัวหนึ่งมี is Trigger เช่นเดียวกับ Player

สร้างไฟล์ C# ขึ้นมาชื่อว่า walker.cs ใส่ใน Enemy(Clone) ของเรา มีคำสั่งดังนี้

โดยกำหนดการเดินไปมาในฉากคือ ซ้ายขวาคำนวณตามระยะที่กำหนด

หากโดนกระสุนจะมีการเรียก Effect มาใช้โดยประกาศที่ Header

และเรียกใช้ใน OnTriggerEnter2D() ดังนี้

ในตัวอย่างนี้เราจะใช้ Assets ที่ชื่อว่า Simple Particle Pack ที่ดาวนฺโหลดมาใช้เป็น Effect สำหรับการระเบิดเมื่อศัตรูเราโดน Bullet

https://www.assetstore.unity3d.com/en/#!/content/3045

screen-shot-2016-09-17-at-9-00-36-am

ให้เราเลือก Effect ที่ชอบใน Folder Assets->SimpleParticlePack->Resources->Explosions แล้วลาก Prefabs ของระเบิดที่ต้องการไปวางใน Hierarchy เพื่อทดสอบ

explode

ตั้งค่า Add Component > Effects > Legacy Partic >Ellipsoid Particle Emitter ให้กับระเบิดทำการ Clone ไว้เป็น Prefabs ลบต้นแบบทิ้ง แล้วลากไปไว้ใน Explode ของ Enemy(Clone)

gt30

ทำการ Clone ตัว Enemy(Clone) เป็น Prefabs สำหรับลากไปวางบนฉาก เมื่อต้องการใช้ซ้ำ บ่อยๆ อย่าลืมเปลี่ยนชื่อเป็น Enemy(Clone) เพราะเงื่อนไขของ Player เรานั้นวิ่งชนส่วนนั้นได้อย่างเดียวครับ

cover-2dgame

ก็เป็นอันว่าเกมของเราเสร็จเรียบร้อยแล้ว หากไม่เข้าใจก็มีคลิปที่ผมได้ทำการสอนย้อนหลังไว้ให้นักศึกษาสาขาการออกแบบเชิงโต้ตอบและการพัฒนาเกม วิทยาลัยนวัตกรรมด้านเทคโนโลยี และวิศวกรรมศาสตร์ (CITE) มหาวิทยาลัยธุรกิจบัณฑิตย์ให้ดูประกอบ พร้อม Assets ครับ ที่วีดีโอข้างล่างเลย

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.