Encuentra

Agenda

Servicios

Creando un videojuego en familia
|

Irene Pérez Encinar, CTO de POiN

11 febrero 2021

Dejar que los niños exploren y se diviertan, a su ritmo, con sus ideas y su creatividad y regalarles esa satisfacción que da jugar con algo que ellos mismos han creado. 

Aunque Scratch está diseñado especialmente para niños entre 8 y 16 años, puede empezar a utilizarse antes, sobre todo si se hace en familia 👪.. También existe la versión junior, con elementos muy sencillos que van a disfrutar desde bien pequeños.

Scratch es un proyecto totalmente gratuito que surgió en el MIT Media Lab con el objetivo de acercar la programación a los más jóvenes. Busca fomentar la creatividad, el razonamiento sistemático y el trabajo colaborativo, ofreciendo también una plataforma para compartir proyectos.

La base de todo es un lenguaje de programación por bloques que permite animar objetos y darles instrucciones para que realicen las acciones que se quieran, como moverse, bailar, cambiar de “disfraz”… Son, precisamente, esos disfraces, los que permiten que los niños exploren otras áreas creativas como el dibujo, ya que pueden crear sus propias formas y objetos para después darles “vida” mediante la programación. 

La tercera pata sobre la que se sustenta el entorno de trabajo es la música y el sonido, permitiendo a los niños añadir un montón de efectos sonoros a sus juegos desde la galería de Scratch o incluso grabando los suyos propios.

¿Y qué cosas pueden hacerse con Scratch?

Pues tantas como nuestra imaginación nos permita: videojuegos, postales navideñas, vídeos animados, historias interactivas… Lo importante es dejar que los niños exploren y se diviertan, a su ritmo, con sus ideas y su creatividad y, de alguna forma, regalarles esa satisfacción que da el poder jugar con algo que ellos mismos han creado.

Si con esta introducción todavía no os he convencido, no dudéis en echarle un vistazo a la página de Scratch: https://scratch.mit.edu/ y a todos los proyectos que otras personas han ido compartiendo, ¡veréis cómo os entran ganas de poneros a programar con tus peques!

En función de su edad, podréis guiarlos más o menos a través de este tutorial. Hay conceptos que pueden ser complicados para los más peques y tendréis que programarlos vosotros, pero seguro que os sorprende lo rápido que aprenden a manejarse con estas herramientas 🙂

El videojuego 

En este tutorial vamos a crear nuestra propia versión del popular juego Space Invaders. Aquí tenéis un ejemplo de cómo podría quedar:

Compartimos nuestro proyecto como inspiración, pero la idea es que vosotros creéis vuestra propia versión.

Manos a la obra

Para poder empezar a crear vuestro videojuego en Scratch no es necesario registrarse; sin embargo, os animo a hacerlo para poder ir guardando el juego en la plataforma e incluso compartirlo con la comunidad cuando terminéis (si os apetece).

Tanto si os registráis como si no, es hora de darle al botón de “Crear”: 

Creando un videojuego con niños

Al hacerlo, se nos abrirá un panel de trabajo como el siguiente:

Creando un videojuego con niños
NOTA: Yo lo tengo configurado para trabajar en inglés porque me parece una buena oportunidad de practicarlo un poco con los peques y, además, la mayoría de lenguajes de programación están escritos en inglés, por lo que si se familiarizan desde pequeños con esta sintaxis, luego les será más sencillo dar el paso a lenguajes más complejos.

En él podemos observar 3 zonas diferenciadas:

En la izquierda tenemos el catálogo de acciones que los objetos pueden realizar, clasificadas por categorías. Además, existen otras dos pestañas para crear disfraces y sonidos.

En la derecha, están el escenario, los objetos que se mueven por él y el visor donde se va mostrando el resultado de nuestro juego o animación (y con el que podemos interactuar).

Finalmente, el panel del medio es la zona de programación, donde vamos a situar las instrucciones que queremos darles a los objetos para que se muevan o realicen otras acciones en el escenario (como cambiar de disfraz, reproducir un sonido…). Esta zona irá cambiando según el objeto seleccionado, para que podamos programar cada uno de forma independiente.

Invadamos el espacio

Creando un videojuego con niños

El escenario

Vamos a empezar nuestro videojuego añadiendo un fondo de estrellas. Buscad la sección “Stage” a la derecha de la pantalla y pulsad en el icono de añadir un nuevo fondo, que encontraréis en la parte inferior.

En la biblioteca de Scratch existen varios fondos que pueden quedar bien para el videojuego, pero también podéis subir vuestras propias imágenes desde el ordenador.

La nave

¡Estupendo! El siguiente paso será cambiar el personaje principal por una nave espacial: elimina el gato y pulsa el icono de añadir nuevo “Sprite” (objeto que vamos a animar):

Creando un videojuego con niños

Una vez tengáis vuestra nave espacial, podéis arrastrarla al punto de la pantalla que más os guste y cambiar su tamaño (por ejemplo, podéis hacerla más pequeña para que no ocupe tanto espacio de juego).

Creando un videojuego con niños
NOTA: Para cambiar el tamaño, sólo hay que jugar con el valor “Size” que se ve en el centro de la imagen.

¿Ya habéis situado la nave donde os gustaría que estuviera al principio del juego?

Pues ahora vamos a programarla para que siempre empiece en el mismo sitio.

Teniendo la nave seleccionada, id a la sección de bloques y, en “Events”, buscad un bloque con una bandera verde, como éste:

Arrastradlo a la sección central (de programación) y buscad ahora un bloque de movimiento (“Motion) que le indica al objeto que debe moverse a una posición mediante sus coordenadas: 

Si os fijáis, las coordenadas que aparecen por defecto son las mismas en las que está situada la nave en este momento 🙂

¡Pues ya está! Encajadlo como si de un puzle cualquiera se tratase y ¡ya habéis escrito vuestras primeras líneas de código como programadores!

¿Cuál será el siguiente paso?

Efectivamente, ¡hacer que la nave se mueva! Pero… ¿qué evento tiene que ocurrir para desplazar la nave lateralmente?

Buscad en la sección “Events a ver si existe algún bloque que os sirva. Después, los pasos serán similares a lo que ya hemos programado: enganchad el evento deseado con el movimiento que queréis que se produzca 😉

Pista: los números que se introducen en los bloques de movimiento son coordenadas, siendo el centro del dibujo el 0,0. Si queréis desplazaros hacia la izquierda o hacia abajo, tendréis que usar valores negativos.

¿Ya lo tenéis? Debería tener una pinta parecida a esto:

¡Qué emoción! ¿Lo probamos? Pulsad la banderita verde situada encima del escenario y probad a mover la nave con las flechas.

Antes de seguir, os recomiendo guardar el juego si os habéis registrado (File > Save now) para que no se pierda vuestro trabajo.

Lanzando rayos

Ahora vamos a hacer que nuestra nave dispare, para lo que vamos a crear un nuevo objeto. Ésta vez, en lugar de seleccionarlo de la biblioteca, lo vamos a dibujar nosotros mismos.

En en panel de objetos, selecciona “Paint” al añadir uno nuevo:

Aprendiendo a lanzar rayos

Ahora es un buen momento para dejar que los niños le echen imaginación y dibujen el rayo como a ellos más les guste. Veréis que la interfaz es similar a otros programas de dibujo y se puede trabajar tanto en modo vectorial como bitmap.

Una vez lo tengáis dibujado, vamos a programar su comportamiento, yendo a la pestaña “Code”.

NOTA: Si no conseguís ver el rayo en el escenario, probad a convertirlo a bitmap

¿Cómo creéis que debería moverse el rayo? ¿Cuando ocurra qué evento?

Como sugerencia, echad un vistazo a los bloques de movimiento tipo “glide” que producen un efecto de deslizamiento muy chulo para este caso.

¿Lo habéis probado? ¿Qué ha pasado? ¿Ha desaparecido el rayo? 

Al igual que hicimos con la nave, fijando su posición inicial, también deberíamos hacer lo mismo con el rayo. Pero, ¿cuál debería ser esa posición inicial? ¿Quién dispara el rayo?

Vuestros bloques de programación deberían ser algo parecido a esto:

bloques de programación

¿Qué os parece si animamos un poco el rayo dándole un efecto sonoro? Echad un vistazo a los sonidos de la biblioteca y elegid el que más os guste (pestaña “Sounds”). Luego, buscad un bloque de programación rosa llamado “play sound until done” y encajadlo entre el bloque de evento (amarillo) y los de movimiento. 

¡Genial! Seguro que ha quedado muy chulo. ¡Ahora es momento de probarlo y jugar con el juego que estáis creando juntos! No os olvidéis de guardar los cambios de vez en cuando para que no se pierda nada 😉

Para perfeccionistas

¿Qué pasa cuando movéis la nave y lanzáis el rayo? Hace un efecto extraño, ¿verdad? En este tipo de juegos estamos acostumbrados a que los rayos se muevan verticalmente…

¿Y cómo hacemos eso?

Necesitamos que la coordenada x del movimiento de deslizar no sea siempre la misma, sino que dependa de la posición de la nave. Vale, estupendo, pero, ¿cómo le dice la nave al rayo dónde está en cada momento?

¡Mediante variables! Las variables son cajitas donde un objeto puede guardar información temporalmente, de forma que otros puedan consultarla. Vamos a crear nuestra primera variable y llamarla, por ejemplo, x_rocket, asegurándonos de marcar la opción de que esté disponible a todos los objetos (“sprites”).

Scrach videojuego en familia
Scrach videojuego en familia
NOTA: Las variables deberían tener nombres significativos que indiquen para qué las estamos usando porque si no, luego la cosa se vuelve complicada y es más difícil saber desde dónde actualizar y leer su valor.

¿Qué tenemos que hacer ahora?

  1. Cada vez que la nave cambie de posición, tendrá que actualizar la variable
  2. El rayo tendrá que leer el valor de la variable para su deslizamiento

Investigad la sección Variables para ver qué bloques os pueden servir.

Si os atascáis, aquí tenéis una posible solución:

 En el cohete (Rocketship):

Scrach videojuego en familia

En el rayo:

Scrach videojuego en familia

¡Falta el alien!

Seguro que, con todo lo que llevamos hecho, añadir un nuevo objeto “alien” estará tirado para vosotros 😊

NOTA: Además de elegir objetos de la biblioteca de Scratch o dibujarlos en su propio panel de dibujo, también podéis subir imágenes desde vuestro ordenador.

¿Cómo va a comportarse el alien? 

Por ejemplo, podemos hacer que se mueva por todo el escenario. 

¿Y cuándo? 

Pues en este caso, desde el comienzo del juego y para siempre…

NOTA: Esta instrucción, el decirle a un objeto que realice siempre la misma acción, es un “bucle” (loop) en programación y el bloque se encuentra en la sección Control. En esta sección encontraréis distintos tipos de bloques que nos permiten generar condiciones en el juego, como: “si pasa esto, entonces…” o, “repite la siguiente acción 10 veces”

Investigad la sección “Control” y tratad de encajar los bloques de movimiento y el evento de comienzo de juego para que el alien se mueva continuamente por todo el escenario.

Sugerencia (código del alien):

Scrach videojuego en familia

Los segundos que dura el desplazamiento se pueden variar para hacerlo más o menos complicado de jugar 😋

La mejor parte: ¡a jugar!

Ya sólo nos queda programar qué tiene que ocurrir para que ganemos y para que perdamos el juego. 

Por ejemplo, podríamos definir las siguientes condiciones:

– Si el alien toca la nave → fin del juego, perdemos

– Si el alien toca el rayo → fin del juego, ganamos

¿Cuándo queremos que ocurra esto? 

En cualquier momento de la partida, es decir, desde que empieza y por siempre, como el movimiento del alien. 

¿Dónde lo programamos?

Como ambas condiciones afectan al objeto alien, lo mejor será incluir esta programación dentro del mismo.

Podéis definir tantos comportamientos “paralelos”  como queráis en un mismo objeto; en este caso, el alien puede tener su programación de movimiento por un lado, y su programación de finalización de partida por otro.

¿Se os ocurre cómo hacerlo?

Además de necesitar los bloques de “Control mencionados anteriormente, necesitaréis los de “Sensing o medición (azul claro) que nos permiten conocer o medir cosas que están pasando en el juego. Por ejemplo, nos van a permitir saber si un objeto está tocando a otro, entre otras cosas.

NOTA: Fijaos en la forma de los bloques (ovalados, terminados en pico, rectangulares, etc), que os dará pistas de cómo poder encajarlos.

¿Y qué va a pasar cuando ganemos o perdamos? Podríamos cambiar el escenario, reproducir un sonido de victoria o derrota, etc. Lo dejo a vuestra imaginación 🚀

Spoiler alert! Si os atascáis o queréis una sugerencia de cómo hacerlo, aquí tenéis un ejemplo:

Scrach videojuego en familia

¡Y hasta aquí el tutorial! Espero que os haya gustado y hayáis disfrutado jugando a un juego creado por vosotros mismos 😊

¡Extra! ¡extra!

Si os apetece seguir mejorándolo, podéis probar ideas como poner música de fondo, crearle un disfraz de “explosión” al alien para generar un efecto al darle con el rayo, añadir más condiciones iniciales para que todos los elementos empiecen “en su sitio” en la siguiente partida…

La clave es disfrutar del tiempo juntos, aprendiendo sin darnos cuenta y dándoles herramientas para el futuro.

¡Happy coding, family!