Tutorial Drag and Drop en Game Maker Studio 2: Tappy Plane

Como ya dije anteriormente, uno de las principales novedades en Game Maker Studio 2 son las acciones Drag and Drop, que ha sufrido un cambio radical respecto a cualquier versión anterior. No solo casi no hay correspondencia entre las acciones de siempre con las actuales, sino que tienes que saber a dónde aplica y como se encadenan para que todo esté correcto.

Podemos decir que se parece más a la hora de programar, así que el cambio de Drag&Drop a código GML debe ser menos difícil con todas las herramientas que nos ofrece.

Vamos a ver un tutorial de como hacer un juego sencillo con las nuevas acciones de Game Maker Studio 2, ¿adivinas cuál puede ser?

Tutorial Tappy Plane en Game Maker 2

El primer tutorial que hice para la web fue el de Tappy Plane, porque es lo suficientemente sencillo para entender lo más básico de cada uno de los conceptos. Así que voy a aprovechar para hacer el mismo juego, y así puedes ver las diferencias entre uno y otro. Para hacer la comparativa y refrescar la memoria, te paso el enlace:

Tutorial Tappy Plane en Game Maker

Ahora vamos a crear un proyecto nuevo en Game Maker Studio 2, eligiendo la opción de Drag and Drop.

Le ponemos el nombre de Tappy Plane, nos descargamos los recursos de este enlace y empezamos a crear los sprites.

Crear los primeros sprites del proyecto

Recordemos que voy a hacer todos los pasos igual que en el post de Game Maker con la versión 1.4, y así vemos como cambia entre una versión y otra.

Para añadir un sprite, podemos hacerlo hacerlo desde el árbol de recursos, dándole al botón derecho en la carpeta de sprites, o desde el menú Resources – Create Sprite. Le damos al botón Import y buscamos dentro de los recursos descargados, en la carpeta PNG – Planes. Elegimos las 3 imágenes del avión de un mismo color. Al sprite lo llamamos spr_plane.

Ahora haremos lo mismo con las rocas, suando la imagen rockdown.png. El sprite se llamará spr_rock.

Para crear una máscara precisa de la roca, vemos en las opciones de la izquierda al final, dónde pone Collision Mask, lo abrimos y elegimos en el combo Type, la opción Precise (Slow).

En Game Maker Studio 2 no tenemos los fondos como un recurso propio, así que tenemos que añadirlo como un sprite. Añadimos un sprite nuevo llamado spr_background, del fichero background.png.

Ahora vamos a los diferentes objetos.

Crear objeto roca

Creamos un objeto nuevo llamado obj_rock_down, en el menú Resources – Create Object, y añadimos el sprite spr_rock, en el botón

Vemos que desde la ventana de propiedades del objeto hay una ventana enlazada, dónde se ve la lista de eventos asociados. Como no tenemos ninguno, añadimos uno con e botón Create Event. Elegimos el evento Create .

Ahora empezamos con las acciones nuevas de Game Maker Studio 2. Al añadir el evento, se ha enlazado otra ventana nueva, que es dónde pondremos las acciones relacionadas con ese evento. A la derecha de ese ventana (como en otras versiones de Game Maker), vemos una lista de todas las acciones, agrupadas en categorías. Buscamos la categoría Movement, y arrastramos la primera acción de todas, Set Direction Fixed . Pulsamos la flecha de la izquierda.

Nos falta una cosa. En versiones anteriores a Game Maker, esta acción de movimiento le podías asignar una velocidad. Pero en Game Maker Studio 2, necesitas decísela con otra acción. Buscamos la acción Set Speed , la arrastramos y le ponemos un valor de 4. El evento quedará así:

Ahora vamos al siguiente objeto.

Copia del objeto roca

Aunque no esté del todo bien hecho, porque lo suyo sería utilizar la herencia de objetos, vamos a copiar el objeto que hemos creado y añadiremos una acción más. Para copiarlo, hacemos botón derecho encima de él y le damos a la opción Duplicate. Lo llamaremos obj_rock_up.

Aunque hayamos copiado el objeto, vemos que las acciones de dentro del evento Create  no se han copiado, así que toca copiar las acciones Set Direction Fixed   y Set Speed , con sus mismos valores.

Ahora añadimos la acción que girará el dibujo, o mejor dicho, el sprite. Para buscar todas las acciones relacionadas con los sprites, tenemos una sección dentro de las acciones que las agrupa, pero vamos a buscarlo en la caja que hay justo encima.

Nos interesa la acción Set Instance Scale , y en vertical pondremos el valor -1 para poder voltear la imagen.

También vamos a colocar el objeto en su lugar correspondiente, que es en la parte de abajo de la room. Eso lo conseguimos con Jump to Point , dejando en X un 0  en Y el valor de 480 (el ancho de la room). Marcamos los dos check Relative. El evento de este objeto quedará así:

Crear objeto controlador

Creamos el objeto obj_controller, añadimos un evento Create  y arrastramos una acción Set Alarm . En Countdown ponemos un valor de 60.

El objeto controlador se encargará de colocar las dos rocas, la de arriba y la de abajo. Lo haremos aleatoriamente: podrá colocar una arriba, y la siguiente podrá ser cualquiera de las dos. En versiones anteriores de Game Maker, teníamos la acción Create Random , pero en Game Maker Studio 2 debemos hacerlo de otra manera.

Primero de todo, añadimos en el mismo evento Create  la acción Randomize . El motivo de esta acción está explicado en el siguiente enlace

Sobre el azar en los juegos

El evento queda así:

Ahora añadimos el evento Alarm 0 . Este evento es el que irá creando las rocas, aleatoriamente arriba o abajo. Para ello, buscamos la acción Get Random Number . En Type pondremos Integer, y los valores serán entre 0 y 1, para que sean sólo 2. Es importante que en Target tenga un valor escrito, para almacenar su valor y poder consultarlo en la siguiente acción. Por ejemplo, random_var. Marcamos el check Temp.

Añadimos una acción If Variable  para evaluarla. En Variable ponemos random_var, en Is ponemos Equal y en Value 0. Ahora arrastramos una acción Create Instance . Es muy importante colocarlo encima de la acción anterior, para que quede dentro de la evaluación. Será el objeto obj_rock_down, y lo colocaremos fuera de la room, con un X 850 e Y en 0. Marcamos los dos checks Relative.

Añadimos una acción Else , para añadir el otro objeto roca. Volvemos a añadir otra acción Create Instance , y volvemos a poner los mismos valores que la anterior, pero con el objeto obj_rock_up, y en Y 480.

Finalmente, volvemos a activar la alarma con la acción Set Alarm , poniendo un valor de 60.

Al final, todo el evento quedará así:

Es muy importante que para que el evento funcione correctamente, todas las uniones o rallas que ves estén de la misma manera. Cada acción debe estar colocada correctamente, sino las rocas aparecerán cuando no toca, o tampoco se activará la alarma. Como ves, en Game Maker Studio 2 las acciones han evolucionado de una manera totalmente diferente.

Probar lo que tenemos hasta ahora

Con lo que tenemos hasta ahora, podemos probar si funciona correctamente. Modificaremos la room que tenemos para que haga lo que queremos.

Abrimos la room actual, y le cambiamos el tamaño con un Width de 800 y un Height de 480.

Ahora seleccionamos la capa Background, en la parte superior izquierda del editor de rooms, y arrastramos el sprite spr_background que hemos creado anteriormente. Nos aseguramos que quede centrado en la room.

Seleccionamos a continuación la capa Instances, y arrastramos el objeto obj_controller. AL no tener un sprite asociado, aparece con un icono ?. Ejecutamos el juego pulsando <F5>, y las rocas deben aparecer correctamente.

Creamos el objeto jugador

Ahora que ya tenemos las obstáculos con forma de roca, podemos crear el objeto con el que se podrá jugar, que es el avión.

Creamos un objeto nuevo llamado obj_plane. El sprite que asociamos ya lo añadimos antes, llamado spr_plane.

Añadimos el evento Step . En este evento añadiremos la gravedad del avión. Primero añadimos la acción Set Gravity Direction , y le ponemos un valor de 270. Recuerda que siempre hay que ponerle una dirección a la gravedad.

Ahora añadiremos la fuerza de la gravedad. Arrastramos la acción Set Gravity Force , con un Force de 1.

Todo el evento quedará así:

Ahora añadimos el evento Key up – Space . Este evento será el que eleve el avión. Lo haremos con velocidad.

Añadimos la acción Set Speed . En Type ponemos Vertical, y en Speed -10. El número es negativo para indicar que es hacia arriba.

Añadimos en la room el objeto obj_plane, más o menos en medio de la room, y comprobamos que funcione correctamente, sobretodo si está bien situado.

Acabamos el juego: el objeto game over

En el otro tutorial, si nos chocamos o salimos de la room mostrábamos un simple mensaje. En Game Maker Studio 2 no existe esa opción, así que vamos a trabajarlo un poco más.

Creamos un sprite nuevo, lo llamamos spr_game_over, y de los recursos descargados buscamos el fichero textGameOver.png, que está dentro de la ruta PNG/UI. Su posición será Middle Center. Así quedan todos sus datos:

Ahora creamos el objeto obj_game_over, y le asociamos el sprite que acabamos de crear. Añadimos el evento Key Up – Escape . Añadimos la acción Game Restart .

Volvemos al objeto obj_plane. Añadimos el evento Collision . Buscamos el objeto obj_rock_down, para relacionarlo con el evento.

Añadimos la acción Create Instance , con los parámetros de la imagen:

Añadimos una acción más, la de Destroy Instance .

Podemos probar que pasa cuando chocamos con el objeto que hemos indicado. El avión desaparecerá y veremos el mensaje de Game Over. Para volver a jugar, pulsamos la tecla <Esc>.

Ahora podemos duplicar el evento Collision , pero con el objeto obj_rock_up. También lo podemos hacer con Other – Interset Boundary , para cuando toque el borde de la room.

Resumen final

Hemos hecho un pequeño juego con Game Maker Studio 2. Si vienes de GMS 1.4, compara con el otro tutorial los cambios más significativos con las acciones Drag & Drop.

Os dejo el enlace con el proyecto

Tappy Plane

Y te espero en los comentarios para cualquier sugerencia.