Advertisement
  1. Game Development
  2. Roguelike
Gamedevelopment

Bagaimana cara membuat game Roguelike-mu yang pertama

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Roguelike belakangan kembali menjadi sorotan, dengan kemunculan game seperti Dungeon of Dredmor, Spelunky, The Binding of Isaac, and FTL yang dimainkan banyak orang dan dinilai cukup sukses. Dahulu elemen roguelike hanya dinikmati oleh kelompok pemain hardcore, sekarang sudah diserap oleh berbagai game untuk menambah kedalaman game dan nilai untuk dimainkan ulang.

Wayfarer a 3D roguelike currently in development
Wayfarer, sebuah game roguelike yang sedang dikembangkan.

Pada tutorial ini kamu akan belajar bagaimana cara membuat game roguelike tradisional menggunakan JavaScript dan game engine HTML5 Phaser. Di akhir tutorial, kamu akan memiliki sebuah game roguelike sederhana yang bisa dimainkan di browser! (Dalam tutorial ini, game roguelike sederhana didefinisikan sebagai game satu pemain, dengan level yang diacak, dungeon-crawler bergiliran dengan fitur permadeath.

Click to play the game
Klik untuk memainkan game.
Artikel yang bersangkutan

Catatan: Walaupun kode pada tutorial ini menggunakan JavaScript, HTML, dan Phaser, kamu bisa menggunakan teknik dan konsep yang sama di bahasa pemrograman atau game engine lain.


Memulai

Untuk tutorial ini, kamu membutuhkan sebuah editor teks dan browser. Saya menggunakan Notepad++, dan Google Chrome karena developer tools-nya, tapi alur kerjanya kurang lebih sama dengan menggunakan editor teks dan browser lain.

Sekarang kamu perlu mengunduh file sumber, dan mulai dengan folder init, yang berisi Phaser dan file dasar HTML dan JS untuk game kita. Kita akan menulis kode game kita pada file rl.js yang saat ini masih kosong.

File index.html hanya memuat Phaser dan file kode game yang disebutkan sebelumnya:


Inisialisasi dan Definisi

Sementara, kita akan menggunakan grafik ASCII untuk game roguelike kita agar memudahkan proses pengembangan game, nantinya, kita bisa mengubah grafik ini dengan file bitmap. 

Sekarang kita akan menentukan ukuran font, dimensi denah (level ini), dan berapa aktor yang muncul di denah:

Inisialisasi Phaser, dan kita perlu terima event key-up, karena kita akan membuat turn-based game karena kita ingin bisa beraksi untuk setiap tombol yang ditekan.

Karena font monospace biasanya memiliki lebar 60% dari tingginya, kita mengatur ukuran canvas menjadi 0.6 * ukuran font * jumlah kolom. Kita juga memberitahu Phaser untuk memanggil fungsi create() begitu Phaser selesai inisialisasi, yang akan kita gunakan untuk menginisialisasi keyboard.

Kamu bisa melihat game sejauh ini, belum banyak yang bisa dilihat!


Denah Permainan

Denah petak akan menggambarkan area bermain kita: sejumlah petak pada 2D array, disebut juga sel, masing-masing diwakilkan dengan karakter ASCII yang mewakili tembok (#: tidak bisa ditembus) atau lantai (.: bisa ditembus)

Kita akan menggunakan bentuk paling sederhana dari procedural generation untuk membuat map: menentukan mana sel yang berisi tembok dan mana yang lantai:

Kode berikut akan memberi kita denah dengan 80% sel adalah tembok dan sisanya berupa lantai.

Kita membuat denah baru untuk game kita pada fungsi create(), tepat setelah menyiapkan event listener untuk keyboard:

Kamu bisa melihat demonya di sini, walau saat ini belum ada yang bisa dilihat, karena kita belum menampilkan denahnya ke layar.


Fitur Layar

Saatnya menggambar denah kita! Layar kita akan menjadi array 2D yang berisi elemen teks, masing-masing berisi satu karakter.

Menggambar denah akan mengisi layar dengan isi dari nilai denah, yang berupa karakter ASCII sederhana.

Akhirnya, sebelum kita menggambar denah kita perlu menginisialisasi layar. Kita kembali ke fungsi create():

Kamu sekarang sudah bisa melihat denah acak saat project dijalankan.

Click to view the game so far
Klik di sini untuk melihat game sejauh ini.

Aktor

Berikutnya kita perlu membuat aktor dalam game: karakter pemain, dan musuh ang harus dikalahkan pemain. Masing-masing aktor adalah objek dengan tiga nilai: x dan y untuk lokasinya pada denah, dan hp untuk nyawa.

Kita akan simpan semua aktor di array actorList (dengan elemen pertama adalah pemain). Kita juga menyimpan sebuah associative array yang berisi lokasi aktor sebagai kunci untuk pencarian cepat, jadi kita tidak perlu memeriksa keseluruhan daftar aktor untuk mengetahui aktor mana mengisi lokasi tertentu; ini akan membantu kita saat membuat kode untuk pergerakan dan pertarungan.

Kita buat semua aktor dan menentukan posisi acak pada denah yang kosong untuk masing-masing aktor:

Sekarang saatnya untuk menampilkan aktor! Kita akan menggambar semua musuh sebagai e dan pemain digambar sesuai dengan sisa nyawa yang dimilikinya:

Kita akan menggunakan fungsi yang kita buat untuk menginisialisasi dan menggambar semua aktor dalam fungsi create():

Kita sekarang bisa melihat karakter pemain dan musuh menyebar dalam level ini!

Click to view the game so far
Klik untuk melihat game sejauh ini.

Petak yang bisa dilewati dan yang tidak bisa ditembus

Kita perlu memastikan bahwa aktor kita tidak berjalan keluar layar dan menembus tembok, jadi kita tambahkan pengecekan sederhana untuk mengetahui arah mana aktor bisa berjalan:


Pergerakan dan Pertarungan

Kita akhirnya perlu membuat interaksi dalam game: pergerakan dan pertarungan! Seperti pada game roguelike klasik, serangan akan dipicu dengan bergerak menuju aktor lain, ini akan kita tangani pada bagian yang sama, yaitu fungsi moveTo(). Fungsi ini menerima sebuah aktor dan arah (yang ditentukan dengan selisih x dan y dari posisi aktor yang akan bergerak).

Pada dasarnya:

  1. Kita perlu memastikan aktor bergerak menuju posisi yang valid.
  2. Jika ada aktor lain di posisi tersebut, kita akan menyerangnya (dan mengalahkannya jika nyawa nya mencapai 0)
  3. Jika tidak ada aktor lain di posisi tersebut, kita bergerak ke sana.

Perhatikan bahwa kita juga perlu menampilkan pesan kemenangan sederhana begitu semua musuh sudah dikalahkan, dan mengembalikan false atau true tergantung berhasil tidaknya kita bergerak.

Sekarang, kita kembali ke fungsi onKeyUp() dan mengubahnya agar setiap pengguna menekan tombol, kita menghapus posisi aktor sebelumnya dari layar (dengan menggambar denah di atasnya), pindahkan karakter pemain ke lokasi yang baru, dan gambar ulang aktor tersebut:

Kita akan gunakan variabel acted untuk mengetahui apakah musuh-musuh perlu bergerak setelah input pemain.

Click to view the game so far
Klik untuk melihat game sejauh ini.

Intelenjensi Buatan Dasar

Sekarang karakter pemain kita sudah bisa bergerak dan menyerang, agar lebih adil, kita buat musuh bisa bergerak menuju pemain dengan teknik pathfinding sederhana selama pemain berjarak enam langkah atau kurang dari musuh yang bersangkutan. (Jika pemain lebih jauh, musuh bergerak secara acak).

Perhatikan bahwa kode penyerangan kita tidak peduli siapa aktor yang menyerang, artinya jika posisinya tepat, musuh akan saling meyerang sesamanya saat berusaha mengejar karakter pemain, seperti pada game Doom.

Kita juga perlu menambahkan pesan game over, yang akan dimunculkan jika salah satu musuh berhasil mengalahkan pemain.

Sekarang yang perlu kita lakukan adalah membuat musuh beraksi setiap pemain bergerak, yang membutuhkan kita menambahkan kode berikut di akhir fungsi onKeyUp(), tepat sebelum menggambar aktor di posisi barunya:

Click to view the game so far
Klik untuk melihat game sejauh ini.

Bonus: Versi Haxe

Awalnya saya menulis tutorial ini dalam Haxe, bahasa pemrograman multi-platform yang bisa dicompile ke Javascript (dan bahasa lainnya). Walaupun saya membuat versi di atas dari awal untuk memastikan kode JavaScript yang berbeda, tapi jika lebih memilih Haxe dibanding JavaScript, kamu bisa menemukan versi Haxe di folder haxe di folder source code yang bisa didownload.

Kamu perlu menginstall haxe compiler dan menggunakan editor teks yang kamu inginkan, dan mengompile kode haxe dengan menjalankan perintah haxe build.hxml atau klik ganda file build.hxml. Saya juga lampirkan project FlashDevelop jika kamu ingin IDE dibanding editor teks dan command line; cukup buka rl.hxproj dan tekan F5 untuk menjalankan game.


Ringkasan

Selesai sudah! Sekarang kita sudah punya game roguelike sederhana, dengan denah yang dihasilkan secara acak, pergerakan, pertarungan, intelejensi buatan dan kondisi menang kalah.

Berikut adalah beberapa ide untuk fitur baru yang bisa kamu tambahkan ke dalam game-mu:

  • Lebih dari satu level
  • Power Up
  • Inventory
  • Item yang bisa dikonsumsi
  • Equipment

Selamat menikmati!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.