ซ่อน CanvasGameOver
คลิกที่แคนวาส จากนั้นไปที่หน้าต่าง Inspector ที่มุมบนซ้ายให้ติ๊กเครื่องหมายถูกออก
แสดง CanvasGameOver เมื่อเครื่องบินตาย
ไปที่ Script PlaneMovement ให้เพิ่มตัวแปรแคนวาสดังนี้ public Canvas _CanvasGameOver;
เพื่อทำการอ้างถึงตัว CanvasGameOver จากนั้นลากออบเจ็ค CanvasGameOver มาใส่ดังภาพ
เมื่อเครื่องบินมีการชนเกิดขึ้นจะเซ็ทให้ CanvasGameOver แสดงขึ้นมาได้ดังโค้ด
public void OnCollisionEnter2D(Collision2D collision)
{
_IsDead = true;
GetComponent<Animator>().SetBool("IsDead", true);
_CanvasGameOver.gameObject.SetActive(true);
}
หลังจากรันและทดสอบเกมจะเห็นว่าเมื่อเครื่องบินชนจะมี UI Game Over แสดงผลขึ้นมาโดยเล่นแอนิเมชั่นที่เราได้ทำการสร้างไว้ก่อนหน้านี้ด้วย
เริ่มเกมใหม่ด้วย LoadLevel
สร้าง C# Script ขึ้นมาใหม่ ในที่นี้ตั้งชื่อว่า UI จากนั้นสร้างฟังก์ชั่น Retry สำหรับทำหน้าที่ในการเริ่มเกมใหม่ ดังนี้
public class UI : MonoBehaviour
{
public void Retry()
{
Application.LoadLevel("Game");
}
}
คำสั่ง Application.LoadLevel("Game"); จะทำหน้าที่ในการโหลดซีนที่มีชื่อว่า "Game" ขึ้นมาใหม่ ให้ใส่ชื่อซีนที่ต้องการเข้าไป
กรณีผู้อ่านใช้ Unity 5.3 ขึ้นไปให้ใช้ SceneManager.LoadScene("Game") แทน
จากนั้นที่เกมออบเจ็ค CanvasGameOver ให้เพิ่ม Component UI Script เข้าไป
กลับไปที่เกมออบเจ็ค BtnRetry ที่หน้าต่าง Inspector ไปที่ Component Button จะเห็นว่ามีอีเว้นท์ On Click อยู่ ให้ลากเกมออบเจ็ค CanvasGameOver ไปใส่ เนื่องจากเราต้องการจะเรียกใช้ฟังก์ชั่น Retry ใน UI Script
เมื่อใส่เกมออบเจ็ค CanvasGameOver เรียบร้อยแล้ว ให้คลิกที่ No Function จะเห็นว่ามีป๊อปอัพขึ้นมา ให้เลือก UI จากนั้นเลือกฟังก์ชั่น Retry()
จะได้ผลลัพธ์ดังนี้
ทดสอบโดยการรันเกมเมื่อเครื่องบินชนจะมีป๊อปอัพ GameOver เปิดขึ้น จากนั้นเมื่อกดปุ่ม Retry จะเห็นว่าเกมได้ทำการเริ่มใหม่เรียบร้อย
UI Game Start
สร้างเกมออบเจ็ค Canvas ขึ้นมาใหม่ ในที่นี้จะตั้งชื่อให้เป็น CanvasStart จากนั้นตั้ง Reference Resolution X เป็น 1280 และ Y เป็น 720
สร้างเกมออบเจ็คในที่นี้ตั้งชื่อว่า GetReady โดยขวาที่ CanvasStart จากนั้นไปที่ UI -> Image
จากนั้น ที่ Source Image ให้นำภาพ textGetReady มาใส่ ที่ตำแหน่ง Pos Y ในที่นี้ให้เป็น 54
สร้าง UI -> Image ขึ้นมาอีก ในที่นี้ตั้งชื่อว่า TapLeft จากนั้นนำภาพ tapLeft มาใส่ กำหนดตำแหน่ง X เป็น -160 และตำแหน่ง Y เป็น -30
ทำแบบเดียวกันเพื่อสร้างเกมออบเจ็ค TapRight แต่ให้ตั้งค่าให้ตำแหน่ง X เป็น 160 แทน
สร้างเกมออบเจ็ค UI -> Image ในที่นี้ตั้งชื่อว่า Hand นำภาพ tap ใส่ใน Source Image ตั้งค่าตำแหน่งใหเ X เท่ากับ 200 และ Y เท่ากับ 120 จากนั้นเพิ่ม Component Animator
เนื่องจากเราจะให้ผู้เล่นรู้ว่าเมื่อคลิกจะเป็นการเริ่มเกม เราจะทำแอนิเมชั่นคลิกให้กับเกมออบเจ็ครูปมือนี้ เริ่มจากคลิกที่เกมออบเจ็ค Hand จากนั้นไปที่หน้าต่างการทำงานของ Animation คลิก Create เพื่อสร้างคลิปแอนิเมชั่น ในที่นี้ตั้งชื่อว่า Hand
ปรับ Samples ให้เท่ากับ 12 ที่เฟรม 0 ให้ลากภาพ tap เข้ามา
จากนั้นไปที่เฟรม 1 ให้ลากภาพ tapTick เข้ามา
ให้ทดสอบโดยการกดรันแอนิเมชั่นดูจะเห็นว่าที่รูปมือมีแอนิเมชั่นคลิกเรียบร้อย
คลิกเพื่อเริ่มเกม
เมื่อลองรันเกมดูจะเห็นว่าเกมจะเริ่มเล่นทันที ส่วน UI Game Start จะขึ้นมาตั้งแต่เริ่มรันซีน และยังอยู่ในขณะที่เล่นเกมจนกระทั่งจบเกม
ดังนั้นในส่วนนี้เราจะมาเขียนโค้ดให้แสดง UI Start Game และตัวเครื่องบินจะต้องยังไม่เริ่มบินทันทีในตอนเริ่มต้น แต่เมื่อผู้เล่นทำการคลิกเราจะทำการซ่อน UI Start Game และสั่งให้เครื่องบินบิน
เปิด Script PlaneMovement ขึ้นมา
สร้างตัวแปรสำหรับเช็คว่าเกมเริ่มหรือยัง โดยใช้ค่าเริ่มต้นเป็น false
private bool _IsStart = false;
สร้างฟังก์ชั่น Start() ขึ้นมาใช้สำหรับกำหนดค่าเริ่มต้นให้ค่า isKinematic เป็น true ซึ่งหมายความว่า Collision และ Rigidbody จะไม่ส่งผล ทำให้เครื่องบินไม่บินตกลงไปตามแรงโน้มถ่วง
private void Start()
{
GetComponent<Rigidbody2D>().isKinematic = true;
}
ในฟังก์ชั่น Update() เพิ่มการเช็ค _IsStart ถ้าเกมเริ่มแล้วถึงจะให้เครื่องบินบินไปทางขวา
private void Update()
{
if (_IsDead) return;
if (_IsStart)
{
Vector3 pos = new Vector3(_Speed, 0, 0);
transform.position += pos;
}
if (Input.GetMouseButtonDown(0))
{
GetComponent<Rigidbody2D>().AddForce(new Vector2(0, 1) * _TabSpeed);
}
}
ทดลองรันเกมจะเห็นได้ว่า เมื่อเริ่มเกมเครื่องบินจะหยุดอยู่กับที่ และแสดง UI Game Start เรียบร้อย
จากนั้นเราจะมาทำให้เมื่อเกิดการคลิกเกิดขึ้นให้ซ่อน UI Game Start และให้เครื่องบินตามปกติ ดังนี้
สร้างตัวแปร public Canvas เพื่อใช้อ้างอิงถึง UI Game Start
public Canvas _CanvasGameStart;
เลือกที่เกมออบเจ็ค Plane ที่ PlaneMovement Script จะเห็นว่ามี Canvas Game Start ขึ้นมา ให้ลากเกมออบเจ็ค CanvasGameStart ที่เราทำการสร้างเอาไว้ก่อนหน้านี้มาใส่
จากนั้นที่ฟังก์ชั่น Start() ให้เพิ่มโค้ดเพื่อแสดง UI Game Start เข้าไป
_CanvasGameStart.gameObject.SetActive(true);
จะได้ดังนี้
private void Start()
{
GetComponent<Rigidbody2D>().isKinematic = true;
_CanvasGameStart.gameObject.SetActive(true);
}
ในฟังก์ชั่น Update() ตรงส่วนการเช็คอีเว้นท์คลิกให้ทำการแก้ไขดังนี้
if (Input.GetMouseButtonDown(0))
{
if (!_IsStart)
{
_CanvasGameStart.gameObject.SetActive(false);
GetComponent<Rigidbody2D>().isKinematic = false;
_IsStart = true;
}
else
{
GetComponent<Rigidbody2D>().AddForce(Vector2.up * _TabSpeed);
}
}
หมายความว่าถ้าเกมยังไม่เริ่มและมีการคลิกเกิดขึ้น โปรแกรมจะวิ่งเข้าไปทำโค้ดดังต่อไปนี้
_CanvasGameStart.gameObject.SetActive(false); //ซ่อน UI Game Start
GetComponent<Rigidbody2D>().isKinematic = false; //กำหนดให้ Collision และ Rigidbody มีผลต่อเกมออบเจ็คนี้
_IsStart = true; //ให้ตัวแปรเช็คเป็น true แสดงว่าเกมเริ่มแล้ว
หลังจากเกมเริ่มแล้วและผู้เล่นได้ทำการคลิกจะทำให้โปรแกรมลงมาทำงานที่บรรทัดดังต่อไปนี้
GetComponent<Rigidbody2D>().AddForce(Vector2.up * _TabSpeed); //ให้เครื่องบินบินขึ้นเมื่อมีการคลิก
ลองทดสอบโดยการรันและเล่นเกมจะเห็นว่าเราได้ UI เกมครบ Flow แล้ว คือ
- แสดง UI Game Start
- คลิกเพื่อเริ่มเกม -> ซ่อน UI Game Start -> เกมเริ่มเล่น
- เมื่อตาย แสดง UI Game Over
- คลิก Retry -> ซ่อน UI Game Over -> โหลดเกมใหม่
- Visual Studio หรือ MonoDevelop
- มีการใช้งานอย่างกว้างขวาง
- Login
