Sesión 2: Scratch intermedio

Currículo: aquí encontrarás el desarrollo detallado de los contenidos que forman parte del Curso de pensamiento computacional, robótica e internet de las cosas, organizado por el CEP de Huelva – Isla Cristina.

Tabla de contenidos

• 1. Contexto
• 2. Introducción al proyecto
• 3. Mecánica de juego
• 4. Análisis del problema
• 5. Desarrollo del juego
  • 5.1. Crear los fondos del escenario
  • 5.2. Crear los objetos que participan: Alien, Nave y Proyectil
  • 5.3. Controlar con el teclado la nave
  • 5.4. Crear el grupo de aliens
  • 5.5. Programar el movimiento de los aliens
  • 5.6. Programar el movimiento del proyectil
  • 5.7. Programar cómo se mata un alien
  • 5.8. Controlar el final del juego
  • 5.9. Ajustes de última hora
• 6. Conclusión y siguientes pasos

Duración: 3 horas.

Objetivos: el objetivo de esta sesión es aplicar el pensamiento computacional para el desarrollo de un popular videojuego.

Prerrequisitos: los participantes deberán tener un conocimiento, al menos básico, de la programación con Scratch, y una cuenta de usuario funcional.

1. Contexto

En la primera sesión estuvimos trabajando el pensamiento computacional desde un punto de vista teórico, repasando todas sus características desde la formulación de un problema, hasta las fases que podíamos recorrer para alcanzar una solución eficiente.

Terminamos citándonos para el aprendizaje un poco más profundo de una de las herramientas más útiles que existe a nivel educativo para trabajar este tipo de habilidades.

Además, en los cursos de introducción que se suelen realizar, Scratch es una herramienta que se introduce y con la que se trabaja a nivel básico.

Nuestro trabajo, por tanto, en esta sesión se centra en profundizar en las posibilidades que nos ofrece Scratch para trabajar de forma lúdica el entrenamiento del pensamiento computacional.

Como no queremos aburrirte con complejos conceptos sobre programación, vamos a recorrer el camino de la construcción de un videojuego. A lo largo de este recorrido veremos conceptos más avanzados que en cursos anteriores directamente aplicados sobre una solución real.

2. Introducción al proyecto

Ponte cómodo, que vamos a programar el mítico arcade «Space Invaders».

«Space Invaders», fue lanzado en 1978, y es considerado uno de los videojuegos más influyentes de la historia por varias razones. Revolucionó la industria del entretenimiento digital al popularizar varios conceptos clave: fue pionero en el género de los juegos de disparos y jugó un papel vital en la transición de los videojuegos de gráficos simples a complejos. Su diseño, donde los enemigos aumentaban de velocidad a medida que el jugador eliminaba filas, introdujo un nuevo nivel de jugabilidad adictiva que aumentaba la urgencia de la experiencia. Además, fue uno de los primeros juegos en recordar las puntuaciones altas, incentivando la competencia entre jugadores y popularizando la idea de alcanzar un «high score». Su influencia cultural y comercial se extendió más allá de las salas de juego, contribuyendo significativamente a la creciente popularidad de los videojuegos como una forma de entretenimiento masivo y dando inicio a lo que muchos llaman la «edad de oro de los videojuegos arcade».

Si no estás familiarizado con el mundo de los videojuegos, «arcade» es una referencia anglosajona que podría traducirse en España como «máquina recreativa». Este tipo de juegos se caracteriza por su jugabilidad directa, sonidos llamativos, dificultad creciente y experiencia rápida e intensa.

Tenemos claro de lo que hablamos, ¿verdad?

3. Mecánica de juego

Bueno, pues vamos a repasar en qué consiste el juego.

El juego se inicia con la generación de 40 enemigos: 5 filas de 8 aliens de distintos colores, tal y como ves en la imagen. El jugador debe mover la nave con las teclas de flecha-derecha y flecha-izquierda para desplazarse por el escenario. Además, cada vez que pulsa la barra espaciadora, dispara un proyectil que destruye aliens. Los aliens, por su parte se mueven de izquierda a derecha y bajan un poco cada vez que alcanzan uno de los extremos laterales. El jugador gana cuando los destruye a todos, y pierde si un alien toca la nave.

¿Lo tienes todo claro? Si no es así pregunta al ponente y te resolverá tus dudas acerca de la mecánica del juego. Es imprescindible que entiendas cómo funciona el juego antes de ponerte a desarrollarlo.

4. Análisis del problema

Ahora, invierte unos minutos en analizar cómo funciona todo. Realiza una descomposición en problemas más pequeños que puedas abordar individualmente, y cuando lo tengas, ponte a trabajar en el primero.

Bajo mi punto de vista, son los problemas que necesitamos resolver:

1. Crear los fondos del escenario.
2. Crear los objetos que participan: Alien, Nave y Proyectil.
3. Controlar con el teclado la nave.
4. Crear el grupo de aliens.
5. Programar el movimiento de los aliens.
6. Programar el movimiento del proyectil.
7. Programar cómo se mata un alien.
8. Controlar el final del juego.
9. Ajustes de última hora.

5. Desarrollo del juego

Tenemos claro lo que debemos hacer, pero esto va a ser largo, así que no pierdas de vista nuestro plan de trabajo.

¿Listos? Vamos a comenzar a resolver el primer problema.

5.1. Crear los fondos del escenario

Los fondos del escenario podemos dibujarlos directamente dentro de Scratch, yendo a Escenario, pulsando el icono de Pintar:

Luego puedes crear un fondo de color negro y por medio de las herramientas como Círculo, Relleno, Borde y Texto, crear los tres fondos que necesitamos. Recuerda que el escenario de Scratch mide 480×360 píxeles.

Ya tenemos nuestras tres imágenes: la de juego, la de victoria y la de derrota.

Ahora, desde el mismo panel de Escenarios, pulsa sobre cargar y selecciona las tres imágenes. 

Tu pestaña de fondos debe quedar así:

Primer problema resuelto.

Vamos con el segundo.

5.2. Crear los objetos que participan: Alien, Nave y Proyectil

Para crear los objetos que forman parte de nuestro juego, sí que vamos a dibujar. En este caso, debes usar las opciones para el dibujo -en modo vectorial- que se abren al pulsar aquí:

ALIEN

La idea es crear un único objeto para todos los aliens. Ese objeto tendrá 3 disfraces: rojo, naranja y verde.

Vamos a dibujar el disfraz ROJO:

Ahora, utilizando la herramienta rectángulo sin borde, dibuja el alien rojo.

Seguidamente, en la sección de disfraces, pulsa sobre el icono del gato y luego en Pinta:

Ponle de nombre NARANJA, y diseña el nuevo disfraz. Asegúrate de que tu diseño tiene el mismo tamaño que el ROJO:

Y volvemos a repetir lo mismo con el disfraz VERDE:

Aliens terminados.

Vamos con la nave.

NAVE

De la misma manera que hemos hecho para el alien, hacemos para la nave. Primero creamos un objeto llamado NAVE y dibujamos un solo disfraz. Yo he optado por un color amarillo apagado y un círculo en el centro para simular el cañón:

PROYECTIL

Procedemos de la misma manera, pero en este caso tendremos dos disfraces, uno para el proyectil cuando va viajando y el otro cuando hace impacto:

Listo, tenemos todos nuestros objetos. Otro problema resuelto.

5.3. Controlar con el teclado la nave

Nuestra siguiente tarea a resolver es mover la nave. 

Habíamos dejado nuestro panel de objetos así:

Así que, como vamos a centrarnos en la nave, oculta el ALIEN y el PROYECTIL. Activa la NAVE, colócala en el borde inferior, en el centro y reduce su tamaño, hasta que te quede algo así:

Es hora de programar, así que asegúrate de que está activa la pestaña de Código:

Lo que queremos hacer es que cuando se pulse la tecla de la flecha derecha de los cursores del teclado, la nave se mueva 5 pasos a la derecha; y cuando se pulse izquierda se mueva 5 pasos a la izquierda. Como estamos recorriendo desde el centro el eje X, derecha significa +5 e izquierda -5.

Además este comportamiento tiene que ser así siempre, así que desde la categoría de Control, debemos usar un por siempre.

¿Qué es lo que debemos hacer por siempre? Detectar una pulsación de tecla. 

Si la tecla flecha derecha está presionada, debemos sumar 5 a la posición X. Igualmente, si la tecla flecha izquierda está presionada, debemos sumar -5 a la posición X. Esto podemos lograrlo usando una estructura condicional si..entonces que encontrarás en la misma categoría de Control.

Y la detección de las pulsaciones de las teclas, en la categoría de Sensores:

Combinando los bloques, podemos programar la funcionalidad que buscamos:

Además, como puedes observar, siempre es una buena práctica, situar a los objetos en su posición inicial.

Pulsa en la bandera y prueba el juego.

¿Todo bien? Perfecto, otro problema resuelto.

5.4. Crear el grupo de aliens

Nuestro juego de cargará inicialmente con un ejército de 40 aliens (5 filas de 8). 

Con lo que sabíamos de Scratch hasta ahora, el problema tendríamos que resolverlo duplicando 40 veces el único alien que tenemos. Cambiar su disfraz para cada fila de aliens y moverlos cada uno de forma independiente, porque a todos los efectos, son objetos distintos.

Aparte del trabajo que tiene eso, ¿qué pasaría si detectamos un error en el código en uno de ellos? Tendríamos que revisar el código de los otros 39 para corregirlo. Por tanto, la opción de duplicar queda descartada.

Para estos casos, se recurre a una utilidad muy potente de Scratch que son los clones.

Un clon es una copia de un objeto que mantiene sus mismos disfraces, tamaños y programación. Si modificas uno, los modificas a todos: son copias dependientes.

Como comprenderás, su uso es un poco más complicado, pero facilitan enormemente el trabajo.

Nuestra tarea inicial es, mostrar el alien -recuerda que está oculto- situar al alien en la esquina superior izquierda del escenario, crear 8 clones y situar cada clon.

Vamos a ello.

Lo activamos y lo ponemos visible:

Le cambiamos el tamaño:

Lo situamos en la esquina superior izquierda:

A continuación, programamos la generación de la primera fila de aliens:

Pulsa la bandera verde y a continuación haz doble clic en el primer bloque de código. Si lo has hecho todo bien, verás cómo se genera en el escenario la primera fila de 8 clones más el objeto original, separados la distancia que indicaste -depende del tamaño de tu alien, podrías necesitar aumentar o disminuir esta distancia-.

¿Sabrías cómo hacer para generar las 5 filas de una vez? Piensa en cómo hacerlo.

¿No se te ocurre? Lo que ya has hecho debes repetirlo 5 veces, pero con un pequeño detalle adicional: tras la finalización de cada fila, debes situar al objeto original nuevamente en el margen izquierdo inicial, pero esta vez desplazado hacia abajo.

Esto te generará los 40 aliens, distribuidos en 5 filas, más el alien original.

¿Cómo hacemos ahora para que la primera fila sean rojos, la segunda y tercera naranjas y la última verdes? Jugando con los disfraces.

Inicia tu programa cambiando el disfraz a ROJO, y al final de la generación de cada fila, programa que aparezca el siguiente disfraz:

Ups! Casi.

¿Qué ha pasado? Pues que tenemos 3 disfraces y 5 filas. Si cambiamos cada disfraz después de generar cada fila, debemos repetir disfraz.

¿Entonces?

Podemos resolver este pequeño inconveniente, jugando con el panel de Disfraces. Duplicamos los disfraces que queramos y los ordenamos, tal y cómo queremos que sea la pauta:

Con este sencillo cambio, nuestro programa ya sí que funcionará como queremos.

Para resolver el detalle del alien original, simplemente lo escondemos al finalizar la generación del ejercito:

Otro problema resuelto. 

5.5. Programar el movimiento de los aliens

Nuestros enemigos están, pero de momento, no se mueven. Por tanto, vamos a dotarlos de esa habilidad.

El movimiento del ejército enemigo será en dos direcciones, verticalmente hacia abajo, y lateralmente.

Primero, se moverán lateralmente y cuando alcancen el margen opuesto del escenario, bajarán y se moverán otra vez lateralmente pero en sentido contrario.

¿Cuándo deben moverse? Pues tan pronto como cobren vida, es decir, tan pronto como sean clonados.

Para eso está el evento:

Cuando movemos un objeto por el escenario es muy importante que indiquemos previamente en qué dirección debe moverse y cuánto debe hacerlo. En mi caso, tras probar varias combinaciones, me va bien que se mueva 20 veces 8 pasos cada vez. Pero tú debes encontrar la combinación que mejor te va.

Y ahora ¿qué le añadirías para que haga el resto de su desplazamiento?

Revisa la generación del ejército enemigo y su desplazamiento para que al bajar, no se monten unos encima de otros.

Otro problema resuelto.

5.6. Programar el movimiento del proyectil

Turno para nuestro cañón.

Vamos a definir ahora, el comportamiento de los proyectiles que lanza la nave.

En nuestro caso, tenemos un sólo proyectil. Igual que hicimos con los aliens, tenemos que clonarlo para poder lanzar más de un proyectil, concretamente, debemos lanzar uno cada vez que se pulse la barra espaciadora.

Pero, ¿qué problema tenemos? Pues que nosotros cuando jugamos, estamos controlando la nave, moviéndola a un lado y a otro. Si pulsamos la barra espaciadora para disparar, tenemos que hacer que nuestro objeto proyectil haga algo -salir disparado- pero no existe un bloque clonar proyectil, desde la nave. 

Tenemos que encontrar algún mecanismo para que el objeto NAVE, se comunique con el objeto PROYECTIL.

Ese mecanismo se llama paso de mensajes, y es una funcionalidad íntimamente relacionada con los eventos, por eso, los encontraremos allí.

Lo que vamos a hacer es crear un mensaje que la nave enviará a todos los objetos del juego cada vez que se pulse la barra espaciadora. Y luego haremos que cuando el objeto PROYECTIL reciba ese mensaje, se clone y se mueva hacia los enemigos.

Vamos a ir, por tanto a la categoría Eventos, pero antes asegúrate de tener activado el objeto NAVE.

Luego usa este bloque, despliégalo y crea un mensaje nuevo llamado Disparar:

Luego, haz que se envíe ese mensaje cada vez que se pulse la barra espaciadora:

Turno para el PROYECTIL. Actívalo y dirígete a su zona de código -que debe estar todavía vacía-. Lo programamos para que se cree un clon de sí mismo cuando reciba el mensaje de disparo:

Lo siguiente que debe hacer el proyectil, con cada clon, es situarse en la misma posición donde se encuentra la nave -porque es ella la que dispara-, seleccionamos su disfraz de VIAJANDO y hacemos que se mueva verticalmente hacia arriba:

Prueba tu programa.

¿Que pasa, te has quedado sin munición?

Es normal, estamos creando clones, lo cual consume memoria, tanta que Scratch deja de hacerlo para no bloquearse.

La solución es eliminar el clon del proyectil que alcance el borde superior. Esto lo conseguimos con una estructura condicional y un sensor:

Tenemos ese problema resuelto, pero todavía no conseguimos eliminar enemigos. Bueno, el primer paso es conseguir que el proyectil explote cuando los alcance, y esto se hace exactamente igual que lo que acabamos de hacer: con una estructura condicional y un sensor. El resto es bastante intuitivo:

Prueba el juego y, si es necesario, ajusta la espera y la velocidad de movimiento o el tamaño del proyectil para que quede a tu gusto.

5.7. Programar cómo se mata un alien

Tenemos programado el impacto del proyectil en el alien, pero el alien no desaparece para representar su destrucción.

Para esto tenemos un bloque de control muy interesante llamado esperar hasta que. ¿Hasta cuándo? Pues hasta que un sensor detecte que un proyectil está tocando al alien.

Así que, activa al alien, y:

Todo funciona a la perfección, pero habíamos olvidado una característica importante de los juegos de arcade, ¡las puntuaciones!

Obtenemos puntos cada vez que destruimos un alien, así que es el mejor momento posible para programar esta funcionalidad.

Las puntuaciones son valores que van a ir cambiando a lo largo del programa. Inicialmente estarán a 0 y aumentarán de 1 en 1 cada vez que destruyamos un alien.

Como es un valor que va cambiando, debemos usar VARIABLES.

Una variable es un objeto del programa donde podemos almacenar valores numéricos o texto. Su funcionamiento es muy sencillo: primero creamos la variable, a la que damos un nombre, el que queramos. Y, posteriormente, podemos introducir un valor, cambiarlo o mostrarlo en pantalla.

Para crear una variable, nos vamos a la categoría del mismo nombre y pulsamos en Crear una variable:

Le ponemos un nombre, y le decimos que sea accesible por todos los objetos:

Ahora tenemos que hacer dos cosas: primero inicializamos la variable a 0 (lo podemos hacer en cualquier parte del programa que se inicie con la bandera verde) y segundo, sumar un punto cada vez que un alien muere.

La inicialización la hemos hecho en el objeto NAVE:

Y la actualización de la puntuación en el objeto ALIEN, antes de desaparecer:

Otro problema resuelto.

5.8. Controlar el final del juego

Como hemos otorgado un punto por cada alien destruido y sabemos cuántos se crearon inicialmente, la variable Puntuación, será también una buena herramienta para detectar el final exitoso del juego. Aunque también podríamos perder.

Veamos cómo hacemos esto.

Recuerda que teníamos dos fondos, y cada uno aparecerá en función del resultado de la partida:

Si se alcanza la puntuación de 40

Si un alien toca la nave

Claro, ahora volvemos a tener el mismo problema que con el proyectil: somos capaces de detectar ambas situaciones, pero ¿cómo le decimos al Escenario que cambie el fondo? Y, otra más, ¿cómo hacemos para que todo se pare? Igual que con el caso de los proyectiles: usando el envío de mensajes.

En primer lugar, vamos a programar el caso de éxito. 

El mejor sitio para hacerlo es el ALIEN, así que actívalo y cada vez que uno muera, comprueba si ya tenemos 40 puntos. En ese caso envía el mensaje de victoria a todo el juego:

Ahora activamos el objeto Escenario y en su pestaña de Código, añadimos:

Fondo cambiado y juego finalizado.

Ahora, vayamos al caso de derrota del jugador.

Esto ocurría cuando el alien tocaba la nave. Pues activamos el ALIEN, y debemos preguntarnos ¿dónde comprobamos si el ALIEN toca la NAVE? Pues el sitio lógico es, inmediatamente después de que el alien se mueva:

Finalmente, volvemos al objeto Escenario para añadir el cambio de fondo para la derrota:

Juego terminado.

5.9. Ajustes de última hora

Prueba el juego, realiza diversos movimientos y ve repasando el código de cada objeto hasta que el comportamiento de cada uno de ellos satisfaga tus deseos.

Si quieres compartir tu trabajo conmigo, para que te lo corrija o te de feedback, puedes pulsar el botón Compartir naranja que encontrarás en la parte superior de la interfaz de Scratch, pulsar sobre Copiar enlace (parte inferior derecha) y entregarlo en Classroom.

6. Conclusión y siguientes pasos

Lo bueno de juegos como este es que tras haber resuelto una lista de pequeños problemas, has conseguido resolver un problema mucho más grande. Seguramente, no te des cuenta, pero si reflexionas un poco, has aplicado todas las habilidades que se citan en el curso sobre pensamiento computacional.

Además, existen numerosos juegos arcade que comparten la misma mecánica, como «Arkanoid» o «1942».

Así que ya ves, incluso has creado una solución aplicable a la resolución de otros problemas similares, tal y como avanzábamos en la primera sesión.

Espero que te hayas divertido desarrollando este juego y que consigas aplicarlo con éxito en tus clases. Si lo haces, no dudes en escribir para compartir tu experiencia.

Hasta la próxima sesión.

BONUS TIP: es posible que a lo largo de tus clases, tus alumnos ya conozcan lo suficiente de Scratch como para que la plataforma se empiece a quedar corta. Si es así, existe otra herramienta similar -de programación por bloques-, plenamente enfocada en el desarrollo de videojuegos. Se llama Microsoft MakeCode Arcade, y sus posibilidades son ilimitadas.

Se te abre todo un mundo de posibilidades, que a tus alumnos les va a encantar. Dentro de la propia herramienta tienes montones de recursos de aprendizaje, y en Youtube también existen varias listas de reproducción para iniciarte a un muy buen nivel.