วันจันทร์ที่ 31 สิงหาคม พ.ศ. 2558

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 8 : สร้าง Prefab ฉากพื้นหลัง

สร้างพื้นหลัง

คลิกขวาใน Hierarchy จากนั้นเลือก 2D Object -> Sprite จะได้ Game Object ที่มี Component Sprite Renderer ในที่นี้จะตั้งชื่อว่า Background
จากนั้นใส่ Asset ภาพ background ให้กับ Component Sprite Renderer
ดูที่หน้าต่างซีนและ Camera Preview จะเห็นว่าภาพพื้นหลังของเราเล็กกว่ากล้องมาก
ดังนั้นจะมาทำการปรับขนาดของภาพพื้นหลังกัน ดังนี้

คลิกที่เกมออบเจ็ค Background ไปที่หน้าต่าง Inspector ที่ Component Transform จะเห็นค่า Scale ให้ปรับค่า Scale X และ Scale Y เล่นดู จะเห็นว่า Scale X คือความกว้าง และ Y คือความสูงนั่นเอง
ในที่นี้จะปรับ Scale X และ Scale Y เป็น 2.1เนื่องจากอิงแนวตั้งเป็นหลัก จะเห็นว่าใน Camera Preview ฝั่งแนวนอนยังเหลือพื้นที่ว่าง แต่ไม่ต้องกังวลเพราะเดี๋ยวเราจะทำการเพิ่มฉากพื้นหลังทางด้านซ้ายและขวา เพราะเดี๋ยวเราจะมาเขียนโปรแกรมให้ฉากวนลูปกัน
แต่ก่อนที่เราจะทำการเพิ่มฉากพื้นหลังทางด้านซ้ายและขวา เราจะทำการเตรียมตัวฉากหลังให้เรียบร้อยก่อนเพื่อที่เราจะได้ก๊อปปี้ทีเดียว เนื่องจากตอนนี้เรายังไม่สามารถทราบขนาดของฉากหลังที่เราสร้างได้จะเห็นว่าใน Component Transform จะมีแค่ตำแหน่ง การหมุน และสเกล แต่เราอยากทราบขนาดของภาพฉากหลังเพื่อที่จะนำมาคำนวณในการเขียนโค้ดการวนลูปฉาก ดังนั้นเราจะมาทำการใส่ BoxCollider2D ใก้กับฉากหลังกัน

อะไรคือ BoxCollider2D

BoxCollider2D เป็นตัวตรวจสอบการชนกันของวัตถุโดยใช้หลักฟิสิกส์ โดย BoxCollider2D จะมีรูปร่างเป็นสี่เหลี่ยมพื้นผ้า

ให้ทำการใส่ BoxCollider2D ให้กับเกมออบเจ็ค Background โดยคลิกที่เกมออบเจ็ค Background ไปที่หน้าต่าง Inspecter คลิก Add component -> Physics 2D -> Box Collider 2D
 จากนั้นจะสังเกตได้ว่าใน Component จะมีความกว้างและความสูงให้ปรับที่ Size X และ Y นั่นเอง
หลังจากเราเตรียมฉากพื้นหลังเรียบร้อยแล้วเราะจะมาก๊อปปี้ฉากหลังกัน แต่เราจะไม่ก๊อปปี้ธรรมดา เราจะสร้างเก็บเป็น Prefabs

ทำความรู้จักกับ Prefab

การที่เราจะก๊อปปี้เกมออบเจ็ค เราก็แค่คลิกที่เกมออบเจ็คนั้นๆ จากนั้นกด Ctrl + D เราก็จะได้เกมออบเจ็คนั้นๆมาแล้ว ถ้าก๊อปปี้มาสัก 10 อัน แล้วเกิดต้องการแก้ไข Property อะไรสักอย่างละ อย่างนี้เราก็ต้องมานั่งแก้ทั้ง 10 อันใช่หรือไม่

Prefeb ใน Unity จะช่วยแก้ปัญหาเรื่องนี้มาก เนื่องจากการสร้าง Prefab คือการสร้างแม่แบบ เมื่อเรามีการแก้ไขแม่แบบทุกๆเกมออบเจ็คที่เป็น Prefab ชนิดเดียวกันจะถูกแก้ไขตามไปด้วย สร้างความยืดหยุ่นให้กับเกมออบเจ็คที่มีการ Reuse หลายๆที่

วิธีการสร้าง Prefab ทำได้ง่ายๆโดยการลากเกมออบเจคที่จะสร้าง Prefab ไปไว้ในโฟลเดอร์ที่ต้องการจัดเก็บ ดังภาพจะได้กล่องสีเหลี่ยมสีฟ้าๆชื่อว่า Background
ลาก Prefeb พื้นหลังที่เราทำการสร้างเมื่อสักครู่มาใส่ใน Hierarchy 2 อัน จากนั้นตั้งชื่อให้ใหม่เป็น Background1 Background2 และ Background3

การเปลี่ยนชื่อเกมออบเจ็คทำได้ที่บนสุดของหน้าต่าง Inspector
เราจะให้ Background2 เป็นฉากหลังที่อยู่ตรงกลางคือมี Position X เริ่มต้นที่ 0 และจะให้ Background1 เป็นฉากหลังทางซ้าย ส่วน Background3 เป็นฉากหลังที่อยู่ฝั่งขวา

คำนวนตำแหน่งของพื้นหลัง

จากภาพจะเห็นว่าที่ BoxCollider2D มี Size X หรือความกว้างเท่ากับ 8 แต่มี Scale X เท่ากับ 2.1 ดังนั้นตำแหน่งของพื้นหลังจะเท่ากับ 2.1*8 = 16.8
ดังนั้นตำแหน่งของฉากหลังทางซ้ายหรือ Background1 จะเท่ากับ -16.8 ส่วนตำแหน่งของฉากหลังทางขวาหรือ Background3 จะเท่ากับ 16.8

วันอาทิตย์ที่ 30 สิงหาคม พ.ศ. 2558

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 7 : จัดการกล้องให้ติดตามเครื่องบิน

เขียน Code ให้กล้องติดตามเครื่องบิน

สร้าง Script C# -ขึ้นมาใหม่ในที่นี้จะตั้งชื่อว่า CameraTrackPlane

สร้างตัวแปร  public GameObject _Plane; ขึ้นมาในคลาสเพื่อใช้อ้างอิงถึง Game Object Plane ที่เราได้ทำการสร้างไว้แล้ว

จากนั้นให้สร้างตัวแปรขึ้นมาอีกตัว คือ private float _OffsetX; เพื่อใช้เก็บระยะห่างระหว่างกล้องและเครื่องบิน สาเหตที่ต้องมี _OffsetX เนื่องจากเราไม่อยากให้กล้องตามตำแหน่งเดียวกับเครื่องบินเลยซะทีเดียว เพราะไม่งั้นเครื่องบินจะมาอยู่กึ่งกลางหน้าจอเวลาเล่นเกม เราอยากให้เครื่องบินอยู่ค่อนไปทางซ้ายของเกมแบบภาพข้างล่างนี้
โดยการคำนวณระยะห่างระหว่างเครื่องบินและกล้อง คือ
ตำแหน่ง x ของกล้อง - ตำแหน่ง x ของเครื่องบิน

ถ้าเขียนเป็น Code จะได้ดังนี้
_OffsetX = transform.position.x - _Plane.transform.position.x;
จะเห็นว่าใช้ tranform.position ที่ได้สอนไปแล้วในตอนที่แล้ว

โดยจะเซ็ทค่าให้ตัวแปร _OffsetX แค่ครั้งเดียวก็พอจึงทำในฟังก์ชั่น Start() จะได้ Code ดังนี้

public class CameraTrackPlane : MonoBehaviour
{
  public GameObject _Plane;
  private float _OffsetX;

  private void Start()
  {
    _OffsetX = transform.position.x - _Plane.transform.position.x;
  }
}

ต่อมาเราจะต้องทำการเปลี่ยนตำแหน่งให้กล้องเคลื่อนที่ไปทางขวาตลอดตามเครื่องบินโดยใช้ค่า _OffsetX ที่เราได้คำนวณไว้ในฟังก์ชั่น Start() อย่างที่เคยกล่าวไว้แล้วว่าฟังก์ชั่น Start() จะทำงานก่อนฟังก์ชั่น Update() ดังนั้นเมื่อฟังก์ชั่น Update() ถูกเรียกค่า _OffsetX จึงถูกเซ็ทเรียบร้อยแล้ว

ใช้ความรู้เรื่องการเปลี่ยนตำแหน่งในตอนที่แล้ว

  private void Update()
  {
    Vector3 pos = new Vector3(_Plane.transform.position.x + _OffsetX, transform.position.y, transform.position.z);
    transform.position = pos;
  }

Add Component ให้กล้อง

กลับไปที่ Unity คลิกที่ Game Object Main Camera จากนั้นเพิ่ม Script CameraTrackPlane ลงไป จะเห็นว่าที่ Script มี Plane ขึ้นมา ให้ลาก Game Object Plane ลงไปเพื่อทำการอ้างอิงถึง Game Object ที่กล้องจะติดตาม
เมื่อรันเกมจะเห็นว่าเครื่องบินไม่บินหลุดออกจากหน้าจอแสดงผลแล้ว เพราะตอนนี้กล้องตามเครื่องบินเรียบร้อยแล้ว แต่ยังเห็นภาพไม่ชัดเจนว่าเครื่องบินกำลังบินไปทางขวาอยู่หรือไม่ ในตอนหน้าเราจะมาทำการใส่ฉากพื้นหลังให้กับเกมกัน
ถัดไป
ตอนที่ 7 : จัดการกล้องให้ติดตามเครื่องบิน

วันเสาร์ที่ 29 สิงหาคม พ.ศ. 2558

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 6 : มาเริ่มบินกันเถอะ

สร้าง C# Script

ในตอนที่ 6 นี้เราจะมาทำการ Scripting การเคลื่อนที่ของเคลื่อนบินกันโดนใช้ภาษา C# เริ่มแรกเรามาสร้าง Script C# กันก่อน ดังนี้

คลิกขวา Create -> C# Script เพื่อทำการสร้างไฟล์ C# Script ขึ้นมา โดยให้ตั้งชื่อว่า PlaneMovement

เพิ่ม Script ให้กับ Game Object

หลังจากนั้นเราจะต้องทำการเพิ่ม Component Script PlaneMovement เพื่อให้ Game Object Plane รู้จักดังนี้

คลิกที่ Game Object Plane ทางด้านขวาที่หน้าต่าง Inspector คลิกที่ Add Component จากนั้นช่องค้นหาให้พิมพ์ชื่อ Script ที่เราต้องการเพิ่ม เลือก Plane Movement

เริ่มเขียนโปรแกรม

เปิด Script PlaneMovement ขึ้นมา จะเห็นว่าข้างใน Script จะมีฟังก์ชั่น Start() และ Update()

ฟังก์ชั่น Start() จะถูกเรียกครั้งแรกและครั้งเดียว และฟังก์ชั่น Start() จะถูกเรียกก่อนฟังก์ชั่น Update() เสมอ

ส่วนฟังก์ชั่น Update() จะถูกเรียกทุกๆเฟรม

รับ Input จากผู้เล่น

ในฟังก์ชั่น Update ให้เพิ่ม Code ดังนี้

private void Update()
  {
    if (Input.GetMouseButtonDown(0))
    {
      Debug.Log("Click");
    }
  }

Input.GetMouseButtonDown(0) จะเป็น True เมื่อมีการคลิกที่เม้าส์ซ้ายเกิดขึ้น หรือถ้าเป็นบนมือถือจะเป็น True เมื่อมีการแตะที่หน้าจอ

สาเหตที่ต้องเช็คการรับ Input จากผู้เล่นที่ในฟังก์ชั่น Update() เพราะเราไม่รู้ว่าผู้เล่นจะส่ง Input มาตอนไหน การเช็คใน Update() คือเช็คทุกๆเฟรมจะทำให้เราไม่พลาด Input ที่ผู้เล่นส่งมา

เนื่องจาก Unity ยังมีอีกฟังก์ชั่นที่ชื่อว่า FixedUpdate() ที่จะไม่ได้ถูกรันในทุกๆเฟรมเหมือน Update() แต่จะรันประมาณ 50 ครั้งขึ้นไปต่อวินาที จึงทำให้สามารถพลาดเฟรมใดเฟรมหนึ่งที่ผู้เล่นป้อน Input เข้ามาได้

จากนั้นทดสอบโดยรันเกมแล้วกดคลิก จะเห็นว่าในหน้าต่าง Console จะ print string ที่เราพิมพ์ไป อารมณ์เหมือน printf ในภาษา C หรือ echo ใน PHP
เราสามารถคลิกเข้าไปดูรายละเอียดในหน้าต่าง Console ได้โดยทำการคลิกมุมซ้ายล่าง หน้าต่าง Console ยังมีประโยชน์ไว้ใช้สำหรับดู Bug ต่างๆอีกด้วย

ทำความรู้จักกับ Rigidbody2D

Rigidbody2D เป็น Component สำหรับ Sprite 2D ถ้าใครเคยใช้ Unity ทำเกม 3D มาก่อนจะรู้ว่า Unity เองก็มี Rigidbody สำหรับ 3D  แต่หลังจาก Unity 4.3 ปล่อย 2D Tool ออกมา Unity ก็ได้เพิ่ม Rigidbody2D มาด้วย สรุป Rigidbody2D ใช้สำหรับทำเกม 2D นั่นเอง ดังนั้นในโปรเจคนี้เราจึงใช้ Rigidbody2D

การเพิ่ม Rigidbody2D ลงไปใน Game Object จะทำให้ Game Object นั้นๆถูกควบคุมโดยฟิกส์เอนจิ้นของ Unity โดยแรงโน้มถ่วงจะมีผลต่อ Game Object นั้นๆ และนอกจากนี้ใน Script ยังสามารถใช้ฟังก์ชั่นที่เกี่ยวกับฟิสิกส์ได้

เพิ่ม Rigidbody2D

วิธีการเพิ่ม Rigidbody2D ให้คลิกที่ Game Object ที่ต้องการ จากนั้นทางด้านขวามือที่หน้าต่าง Inspector ให้คลิก Add Component -> Physics 2D -> Rigidbody 2D
หลังจากนั้นลองรันเกมดูจะเห็นว่าเครื่องบินของเราบินตกลงเรื่อยๆ แสดงว่าเครื่องบินของเรามีแรงโน้มถ่วงทางฟิสิกส์เข้ามาเกี่ยวข้องเรียบร้อยแล้ว

บินขึ้นด้วย AddForce

สร้างตัวแปรชนิด Float มาหนึ่งเพื่อกำหนดความเร็วของการบินขึ้นเมื่อผู้เล่นทำการคลิกที่เม้าส์หรือแตะที่หน้าจอมือถือ โดยกำหนดดีฟอลต์เท่ากับ 200

public float _TabSpeed = 200f;
  
  private void Update()
  {
    if (Input.GetMouseButtonDown(0))
    {
      GetComponent<Rigidbody2D>().AddForce(Vector2.up * _TabSpeed);
    }
  }

เมื่อกดรันเกมแล้วกดคลิกเม้าส์ซ้ายจะเห็นได้ว่าเครื่องบินบินขึ้นแล้ว

อะไรคือ Vector2

Vector2 คือ การแสดงตำแหน่งแบบ 2D ด้วยจุด x และ y โดยที่ up คือตัวแปรแบบ Static ที่จะสามารถทำให้เราเขียนโปรแกรมได้สะดวกและสั้นลง

down คือ Vector2(0, -1)
up คือVector2(0, 1)
left  คือ Vector2(-1, 0)
right คือ Vector2(1, 0)
zero คือ Vector2(0, 0)

ดังนั้นถ้าเขียนเต็มๆจะได้
GetComponent<Rigidbody2D>().AddForce(new Vector2(0, 1) * _TabSpeed);

เราไม่ได้ต้องการให้เครื่องบินบินขึ้นแค่ 1 ดังนั้นเราจึงทำการคูณด้วยตัวแปร _TapSpeed โดยการสร้างตัวแปรเป็นชนิด Public จะสามารถทำให้เราปรับค่าระหว่างรันได้

จากภาพจะเห็นว่าที่ Script PlaneMovement มีตัวแปร Tab Speed ขึ้นมาให้เราสามารถปรับแต่งค่าระหว่างอยู่หน้าจอ Unity ได้ ให้ลองรันเกมแล้วปรับค่า Tab Speed ดู จะเห็นว่าเมื่อกดกดหยุดแล้วค่าจะกลับมาเป็นเหมือนเดิม
AddForce เป็นฟังก์ชั่นทางฟิกส์ซึ่งจะทำการคำนวณให้ว่าเครื่องบินควรจะบินขึ้นไปเท่าไหร่ โดยคำนวณจากหลายๆปัจจัยทางฟิสิกส์ เช่น ความเร่ง และมวลสาร เป็นต้น

บินไปทางขวาด้วยการเปลี่ยนตำแหน่ง

เมื่อเราสร้าง Empty Game Object ขึ้นมาจะมี Component Tranform ขึ้นมาให้ด้วยเลย เพราะว่าตัว Tranform นี่แหละที่เป็นตัวบอกตำแหน่งว่าตอนนี้ Game Object นี้อยู่ตำแหน่งไหนของเกม
เราจะมาทำให้เครื่องบินบินไปทางขวาเรื่อยๆกัน

อย่างแรกเลยสร้างตัวแปรชนิด Float ในที่นี้จะตั้งชื่อตัวแปรว่า _Speed ใช้เก็บค่าความเร็วของเครื่องบินที่จะเคลื่อนที่ไปทางขวา

 public float _TabSpeed = 200f;
  public float _Speed = 0.1f;

  private void Update()
  {
    Vector3 pos = new Vector3(_Speed, 0, 0);
    transform.position += pos;
 
    if (Input.GetMouseButtonDown(0))
    {
      GetComponent<Rigidbody2D>().AddForce(new Vector2(0, 1) * _TabSpeed);
    }
  }

ทำไม Vector3

Vector3 คือตำแหน่งแบบ 3D คือจุด x y และ z ถึงโปรเจคนี้จะเป็น 2D แต่ Component ต่างๆของ 2D เพิ่งจะมีเข้ามาตอน Unity เวอร์ชั่น 4.3 Component Tranform เป็น Component ที่มีมาก่อนที่ 2D จะเข้ามา แต่ Component Tranform สามารถใช้ใน 2D ได้เช่นกัน โดยการใส่ค่า z ให้เป็น 0

Vector3 pos = new Vector3(_Speed, 0, 0); จะทำการสร้างตำแหน่งใหม่โดยให้ x เท่ากับ _Speed
transform.position += pos; เป็นการเปลี่ยนตำแหน่งโดยบวกไปเรื่อยๆ จะทำให้เห็นว่าเครื่องบินเคลื่อนที่ไปทางขวาตลอด

รันและทดสอบเกมจะเห็นว่าเครื่องบินจะบินไปเรื่อยๆจนออกหน้าแสดงผลเกมไปเลย ในตอนหน้าจะมาเขียนโปรแกรมให้กล้องติดตามเครื่องบิน เพื่อที่จะได้แสดงผลเครื่องบินตลอดเวลา
ตอนที่ 7 : จัดการกล้องให้ติดตามเครื่องบิน

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 5 : Animator และ Mecanim

เปิดหน้าต่าง Animator

ไปที่ Window -> Animator
จะได้หน้าต่างการทำงานหน้าตาแบบนี้

ทำความรู้จักกับ Animator Controller

Animator Controller ทำหน้าที่จัดการแอนิเมชั่นของตัว Game Object นั้นๆ โดยที่ Animator Controller สามารถมีได้หลายแอนิเมชั่นคลิป

จะเห็นว่า Game Object Plane ประกอบไปด้วย Component ที่เรียกว่า Animator โดยมี Asset ที่ชื่อว่า Plane ซึ่ง Plane เป็น Animator Controller
ให้คลิกที่ไฟล์ Plane ที่เป็น Animator Controller จะเห็นว่าหน้าต่าง Animator จะแสดงแอนิเมชั่นที่ Animator Controller ควบคุมอยู่ขึ้นมา

เนื่องจากตอนที่แล้วที่เราได้สร้างแอนิเมชั่นให้ Game Object Plane ขึ้นมา 2 แอนิเมชั่น ได้แก่แอนิเมชั่น Fly และแอนิเมชั่น Die เราจึงเห็นว่าใน Animator มีกล่องสี่เหลี่ยมๆที่มีชื่อเดียวกันกับแอนิเมชั่นที่เราได้สร้างไว้เมื่อตอนที่แล้ว
เมื่อคลิกไปที่กล่องสี่เหลี่ยมๆจะเห็นว่าที่ Motion จะอ้างอิงไปยังแอนิเมชั่นคลิปนั่นเอง จะเห็นได้ว่ากล่องเหลี่ยมๆนี้ไม่ใช่แอนิเมชั่นแต่เป็นตัวอ้งอิงถึงแอนิเมชั่น กล่องเหลี่ยมๆพวกนี้คือ State ใน Mecanim นั่นเอง

Mecanim

Mecanim คือตัวประสานงานระหว่างฝั่งแอนิเมชั่นและฝั่ง Code โดยจะใช้ Parameters เป็นตัวกลางในการสื่อสาร

กำหนดดีฟอลต์แอนิเมชั่น

จากรูปเมื่อกดรันเกมจะเห็นว่า State Fly มีหลอดสีฟ้าๆวิ่งอยู่ หมายความว่าในขนาดนี้ Game Object Plane กำลังเล่นแอนิเมชั่น Fly อยู่
หลายๆคนอาจจะสงสัยว่าทำไมถึงเล่นแอนิเมชั่น Fly ก่อน? คำตอบก็คือเพราะว่า Fly เป็นดีฟอลต์แอนิเมชั่น สังเกตได้จาก State Fly เป็นสีส้ม

เราสามารถเปลี่ยนดีฟอลต์แอนิเมชั่นได้โดยการคลิกขวาที่ State ที่เราต้องการให้เป็นดีฟอลต์แอนิเมชั่นจากนั้นเลือก Set As Layer Default State จะเห็นว่า State นั้นจะเปลี่ยนเป็นสีส้มแทน
แต่ในโปรเจคนี้เราต้องการให้ Fly เป็นดีฟอลต์แอนิเมชั่น ดังนั้นอย่าลืมเซ็ตกลับไปเหมือนเดิมด้วยหละ

สร้าง Transition

Transition คือเส้นที่ใช้เชื่อมต่อระหว่าง State ในโปรเจคนี้เราต้องการให้เครื่องบินๆเรื่อย และจะเปลี่ยนมาเล่นแอนิเมชั่นตายเมื่อมีการชนสิ่งกีดขวาง ดังนั้นเราจะสร้างเส้น Transition จาก State Fly ไป State Die

โดยให้ทำการคลิกขวาที่ State Fly เลือก Make Transition จะเห็นว่ามีเส้นเกิดขึ้น จากนั้นให้คลิกที่ State Die จะเกิดการเชื่อม Transition ขึ้น

สร้าง Parameters

อย่างที่กล่าวไปแล้วว่า Parameters เป็นตัวกลางในการสื่อสาร ในโปรเจคนี้เราจะทำการสร้าง Parameter ขึ้นมาค่าหนึ่งเพื่อเป็นตัวกลางบอกว่าเครื่องบินตายแล้ว

ในหน้าต่าง Animation ทางด้านซ้ายมือบน ให้คลิกที่ Parameters จากนั่นคลิกที่เครื่องหมายบวก จะมีป๊อปอัพแสดงชนิดของ Parameters ในโปรเจคนี้จะใช้ Bool และตั้งชื่อ Parameter นี้ว่า IsDead และเซ็ทค่าดีฟอลต์ของ Paremeter IsDead ให้เป็น False (ไม่ต้องติ๊กถูก)

หมายความว่าถ้าเครื่องบินยังบินอยู่ IsDead จะเป็น False แต่ถ้าเครื่องบินมีการชนเกิดขึ้น ทางฝั่ง Code จะเซ็ทค่า IsDead ให้เป็น True

กำหนด Condition ให้ Transition

การเปลี่ยน State จะเกิดขึ้นเมื่อมีเงื่อนไขอะไรสักอย่าง ในที่นี้คือเมื่อ IsDead เป็น True จะเกิดการเปลี่ยนจาก State Fly เป็น State Die โดยการกำหนด Condition ให้ Transitionเพื่อเป็นตัวบอกเงื่อนไขนั้นๆ

วิธีการกำหนด Condition ให้คลิกที่เส้น Transition ระหว่าง State Fly และ State Die ที่หน้าต่าง Inspector จะแสดงรายละเอียดของเส้น Transition จากนั้นที่แถบ Condition ให้เลือก Parameter เป็น IsDead และเซ็ทค่าให้เป็น true 

ทดสอบ Mecanim ที่สร้าง

กดรันเกมและเซ็ทค่าให้ Parameter IsDesd ให้เป็น True จะเห็นว่าหลอดสีฟ้าๆวิ่งจาก  State Fly มา State Die และที่หน้าต่าง Game จะแสดงแอนิเมชั่นตายให้เห็น
ในตอนหน้าเราจะมาเริ่มเขียนโปรแกรมการเคลื่อนที่ให้เครื่องบินกัน
ตอนที่ 7 : จัดการกล้องให้ติดตามเครื่องบิน

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 4 : สร้างแอนิเมชั่นให้เครื่องบิน

เปิดหน้าต่าง Animation

เริ่มแรกเลยมารู้จักกับ Animation Tool กันก่อน ไปที่ Window -> Animation เพื่อเปิดหน้าต่างการทำงานของ Animation ขึ้นมา
จะได้หน้าต่างการทำงานแบบนี้

สร้างแอนิเมชั่นบินให้เครื่องบิน

เราจะมาสร้างแอนิเมชั่นบินให้เครื่องบินกันก่อน ให้ทำการคลิกที่ Game Object Plane ที่เราได้สร้างไว้ในตอนที่แล้วเพื่อทำการเลือก Game Object ที่เราจะทำการสร้างแอนิเมชั่นให้ จากนั้นที่หน้าต่าง Animation ให้คลิกที่ Create เพื่อสร้างแอนนิเมชั่นคลิปขึ้นมา จะมีป๊อปอัพให้เราตั้งชื่อแอนนนิเมชั่นคลิป ในที่นี้ให้ตั้งชื่อว่า Fly

ไปยังที่ที่เซฟแอนิเมชั่นคลิปไว้จะเห็นว่าได้ไฟล์ใหม่มา 2 ไฟล์ คือ Fly แอนนิเมชั่นคลิปที่เราตั้งใจสร้าง และอีกไฟล์หนึ่งคือ Plane ซึ่งจะมีชื่อไฟล์ชื่อเดียวกันกับ Game Object ที่เราลือกจะไว้ว่าจะสร้างแอนนิเมชั่นให้ เนื่องจาก Unity จะออโต้สร้างให้เป็นชื่อเดียวกับ Game Object ซึ่งไฟล์ Plane คือ Animator Controller ส่วน Animator Cotroller คืออะไรจะกล่าวถึงในภายหลัง
 เลือกรูปภาพ planeYellow1  planeYellow2 และ planeYellow3 หรือจะเลือกสีอื่นก็ได้ตามใจชอบ
จากนั้นลากทั้ง 3 รูปภาพลงใน แอนิเมชั่นคลิป Fly ที่เราสร้างเมื้อกี้
คลิกเพื่อเล่นแอนิเมชั่นคลิป 
ในหน้าต่าง Scene จะเห็นว่าเครื่องบินมีแอนิเมชั่นบินแล้ว

อะไรคือ Samples

หลังจากที่เราได้ทำการสร้างแอนิเมชั่นกันไป เราจะเห็นได้ว่าเครื่องบินบินเร็วไปนั่นก็เพราะค่าดีฟอลต์ของแอนนิเมชั่นเป็น 60 เฟรมต่อวินาที

วิธีเปลี่ยนค่าดีฟอลต์ให้ไปที่หน้าต่าง Animation ที่ค่า Samples ให้เปลี่ยนค่าจาก 60 เป็น 12 หมายความว่าตอนนี้แอนนิเมชั่นที่เราสร้างจะมีอัตราเฟรมเรท 12 เฟรมต่อวินาที กดรันแอนนิเมชั่นอีกทีเพื่อดูผลลัพธ์

สร้างแอนิเมชั่นตายให้เครื่องบิน

สร้างคลิปใหม่ให้กับ Game Object Plane โดยการคลิกที่ Fly จะมีป๊อปอัพขึ้นมาให้คลิกที่ Create New Clip จะมีป๊อปอัพขึ้นมาให้เลือกที่จัดเก็บและตั้งชื่อแอนิเมชั่นคลิปใหม่ที่เราจะสร้าง ในที่นี้จะตั้งชื่อว่า Die
จะเห็นว่ามีไฟล์แอนิเมชั่นใหม่ที่เราสร้างขึ้นมาในโฟลเดอร์ที่เราเลือกจัดเก็บ
กลับมาที่หน้าต่าง Animation เราจะสร้างแอนนิเมชั่นตายให้กับเครื่องบิน โดยเมื่อเครื่องบินชนเราจะค่อยๆปรับให้สีเครื่องบินจางลงจนถึงระดับหนึ่งเหมือนในรูปภาพ

อย่างแรกเริ่มจากลากภาพ planeYellow3 เข้ามาในหน้าต่างแอนิเมชั่น หลักจากนั้นคลิกที่ปุ่ม Add Property เลือก Sprite Renderer คลิกปุ่มบวกที่ Color
เปลี่ยนค่า Samples เป็น 12 เพื่อปรับค่าเฟรมเรทเป็น 12 เฟรมต่อ 1 วินาที จากนั้นไปที่เฟรมที่ 5 โดยการเปลี่ยนเลขที่อยู่ข้างบนชื่อแอนิเมชั่นจาก 0 เป็น 5
ที่ Plane : Sprite Renderer.Color คลิกลูกศรข้างหน้าเพื่อขยายดูค่าข้างใน จะเห็นว่ามีออพชั่นเกี่ยวกับสี RGB Color.r Color.g และ Color.b ตามลำดับ ส่วน Color.a จะหมายถึง Alpha ในที่นี้เราจะมาปรับ Color.a กัน เพราะเราต้องการให้เครื่องบินจางลง ไม่ได้ต้องการเปลี่ยนสีเครื่องบิน เปลี่ยนค่า Color.a เป็น 0.6

ปรับให้แอนนิเมชั่นเล่นครั้งเดียวแล้วหยุด

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

ไปที่ที่จัดเก็บแอนิเมชั่นตายที่เราทำการสร้างไว้ก่อนหน้านี้ คลิกที่แอนิเมชั่น ทางด้านขวาที่หน้าต่าง Inspector ให้ติ๊ก Loop Time ออก เราก็จะได้แอนิเมชั่นที่เล่นครั้งเดียวแล้วหยุดอย่างที่ต้องการ
ตอนที่ 7 : จัดการกล้องให้ติดตามเครื่องบิน

วันศุกร์ที่ 28 สิงหาคม พ.ศ. 2558

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 3 : รู้จักกับ Game Object และ Scene

รู้จักกับ Game Object ใน Unity

Unity จะมองทุกอย่างเป็น Game Object จากตัวอย่างภาพข้างล่างใน Hierarchy จะประกอบไปด้วย Game Object ทั้งหมดที่ใช้ในเกม ประกอบไปด้วยฉากพื้นหลัง ก้อนหิน เสียง UI หรือตัวจัดการต่างๆที่อาจจะไม่แสดงให้เห็นในเกม เช่น Looper ที่ใช้จัดการฉากต่างๆภายในเกม เป็นต้น

Game Object แต่ละอันจะไปประกอบไปด้วย Component โดยที่ Game Object 1 อัน สามารถมีได้หลาย Component และใน Component จะมี Asset โดยขึ้นอยู่ชนิดของ Component ยกตัวอย่างจากภาพ Mesh Renderer ประกอบไปด้วย Asset Material เป็นต้น
ที่มาภาพ :  http://www.rivellomultimediaconsulting.com/wp-content/uploads/2013/05/unity14_diagram-500x243.png

จากภาพ Game Object Background1 ประกอบไปด้วย Component  Transform Sprite Renderer และ Box Collider2D ตามลำดับ จะเห็นได้ว่า Component Spite Renderer ประกอบไปด้วย Asset background คือรูปภาพฉากพื้นหลังไฟล์ PNG ที่เราได้เพิ่มเข้ามาในโปรเจคตอนที่แล้วนั่นเอง

สร้าง Game Object เครื่องบิน Add Conponent และ Asset

ไปที่ GameObject -> Crete Enpty เพื่อสร้าง Game Object ใหม่

ตั้งชื่อ Game Object ให้สื่อความหมาย ในที่นี้ให้ชื่อว่า Plane
ทางด้านขวามือในแถบ Inspector  คลิก Add Component  เลือก Rendering -> Sprite Renderer
จากนั้นลากภาพเครื่องบินไปใส่ในช่อง Sprite

Scene คืออะไร

เกมหนึ่งเกมจะประกอบไปด้วยซีนอย่างน้อยหนึ่งซีน ในซีนหนึ่งซีนจะประกอบไปด้วย Game Object หลายๆตัว เพื่อให้ตัวเกมทำงานได้อย่างสมบูรณ์ เกมอาจจะประกอบไปด้วยหลายๆซีนตัวอย่างเช่น ซีนเมนูสำหรับหน้าแรกก่อนเข้าเกม ซีนสำหรับแมพหมู่บ้านบางกระท่อม ซีนสำหรับเมืองจีน เป็นต้น

Save Scene อย่างไร

File -> Save Scene

สร้าง Scene ใหม่ได้อย่างไร

เราสามารถสร้างซีนใหม่ได้โดยไปที่ File -> New Scene
ตอนที่ 7 : จัดการกล้องให้ติดตามเครื่องบิน