Construye un videojuego con Thunkable
This tutorial is also available in english 🇺🇸 — Click this link!
Desarrollar videojuegos es una de los proyectos más divertidos para niños aprendiendo a programar. Programar videojuegos con Thunkable es la forma más fácil. Este post de medium te ayudará a entender cómo construir un juego básico y te dará al final plantillas y tips para que puedas hacer el tuyo.
Yo personalmente recomiendo esta actividad para usuarios que ya tengan previamente experiencia desarrollando apps con Thunkable on en MIT App Inventor
El juego que estaré construyendo estará en inglés pero todas las instrucciones estarán en español.
Comencemos :)
Este es al método en el cual yo les enseño a mis alumnas a programar apps.
Paso 1: Dibuja las pantallas de tu app.
El primer paso para diseñar un videojuego es dibujar el concepto y las pantallas del videojuego.
Puedes buscar inspiración en otros videojuegos, Pinterest o lo que sea.
Concepto:
¿De qué trata?¿Cómo se juega? ¿Hay puntos? ¿Cómo se obtienen los puntos?
En el caso del videojuego que haremos en este ejemplo es una tienda de donas en la cual tienes ordenes y tienes que completarlas. Hay tres objetos:
- Base de donas: vainilla y chocolate
- Glaseado: vainilla, chocolate y fresa
- Chispas (Sprinkles)
Cada vez que completas una orden bien ganas un punto, si la orden está mal pierdes puntos.
Tienes 30 segundos para preparar 10 ordenes. Si preparas 10 ordenes o más ganas. Sino pierdes.
Dibujar las pantallas:
Es importante también dibujar todas las pantallas para poder visualizar mejor el juego. Así es mucho más fácil dibujar los elementos del juego. Mientras dibujas las pantallas de tu videojuego también es ver si puedes resolver todas las dudas y todo lo que piensas hacer para tu videojuego.
Puedes encontrar una plantilla para ayudarte hacer tu videojuego
Parte 2: Pseudocódigo o diagrama de flujo
Ahora hay que escribir el pseudocódigo o hacer el diagrama de flujo. Dependiendo de lo que sea más fácil, en este tutorial haré los dos.
Pseudocódigo:
Pseudocódigo es básicamente poner el código que vas a escribir en tus propias palabras para ver cómo debes de programar la app. Es muy útil escribir pseudocódigo especialmente cuando construyes Apps en Thunkable.
Diagrama de Flujo:
Un diagrama de flujo es la representación gráfica de un proceso o un algoritmo. Para el caso de mi videojuego este sería el diagrama de flujo :
En realidad ambos son muy útiles. Juntos te pueden ayudar a ver cómo tienes que programaren bloques para que no se te olvide algo :)
Parte 3: Diseño Visual
Para el diseño visual decidí crear mis propias imágenes para el videojuego. Estas imágenes están en este link.
El primer paso es agregar todos los elementos que tengas en tus pantallas que ya dibujaste. Así va ser muy fácil cambiarle el estilo.
Entonces básicamente es agregar etiquetas y botones a tus pantallas.
Canvas:
Para seguir avanzando es necesario explicar qué es el canvas en Thunkable. Canvas es un elemento el cual es sensible al tacto. Se pueden agregar imágenes o ‘sprites’ para controlarlo. Simplemente agregas el elemento a tu pantalla y Thunkable tiene una pestaña especial para trabajar con él.
En la versión actual de Thunkable (Noviembre 2019) hay algunos hacks que te pueden ayudar a diseñar en tu canvas.
Cada sprite tiene una sprite master y varias sub sprites para cada elemento de tu diseño.
- Duplica la sprite que viene en Thunkable varias veces.
- Ve poco a poco desde el fondo hacia el elemento que va hasta enfrente de tu canvas agregando las imágenes y modificando el tamaño de estas.
- Construye tu juego en el navegador y checa que en el teléfono se vea bien.
Parte 4: Bloques.
Para programar los bloques sirve ir linea por linea en el pseudocódigo que escribiste y pasarlo a bloques! :)
Estos son todos los bloques que utilice, explicaré poco a poco qué fue lo que hace cada bloque.
Pantalla 1: Menú principal
Start Button → Cuando apriete el botón de ‘Start Game’ quiero que me lleve a la pantalla de Game o Videojuego
About Thunkable & DIY This App → Cuando aprieto cualquiera de estos dos botones quiero que me lleve al navegador de mi celular Chrome o Safari a cualquiera de estos dos sitos.
Pantalla 2: Videojuego
second → con esta variable puedo ir contando los 30 segundos
score → este es el puntaje :)
También pongo tres variables para poder escoger una random: frosting, decor y base.
Game Opens → Cada vez que el juego se abre quiero poner mis variables de segundos y marcador en 0.
Start → Esta es una sprite por lo que al inicializar el juego quiero esconder mi letrero de nivel 1, el sprite de start y enseñar el sprite de OK.
Intialize Game → vuelvo a poner el score en 0 y habilito los timers. Al final genero una combinación de donas para que el usuario pueda replicarla.
Level 1 Timer → Este es un timer para los 30 segundos que dicta el nivel.
Timer Second → Este timer es para ir cambiando la etiqueta hasta arriba en el tabulador.
Como funciona este juego es que visualizo o no visualizo capas de las donas así puedo decorarlas :) Todos son eventos de sprite.
Estas son todas las posibles combinaciones además de Canvas l loads que cuando se carga por primera vez el juego esconde algunos sprites que no quiero que se vean.
Este es de los bloques más grandes que hay en el juego pero es porque controla si se agrega o se sustraen puntos del marcador. Como está compuesto este gran bloque son condicionales de si se ven visibles ciertos objetos y en la variable actual es el mismo elemento.
Al final de todas las posibles combinaciones hay una función para esconder todas las sprites para que cuando cambie la combinación el usuario pueda empezar desde 0. Y por último genera otra combinación.
Hide Sprites → Este es mi bloque para esconder todas las sprites activas.
Este bloque es el último para la pantalla del videojuego. Este bloque es el encargado de generar las combinaciones. Primero esconde todos los sprites para cambiar la combinación. Después genera un elemento random de las variables base, glaseado y decoración.
Una vez generado, pasa por una serie de condicionales para determinar qué imagen mostrar y al final muestra la imagen seleccionada. :)
Pantalla 3: Puntaje Final
Final Score Opens → Cuando se abre la pantalla se cuenta si el puntaje es mayor o igual a 10. Si es mayor o igual a 10 te muestra un mensaje de que ganaste y cuantos puntos acumulaste. Si no es mayor o igual a 10 te muestra otro mensaje y tu puntaje al final.
Play Again Click → Si aprietas este botón te mandará otra vez a la página del videojuego y podrás jugar otra vez.
¡Listo!
Y este es el resultado final! si gustan hacer un remix o replicar este proyecto pueden hacerlo dando click al siguiente link.
Aquí podrás encontrar todo el diseño, sprites y plantillas.
Si te gusto este proyecto o crees que te ayudo a crear tu videojuego puedes compartirlo en tus redes sociales y tagearme @sogalanbat :)
¿Quién soy yo?
Mi nombre es Sofía, soy ingeniera en Mecatrónica. Mi pasión es crear y desarrollar soluciones pero también enseñarle a otras personas a crear y desarrollar soluciones. Llevo 4 años aproximadamente desarrollando soluciones en educación y tecnología.
