มาทำนาฬิกาจับเวลาถอยหลังกันดีกว่า

stopwatch-icon-32

สวัสดีครับ กลับมาพบกับเทคนิคดีๆในการเขียนเกมด้วย Unity กันอีกเช่นเคยนะครับ วันนี้ไม่มี Asset มาฝาก แต่มี Code snippet ง่ายๆใช้ได้จริงมาฝากแทนครับ โดยวันนี้ผมจะมาแนะนำวิธีการทำนาฬิกาจับเวลาแบบง่ายๆครับ

ในเกมของเพื่อนๆ หลายๆครั้งก็น่าจะมีการใช้การจับเวลาใช่ไม๊ล่ะครับ ไม่ว่าจะเป็นการจับเวลาเล่นเกม การจับเวลาสู้กับบอส แต่หลายๆครั้ง Process พวกนี้เราก็ทำหลังบ้าน ไม่ได้เอาออกมาให้ผู้เล่นเห็น แต่วันนี้ผมจะแนะนำวิธีการทำนาฬิกาจับเวลาแบบดิจิตอล เพื่อให้ค่อยๆนับเวลาถอยหลังได้ครับ

เริ่มด้วยการสร้าง Text Ui ขึ้นมาก่อนครับ  และใส่ค่าเริ่มต้นไว้ว่า 00:00:00 ครับ

01

จากภาพจะสังเกตว่าผมสร้างสคริปชื่อว่า stopwatch ไว้แล้ว มาค่อยๆเขียนตามไปครับ

02

เริ่มมาเราจะต้องใส่ using ui เข้ามาก่อน เพื่อให้สคริปของเราสามารถใช้คลาส Ui ได้ครับโดยใส่

using UnityEngine.UI;

จากนั้นเราจะประกาศตัวแปรตามนี้ครับ

03

 

  public float timeleft = 300.00f; // ค่าเริ่มต้นที่เราต้องการนับถอยหลังครับ ตัวอย่างนี้คือ 5 นาที

float oldtime; // ตัวแปรเพื่อเก็บค่าเริ่มต้นไว้ เวลา Reset จะมาเรียกค่านี้ไปใช้

float miniute; // ตัวแปรเก็บนาที

float second; // ตัวแปรเก็บวินาที

string[] millisec; // ตัวแปรเก็บมิลลิเซก ( เดี๋ยวจะอธิบายว่าทำไมเป็น String ครับ )

public Text time_text;    // ตัวแปรอ้างอิงช่อง Text ui ของเรา

bool isstart = false; // ตัวแปรสำหรับปุ่มเริ่มและหยุดการจับเวลาครับ

 

มาดูในฟังชั่นก์ Start กันครับ

04

oldtime = timeleft;

ในฟังชั่นก์นี้เรามีคำสั่งเดียวก็คือ เอาค่าเริ่มต้น ไปเก็บไว้ในค่าสำหรับ Reset นั่นเองครับ

มาดูฟังชั่นก์ Update กันครับ

05

เช็คตัวแปร isstart ว่าตอนนี้นับถอยหลังรึยัง ถ้าเป็นจริง ให้ทำการลบเวลาจากตัวแปรเริ่มต้นออกครับ

if (isstart)

timeleft -= Time.deltaTime;

 

ค่านาที หาได้จากการเอาเวลาที่เหลือมาหาร 60 ครับ

        miniute = Mathf.Floor(timeleft / 60);

ค่าวินาที คือการเอาเศษที่เหลือจากการหานาทีนั่นเองครับ นั่นก็คือการใช้ Mod ครับ

        second = timeleft % 60;

ค่ามิลลิเซก ตัวนี้จะพิเศษนิดหน่อย ตรงที่เราจะใช้เลขหลังทศนิยมหลังจุด 2 ตำแหน่งของวินาทีมาแสดงครับ

นั่นก็คือเราจะแปลงวินาทีให้เป็น String ก่อน แล้วแยกออกเป็น Array ด้วย Split ครับ

        millisec = second.ToString(“f2”).Split(‘.’);

ถ้าวินาทีมากกว่า 59 จะใช้ค่า 59 เพื่อไม่ให้ค่าเกิน 60 ครับ

        if (second > 59) second = 59;

ถ้าวินาที น้อยกว่า 0 แปลว่าเวลาหมดแล้วครับ เราก็จะรีเซตค่าทั้งหมดให้เป็น 0 และหยุดการนับเวลาครับ

        if (miniute < 0)

{

miniute = 0;

second = 0;

isstart = false;

}

บรรทัดนี้คือการเอาตัวเลขตัวแปรที่เราได้ไปแสดงผลใน Ui ของเราครับ โดยเราใช้ ToString(“D2”) คือถ้าเลขต่ำกว่า 2ตำแหน่ง จะใส่ 0 ไว้ข้างหน้าครับ แต่ว่าพารามิเตอร์ D2 ใช้ได้แต่กับ int เราเลยต้องแปลง float เป็น int ก่อนครับ

 time_text.text = ((int)miniute).ToString(“D2”) + “:” + ((int)Mathf.Floor(second)).ToString(“D2”) + “:” + millisec[1].ToString();

 

ถัดมาเราจะสร้างปุ่มขึ้นมาสองปุ่มครับ ปุ่มนึงเอาไว้เริ่มและหยุดการจับเวลา ส่วนอีกปุ่มเอาไว้ Reset ครับ

06

โดยเราจะสร้างฟังชั่นก์เพิ่ม 2 ฟังัช่นก์เพื่อให้เวลากดปุ่มมาเรียกใช้ฟังชั่นก์นี้ครับ

08

07

ฟังชั่นก์นี้เอาไว้เวลาเรากดปุ่ม Start Stop ครับ ถ้ากำลังนับอยู่ก็จะหยุด ถ้าหยุดอยู่ก็จะนับต่อครับ

public void starttimer()

{

if(!isstart)

isstart = true;

else

isstart = false;

}

 

08

ฟังชั่นก์ Reset ครับ เมื่อกดปุ่ม Reset มาเรียกฟังชั่นก์นี้ แล้วจะทำการรีเซตเวลาครับ

public void reset()

{

isstart = false;

timeleft = oldtime;

}

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

09

1011

 

12

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

 

ปล. เพิ่งสังเกตว่าผมตั้งชื่อตัวแปล minute ผิดหมดเลย แคปเจอร์ภาพมาหมดแล้วถึงสังเกตเห็น ขออภัยมา ณ ที่นี้ด้วยครับ