Pada artikel kali ini kita akan membahas mengenai Membuat Cooldown Timer di Construct 2. Untuk Anda yang pernah bermain game mobile mungkin sangat familier dengan fitur ini, seperti fitur membangun Town Hall di Clash Of Clans yang bisa memakan waktu pembangunan beberapa hari. Atau fitur penambahan energy setiap 5 menit sekali. Semua perhitungan waktu tersebut tetap berjalan walaupun kita sudah menutup game yang kita mainkan.

Pada tutorial kali ini saya akan coba mencontohkan membuat fitur bonus free 5 nyawa yang akan muncul 5 menit setelah bonus diambil. Anda bisa unduh berkas game yang akan kita tambahkan fitur di tautan berikut.

Unduh Plugin Time Away L

Langsung saja kita mulai, untuk membuat fitur Cooldown Timer kita akan membutuhkan sebuah plugin special yang bernama Time Away L karya salah satu penggiat forum Construct yaitu Rex.Rainbow. Untuk mendapatkan plugin ini Anda bisa unduh di Githubnya langsung dengan mengunjungi url : https://rexrainbow.github.io/C2RexDoc/repo/rex_time_awayL.7z atau Anda bisa baca-baca informasi plugin ini di https://rexrainbow.github.io/C2RexDoc/c2rexpluginsACE/plugin_rex_time_awayl.html

Kita menggunakan Time Away L (dengan huruf L dibelakangnya) karena plugin Time Away (tanpa huruf L dibelakangnya) akan menyimpan data di webstorage, sedangkan Time Away L akan menyimpan data di local storage.

Rex.Rainbow sendiri memiliki banyak Plugin dan Behaviour yang sangat membantu pembuatan game-game yang cukup kompleks, Anda bisa cek dan pelajari semuanya melalui tautan berikut ini : https://rexrainbow.github.io/C2RexDoc/c2rexpluginsACE/index.html

Setelah Anda unduh plugin tersebut jangan lupa install ke Construct mu dengan cara ekstrak file dan salin folder rex_time_awayL ke directory plugin Construct 2 mu, untuk PC saya directory Construct 2 berada di C:\Program Files\Construct 2 dan kita masuk ke folder C:\Program Files\Construct 2\exporters\html5\plugins dan paste folder rex_time_awayL ke folder ini.

Setelah selesai mengcopy folder plugin, silahkan restart Construct 2 mu dan buka kembali file capx dan tambahkan plugin kedalam game.

Anda bisa menambahkan plugin ini di layout manapun karena tidak akan ditampilkan pada layout.

Menggunakan Event Time Away L

Penggunaan plugin Time Away L sangat membantu dalam pembuatan fitur cooldown, bisa dilihat pada gambar di bawah ini.

Hanya dengan sedikit event saja kita sudah bisa memasang dan melakukan cek waktu yang sudah terlewati.

Silahkan kalian buka file capx yang sudah diunduh dan buka Event Sheet ES_MainMenu dan masukan event-event yang tertera pada gambar di atas. Untuk penjelasan maksud dari event-event tersebut bisa kalian perhatikan pada bagian selanjutnya.

Penjelasan Event

Pada bagian teratas kita siapkan beberapa global variable yang akan memudahkan kita dalam melakukan perhitungan.

• Variable Bonus akan menyimpan jumlah bonus yang nanti didapat saat cooldown sudah tercapai.
• Variable detik_yang_tersisa akan menyimpan berapa detik yang tersisa untuk mencapai batas cooldown yang dituju. Kita membutuhkan variable ini karena pada plugin Time Away L hanya memberikan nilai detik yang sudah terlewati bukan yang tersisa, jadi kita harus hitung sendiri dan simpan pada variable ini.
• Variable cooldown akan menyimpan berapa menit waktu yang dibutuhkan untuk membuka tombol bonus. Pada tutorial ini saya menggunakan satuan menit, jadi jika Anda ingin mempercepat waktu tunggu untuk testing Anda bisa ubah misal menjadi 0,5 untuk 30 detik atau 0,25 untuk waktu tunggu 15 detik.
• Variable menit kita gunakan untuk menyimpan nilai variable detik_yang_tersisa yang kita ubah dalam satuan menit.
• Variable detik kita gunakan untuk menyimpan nilai sisa detik dari variable detik_yang_tersisa yang sudah diubah menjadi variable menit sebelumnya.

Dengan variable menit dan detik kita bisa menampilkan text timer dengan format “Menit : Detik” sehingga mempermudahkan user untuk membaca informasi yang disampaikan.

Pada bagian event ini pada setiap tick kita akan action TimeAwayL > Get of Start timer. Action ini gunanya untuk mendapatkan data dari timer yang kita minta, dan apa bila timer yang kita minta belum ada atau belum pernah dimulai maka dia akan memulainya. Text “Bonus” yang tertera pada action ini adalah nama timer yang kita gunakan, Anda bisa ganti dengan nama lain tapi ingat untuk mengganti nama timer di action-action lain dengan nama yang sama. Get of Start timer tidak akan menghasilkan nilai langsung, tetapi akan men-trigger Event On get time yang akan dijelaskan pada bagian selanjutnya.

Pada saat event On get time dipanggil itu artinya data timer sudah bisa kita akses dengan benar. Pada tutorial ini hal pertama yang kita lakukan adalah mengubah data timer tersebut ke dalam informasi yang bisa dibaca dengan mudah oleh user.

• Kita set nilai variable detik_yang_tersisa dengan cara mengkalikan variable cooldown dengan 60 detik sehingga semua timer yang kita hitung dalam satuan detik, lalu kita kurangi dengan jumlah waktu yang sudah terlewati sejak timer dimulai yaitu dengan mengambil nilai dari TimeAwayL.ElapsedTime
• Dari variable detik_yang_tersisa kita ubah kedalam satuan menit dengan cara membagi detik_yang_tersisa dengan 60 detik kemudian kita ubah menjadi bilangan bulat dengan menggunakan int(). Nilai ini kita simpan dalam variable menit.
• Variable detik kita isi dengan sisa detik setelah dikurangi nilai satuan menit. Nilai ini dengan mudah bisa kita dapat dengan menggunakan “%”. tanda % disini bukan berarti persen melainkan simbol modulo atau modulus yang digunakan untuk mendapatkan nilai sisa dari sebuah pembagian. Misal kita gunakan 4%2, maka nilai yg dihasilkan adalah 0 karena 4 habis dibagi 2. Sedangkan jika 5%2 maka nilainya 1 karena 5 tidak habis dibagi 2 melainkan menyisakan 1. Nah untuk mendapatkan sisa detik kita gunakan detik_yang_tersisa%60 lalu kita ubah menjadi bilangan bulan dengan menggunakan int().

Setelah melakukan update nilai dari variable-variable diatas selanjutnya kita akan cek apakah waktu yang terlewat sudah lebih dari cooldown yang kita tentukan.

Event diatas sudah cukup jelas, apabila jumlah detik cooldown lebih kecil dari waktu yang sudah terlampaui (TimeAwayL.ElapsedTime) maka artinya sudah saatnya kita menghapus informasi hitung mundur (Text_Timer : Set text to “”) dan menampilkan Button_Bonus dengan cara memindahkan pada posisi yang kita inginkan. Disini saya memindahkan Button_Bonus ke posisi x: OriginalWindowWidth/2 yang artinya berada di tengah dari lebar layar dan posisi y pada 50 pixel. Dengan posisi Button_Bonus yang sudah bisa dilihat oleh user maka user bisa mengaktifkan bonus yang ditunggunya.

Apabila cooldown belum mencapai waktu yang kita tentukan maka event yang kita gunakan adalah :

Kita beri informasi kepada user melalui Text_Timer dengan menampilkan tulisan “Bonus akan tersedia dalam “&menit&”:”&detik. Dengan menggunakan variable menit dan detik user akan lebih mudah menghitung waktu yang dia butuhkan, daripada menampilkan hanya dalam satuan detik seperti “Bonus akan tersedia dalam 1508 detik”.

Selanjutnya kita sembunyikan Button_Bonus ke posisi yang tidak bisa dilihat oleh user. Kali ini saya sembunyikan Button_Bonus pada posisi y -300 pixel yang artinya tombol ini berada di atas batas atas tampilan layout. Ini adalah salah satu trik sederhana untuk menghilangkan sebuah object yang nantinya akan kita gunakan lagi.

Mengambil Bonus

Saat waktu cooldown sudah terlampaui maka akan tampil tombol Button_Bonus, kita tambahkan sedikit event agar user bisa mengambil Bonus yang ditunggunya.

Saat user menekan Button_Bonus yang pertama kita lakukan adalah menghapus timer “Bonus” dengan menggunakan TimeAwayL > Remove timer agar timer tidak dilanjutkan.

Karena setelah User mengambil Bonusnya akan langsung dihitung mundur lagi untuk mendapatkan bonus selanjutnya maka kita buat lagi timer “Bonus” dengan menggunakan TimeAwayL > Get of Start Timer.

Kedua action di atas secara sederhana adalah proses kita melakukan reset timer, tetapi karena Plugin TimeAwayL tidak memiliki fitur reset maka kita lakukan secara manual.

Action selanjutnya adalah menambahkan 5 bonus dan memindahkan user ke layout L_InGame untuk memulai permainan.

Tidak Anti Cheat

Demikian tadi tutorial sederhana cara membuat cooldown timer yang bisa Anda terapkan di game karyamu, sayangnya karena semua data timer dan perhitungan menggunakan waktu lokal maka cara ini dapat dikelabuhi dengan cara mengganti atau mempercepat jam pada device.

Untuk kalian yang ingin membuat cooldown timer yang cukup sulit untuk di cheat Anda bisa menggunakan cara yang lebih komplek dengan system online, dimana semua data timer dan jam yang dipakai menggunakan data dan jam pada server. Untuk mempelajari cara ini Anda bisa belajar menggunakan PHP dan database yang bisa Anda kombinasikan dengan plugin AJAX untuk mengirim dan menerima data.

Berikut tadi adalah penjelasan mengenai Cooldown Timer di Construct 2 yang sering digunakan jika mengembangkan game menggunakan Construct 2. Semoga penjelasannya bermanfaat dan bisa membantu teman-teman developer untuk mengembangkan karya terbaiknya.

Masih banyak pembahasan menarik di Dicoding Academy Belajar Membangun Game HTML5 menggunakan Construct 2 yang belum kita bahas di sini, untuk pembahasan lebih jauh silakan kunjungi Academy (Belajar Membangun Game HTML5 menggunakan Construct 2). Jika ada pertanyaan, saran atau masukan jangan sungkan untuk menuliskannya di kolom komentar.

Selamat belajar, semoga bermanfaat, dan nantikan tutorial pembuatan game menggunakan Construct 2 selanjutnya.