Cómo hacer su primer Roguelike

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

Roguelikes han estado en el centro de atención recientemente, con juegos como Dungeons of Dredmor, Spelunky, The Binding of Isaac y FTL llegando a un público amplio y recibiendo elogios de la crítica. Durante mucho tiempo disfrutado por los jugadores hardcore en un pequeño nicho, elementos roguelike en diversas combinaciones ahora ayudan a traer más profundidad y repetición a muchos géneros existentes.

Wayfarer a 3D roguelike currently in development — Wayfarer, un 3D roguelike actualmente en desarrollo.

En este tutorial, aprenderá cómo hacer un roguelike tradicional usando JavaScript y el motor de juego HTML 5 Phaser. ¡Al final, tendrás un juego totalmente funcional y simple como roguelike, jugable en tu navegador! (Para nuestros propósitos un roguelike tradicional se define como un solo jugador, aleatorio, basado en turnos de mazmorras-rastreador con permadeath.)

Click to play the game — Haga clic para jugar el juego.

Artículos Relacionados

Aprender el motor de juegos HTML5 Phaser

Nota: Aunque el código de este tutorial utiliza JavaScript, HTML y Phaser, debería ser capaz de utilizar la misma técnica y conceptos en casi cualquier otro lenguaje de codificación y motor de juego.

Preparándose

Para este tutorial, necesitará un editor de texto y un navegador. Utilizo Notepad++, y prefiero Google Chrome por sus extensas herramientas de desarrollo, pero el flujo de trabajo será prácticamente el mismo con cualquier editor de texto y navegador que elija.

A continuación, debe descargar los archivos y comenzar con la carpeta init; Contiene Phaser y los archivos HTML y JS básicos de nuestro juego. Escribiremos nuestro código de juego en el archivo rl.js actualmente vacío.

El archivo index.html simplemente carga Phaser y nuestro archivo de código de juego antes mencionado:

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

Inicialización y definiciones

Por el momento, vamos a utilizar gráficos ASCII para nuestro roguelike—en el futuro, podríamos reemplazar estos con gráficos de mapa de bits, pero por ahora, el uso de ASCII simple hace nuestra vida más fácil.

Vamos a definir algunas constantes para el tamaño de la fuente, las dimensiones de nuestro mapa (es decir, el nivel) y cuántos actores aparecen en él:

        // font size
        var FONT = 32;

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

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

También vamos a inicializar Phaser y escuchar los eventos key-up del teclado, ya que estaremos creando un juego basado en turnos y queremos actuar una vez por cada golpe de tecla:

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

        }
}

Dado que las fuentes monospace predeterminadas tienden a ser alrededor del 60% tan anchas como altas, hemos inicializado el tamaño del lienzo para que sea 0,6 * el tamaño de fuente * el número de columnas. También le decimos a Phaser que debería llamar a nuestra función create() inmediatamente después de que haya terminado de inicializar, momento en el cual inicializaremos los controles del teclado.

Puedes ver el juego hasta ahora aquí—¡no que hay mucho que ver!

El mapa

El mapa representa nuestro área de juego: una matriz 2D discreta (en oposición a continua) de azulejos, o células, cada una representada por un carácter ASCII que puede significar una pared (#: bloquea el movimiento) o el piso (.: Bloqueo de movimiento):

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

Vamos a utilizar la forma más simple de la generación de procedimientos para crear nuestros mapas: decidir al azar qué celda debe contener una pared y que un piso:

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

Artículos Relacionados

Esto nos debe dar un mapa donde el 80% de las celdas son paredes y el resto son pisos.

Inicializamos el nuevo mapa para nuestro juego en la función create(), inmediatamente después de configurar los oyentes de eventos de teclado:

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

        // initialize map
        initMap();
}

Puedes ver la demo aquí—aunque, de nuevo, no hay nada que ver, ya que no hemos procesado el mapa todavía.

La pantalla

¡Es hora de dibujar nuestro mapa! Nuestra pantalla será una matriz 2D de elementos de texto, cada uno de los cuales contiene un solo carácter:

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

Dibujar el mapa rellenará el contenido de la pantalla con los valores del mapa, ya que ambos son simples caracteres ASCII:

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

Finalmente, antes de dibujar el mapa tenemos que inicializar la pantalla. Volvemos a nuestra función 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);
        }

Ahora debería ver un mapa aleatorio que se muestra al ejecutar el proyecto.

Click to view the game so far — Haz clic para ver el juego hasta ahora.

Actores

A continuación de la fila están los actores: nuestro personaje jugador, y los enemigos que deben derrotar. Cada actor será un objeto con tres campos: x e y para su ubicación en el mapa, y hp para sus puntos de golpe.

Mantenemos todos los actores en la matriz actorList (el primer elemento del cual es el jugador). También mantenemos una matriz asociativa con los lugares de los actores como claves para la búsqueda rápida, de modo que no tengamos que iterar sobre la lista completa de actores para encontrar qué actor ocupa un determinado lugar; Esto nos ayudará cuando codifiquemos el movimiento y el combate.

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

Creamos todos nuestros actores y asignamos una posición aleatoria libre en el mapa a cada uno:

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 hora de mostrar a los actores! Vamos a dibujar todos los enemigos como e y el personaje del jugador como tambien su número de puntos de vida:

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

Hacemos uso de las funciones que acabamos de escribir para inicializar y dibujar a todos los actores en nuestra función create():

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

¡Ahora podemos ver a nuestro personaje jugador y enemigos extendidos en el nivel!

Bloqueo y baldosas

Tenemos que asegurarnos de que nuestros actores no están corriendo de la pantalla y a través de las paredes, así que vamos a agregar este simple cheque para ver en qué direcciones un actor dado puede caminar:

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

Movimiento y combate

Finalmente hemos llegado a alguna interacción: ¡movimiento y combate! Puesto que, en los roguelikes clásicos, el ataque básico se dispara al moverse a otro actor, manejamos ambos en el mismo lugar, nuestra función moveTo(), que toma un actor y una dirección (la dirección es la diferencia deseada en x e Y a la posición en que el actor entra):

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

Básicamente:

Nos aseguramos de que el actor esté tratando de moverse en una posición válida.
Si hay otro actor en esa posición, lo atacamos (y lo matamos si su recuento de HP llega a 0).
Si no hay otro actor en la nueva posición, nos movemos allí.

Tenga en cuenta que también mostramos un simple mensaje de victoria una vez que el último enemigo ha sido asesinado, y devolveremos false o true dependiendo de si hemos logrado o no realizar un movimiento válido.

Ahora, volvamos a nuestra función onKeyUp() y lo alteramos para que, cada vez que el usuario presione una tecla, borremos las posiciones del actor anterior desde la pantalla (dibujando el mapa en la parte superior), moveremos el personaje del jugador al nuevo Ubicación, y luego redibujar a los actores:

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

Pronto usaremos la variable acted para saber si los enemigos deben actuar después de cada entrada del jugador.

Inteligencia Artificial Básica

Ahora que nuestro personaje jugador se está moviendo y atacando, vamos a nivelar las probabilidades haciendo que los enemigos actúen de acuerdo a una ruta de búsqueda muy simple, siempre y cuando el jugador este a seis pasos o menos de ellos. (Si el jugador está más lejos, el enemigo camina aleatoriamente.)

Note que nuestro código de ataque no le importa a quién el actor está atacando; Esto significa que, si los alineas justo a la derecha, los enemigos se atacarán mientras tratan de perseguir al personaje del jugador, ¡estilo 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);
        }
}

También hemos añadido un mensaje de juego, que se muestra si uno de los enemigos mata al jugador.

Ahora todo lo que queda por hacer es hacer que los enemigos actúen cada vez que el jugador se mueve, lo que requiere agregar lo siguiente al final de nuestras funciones onKeyUp(), justo antes de dibujar a los actores en su nueva posición:

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ón Haxe

Originalmente escribí este tutorial en un Haxe, un gran lenguaje multiplataforma que compila JavaScript (entre otros idiomas). A pesar de que he traducido la versión de arriba a mano para asegurarse de que obtener Javascript idiosincrásico, si, como yo, usted prefiere Haxe a JavaScript, puede encontrar la versión Haxe en la carpeta haxe de descarga de la fuente.

Primero debe instalar el compilador haxe y puede usar cualquier editor de texto que desee y compilar el código haxe llamando a haxe build.hxml o haciendo doble clic en el archivo build.hxml. También incluí un proyecto FlashDevelop si prefiere un IDE agradable a un editor de texto y una línea de comandos; Simplemente abra rl.hxproj y presione F5 para ejecutar.

Resumen

¡Eso es todo! Ahora tenemos un simple simple roguelike, con generación aleatoria de mapas, movimiento, combate, AI y condiciones tanto ganar y perder.

Estas son algunas ideas para las nuevas características que puede agregar a su juego:

Múltiples niveles
potenciadores
inventario
consumibles
equipo

¡A disfrutar!