Tutorial juego de pacman: base para crear un roguelike

Buenas a todos. Hoy empezaré un tutorial de como hacer un juego de game maker de un laberinto, pacman, ambientación de mazmorras, roguelike (sin llegar a tratar el tema de la aleatoriedad), bomberman, pokemon… que podremos usar de base para cualquier juego que:

• nos movamos en cuatro direcciones.
• se alinee a una grid.
• Otras cosas que se os ocurran…

Así aprendemos a usar movimientos con velocidad, y usar cuatro mecánicas muy útiles en este tipo de juegos. Conforme vayamos avanzando, si queréis aportar algo que os pueda ser útil lo podemos añadir.
Me voy a basar en unos tutoriales que existían en la versión anterior de Game Maker, así que es posible que los encuentreis por ahí. Yo los voy a adaptar para que no de problemas en Game Maker Studio, más todas las funcionalidades nuevas que vayamos a añadir (entre todos).
¡Al ataque!

Antes de empezar: conseguir sprites

Suelo basarme en la web de OpenGameArt para conseguir recursos para los tutoriales, ya que la gran mayoría de recursos suelen ser gratuitos. En este caso, utilizaré los sprites de DragonDePlatino, que tiene unos sprites completisimos para el proyecto que queremos hacer.
Nos bajamos los sprites del enlace anterior y ya podemos crearnos un proyecto nuevo. Yo lo llamaré Dungeon tutorial, pero vosotros podéis ponerle el nombre que queráis (no os obligo ^_^). Creamos un nuevo sprite llamado spr_wall, le damos al botón Edit Sprite, y creamos una imagen nueva de 16×16 desde File – New. Pero antes de continuar:

• ¿Por qué estamos creando un sprite desde cero?
• ¿No habíamos descargado un montón de sprites para dibujar?

Existen dos maneras de enfocar el tema de los muros:

1. Creas un objeto invisible y por debajo pintas el muro como fondo. Al tener varios sprites de muro es más rápido, para mí, pintarlos en la room. También debería de ser más rápida la ejecución.
2. Creas tantos objetos como sprites tengas. Para facilitar la programación, creas un objeto padre con toda la lógica de programación y luego añades los diferentes objetos muro en la room.

Yo prefiero la primera opción, y así aprendemos a usar los tiles en el editor de rooms. Seguimos.
Le damos al botón Edit this image. Yo coloreo la imagen para que tenga efecto la máscara, pero lo hago utilizando una opacidad media para ver por debajo la imagen colocada. Podéis ver en la imagen como lo hago:

Aunque no lo parezca, está todo pintado de negro

Coloreo con el botón Fill an area. Guardamos este sprite y creamos el del personaje que moveremos.

Sprite del guerrero

Dentro de la carpeta Commissions de los sprites que nos hemos bajado, utilizaremos el fichero Warrior.png. Vemos que este fichero contiene los 4 movimientos que necesitamos para crear nuestro personaje, así que crearemos 4 sprites diferentes. Empezamos por la primera fila, con un nuevo sprite que llamamos spr_warrior_down.
Le damos al botón Edit Sprite, y dentro de la ventana del Editor de Sprites elegimo sdel menú File – Create from Strip. Elegimos el fichero Warrior.png y nos aparecerá una ventana como ésta:

Si ponemos los parámetros tal y como vemos en la imagen, elegiremos las 4 sub-imágenes de la primera fila, que nos servirá para el sprite que queremos hacer.
Ahora elegiremos la segunda fila de subimágenes, con el sprite spr_warrior_left. Hacemos los mismos pasos, pero rellenaremos la opción vertical cell offset para bajar la selección

Creamos después el sprite spr_warrior_right y en vertical cell offset ponemos 2. Para acabar los sprites del guerrero, creamos el sprite spr_warrior_up y en vertical cell offset ponemos 3. De momento tenemos todos los sprites de movimiento de nuestro personaje.

Objeto del guerrero

Ahora vamos a crear el objeto obj_warrior, programamos el movimiento mediante las teclas de flechas y cambiará el sprite correspondiente. En nuestro nuevo objeto, le asignamos el sprite spr_warrior_down, para que tenga un sprite de base. Ahora añadimo sun evento Keyboard, eligiendo la tecla Left. Añadimos una acción Change Sprite, eligiendo spr_warrior_left, subimage -1 y speed 0.5.
Luego añadimos un Check Grid, dejando los valores de 16 en los dos snaps. Luego añadimos una acción Move Fixed, pulsando el botón de la flecha izquierda y poniendo un speed de 2.

Así quedarían todas las acciones para el evento Left.

Ahora tenemos que hacer lo mismo para el resto de teclas. Para hacerlo más fácil, podemos duplicar el evento que hemos hecho. Nos aparece un menú con el botón derecho sobre la acción, dónde podemos elegir Duplicate Event. Ahora podemos elegir el evento nuevo, por ejemplo Keyboard – Right. Cambiamos el sprite de la acción Change sprite por spr_warrior_right, y en move fixed cambiamos la flecha por la de la derecha. Hacemos los mismo con los eventos Keyboard – Up y Keyboard – Down.
Ahora falta un evento más que vamos a duplicar, el evento Keyboard – No key. Dejaremos el sprite spr_warrior_down para cuando no nos movamos. Sus valores serán diferentes, ya que no queremos movimiento, así que le decimos que subimage y speed son 0. En move fixed le damos al botón del cuadrado, el que está en el centro de todas las flechas, para que pare su movimiento.

Para probar todo lo que hemos hecho, creamos una room nueva, añadimos el objeto obj_warrior y ejecutamos con el botón correspondiente o pulsando . Probamos que hace todos los movimientos bien, con sus sprites correctos.

Añadir otros controles al guerrero

Ahora que tenemos el movimiento completo del personaje, vamos a controlar varias cosas más. Una de ellas, que cuando ponemos un objeto muro no pueda avanzar sobre esa dirección.
Está parte será muy sencilla. Creamos un objeto nuevo, llamado obj_wall, y le asignamos el primer sprite que hemos creado, spr_wall. Marcamos la casilla solid.
Nos vamos al objeto obj_warrior, y añadimos un nuevo evento de Collision, relacionado con el objeto obj_wall que hemos creado. En ese evento solo añadimos la acción de Move Fixed, tal y como está en el evento No Key en la imagen superior, para que detenga su movimiento al chocar con el muro.
Podemos añadir varios objetos de muro en la room y probar como funciona. Es posible que detectéis un error: a veces se queda atascado el personaje. ¿Por qué?
Por qué los sprites de warriors no ocupan exactamente 16×16 píxeles, así que la máscara es un pelín inferior. Veámoslo.

Vemos que hay dos píxeles por la izquierda de margen con la máscara, así que podríamos tener problemas en algunos lugares. ¿Cómo lo solucionamos?
Podemos cambiar la máscara de cada sprite, marcando Full image para que acepte todo el tamaño de la imagen. También podemos seleccionar en el editor de objetos una máscara específica, y así daría igual el sprite que tiene en ese momento. Yo voy a cambiar los 4 sprites.
Ahora vamos a editar la room para darle un look más cavernoso. El aspecto final se va pareciendo a éste:

¿Como he llegado a este aspecto? Gracias a los tiles que podemos añadir como si fuese un fondo de pantalla, pero pintándolo cuadro a cuadro. Lo voy a explicar en detalle.

Crear los recursos de background

En los sprites que hemos descargado, tenemos dos ficheros que nos interesa para pintar la room: Wall.png y Floor.png, que están dentro de la carpeta Objects.
Añadimos un nuevo background, que llamamos bck_wall, y cargamos su archivo con el botón Load Background. Debemos marcar la casilla Use as tile set, y vemos que nos aparecen más propiedades. Debemos asegurarnos que en tile width y tile height tenga el mismo valor de 16 píxeles. Vemos que nos ha marcado unos recuadros en cada imagen. Tendrá un aspecto así:

Lo mismo con el fichero Floor.png, dejando los mismos valores con el recurso bck_floor. Ahora nos vamos al editor de rooms para pintar el fondo.

Creando un fondo con tiles en la room

Ahora nos vamos a la pestaña tiles, y elegimos uno de los ficheros, por ejemplo, bck_wall. Hacemos click en la imagen cargada y vemos que marca un recuadro con una parte de la imagen del tile. Si hacemos click en la room, pintará sólo ese recuadro.

Espero que se vea el recuadro seleccionado

De esta manera podemos ir pintando toda la room. Yo he creado dos capas para los tiles, uno por cada fichero, así puedo crear en el mismo recuadro de la room dos tiles superpuestos (sino Game Maker lo sustituye).
Es un trabajo laborioso, pero al final podemos pintar toda la room con todos sus detalles.

Añadiendo los muros

Ahora que hemos añadido todo el fondo de la room, podemos añadir los objetos de muro donde corresponde. Podríamos añadir cada objeto, que tiene un tamaño de 16 píxeles, en cuadra recuadro de la room, pero añadiríamos muchos objetos. Nos podemos ahorrar decenas de objetos haciendo unos cambios en sus propiedades.
La room está rodeada por un muro exterior. Voy a ocultar el fondo de tiles para que veáis el proceso con más claridad. Esto se hace en los botones superiores del editor, en el primer botón dónde aparece una lupa. Añado un objeto obj_wall en la esquina superior.

Modificamos el valor de Scale Y, poniendo 15. Vemos que el tamaño del objeto ha cambiado y ahora llega hasta el borde inferior de la room.

¡Nos hemos ahorrado 14 objetos con ese cambio de tamaño! De esta manera podemos ir añadiendo objetos y jugando con los valores de Scale X y Scale Y para ir poniendo los muros necesarios. Con sólo 11 objetos hemos creado todos los muros necesarios.

Podemos probar el resultado final del movimiento de nuestro guerrero.

Conclusión final

Hemos creado un personaje que se mueve basándose en una grid de un tamaño definido. Además, hemos creado todo el fondo de la room mediante tiles. Si queréis el fichero del proyecto, podéis descargarlo aquí:

Tutorial pacman tipo roguelike

En el próximo post, nos basaremos en el mismo proyecto para definir el rango del movimiento del personaje, por si queremos crear un juego tipo rol que se mueva por turnos.
Espero vuestros comentarios de este tutorial.