Nuestro primer videojuego con Scratch (1)

Hoy vamos a entrar en harina seria con Scratch para hacer el germen de lo que será nuestro primer videojuego. Lo haremos en varios artículos: en cada artículo os enseñaré a resolver una parte del videojuego, y al mismo tiempo os propondré un desafío. En los siguientes artículos de la serie iré resolviendo el desafío anterior, y proponiendo otro. Y así sucesivamente.

El videojuego final consistirá en un sencillo laberinto en el que moveremos al gato naranja de Scratch para que consiga llegar a un ratón. Los artículos serán cuatro, en principio:

  1. Mover al gato en las cuatro direcciones y hacer que rebote en los bordes del escenario.
  2. Programar la lógica de rebote para cuando el gato se encuentre con una pared roja.
  3. Programar la lógica de “gato encuentra a ratón”
  4. Proponer un esquema de puntuación para poder competir con nuestros amigos.

Estaos atentos a la cuenta de twitter de PItando para seguir esta serie y saber cuándo publicaré cada uno de las entradas.

Este artículo lo resolveré en el navegador usando el editor de la página web de Scratch, pero es igualmente abordable en la Raspberry Pi.

Movimiento

Para mover en una dirección al gato naranja tendremos que colocar en el área de programas del editor de Scratch la detección de un evento de pulsación de tecla. Vamos a usar las teclas de las flechas del cursor, ←, ↑, →, ↓, aunque los nostálgicos del Spectrum como yo podéis usar otras combinaciones que os traigan recuerdos de vuestra infancia (o, p, q y a, por ejemplo). Para eso, tendremos que preparar cuatro bloques de detección de teclas como el de la captura siguiente:

Bloque básico de detección de tecla. No funcionará, todavía tiene trabajo que hacer. Con la opción "duplicar" del botón derecho del ratón, crea tres copias más.
Bloque básico de detección de tecla. No funcionará, todavía tiene trabajo que hacer.

Para seleccionar la tecla de “flecha arriba” (en principio el bloque detecta la barra espaciadora) usa la flecha negra que apunta hacia abajo: es de las primeras opciones. Puedes crear las tres copias que te faltan usando el botón derecho del ratón y la opción “duplicar”. Una vez hecho eso, está claro lo que hay que hacer:

  1. Configurar las cuatro teclas: una en cada bloque.
  2. Programar cada bloque de deslizamiento para que avance en lugar de ir a una posición concreta.

Configurar las cuatro teclas es fácil, solamente hay que buscar cada una en la lista desplegable de su bloque. Hazlo ahora para evitar interferencias en la prueba que haremos dentro de unas líneas.

La programación del bloque de deslizamiento tiene algo más de ciencia, pero no mucha. Lo que deberemos hacer, por ejemplo para la flecha de arriba, es deslizar al gato una distancia corta en un intervalo de tiempo dado, de forma que su posición en el eje vertical se incremente a partir de su valor actual. Vamos a ver los bloques que necesitamos.

Ve a la sección de bloques titulada Sensores y localiza uno que dice “posición X de Sprite 1”: 

Detección de posición en un eje
Detección de posición en un eje

Ese bloque nos permite detectar la posición de un sprite en un eje (x o y: horizontal o vertical respectivamente). El Sprite1 es el gato naranja. 

Ve ahora a la sección de bloques titulada Operadores y localiza uno que suma dos números:

Bloque de suma
Bloque de suma

Con estos bloques ya podemos construir un deslizamiento tal que el gato no se mueva en el eje horizontal (el Sprite1 mantiene su posición en el eje x) pero que avance un cierto número de puntos en vertical, en sentido ascendente. Quedaría así:

Bloque de movimiento vertical ascendente.
Bloque de movimiento vertical ascendente.

Pruébalo ahora. Si has cambiado las teclas de los otros bloques para que sólo una de ellos reconozca la flecha arriba, el gato debería moverse un poco hacia arriba al pulsar la flecha hacia arriba. Si la mantienes pulsada, el movimiento debería ser más o menos continuo.

Hacer el resto de los bloques debería ser fácil con los conocimientos que tienes. Puedes usar el bloque de suma sumando un número negativo para el desplazamiento de las flechas izquierda y abajo, o buscar el bloque de resta en Operadores. También puedes cambiar la operación aritmética del bloque con el menú que aparece al hacer click con el botón derecho.

Una vez hecho, deberías tener los siguientes programas:

Bloques de movimiento.
Bloques de movimiento.

 

Rebotar al llegar al final del escenario

Lo que nos queda por hacer para esta semana antes de proponer el ejercicio es programar un pequeño rebote en los bordes del escenario. Esto es sumamente fácil, pero está bien hacerlo para que el gato no se salga del escenario. Examina los bloques de movimiento para encontrar uno que dice “rebotar si toca un borde”: ésa es la clave. Para integrarlo en nuestra versión inicial del juego lo que haremos será un quinto programa que:

  • Se active al pulsar cualquier tecla: en el evento “al presionar tecla” tendremos que poner el valor any, que es una palabra inglesa que significa “cualquiera”.
  • Use el bloque “rebotar si toca un borde”
  • Se detenga.

Así:

Bloque de rebote
Bloque de rebote

Pruébalo: verás un efecto raro… resolverlo es opcional y forma parte del ejercicio que os plantearé dentro de unas pocas líneas.

Guardar el proyecto en el ordenador

En este punto, descargaos el programa para poder continuar en otro momento usando el menú Archivo del editor web de Scratch:

Opción de menú para descargar a tu ordenador el proyecto en el que hemos estado trabajando.
Opción de menú para descargar a tu ordenador el proyecto en el que hemos estado trabajando.

Esto es todo por hoy, ya sólo queda plantear el ejercicio.

Recordad que podéis dejarme comentarios o dudas en los comentarios de este artículo, o a través del formulario de contacto o de la dirección de correo que allí se encuentra.

Ejercicio

En el siguiente artículo de esta serie lo que publicaré será una versión de este programa que hará que el gato salga despedido hacia atrás una determinada distancia al tocar paredes rojas. Además, resolveremos el “efecto secundario” que tiene el rebote del gato contra el final del escenario.

Para crear un escenario con paredes rojas podéis dibujarlas con cualquier programa de dibujo sobre un fondo de 480 puntos de ancho por 360 de alto, o bajaros este escenario de pruebas, que será el que yo use:

Escenario con dos paredes rojas
Escenario con dos paredes rojas, en fondo blanco. Pincha en la imagen para abrirlo en otra ventana y descargarlo a tamaño completo.

Una vez hecho eso, deberéis subirlo al editor de Scratch usando el botón en forma de carpeta que hay en el panel de abajo a la izquierda, Objetos, bajo la etiqueta “Fondo nuevo”:

Cargar fondo desde archivo.
Cargar fondo desde archivo.

Al pinchar en el icono se os abrirá un cuadro de diálogo para localizar el escenario de fondo y subirlo al editor. Si lo hacéis bien, veréis que se seleccionará automáticamente y se os abrirá en un editor:

Escenario recién subido. Podéis volver al editor de programas pinchando en la pestaña "Programas".
Escenario recién subido. Podéis volver al editor de programas pinchando en la pestaña “Programas”.

Si queréis, podéis editarlo. Una vez terminado, continuad con el ejercicio volviendo a la pestaña “Programas”.

 

4 comentarios en “Nuestro primer videojuego con Scratch (1)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *