Bagaimana cara membuat game Roguelike-mu yang pertama

() translation by (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

Belajar Game Engine HTML5 Phaser

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:

<!DOCTYPE html>
<head>
  <title>roguelike tutorial</title>
	<script src="phaser.min.js"></script>
	<script src="rl.js"></script>
</head>
</html>

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:

        // font size
        var FONT = 32;

        // map dimensions
        var ROWS = 10;
        var COLS = 15;

        // number of actors per level, including player
        var ACTORS = 10;

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.

// initialize phaser, call create() once done
var game = new Phaser.Game(COLS * FONT * 0.6, ROWS * FONT, Phaser.AUTO, null, {
        create: create
});

function create() {
        // init keyboard commands
        game.input.keyboard.addCallbacks(null, null, onKeyUp);
}

function onKeyUp(event) {
        switch (event.keyCode) {
                case Keyboard.LEFT:

                case Keyboard.RIGHT:

                case Keyboard.UP:

                case Keyboard.DOWN:

        }
}

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)

1	// the structure of the map
2	var map;

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

function initMap() {
        // create a new random map
        map = [];
        for (var y = 0; y < ROWS; y++) {
                var newRow = [];
                for (var x = 0; x < COLS; x++) {
                     if (Math.random() > 0.8)
                        newRow.push('#');
                    else
                        newRow.push('.');
                }
                map.push(newRow);
        }
}

Artikel Terkait

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:

function create() {
        // init keyboard commands
        game.input.keyboard.addCallbacks(null, null, onKeyUp);

        // initialize map
        initMap();
}

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.

1	// the ascii display, as a 2d array of characters
2	var asciidisplay;

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

        function drawMap() {
            for (var y = 0; y < ROWS; y++)
                for (var x = 0; x < COLS; x++)
                    asciidisplay[y][x].content = map[y][x];
        }

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

        function create() {
                // init keyboard commands
                game.input.keyboard.addCallbacks(null, null, onKeyUp);

                // initialize map
                initMap();

                // initialize screen
                asciidisplay = [];
                for (var y = 0; y < ROWS; y++) {
                        var newRow = [];
                        asciidisplay.push(newRow);
                        for (var x = 0; x < COLS; x++)
                                newRow.push( initCell('', x, y) );
                }
                drawMap();
        }

        function initCell(chr, x, y) {
                // add a single cell in a given position to the ascii display
                var style = { font: FONT + "px monospace", fill:"#fff"};
                return game.add.text(FONT*0.6*x, FONT*y, chr, style);
        }

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.

// a list of all actors; 0 is the player
var player;
var actorList;
var livingEnemies;

// points to each actor in its position, for quick searching
var actorMap;

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

function randomInt(max) {
   return Math.floor(Math.random() * max);
}

function initActors() {
        // create actors at random locations
        actorList = [];
        actorMap = {};
        for (var e=0; e<ACTORS; e++) {
                // create new actor
                var actor = { x:0, y:0, hp:e == 0?3:1 };
                do {
                        // pick a random position that is both a floor and not occupied
                        actor.y=randomInt(ROWS);
                        actor.x=randomInt(COLS);
                } while ( map[actor.y][actor.x] == '#' || actorMap[actor.y + "_" + actor.x] != null );

                // add references to the actor to the actors list & map
                actorMap[actor.y + "_" + actor.x]= actor;
                actorList.push(actor);
        }

        // the player is the first actor in the list
        player = actorList[0];
        livingEnemies = ACTORS-1;
}

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

function drawActors() {
        for (var a in actorList) {
                if (actorList[a].hp > 0)
                        asciidisplay[actorList[a].y][actorList[a].x].content = a == 0?''+player.hp:'e';
        }
}

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

function create() {
	...
	// initialize actors
	initActors();
	...
	drawActors();
}

Kita sekarang bisa melihat karakter pemain dan musuh menyebar dalam level 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:

function canGo(actor,dir) {
	return 	actor.x+dir.x >= 0 &&
		actor.x+dir.x <= COLS - 1 &&
                actor.y+dir.y >= 0 &&
		actor.y+dir.y <= ROWS - 1 &&
		map[actor.y+dir.y][actor.x +dir.x] == '.';
}

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).

function moveTo(actor, dir) {
        // check if actor can move in the given direction
        if (!canGo(actor,dir))
                return false;

        // moves actor to the new location
        var newKey = (actor.y + dir.y) +'_' + (actor.x + dir.x);
        // if the destination tile has an actor in it
        if (actorMap[newKey] != null) {
                //decrement hitpoints of the actor at the destination tile
                var victim = actorMap[newKey];
                victim.hp--;

                // if it's dead remove its reference
                if (victim.hp == 0) {
                        actorMap[newKey]= null;
                        actorList[actorList.indexOf(victim)]=null;
                        if(victim!=player) {
                                livingEnemies--;
                                if (livingEnemies == 0) {
                                        // victory message
                                        var victory = game.add.text(game.world.centerX, game.world.centerY, 'Victory!\nCtrl+r to restart', { fill : '#2e2', align: "center" } );
                                        victory.anchor.setTo(0.5,0.5);
                                }
                        }
                }
        } else {
                // remove reference to the actor's old position
                actorMap[actor.y + '_' + actor.x]= null;

                // update position
                actor.y+=dir.y;
                actor.x+=dir.x;

                // add reference to the actor's new position
                actorMap[actor.y + '_' + actor.x]=actor;
        }
        return true;
}

Pada dasarnya:

Kita perlu memastikan aktor bergerak menuju posisi yang valid.
Jika ada aktor lain di posisi tersebut, kita akan menyerangnya (dan mengalahkannya jika nyawa nya mencapai 0)
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:

function onKeyUp(event) {
        // draw map to overwrite previous actors positions
        drawMap();

        // act on player input
        var acted = false;
        switch (event.keyCode) {
                case Phaser.Keyboard.LEFT:
                        acted = moveTo(player, {x:-1, y:0});
                        break;

                case Phaser.Keyboard.RIGHT:
                        acted = moveTo(player,{x:1, y:0});
                        break;

                case Phaser.Keyboard.UP:
                        acted = moveTo(player, {x:0, y:-1});
                        break;

                case Phaser.Keyboard.DOWN:
                        acted = moveTo(player, {x:0, y:1});
                        break;
        }

        // draw actors in new positions
        drawActors();
}

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

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.

function aiAct(actor) {
        var directions = [ { x: -1, y:0 }, { x:1, y:0 }, { x:0, y: -1 }, { x:0, y:1 } ];
        var dx = player.x - actor.x;
        var dy = player.y - actor.y;

        // if player is far away, walk randomly
        if (Math.abs(dx) + Math.abs(dy) > 6)
                // try to walk in random directions until you succeed once
                while (!moveTo(actor, directions[randomInt(directions.length)])) { };

        // otherwise walk towards player
        if (Math.abs(dx) > Math.abs(dy)) {
                if (dx < 0) {
                        // left
                        moveTo(actor, directions[0]);
                } else {
                        // right
                        moveTo(actor, directions[1]);
                }
        } else {
                if (dy < 0) {
                        // up
                        moveTo(actor, directions[2]);
                } else {
                        // down
                        moveTo(actor, directions[3]);
                }
        }
        if (player.hp < 1) {
                // game over message
                var gameOver = game.add.text(game.world.centerX, game.world.centerY, 'Game Over\nCtrl+r to restart', { fill : '#e22', align: "center" } );
                gameOver.anchor.setTo(0.5,0.5);
        }
}

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:

function onKeyUp(event) {
        ...
        // enemies act every time the player does
        if (acted)
                for (var enemy in actorList) {
                        // skip the player
                        if(enemy==0)
                                continue;

                        var e = actorList[enemy];
                        if (e != null)
                                aiAct(e);
                }

        // draw actors in new positions
        drawActors();
}

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!