Wie können Sie Ihr erstes Roguelike machen?

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

Roguelikes standen in letzter Zeit im Rampenlicht, mit Spielen wie Dungeons of Dredmor, Spelunky, The Binding of Isaac und FTL, die ein breites Publikum erreichten und von der Kritik hoch gelobt wurden. Roguelike-Elemente, die seit langem von Hardcore-Spielern in einer winzigen Nische genossen werden, tragen jetzt dazu bei, vielen bestehenden Genres mehr Tiefe und Wiederspielbarkeit zu verleihen.

Wayfarer a 3D roguelike currently in development — Wayfarer, ein 3D-Roguelike, das derzeit entwickelt wird.

In diesem Tutorial erfahren Sie, wie Sie mit JavaScript und der HTML 5-Game-Engine Phaser ein traditionelles Roguelike erstellen. Am Ende haben Sie ein voll funktionsfähiges, einfaches Roguelike-Spiel, das in Ihrem Browser gespielt werden kann! (Für unsere Zwecke wird ein traditionelles Roguelike als ein zufälliger, rundenbasierter Einzelspieler-Dungeon-Crawler mit Permadeath definiert.)

Click to play the game — Klicken Sie, um das Spiel zu spielen.

Zusammenhängende Posts

Wie kann man die Phaser HTML5 Game Engine lernen?

Hinweis: Obwohl der Code in diesem Tutorial JavaScript, HTML und Phaser verwendet, sollten Sie in fast jeder anderen Codierungssprache und Spiel-Engine dieselbe Technik und dieselben Konzepte verwenden können.

Fertig werden

Für dieses Tutorial benötigen Sie einen Texteditor und einen Browser. Ich verwende Notepad++ und bevorzuge Google Chrome für seine umfangreichen Entwickler-Werkzeugs, aber der Arbetsablauf ist mit jedem von Ihnen ausgewählten Texteditor und Browser nahezu identisch.

Sie sollten dann die Quelldateien herunterladen und mit dem init-Ordner beginnen. Dies enthält Phaser und die grundlegenden HTML- und JS-Dateien für unser Spiel. Wir werden unseren Spielcode in die aktuell leere Datei rl.js schreiben.

Die Datei index.html lädt einfach Phaser und unsere oben genannte Spielcode-Datei:

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

Initialisierung und Definitionen

Vorerst werden wir ASCII-Grafiken für unser Roguelike verwenden - in Zukunft könnten wir diese durch Bitmap-Grafiken ersetzen, aber im Moment erleichtert die Verwendung von einfachem ASCII unser Leben.

Definieren wir einige Konstanten für die Schriftgröße, die Abmessungen unserer Karte (d.h. die Ebene) und wie viele Akteure darin erscheinen:

        // font size
        var FONT = 32;

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

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

Lassen Sie uns auch Phaser initialisieren und auf Tastatur-Key-Up-Ereignisse warten, da wir ein rundenbasiertes Spiel erstellen und für jeden Tastendruck einmal handeln möchten:

// 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:

        }
}

Da Standard-Monospace-Schriftarten in der Regel etwa 60% so breit wie hoch sind, haben wir die Leinwandgröße auf 0.6 * the font size * the number of columns. Wir sagen Phaser auch, dass es unsere create()- Funktion sofort nach Abschluss der Initialisierung aufrufen soll. Zu diesem Zeitpunkt initialisieren wir die Tastatursteuerelemente.

Sie können das Spiel bisher hier ansehen - nicht, dass es viel zu sehen gibt!

Die Karte

Die Kachelkarte stellt unseren Spielbereich dar: eine diskrete (im Gegensatz zu einer kontinuierlichen) 2D-Anordnung von Kacheln oder Zellen, die jeweils durch ein ASCII-Zeichen dargestellt werden, das entweder eine Wand (#: Blockbewegung) oder einen Boden (.: blockiert nicht die Bewegung):

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

Verwenden wir die einfachste Form der prozeduralen Generierung, um unsere Karten zu erstellen: zufällig entscheiden, welche Zelle eine Wand und welche einen Boden enthalten soll:

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);
        }
}

Zusammenhängende Posts

Dies sollte uns eine Karte geben, auf der 80% der Zellen Wände und der Rest Böden sind.

Wir initialisieren die neue Karte für unser Spiel in der Funktion create(), unmittelbar nachdem wir die Listener für Tastaturereignisse eingerichtet haben:

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

        // initialize map
        initMap();
}

Sie können die Demo hier ansehen - auch hier gibt es nichts zu sehen, da wir die Karte noch nicht gerendert haben.

Der Bildschirm

Es ist Zeit, unsere Karte zu zeichnen! Unser Bildschirm besteht aus einem 2D-Array von Textelementen, die jeweils ein einzelnes Zeichen enthalten:

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

Durch das Zeichnen der Karte wird der Inhalt des Bildschirms mit den Werten der Karte gefüllt, da beide einfache ASCII-Zeichen sind:

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

Bevor wir die Karte zeichnen, müssen wir den Bildschirm initialisieren. Wir kehren zu unserer Funktion create() zurück:

        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);
        }

Sie sollten jetzt eine zufällige Karte sehen, wenn Sie das Projekt ausführen.

Click to view the game so far — Klicken Sie hier, um das bisherige Spiel anzuzeigen.

Akteure

Als nächstes folgen die Akteure: unser Spielercharakter und die Feinde, die sie besiegen müssen. Jeder Akteur ist ein Objekt mit drei Feldern: x und y für seine Position in der Karte und hp für seine Trefferpunkte.

Wir behalten alle Akteure im actorList-Array (das erste Element ist der Player). Wir behalten auch ein assoziatives Array mit den Standorten der Akteur als Schlüssel für die schnelle Suche bei, damit wir nicht die gesamte Liste der Akteur durchlaufen müssen, um herauszufinden, welcher Akteur einen bestimmten Ort einnimmt. Dies wird uns helfen, wenn wir die Bewegung und den Kampf codieren.

// 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;

Wir erstellen alle unsere Akteure und weisen jedem eine zufällige freie Position in der Karte zu:

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;
}

Es ist Zeit, die Akteure zu zeigen! Wir werden alle Feinde als e und den Spielercharakter als Anzahl der Trefferpunkte zeichnen:

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';
        }
}

Wir verwenden die Funktionen, die wir gerade geschrieben haben, um alle Akteure in unserer Funktion create() zu initialisieren und zu zeichnen:

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

Wir können jetzt sehen, wie sich unser Spielercharakter und unsere Feinde in der Ebene ausbreiten!

Blockierende und begehbare Fliesen

Wir müssen sicherstellen, dass unsere Akteur nicht vom Bildschirm und durch Wände rennen. Fügen wir also diese einfache Überprüfung hinzu, um zu sehen, in welche Richtungen ein bestimmter Schauspieler gehen kann:

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] == '.';
}

Bewegung und Kampf

Wir sind endlich zu einer Interaktion gekommen: Bewegung und Kampf! Da bei klassischen Roguelikes der Basisangriff durch den Wechsel zu einem anderen Akteur ausgelöst wird, behandeln wir beide an derselben Stelle, unserer moveTo()-Funktion, die einen Akteur und eine Richtung nimmt (die Richtung ist der gewünschte Unterschied in x und y zu der Position, in die der Akteur eintritt):

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;
}

Grundsätzlich:

Wir stellen sicher, dass der Akteur versucht, eine gültige Position einzunehmen.
Wenn sich ein anderer Akteur in dieser Position befindet, greifen wir ihn an (und töten ihn, wenn seine HP-Zahl 0 erreicht).
Wenn es keinen anderen Akteur in der neuen Position gibt, ziehen wir dorthin.

Beachten Sie, dass wir auch eine einfache Siegesmeldung anzeigen, sobald der letzte Feind getötet wurde, und false oder true zurückgeben, je nachdem, ob wir einen gültigen Zug ausgeführt haben oder nicht.

Kehren wir nun zu unserer Funktion onKeyUp() zurück und ändern Sie sie so, dass wir jedes Mal, wenn der Benutzer eine Taste drückt, die Positionen des vorherigen Akteurs vom Bildschirm löschen (indem Sie die Karte oben zeichnen) und den Spielercharakter auf den neuen verschieben Ort, und zeichnen Sie dann die Akteure neu:

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();
}

Wir werden bald die Variable acted verwenden, um zu wissen, ob die Feinde nach jeder Spielereingabe handeln sollen.

Grundlegende künstliche Intelligenz

Jetzt, da sich unser Spielercharakter bewegt und angreift, können wir die Chancen ausgleichen, indem wir die Feinde dazu bringen, gemäß einer sehr einfachen Wegfindung zu handeln, solange der Spieler sechs Schritte oder weniger von ihnen entfernt ist. (Wenn der Spieler weiter entfernt ist, geht der Feind zufällig.)

Beachten Sie, dass es unserem Angriffscode egal ist, wen der Akteur angreift. Dies bedeutet, dass sich die Feinde gegenseitig angreifen, wenn Sie sie genau richtig ausrichten, während sie versuchen, den Spielercharakter im Doom-Stil zu verfolgen!

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);
        }
}

Wir haben auch eine Game-Over-Nachricht hinzugefügt, die angezeigt wird, wenn einer der Feinde den Spieler tötet.

Jetzt müssen die Feinde nur noch jedes Mal handeln, wenn sich der Spieler bewegt. Dazu müssen Sie am Ende unserer onKeyUp()-Funktionen Folgendes hinzufügen, bevor Sie die Akteure in ihre neue Position ziehen:

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: Haxe Version

Ich habe dieses Tutorial ursprünglich in einem Haxe geschrieben, einer großartigen Multi-Plattform-Sprache, die (unter anderem) mit JavaScript kompiliert wird. Obwohl ich die obige Version von Hand übersetzt habe, um sicherzustellen, dass wir eigenwilliges JavaScript erhalten. Wenn Sie wie ich Haxe JavaScript vorziehen, finden Sie die Haxe-Version im Ordner haxe des Quelldownloads.

Sie müssen zuerst den Haxe-Compiler installieren und können den gewünschten Texteditor verwenden und den Haxe-Code kompilieren, indem Sie haxe build.hxml aufrufen oder auf die Datei build.hxml doppelklicken. Ich habe auch ein FlashDevelop-Projekt eingefügt, wenn Sie eine nette IDE einem Texteditor und einer Befehlszeile vorziehen. Öffnen Sie einfach rl.hxproj und drücken Sie F5, um zu starten.

Zusammenfassung

Das ist es! Wir haben jetzt ein ganz einfaches Roguelike mit zufälliger Kartengenerierung, Bewegung, Kampf, KI und sowohl Gewinn- als auch Verlustbedingungen.

Hier sind einige Ideen für neue Funktionen, die Sie Ihrem Spiel hinzufügen können:

mehrere Ebenen
Einschalten
Inventar
Verbrauchsmaterial
Ausrüstung

Genießen Sie!