Pada artikel kali ini kita akan membahas mengenai Membuat Offline Leaderboard di Construct 2. Leaderboard atau top score list merupakah salah fitur yang biasa digunakan dalam game pada saat ini, ada banyak layanan yang mempermudah pembuatan fitur ini. Namun sayangnya untuk platform Tizen saat ini belum ada layanan Leaderboard yang bisa digunakan seperti Google Play Services pada Google Play Store. Kita bisa membuatnya sendiri dengan menggunakan PHP di server hosting kita sendiri, tapi tentunya tidak semua orang memiliki akses ke server hosting. Nah pada kesempatan kali ini saya akan coba membagikan tips membuat Offline Leaderboard yang bisa langsung anda praktekan. Pada tutorial kali ini Leaderboard akan kita batasi hanya untuk Top 10, artinya hanya 10 nilai tertinggi yang akan disimpan. Player juga memasukan nama sebelum menyimpan nilainya.
Sebelumnya anda dapat mengunduh file tutorial di link berikut. File ini adalah lanjutan dari tutorial sebelumnya mengenai Responsif UI yang bisa anda lihat di link berikut. File game ini sudah saya modifikasi sedikit dengan menambahkan beberapa Layout dan Eventsheet, untuk mempercepat proses belajar kita akan fokus pada pembuatan leaderboard saja.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangPertama yang kita lakukan adalah memasukan object Array kedalam project kita, anda dapat secara bebas memasukan kedalam Layout manapun karena object Array tidak akan ditampilkan secara visual pada Layout.
Setelah memasukan object Array, kita setting terlebih dahulu object Array pada panel Properties.
Kita masukan nilai 10 pada Width karena kita akan menyimpan sebanyak 10 nilai tertinggi, dan kita masukan nilai 2 pada Height karena kita akan menyimpan 2 nilai yaitu skor yang dicapai oleh pemain dan nama pemain.
Jika kita jalankan Debug Layout, maka kita bisa lihat nilai-nilai yang tersimpan pada Array seperti dibawah ini.
Akan ada 10 data dengan semua bernilai 0,0. 0 yang pertama (selanjutnya kita sebut Y index 0) nanti akan kita isi dengan skor pemain dan 0 yang kedua (selanjutnya kita sebut Y index 1) nanti akan kita ganti nialainya dengan nama yang dimasukan oleh pemain.
Menampilkan Nilai Ke Dalam Array
Sekarang kita buka Event Sheet ES_GameOver dan kita masukan event sebagai berikut.
Kita membuat sebuah Function dengan nama “simpanNilai” yang akan dipanggil setiap kali kita menekan Button_Simpan. Berikut adalah penjelasan dari fungsi tersebut.
Pertama kita cek apakah nilai yang akan disimpan lebih besar dari nilai terakhir dari top 10 nilai yang ada, jika benar maka kita lanjut kan dengan menyimpan data. Jika ternyata tidak lebih besar maka kita abaikan. Mungkin menjadi pertanyaan mengapa jika membandingkan nilai terakhir yang seharusnya urutan ke 10 tetapi kita menggunakan angka 9? karena index dalam Array dimulai dari 0, jadi nilai pada urutan ke 10 adalah index ke 9.
Event pada gambar diatas kita gunakan untuk menggantikan nilai terbawah dengan nilai yang baru dengan menggunakan Array: Set at XY.
Set at XY berguna untuk mengubah nilai Array pada index Y yang berada dalam index X.
Disini kita ubah nilai Y index 0 pada index X ke 9 dengan variable “nilai”.
Dan kita ubah nilai Y index 1 pada index X ke 9 dengan variable text yang tertera pada object Text_InputNama.
Saat ini kita sudah memasukan nilai baru kedalam Array, nah mungkin saja nilai baru ini seharusnya berada di peringkat lebih tinggi lagi dan bukan berada diperingkat 10 maka kita harus melakukan sorting ulang seperti pada event digambar berikut ini.
Kita gunakan event Array : Sort pada X axis untuk mengurutkan nilai dari kecil ke besar. Selanjutnya urutan Array kita balik menggunakan Array : Reverse karena kita membutuhkan urutan dari besar ke kecil.
Setelah semua proses selesai Layout kita arahkan ke Layout L_Top10 untuk melihat list 10 besarnya.
Menampilkan Data 10 Nilai Terbesar
Kita buka Event Sheet ES_Top10 untuk membuat event yang akan menampilkan 10 nilai terbesar dan nama player nya.
Tidak banyak event yang digunakan hanya 4 baris event saja untuk menampilkan 10 nama kedalam object Text_Nama dan 10 skor kedalam object Text_Nilai.
Pada saat pertama menampilkan layout yang kita lakukan adalah menghapus semua text yang tertera sebelumnya pada object Text_Nama dan Text_Nilai.
Kita lakukan System : Repeat sebanyak jumlah Array.Width (10 kali) untuk memasukan text demi text. Untuk object Text_Nama kita tambahkan text yang sudah tersimpan sebelumnya dan kita masukan baris baru dengan menggunakan newline, lalu kita masukan nilai Array pada Y index 1 yang menyimpan nama player. Untuk object Text_Nilai kita tambahkan text yang sudah tersimpan sebelumnya dan kita masukan baris baru dengan menggunakan newline, lalu kita masukan nilai Array pada Y index 0 yang menyimpan skor player.
Hasilnya akan tampak seperti gambar berikut ini.
Anda dapat lanjutkan permainan untuk mencoba menambahkan hingga lebih dari 10 nilai tersimpan seperti gambar dibawah ini.
Leaderboard sudah berhasil dibuat, namun sayangnya apabila kita keluar dari game dan kembali lagi maka semua data akan hilang karena belum tersimpan di LocalStorage. Ini akan kita perbaiki dibagian selanjutnya.
Menyimpan Data di LocalStorage
Pertama kita tambahkan object LocalStorage kedalam Layout, anda dapat secara bebas memasukan kedalam Layout manapun karena object LocalStorage tidak akan ditampilkan secara visual pada Layout.
Lalu kita buka lagi Event Sheet ES_GameOver dan kita tambahkan 1 event seperti ini.
Kita set item “Top10” pada LocalStorage dengan nilai Array yang kita sudah ubah menjadi JSON menggunakan Array.AsJSON. Nama “Top10” boleh diganti menggunakan nama lain tapi ingat untuk menggantinya juga di event-event selanjutnya.
Memanggil Data di LocalStorage
Pada file sample2.capx sudah saya tambahkan Layout L_Loading, Layout ini akan kita gunakan untuk melakukan pengecekan data yang tersimpan sebelumnya. Jangan lupa untuk melakukan setting First Layout pada Project Properties untuk menjalankan L_Loading seperti dibawah ini.
Dan pada saat Run Layout pastikan anda aktif di Layout L_Loading untuk memastikan semua berjalan seperti seharusnya.
Sekarang kita buka Event Sheet ES_Loading dan buatlah event seperti berikut.
Rangkaian event tersebut berfungsi seperti ini.
Pada saat kita mulai menjalankan layout kita lakukan pengecekan item “Top10” pada LocalStorage apakah sudah pernah tersimpan sebelumnya. “Top10” boleh diganti dengan nama lain jika kalian inginkan.
Jika ternyata item “Top10” tidak ada maka kita langsung saja beralih ke Layout L_MainMenu dan menggunakan Array kosongan seperti di tutorial sebelumnya.
Namun jika ternyata item “Top10” ada maka kita ambil nilainya dengan menggunakan LocalStorage : Get item.
Setelah nilai item “Top10” berhasil diambil, kita masukan nilainya kedalam Array dengan menggunakan Array : Load from JSON dan mengisi nilainya dengam LocalStorage.ItemValue. Maka kita tidak akan memulai permainan dengan Array kosongan melainkan dengan nilai yang sudah disimpan sebelumnya. Selanjutnya kita pindahkan Layout ke L_MainMenu untuk memulai permainan.
Berikut tadi adalah penjelasan mengenai Membuat Offline Leaderboard 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.
