Tips dan Trik Countdown yang Baik, Bagian 1

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Countdown atau hitung mundur adalah elemen dasar yang muncul dalam banyak game, walau rancangannya seringkali tidak diperhatikan.

Dengan beberapa modifikasi, sebuah timer biasa bisa dibuat lebih menarik dan sesuai dengan dunia game yang disajikan, sehingga meningkatkan pengalaman pemain.

Banyak dari elemen-elemen ini diinspirasi oleh presentasi "Juice it or lose it" dan Martin Jonasson dan Petri Purho tentang bagaimana membuat game kamu "juicier" atau lebih menarik. Intinya adalah tidak cukup hanya menampilkan informasi dalam bentuk dasarnya, kamu juga perlu meningkatkan dan menekankan apa yang terjadi dengan warna, suara, dan pergerakkan, yang akan membuat keseluruhan pengalaman lebih menarik. Saya sarankan untuk menonton presentasi itu juga untuk belajar tentang penggunaan lainnya.

Dalam seri dua bagian ini, kita akan membahas tiap elemen dan mengimplementasinya dalam proyek Unity sederhana, di mana kamu akan memerlukan versi terbarunya. Pada bagian 2 yang akan datang, kita akan lihat elemen yang lebih detail.

Siap? Ayo mulai!

Tujuan Hitung Mundur

Timer dalam game bisa memiliki banyak tujuan, diantaranya:

Kamu punya waktu X untuk menjalankan suatu tugas.
Kamu perlu bertahan selama jangka waktu X.

Desain timer bisa berubah antara dua tujuan tersebut, karena informasi yang diperlukan pemain berubah diantara kedua tujuan tersebut.

Saat kamu diberi lima menit untuk menjinakkan bom di Metal Gear Solid 2, kamu perlu tahu jumlah waktu yang dimiliki secara tepat, karena setiap detik sangat penting untuk keseluruhan proses. Timer perlu menunjukkan pada pemain berapa banyak waktu tersisa, dan memberi tahu mereka jika waktunya tinggal sedikit.

Saat kamu perlu bertahan dalam jangka waktu tertentu, aspek ketepatan menjadi tidak terlalu penting. Walau sebenarnya cukup membantu jika mengetahui jumlah waktu dalam detik, game juga bisa berjalan tanpa informasi tersebut. Kita bahkan bisa kembangkan dengan memberi informasi "kamu hanya perlu bertahan beberapa detik lagi!", yang lebih mudah dipahami dalam kondisi penuh tekanan dibanding "tolong baca angka di sudut layar berikut", sehingga bisa meningkatkan pengalaman pemain dalam game.

Bagaimana untuk memperbaiki hitung mundur

Sekarang kita lihat elemen apa saja yang membuat timer dan hitung mundur lebih menarik.

1: Buat timer kamu sendiri yang tidak bergantung pada angka dan masukkan timer tersebut ke dalam dunia game

Dari pada hanya menyimpan sebuah angka, kamu bisa membuat sendiri gambaran hitung mundur yang memberi tahu pemain secara kasar berapa banyak waktu yang tersisa.

Sebuah implementasi grafis 2D memerlukan keahlian tertentu, karena kamu perlu memastikan pemain bisa memahami ide dan membaca "waktunya berkurang dan kamu punya kira-kira X detik lagi".

Non-numerical countdown from Star Trek Generations The exact time is not readily readable but the graphic lets a viewer easily deduce that a countdown is happening and time is running out — Hitung mundur non-numerik dari *Star Trek Generations*. Waktu pastinya tidak bisa dibaca, tapi gambarnya membuat penonton bisa mengira bahwa ada hitung mundur dan waktunya berkurang.

Hal ini bekerja dengan baik jika kamu menggunakan indikator pada lingkungan game untuk menampilkakn kemajuan pemain, dan suara dalam game memberi tahu berapa banyak waktu yang tersisa. Sebuah angka yang ditempel di atas layar bisa terasa tidak nyata dan menarik keluar dari game.

Dalam Half Life 2 misalnya, kamu perlu mempertahankan suatu posisi sampai teleporter siap berfungsi. Pada awalnya daya penuh ditampilkan, lalu digambarkan bahwa perlu diisi kembali.

Full charge for a teleport in Half Life 2 The element is highly visible inside the otherwise sparsely decorated room — Daya penuh untuk teleport dalam *Half Life 2*. Elemen ini sangat terlihat dari dalam ruangan yang penuh dekorasi.

Pengisian daya ditampilkan dengan elemen dari mesin yang menyala dan mulai berputar, memberi kamu suatu penunjuk waktu yang menggambarkan berapa lama kamu harus bertahan.

After being used the teleport needs to recharge The elements slowly light up again giving the player an indication how much longer they have to hold out from Half-Life 2 — Setelah digunakan, teleport perlu diisi kembali. Elemen tersebut mulai menyala kembali, memberi pemain indikasi berapa lama mereka harus bertahan (dari *Half Life 2*).

Pengisian daya teleporter juga contoh yang baik dari tampilan tertanam, yang berada langsung di dalam dunia game. Hal ini berfungsi untuk membuat pemain fokus pada dunia game, karena timer pada tampilan antarmuka ada di luar dunia game.

An oxygen-timer in Metro Last Light directly inside the gameworld — Timer oksigen pada *Metro: Last Light*, langsung di dalam dunia game.

2: Buat angka-angka tersebut terlihat seperti angka

Gunakan font yang keren untuk hitung mundurmu! Beberapa font seperti Digital Display Font meniru tampilan layar kuno, yang digunakan untuk menampilkan angka pada jaman dulu.

Pemain kemungkinan sudah mengasosiasikan font ini dengan timer dan hitung mundur, dan membuat proses membacanya lebih mudah, dibanding font seperti Arial atau Times New Roman.

Aspek mudah dibaca dan komposisi teks juga berlaku di sini. Jangan menyusun angka-angka secara vertikal, jangan gunakan numerik Romawi, dan lain-lain.

3: Berikan pemain jumlah waktu dalam detik, bukan menit

Seri Metal Gear menggunakan trik di mana mereka bilang "kamu hanya memiliki 500 detik lagi!" dan sebuah tampilan angka muncul dengan nilai "5:00".

Saat saya memainkannya pertama kali, pikiran saya otomatis membacanya sebagai "5 menit", tapi saya ditipu. "500 detik" adalah format yang benar walau tidak umum, dan biasanya pemain tidak terlatih untuk membacanya dengan benar.

Efeknya adalah pemain berpikir mereka hanya memiliki 5 menit, padahal sebenarnya 8 menit dan 20 detik.

Optional mini-missions in Metal Gear Solid V The Phantom Pain Time is given in seconds obscuring the amount in minutes — Misi opsional dalam *Metal Gear Solid V: The Phantom Pain*. Waktu diberikan dalam satuan detik, menyembunyikan jumlah menit sebenarnya

Biasanya cara ini tidak memiliki kerugian, karena pemain akan disibukkan oleh batas waktu dan berkonsentrasi menyelesaikan tugas (dalam Metal Gear Solid 2, menjinakkakn bom), yang akan mengecoh mereka dari fakta bahwa 5 menit mungkin sudah berlalu dan masih ada waktu tersisa.

4: Buat satu "menit" menjadi 100 detik

Ini sejalan dengan memberi tahu pemain jumlah waktu yang tersisa dalam satuan detik.

Elemen berulang dalam hitung mundur pada MGS2 adalah mereka tidak memiliki menit 60 detik, tapi menit 100 detik. Ini bukan menit sebenarnya, tapi daftar detik yang tersisa. Jadi bukannya 01:00 menjadi 00:59, tapi 0100 menjadi 0099. Kamu hanya perlu menyimpan nilai aslinya, yang membuat hitung mundur lebih mudah dibuat, karena kamu melewatkan perhitungan menit.

A countdown used in Metal Gear Solid 2 Sons of Liberty Note the numbers being displayed again in total seconds but in a way that resembles minute-and-second counters While the second-symbol is also shown the young target demographic is possibly not familiar with it — Hitung mundur yang digunakan pada *Metal Gear Solid 2: Sons of Liberty*. Perhatikan waktu ditampilkan dalam jumlah detik, tapi dibuat menyerupai menit dan detik. Walau simbol detik (") ditampilkan, target pemain yang masih muda mungkin tidak familiar dengan simbol tersebut.

5: Menggunakan milidetik dan pecahannya untuk menambah tekanan

Menampilkan milidetik setelah nilai utama membuatnya lebih menarik!

Hal ini cukup mudah, karena waktu bisa disimpan dalam bentuk bilangan real. Dua sampai tiga nilai desimal adalah nilai yang mudah dibaca dan berguna untuk pemain.

6: Gunakan warna untuk keuntunganmu!

Saat timer mencapai nilai yang cukup rendah, warnai teks dengan warna lain. Membuatnya kuning juga bekerja dengan baik, karena membuat timer lebih mencolok.

Saat mencapai detik-detik akhir, buatlah menjadi merah, lebih besar, dan menyala. Sekarang jumlah waktu tidak bisa diabaikan dan membuat tekanan untuk pemain.

Red countdown from Metal Gear Solid V The Phantom Pain — Hitung mundur merah dari *Metal Gear Solid V: The Phantom Pain*

Mari buat timer sederhana dengan hal-hal tadi!

Sekarang kita mulai untuk membuat timer dengan kode. Kita akan mengubah ini:

A basic timer-display — Tampilan timer biasa

Menjadi ini:

Our improved timer-display — Tampilan timer yang sudah dikembangkan

Kita akan gunakank beberapa asset khusus yang bisa kamu dapatkan dengan mudah atau buat sendiri, atau ambil dari file sumber yang bisa kamu unduh di kanan atas artikel ini.

Siap? Mulai!

Persiapan dan timer sederhana

Jalankan Unity dan buat proyek baru.

Buat sebuah gameobject kosong, simpan di depan kamera, dan tambahkan textMesh via Component > Mesh > TextMesh. Ini akan menjadi tampilan timer untuk dunia game kita.

Kita gunakan 3D-textmesh untuk sekarnag, tapi ini juga bekerja dalam komponen lain, seperti tampilan antarmuka dasar Unity. Untuk saat ini, 3D-text juga memiliki keuntungan karena bisa berada di dalam dunia game, seperti yang disebutkan sebelumnya, tidak pada lapisan antarmuka di luar dunia game.

3D-text kita tidak akan ditampilkan langsung, kita perlu ubah beberapa nilai.

Atur ukuran karakter menjadi 0.1, anchor menjadi middle left, alignment menjadi center, dan font size menjadi 80. Tambahkan juga teks sementara pada field "text". Ini agar kita memiliki sesuatu yang bisa dilihat di layar, saat permainan, yang langsung diatur dari kode. 00:00 akan cukup baik.

Lalu buat sebuah file baru bernama Countdown.cs, tambahkan pada objek timer, dan tambahkan kode berikut:

using UnityEngine;
using System.Collections;

public class Countdown : MonoBehaviour {

    float timer = 120f;

    void Update (){
      timer -= Time.deltaTime;
    	GetComponent<TextMesh>().text = timer.ToString();
    }
}

Kita punya variabel bernama timer, yang akan menyimpan waktu yang dihitung mundur. Saat ini bernilai 120 detik, atau 2 menit. Lalu pada fungsi Update, yang akan dipanggil tiap frame, kita kurangi dengan Time.deltaTime. Ini adalah jalan pintas untuk mendapatkan waktu yang berlalu. Setelahnya, kita ambil komponen textMesh dari objek dan ubah nilai text menjadi timer, mengubahnya menjadi string.

Saat kamu jalankan game, textmesh akan menampilkan nilai yang berkurang. Selamat! Kamu sudah membuat timer sederhana.

Tapi saat ini masih jauh dari sempurna. Lalu, timer menampilkan 4 sampai 5 nilai desimal, dan akan terus menampilkan nilai negatif setelah melewati nol.

Membuatnya berhenti di nol

Nilai negatif akan membuat timer telihat rusak, jadi kita pastikan hal itu tidak terjadi. Ubah fungsi Update menjadi seperti ini:

if (timer > 0f){
    timer -= Time.deltaTime;
} else {
    timer = 0f;
}

GetComponent<TextMesh>().text = timer.ToString();

Ini membuat timer hanya dikurangi saat nilainya positif. Jika nilainya menjadi negatif (yang akan terjadi saat dikurangi dengan waktu yang berlalu), nilainya akan diatur menjadi nol.

Mendapatkan nilai yang lebih baik

Ingat font Digital Display Font yang saya sebutkan di atas? Segera unduh dan tambahkan dalam proyekmu!

Bagian textmesh pada inspektor memiliki isian untuk font, jadi tarik font dari asset ke bagian tersebut.

Sekarang timer akan telihat lebih rapi!

Perbaiki jumlah angka

Saat ini jumlah nomor setelah titik desimal bervariasi, yang membuat timer berubah-ubah. Kita perbaiki dengan menambahkan baris yang mengubah nilai ke teks seperti berikut:

1	GetComponent<TextMesh>().text = timer.ToString("F2");

Kode ini akan memotong semua selain dua angka pertama, dan secara konsisten menampilkan desimal persepuluh dan perseratus.

Buat warna berubah

Kita tambahkan penyesuaian warna! Tambahkan fungsi Update dengan kode berikut:

if (timer > 0f){
    timer -= Time.deltaTime;
} else {
    timer = 0f;
}

if (timer < 10f) {
    GetComponent<TextMesh>().color = Color.red;
} else if (timer < 20f) {
    GetComponent<TextMesh>().color = Color.yellow;
}

GetComponent<TextMesh>().text = timer.ToString("F2");

Timer akan berubah menjadi kuning saat tersisa kurang dari 20 detik, dan merah jika kurang dari 10 detik tersisa.

The timer will turn yellow when less than 20 seconds

File Countdown.cs akan seperti berikut ini:

using UnityEngine;
using System.Collections;

public class Countdown : MonoBehaviour {
    
    float timer = 60f;
    public AudioClip soundBlip;
    
    void Update (){
        if (timer > 0f){
            timer -= Time.deltaTime;
        } else {
            timer = 0f;
        }
        
        if (timer < 10f) {
            GetComponent<TextMesh>().color = Color.red;
        } else if (timer < 20f) {
            GetComponent<TextMesh>().color = Color.yellow;
        }
        
        GetComponent<TextMesh>().text = timer.ToString("F2");
    }
}

Sekian! Kita sekarang punya hitung mundur yang lebih menarik.

Kamu bisa melihat proyek yang selesai pada bagian kanan atas artikel ini.

Kesimpulan

Kita lihat beberapa elemen yang akan memperbaiki timer dalam game, pelajaran yang bisa diterapkan ke berbagai elemen lain. Sebagai tambahan, timer yang kita buat bisa dengan mudah diadopsi oleh berbagai jenis game, dan menjadi elemen yang menarik tanpa harus membuat konten baru lagi.

Tapi masih ada lagi! Di bagian berikutnya, kita akan lihat elemen tambahan dan terus mengembangkan timer kita.