domingo, 25 de junio de 2017

Creando un videojuego

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?
(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
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:




Duplicando personajes
Una vez que el dragón está listo, lo que vamos a hacer es duplicar el objeto para tener otro dragón más. Este nuevo dragón tendrá exactamente el mismo comportamiento sin tener que volver a escribirlo. Pinchando con el botón derecho sobre el dragón en el área de personajes nos aparece la opción “Duplicar”, que crea un nuevo personaje que es una copia exacta con todos sus programas.
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.
Sumando puntos
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.




Y elegiremos, en la sección Espacio de la biblioteca, el fondo Stars:




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.


Mover el gato apuntando al puntero

Mover el gato apuntando al puntero:
1.     Incluye un nuevo objeto en el proyecto. En nuestro caso hemos incluido un gato visto desde arriba (cat2).
2.     Hacer que el gato se mueva siempre siguiendo al puntero del ratón.



Lo más importante al programar es saber lo que se está haciendo. Para comprobar que los chicos saben perfectamente lo que tienen entre manos, lo mejor es, una vez terminada la actividad, pedirles que lo expliquen con sus propias palabras. Según su explicación podemos saber si entiende lo que están haciendo o no.

El código puede ser explicado de esta maneraAl presionar la bandera verde el gato se moverá siempre, siguiendo el puntero del ratón con una velocidad de 2 pasos.

Aunque la tarea es muy sencilla, los chicos pueden tener errores a la hora de hacerla por ellos mismos. Seguramente equivocarán el bloque (apuntar hacia “puntero del ratón”) con el bloque (ir a “puntero del ratón”). El resultado es diferente si usan uno o el otro.


Preguntas posibles para evaluar la compresión de los chicos:
1.     ¿Cómo harías para mover más rápido el gato?
2.     ¿Qué ocurriría si quitamos el bloque (“rebotar si toca un borde”)?

3.     ¿Qué ocurrirá si quitamos el bucle (“por siempre”)?

Mi primer proyecto Scratch

 Mi primer proyecto Scratch
En este apartado se propone realizar nuestra primera animación con Scratch. En ella el gato mascota de Scratch caminará de un lado al otro del escenario.
1. Para comenzar un nuevo proyecto elige Archivo > Nuevo. Esta acción mostrará un nuevo proyecto con la mascota en el centro del escenario.


2. Vamos a añadir una imagen de fondo al escenario. En la Biblioteca del proyecto haz clic sobre el objeto Escenario para seleccionar este objeto.


3. Clic en la pestaña Fondos. Pulsa en el botón Importar para añadir una imagen de la galería de Scratch. 


4. En el panel Importar Fondo haz doble clic sobre la carpeta Nature para elegir la imagen de fondo desert.



5. En la pestaña Fondos ahora se muestra esa imagen. Puedes pulsar en el botón "X" que acompaña al fondo blanco para eliminarlo y que solo aparezca el fondo elegido. En el escenario se mostrará la imagen seleccionada.



6. Ahora vamos a crear la animación sobre el gato. Para ello en el panel Biblioteca haz clic sobre el objeto del gato para seleccionarlo.



7. Desde el panel de Bloques selecciona la categoría Movimiento. Arrastra el bloque mover X pasos hasta la pestaña Programas.



8. Observa que el gato se desplaza 10 pasos (píxeles) cada vez que hacemos clic en este bloque en la pestaña Programas. 
9. A continuación vamos a definir un bucle infinito para que el gato se desplace ininterrumpidamente. Para ello arrastra hasta el panel Programas el bloque Control > Por siempre. Arrastra el bloque Mover 10 pasos para encajarla dentro del bucle Por siempre.



Notas para trabajar con los bloques:
  • Mover un bloque: arrastrarlo con el puntero del ratón.
  • Eliminar un bloque: clic derecho sobre el mismo y elige la opción Borrar.
  • Desacoplar un bloque: arrastrar los bloques inmediatamente inferiores.
10. Para ejecutar el bloque haz clic sobre él en el panel Programas. Para detener la animación pulsa en el botón Parar todo.




11. En este caso el gato desaparece por el extremo derecho y no recupera su posición central en sucesivos intentos. Para situar al gato en el centro del escenario en cada reproducción, añadiremos el bloque Fijar X a 0 antes del bucle Por siempre. Prueba el funcionamiento del programa creado.



12. Para mejorar la animación vamos a añadirle los siguientes bloques y probarla:
  • Al presionar la bandera verde. Situamos este bloque al principio. De esta forma la animación cada vez que pulsemos en el botón de bandera verde situado en la esquina superior derecha del escenario.
  • Siguiente disfraz. Si activas la pestaña Disfraces observarás que este objeto dispone de dos imágenes que al mostrarse alternativamente producen el efecto de que el gato está caminando. La orden Siguiente disfraz mostrará el siguiente del disfraz actual asociado al objeto seleccionado.


13. Para reducir la velocidad de la animación se puede hacer lo siguiente:
  • Reducir los pasos a mover. Para ello haz clic en la cifra 10 del bloque mover 10 pasos e introduce pasos.
  • Esperar 0.1 segundos. Añadir este bloque después de siguiente disfraz y definir la duración de 0.1 segundos.


14. Para probar la animación haz clic en el botón Iniciar programas con bandera verde y para detenerla pulsar en el botón Para todo.



15. Para guardar el proyecto haz clic en el botón Guardar este proyecto.



16. En el cuadro de diálogo Guardar Proyecto haz clic en el botón Mis proyectos que se proporciona en la columna lateral izquierda para que se almacene en la carpeta Mis documentos > Scratch Projects. El proyecto se guarda en un archivo de extensión *.SB 




17. Introduce como nombre de archivo, por ejemplo: miPrimerScratch. De forma opcional se puede añadir información del Autor del proyecto Acerca de este proyecto. Para concluir haz clic en el botón Aceptar.
18. Para ver la animación a pantalla completa se puede pulsar en el botón Cambiar a modo de presentación. Para regresar al Scratch basta con pulsar la tecla Esc.



19. Para abrir un proyecto elige Archivo > Abrir ...