Creando un videojuego paso a paso con Scratch desde cero
A la vuelta de las vacaciones vamos a visitar un colegio de Sevilla para
impartir un taller de introducción a la programación con chavales de 1º y 6º de
primaria.
El objetivo del taller es que todos los chicos se vayan a casa con un videojuego creado por ellos mismos, de manera que aprendan los rudimentos de Scratch y se motiven para las clases de programación que les impartirán sus maestras el resto del curso. En esta entrada os mostramos paso a paso cómo programar el videojuego que desarrollaremos durante el taller. ¿Te animas a programar el tuyo?
El objetivo del taller es que todos los chicos se vayan a casa con un videojuego creado por ellos mismos, de manera que aprendan los rudimentos de Scratch y se motiven para las clases de programación que les impartirán sus maestras el resto del curso. En esta entrada os mostramos paso a paso cómo programar el videojuego que desarrollaremos durante el taller. ¿Te animas a programar el tuyo?
(INSTRUCCIONES: Controla el movimiento de la bruja
con las teclas flecha derecha, izquierda, arriba y abajo para esquivar a los
dragones y capturar el mayor número posible de estrellas.)
Para comenzar, si no tienes un usuario en la web de Scratch deberías
crearte uno, de forma que puedas guardar tus juegos y creaciones para editarlos
en el futuro, compartirlos con la comunidad, recibir comentarios y
valoraciones, etc. Una vez que hayas iniciado sesión, pincharemos en la sección Crear de
la web para comenzar un nuevo proyecto.
Seleccionando personajes
En primer lugar, como no queremos trabajar con el gato de Scratch, vamos
a eliminar el objeto que se crea por defecto.
A continuación vamos a añadir un personaje, para lo que pulsaremos sobre
el botón Nuevo Objeto: Elegir un objeto desde la biblioteca.
Navegaremos por la biblioteca hasta la sección de Fantasía y
elegiremos la bruja.
Primeros pasos
Ahora vamos a proceder a escribir los programas que controlarán los
movimientos del personaje. Lo primero que debe hacerse siempre con un personaje
es indicarle lo que debe hacer cuando comience a ejecutarse el videojuego. Así
que vamos a crear un programa que indique cuál es la posición de la pantalla en
la que la bruja debe aparecer cuando comience una partida.
Tal y como se muestra en la imagen, la posición horizontal de los
personajes se controla con la variable x del eje de coordenadas y su posición
vertical se controla con la variable y, teniendo como referencia que el centro
de la pantalla es la posición (0,0).
De esta forma, si queremos que la bruja aparezca siempre en el centro de
la pantalla (pos x = 0, pos y= 0) al comenzar la partida, podemos incluir
los siguientes bloques:
Fijaros en que hemos aprovechado para incluir un bloque que marca la
forma en que la bruja se moverá por la pantalla, indicando que solamente debe
rotar de izquierda a derecha, con el objetivo de que el personaje no se ponga
patas arriba cuando realice un giro.
Controlando el movimiento con los cursores
Controlando el movimiento con los cursores
Ahora vamos a introducir varios programas que van a permitirnos
controlar el movimiento de la bruja con el teclado. Lo que haremos será crear
un programa para que cada vez que el usuario que esté jugando pulse las flechas
de los cursores (izquierda, derecha, arriba o abajo) se modifique la posición
de la bruja en consecuencia.
Por tanto, cuando el usuario pulse, por ejemplo, la tecla flecha
derecha tendremos que aumentar el valor de la coordenada x para que se
desplace hacia la derecha. Sin embargo, cuando el usuario pulse sobre la tecla flecha
izquierda habrá que reducir el valor de la coordenada x para que se
mueva hacia la izquierda. Y, de forma equivalente, tendremos que hacer lo mismo
para las posiciones verticales modificando el valor de la coordenada Y. Por
tanto, el código que controlaría el movimiento de nuestra bruja sería el
siguiente:
¿Has visto lo fácil que resulta controlar el movimiento de los
personajes de nuestros juegos? Sin embargo, para darle algo más de realismo
vamos a hacer que la bruja mire hacia la izquierda cuando se mueva en esa
dirección y que mire hacia la derecha cuando se mueva hacia este otro lado.
Para ello , modificaremos ligeramente el código de nuestros programas para
incluir un bloque que controla la dirección hacia la que apunta el personaje (90
para mirar a la derecha, -90 para la izquierda):
Ya tenemos nuestra bruja moviéndose y cambiando de posición siguiendo las órdenes del usuario. ¡Perfecto!
Añadiendo nuevos personajes
Ahora vamos a ponernos a trabajar con los dragones que la bruja debe
esquivar para poder seguir jugando. Así que lo primero será importar un nuevo
objeto desde la biblioteca.
Los bucles
El código que controlará el movimiento del dragón es muy sencillo pero
muy interesante, ya que introduce el concepto de bucle. ¿Qué es un bucle? Pues
un bucle es un conjunto de instrucciones que se repite varias veces. Como
nuestro dragón va a estar constantemente moviéndose por la pantalla de lado a
lado se trata de una situación perfecta para usar un bucle. Echemos un vistazo
al programa antes de analizarlo:
Sencillo, ¿verdad? Lo que indica el programa es que, cuando el usuario
pinche en la bandera verde (es decir, cuando comience la partida), lo que debe
hacer el dragón es:
1. Fijar el estilo de
rotación a izquierda-derecha. Como hemos visto, esto significa que cuando gire,
tan solo lo hará de forma horizontal y no vertical, para que el dragón no se
ponga patas arriba.
2. Entra en un bucle
que se repite por siempre:
- Mueve
dos pasos
- Comprueba
si está tocando un borde. Si es así, rebota.
- Vuelve
al comienzo del bucle, es decir, vuelve al punto 2.
Los condicionales
Con este código nuestro dragón estará constantemente moviéndose por la
pantalla. Ahora vamos a añadir un segundo programa al dragón, que se va a
encargar de controlar si el dragón está tocando a la bruja, ya que en ese caso
se debe mostrar un mensaje y terminar la partida. Para ello usaremos de nuevo
un bucle repetir por siempre:
En este código aparece un bloque condicional: si tocando a la
bruja entonces… En este tipo de bloques el código interno (en este caso
formado por los bloques decir: ¡Te he cogido! y detener
todos los programas) solo se ejecuta cuando se cumple la condición, que en
nuestro programa es que el dragón esté tocando a la bruja.
Disfraces
Con el objetivo de darle más realismo al juego vamos a modificar
ligeramente el código del dragón para que vaya cambiando su apariencia y vaya
echando fuego. Para ello vamos a usar los disfraces, que se pueden entender
como las distintas representaciones de un mismo personaje (algo similar a
cuando un actor de una película cambia de vestuario).
Así si nos vamos a la sección de disfraces del dragón podemos comprobar
que tiene dos disfraces preparados.
Para indicar al dragón que vaya cambiando de disfraz constantemente podemos utilizar el siguiente bloque, que hace uso de un bucle por siempre, un bloque de cambio de disfraz y un bloque esperar, para que el cambio no sea demasiado rápido:
Recogiendo recompensas
Para terminar el juego, ahora tenemos que importar el objeto estrella
que la bruja tratará de ir cogiendo para sumar puntos:
El comportamiento de la estrella que deseamos es el siguiente: queremos
que aparezca en un punto al azar de la pantalla y que, cuando sea tocada por la
bruja, desaparezca y aparezca en otra posición al azar de la pantalla. Éste es
el programa que implementa ese comportamiento:
Como se puede comprobar, aparecen de nuevo muchos bloques que ya conocemos: al presionar la bandera verde, bucle repetir por siempre, un bloque condicional para ver si está tocando al objeto bruja… Quizás el bloque más complejo de entender es el que controla la posición a la que debe moverse la estrella, que es un número al azar entre -230 y 230 para la posición X y un número al azar entre -170 y 170 para la posición Y, lo que hace que la estrella aparezca cada vez en un sitio diferente de la pantalla.
Como se puede comprobar, aparecen de nuevo muchos bloques que ya conocemos: al presionar la bandera verde, bucle repetir por siempre, un bloque condicional para ver si está tocando al objeto bruja… Quizás el bloque más complejo de entender es el que controla la posición a la que debe moverse la estrella, que es un número al azar entre -230 y 230 para la posición X y un número al azar entre -170 y 170 para la posición Y, lo que hace que la estrella aparezca cada vez en un sitio diferente de la pantalla.
Como el objetivo del juego es sumar el máximo número de puntos posibles,
es necesario contar con un marcador que se vaya actualizando cada vez que la
bruja toque a la estrella. Para ello debemos irnos a los bloques de la
categoría Datos y crear una nueva variable que
llamaremos Puntos. Al crear la variable nos aparecerán nuevos bloques que
podemos utilizar para actualizar su valor. Así, cuando comience el juego
siempre tendremos que darle a la variable puntos el valor 0; y cada vez que la
bruja toque la estrella tendremos que modificar su valor para sumar un punto
más. Por eso este tipo de bloques, que guardan datos, se llaman variables,
porque su valor varía a lo largo de la partida. El código de
la estrella quedará tal y como se muestra en la siguiente imagen, en la que ya
se han incluido los bloques relativos al control de la variable:
Modificando el fondo
Si has llegado hasta aquí, ¡buen trabajo! Ya tienes tu videojuego listo
y funcionando. Aunque quizás, para darle algo más de vistosidad, podríamos
modificar el fondo de la pantalla para que se muestre otro más apropiado. Para
ello pulsaremos sobre el escenario (bajo la ventana de objetos), nos iremos a
la pestaña Fondos (similar a los disfraces de los objetos pero
para el escenario) y pulsaremos sobre el botón Fondo nuevo: Elegir un
fondo desde la biblioteca.
Ahora sí, ¡enhorabuena! Tu videojuego está listo para guardar y
compartir con quien quieras a través de la web. ¿A que ha resultado mucho más
fácil de lo que se podría esperar en un principio? A partir de ahora, el límite
lo marcas tú con tu imaginación.
Esperamos que este solo sea el primero de una larga lista de proyectos.
Eso sí, no dejes de contarnos cómo te va y de compartir con toda la comunidad
tus avances.