Solicitamos su permiso para obtener datos estadísticos de su navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúa navegando consideramos que acepta el uso de cookies. OK | Más información

Scratch - Programando un juego de plataformas

Uno de los mejores alumnos que haya podido tener nunca en mis clases de informática creó un juego de plataformas en el que consiguió que el personaje saltara y la fuerza de la gravedad tuviera efecto sobre él. Entusiasmado, le pedí que nos explicase cómo lo había hecho para que sus compañeros pudieran aprovecharlo:

En este artículo vamos a aprender a realizar un sencillo juego de plataformas con Scratch. Puedes ver el programa en funcionamiento haciendo clic aquí.

Antes que nada debéis saber que para entender este tutorial debéis leer atentamente el código del juego para saber cómo funcionan realmente cada uno de los subprogramas y cómo se combinan e interaccionan entre sí en el juego final. Estamos pues, ante un artículo de programación en Scratch de nivel avanzado.

El programa de este artículo se basa en el mítico juego Mario vs. Donkey Kong que, a buen seguro, todo el mundo recuerda. En él, un gorila nos tira un barril tras otro y el jugador debe esquivarlos mientras trata de conseguir las monedas amarillas que van apareciendo en el escenario. Vamos manos a la obra.

Lo primero que debemos hacer es crear un fondo. Para ello no debemos usar la ventana ‘Escenario’ sino que debemos tratar el fondo como si fuese un objeto, para poder moverlo cuando debe producirse el scroll o desplazamiento lateral y vertical del fondo.

Así pues, elaboramos un objeto que ocupe toda la ventana de dibujo en vertical, pero sólo la mitad en horizontal.

Después, en el editor, vamos a agrandar este objeto de modo que la mayor parte del fondo quede oculto, lo que nos permitirá moverlo verticalmente. Será precisamente esto lo que dará una sensación de movimiento del objeto situado en último término. Este movimiento de desplazamiento tiene el nombre técnico de scroll.

Cómo dibujar el fondo

Lo más importante a la hora de dibujar y pintar un fondo, es tener claro qué colores vamos a emplear ya que, como vamos a ver, nuestro ‘Mario’ va a ser capaz de andar y saltar gracias a estos colores. Es recomendable que en nuestro primer juego con scroll empleemos un fondo negro y utilicemos para las plataformas de colores lisos y bien diferenciados del resto para evitar que el programa interprete las colisiones con las plataformas de un modo erróneo.

Una vez que tengamos un fondo negro, comenzamos a elaborar el suelo: por motivos prácticos, es recomendable que el suelo sea del mismo color que la parte superior de de las plataformas, y que sea bastante grueso, para evitar que el personaje lo traspase al caer. Después, procedemos a dibujar cada una de las plataformas, éstas deben constar de dos partes, una base y una superficie, cuya utilidad explicaré cuando, un poco más adelante, veamos cómo ha de moverse nuestro protagonista.

Nuestro personaje


Clic para ampliar

Una vez hemos programado el movimiento lateral del personaje, debemos configurar cómo afectan las leyes de la gravedad al mundo que hemos creado para nuestro juego. Esto lo conseguimos programando que, por siempre, tanto el protagonista como el resto de elementos que se mueven cambien su posición en el eje Y por -7 (por ejemplo para el protagonista y -5 para los barriles). De este modo los objetos van a estar siempre cayendo.

Para evitar que el personaje se salga de la pantalla, vamos a decir que repita esta acción hasta que esté tocando el color de la parte superior de la plataforma (en el caso de nuestro juego de ejemplo, verde).

Para ver las líneas de código que ilustran lo explicado sobre cómo afecta la gravedad al personaje protagonista, podemos analizar la parte de código marcada con un círculo rojo en el programa mostrado anteriormente para el protagonista.

En primer lugar, hay que programar que, si se presiona la tecla ‘espacio’ se mande la orden Jump. Posteriormente iniciamos un programa en el que incluiremos el salto, que va a ser desencadenado al recibir la orden Jump que acabamos de enviar. Para conseguir que el personaje salte y se posicione correctamente en una plataforma hemos de configurar cuál es el suelo de las mismas, pues si no se hace, el programa desconoce por qué debería mantener al personaje sobre la plataforma. Recuerda que un programa no hace nada que no le hayamos dicho que haga. De este modo, nos aseguramos de que, cuando el gato toque el color verde (para evitar dobles saltos o incluso levitación), cambie la posición en Y por un número positivo, que ajustaremos según la altura del salto. Esto debemos hacerlo introduciendo un número bajo en la pestaña de repetición. Con esto conseguiremos que no se teletransporte, sino que vaya dando saltitos minúsculos que dan la sensación de movimiento continuo. Además, También es importante que le digamos que espere un segundo para evitar de nuevo estos dobles saltos.

Llegados a este punto nos encontramos un problema: si el personaje salta y toca la parte verde de una plataforma, quedará atravesado por la plataforma sin lograr posicionarse encima. Para evitar esto hemos dibujado una franja marrón debajo de la verde.

Vamos a introducir unas líneas de código para que cuando toque el color marrón, cambie la posición Y por el mismo número que elegimos para la gravedad (en este caso, -7). Gracias a esto vamos a conseguir que rebote y no quede atravesado en mitad de la plataforma situándose correctamente sobre ella.

Comportamiento del escenario

Ahora vamos a pasar a la parte más compleja de comprender: el scroll o desplazamiento lateral y vertical del escenario. Antes de proceder a elaborarlo, voy a explicar en qué consiste: el scroll es una sensación de movimiento que se produce cuando el personaje se desplaza por el mundo que hemos diseñado para el juego. Como ese mundo es más grande que la pantalla en la que jugamos, cuando se desplaza el personaje ha de desplazarse también el fondo. Además, para que este desplazamiento sea visto como algo natural por el jugador, hay que tener en cuenta que mientras el fondo avance, el personaje debe mover las piernas, lo que nos va a hacer creer que hay verdadero movimiento.

Para conseguir esto, debéis pensar en la ventana de trabajo como si tuviese un marco invisible que estuviese a unos dos centímetros del borde, de modo que cuando el personaje cruce ese límite se mande una orden al fondo la orden para que se desplace. Si volvemos a analizar el programa del protagonista veremos cómo están configuradas las órdenes up y down.

Para conseguir todo esto, hemos de decirle a nuestro personaje que cuando supere una cierta posición en Y (en el ejemplo, Y>150) mande el mensaje Up, es decir, que el personaje va a ascender. Hecho esto, vamos al programa del objeto empleado como fondo y le decimos que al recibir la orden Up, cambie la posición en Y por un número negativo, que debemos ajustar según la amplitud del salto.

A continuación procedemos a hacer lo mismo, pero para los casos en los que el personaje vaya hacia abajo, es decir, cuando el objeto supere una coordenada en Y negativa (unos -170) mande la orden Down y, a su vez, que el fondo, al recibir Down, cambie la posición en Y por un número positivo. Esto último debemos situarlo en el interior de una pestaña ‘Si NO tocando el color Verde’ porque, evidentemente, cuando el personaje se encuentre sobre una plataforma no debería seguir cayendo.

Ahora va a surgir otro problema: cuando el objeto vaya a caer, y mande la orden Down, el personaje no va a dejar de caer, puesto que siempre mantendrá una posición demasiado baja, por lo que va a seguir enviando Down y creando un molesto efecto. Para evitarlo, debemos decirle que envíe Jump al tocar el color verde. De este modo vamos a conseguir que cuando toque la parte superior de una plataforma (o el suelo), dé un salto que lo saque de la zona de descenso, por lo que dejará de bajar. Además, como el fondo se seguirá moviendo durante el salto, va a dar la sensación de que el personaje se ha quedado quieto, y no de que haya saltado.

En muchos casos, cuando el personaje entra en zona de descenso no envía la orden Down (parece un fallo del programa (versión 1.4 de Scratch) aunque tampoco podemos asegurarlo al 100%). Entonces pintaremos una fina línea gris en la parte inferior de la pantalla y le decimos al personaje que envíe Down al tocar ese color.

Pelotas rojas

Ahora vamos a pasar al equivalente a los barriles del Donkey Kong, que en nuestro caso son pelotas rojas. He aquí su programa:


Clic para ampliar

Lo primero que debemos conseguir es que su movimiento esté sometido a la fuerza de la gravedad que ya hemos programado anteriormente, por lo que debemos hacer lo mismo que hicimos con el gato sólo que, en el programa de ejemplo, se puso un número más pequeño para que las pelotas bajasen algo más despacio. Además debemos decirle que, al empezar, se coloque en una posición al azar, fijando el eje Y a la altura que queramos, y que aparezca en el eje X entre -230 y 230 (aproximadamente). Esto lo ajustaremos según las necesidades de cada programa.

Una vez hecho esto, nos encontramos con que la pelota se queda quieta, y es aquí donde entra la parte difícil: debemos darle un movimiento lateral aleatorio. Para ello vamos a crear una variable (dirección, por ejemplo) y vamos a decirle que cada 3 o 4 segundos cambie por un número al azar entre 1 y 2, siempre que esté tocando el color verde (para que no cambie de dirección cuando no corresponde, como por ejemplo cuando están suspendidas en el aire), así, cada vez que toquen una nueva plataforma cambiarán o no de dirección de forma aleatoria. Entonces programamos para la pelota que si el número resultante es 1, gire 90º a la izquierda (por ejemplo); si sale 2, que gire 90º a la derecha. Esto hace que nuestro programa sea divertido pues el movimiento de las pelotas rojas es desconcertante y complica la tarea de esquivarlas.

Finalmente, para acabar con estos obstáculos rojos, hay que programar que cuando toquen un borde (o, al igual que el personaje, una línea gris que previamente dibujaremos) vuelva a aparecer arriba, para lo que volveremos a elegir una altura Y determinada y una posición aleatoria en X, como al principio.

Mecánica de juego

Ahora vamos a dar vida a nuestro personaje, de modo que pueda ‘morir’. Lo primero que debemos hacer es hacer que cuando la pelota toque a nuestro personaje, mande un mensaje que llamaremos Hit, por ejemplo.

Tras esto, escogemos un objeto (en nuestro programa es el objeto número 11). Lo hemos reducido de tamaño para que guarde una proporción apropiada con los demás elementos en pantalla. Programaremos que aparezca en una esquina al iniciar el juego. Después vamos a crear una variable (lifes, por ejemplo), y a decirle que cada vez que reciba Hit, cambie por uno. Vamos a duplicar el objeto (en nuestro programa se hizo cinco veces) y los colocarremos uno al lado de otro. Posteriormente iremos al primero de estos objetos que representan cada una de las vidas del jugador y le decimos que, cuando la variable lifes sea igual a 1 (lifes=1), se esconda.

Repetiremos esto con el objeto 2 (cuando lifes sea igual a 2), y lo repetiremos con todos los demás.

Finalmente le decimos que cuando la variable lifes sea igual a 5, se detenga todo (o también podemos pintar un objeto de fondo negro en el que ponga Game Over y programarlo para aparezca al llegar esta variable a cinco)

Por otro lado, vamos a establecer un objetivo para nuestro juego, el logro que nos dará la victoria y hará que termine la misión: recoger monedas amarillas (objeto 3). Para esto vamos a dibujar una moneda cuyo tamaño ajustaremos convenientemente. Después configuramos el programa para que, al iniciar el juego, vaya a una posición aleatoria en X y en Y.

Entonces pasamos a crear una variable Marcador, y la programamos para que, cada vez que la moneda toque el objeto del personaje, cambie por uno.

Finalmente vamos a dibujar un objeto (fondo negro) en el que ponga You Won! (por ejemplo) y le decimos que cuando la variable marcador sea igual a un número X, aparezca.

Enlace | Aquí puedes ver el programa en funcionamiento.
Descarga para Scratch 1.4 | Mario Cat

Coméntalo en: Twitter Facebook Google +