Introducción
¿ Que es Arcade Makecode ?
Es un nuevo entorno de desarrollo de juegos creado Microsoft, para aprender a programar de forma muy sencilla y divertida creando juegos tipo Arcade.
Para probarlo sólo te hace falta acceder a la dirección :
https://arcade.makecode.com/#editor
Consola Arcade Programable
Existen en el mercado varios tipos de consolas programables compatibles con Makecode Arcade, que aunque en las siguientes secciones verás que puedes aprender a programar juegos sin ellas.
Pero si una vez programado el juego te mueres de ganas de cargarlo en una consola y llevártelo contigo, nosotros te recomendamos la siguiente
OK:D51
Ésta consola tiene opción de multi-jugador por lo que a demás te permitirá hacer juegos que se comuniquen con otras consolas que tengan esta misma funcionalidad.
Puedes comprarla en Robotopía 
Entorno de programación
El entorno de desarrollo está basado en bloques tipo Scratch y si ya has trabajado con la tarjeta micro:bit te resultará muy familiar.
También es posible usar otros lenguajes como JavaScript o Python pero en esta publicación nos centraremos en el editor de bloques.
El emulador
No hace falta que dispongas de una consola física para poder aprender a programar tus juegos ya que Arcade Makecode dispone de un emulador donde podrás probar tu juego .
La paleta de bloques
Dispones de una amplia paleta de bloques categorizados para poder controlar todos los aspectos de tu juego
El área de código
Ésta es la zona donde podrás arrastrar los bloques que formarán parte de tu juego, al igual que cualquier otro entorno de programación por bloques o basado tipo Scratch.
Editor de Sprites ( imágenes )
Dispone de un editor de Sprites ( imágenes ) donde podrás mostrar tu lado más creativo dibujando por píxeles tus personajes, o incluso las texturas de las paredes o suelos.
Y si todavía no te atreves a crear tus propios gráficos no te preocupes ya que desde la parte superior del editor podrás acceder a una galería de imágenes prediseñadas que son más que suficientes para que aprendas a programar juegos muy variados.
Descarga tu juego
Si dispones de una consola compatible con Arcade Makecode, podrás descargarte el juego en la misma y llevar tu juego donde quieras, tan sólo tienes que hacer click en botón de "download", y seleccionar el procesador de tu consola
Juego 1 - El Laberinto
Vamos a realizar un juego muy sencillo que consiste en conducir un coche por un laberinto donde deberá recoger en la mayor cantidad de princesas antes de que se agote el tiempo.
Con los siguientes capítulos comprenderás la dinámica básica de un juego Arcade y te ayudarán a plantearlo gracias al pensamiento computacional
Mover el coche por la pantalla
Crear el objeto
El personaje de nuestro juego es un coche, que queremos que aparezca en cuanto se inicie el juego, para ello arrastramos los siguientes bloques:
Con el primer bloque creamos un objeto “sprite” que será nuestro personaje principal del juego, y que queremos que se mueva por la pantalla usando los botones de dirección con el segundo bloque “move mySprite with buttons”
Haciendo click en el recuadro gris de “sprite” accedemos al editor de imágenes pero en nuestro caso seleccionaremos una imagen prediseñada desde la galería “Gallery”
El resultado será el siguiente y ya podemos probar nuestro juego desde el simulador
Tipo de sprite
Los objetos (Sprites) se pueden agrupar en categorías y podemos asignar de qué tipo son “of kind”
Ésto es muy útil cuando queremos aplicar una misma acción a todos los tipos objetos de un mismo tipo
Mejorar la apariencia
En el paso anterior seleccionamos el nombre de la variable prefijada “mySprite” y para que el código resulte más legible la renombramos a “coche” como se muestra a continuación:
También cambiaremos el color al fondo
Y podremos probar nuevamente nuestro juego con el emulador.
Hacer que el coche mire hacia donde se mueva
Ya sabemos hacer que se mueva el coche por la pantalla pero necesitamos que nuestro coche mire hacia donde se dirija, así que tenemos que hacer que la imagen del coche cambie dependiendo del botón de dirección pulsado.
Para ello disponemos de varios bloques con los que podemos controlar cuándo hemos pulsado cada botón.
Ahora sólo tenemos que modificar la imagen del coche para cada dirección pulsada, que las seleccionaremos desde la galería.
Nos tiene que quedar un resutado como el siguiente y probando el juego veremos que el coche hace un movimiento más natural
Editor de Mapas
Necesitamos crear las paredes del laberinto ya que es la temática de nuestro juego y queremos recorrerlo con nuetsro coche.
Primero indicamos dónde habrá obstáculos dibujando un mapa de paredes, con el bloque "set tilemap"
Accedemos al editor de mapas
Dibujar el escenario
Podemos crear nuestras propias “baldosas” desde “My Tiles” o podremos seleccionar baldosas y paredes prediseñadas seleccionando una temática desde “Gallery” y con esas baldosas dibujamos el laberinto
¡¡¡ si probamos el juego nos damos cuenta de que el coche puede pasar por encima de cada pared !!!
Esto es debido a que el editor de mapas nos permite dibujar tanto paredes como otros detalles del escenario ( por ejemplo flores u otros elementos decorativos )
Así que tendremos que marcar qué objetos de los dibujados serán paredes
Marcar las paredes
Para ello seleccionamos la herramienta de “Pared” y dibujamos con ella por encima las paredes que conforman nuestro laberinto.
Ejecuta el juego y comprobarás que el coche ya colisiona con cada pared
Aunque ahora verás que el coche no se pierde por la pantalla ( solución en la siguiente sección )
Tamaño del escenario
Podemos modificar el tamaño de nuestro escenario, por ejemplo si queremos que nuestro laberinto sea muy grande y por lo tanto más complejo de resolver.
Para ello basta que modifiquemos las dimensiones del mismo desde la esquina inferior izquierda del editor de mapas.
Posicionando el coche dentro del laberinto
Centrar cámara
Con la última mejora de nuestro juego vimos que el laberinto es más grande que la pantalla de nuestra consola y el coche se pierde por tanto necesitamos seguirlo.
Arrastramos la instrucción “camera follow sprite” que se encuentra en la categoría “scene” y le indicamos que debe seguir a nuestro coche.
Posición aletoria
Puede ser muy aburrido que nuestro juego siempre empiece con el coche en el mismo punto de partida dentro del laberinto, a demás es probable que hayamos detectado que nuestro coche empieza encima de una pared, si la hemos dibujado por el centro de la pantalla que es donde se crea nuestro sprite
Posicionamos el coche de forma aleatoria encima de cualquier baldosa de nuestro mapa que no sea una pared
Tenemos que seleccionar la primera imagen ya que en nuestro mapa sólo hemos dibujado paredes.
Puedes probar a crear zonas en el mapa con una imagen prediseñada ( por ejemplo hierba ) y verás como el coche se posiciona de forma aleatoria sólo en esas zonas
Recoger princesas
El objetivo de nuestro juego es recoger el mayor número de princesas con nuestro coche, así que necesitamos lo siguiente:
- Añadir una princesa de forma aleatoria al laberinto
- Programar la acción de recogerla, y añadir otra princesa en otra posición aleatoria (este punto se repetirá hasta que se agote el tiempo de juego)
Creamos un nuevo “sprite” al que le llamamos “princesa”, la seleccionamos de la galería y marcaremos que es de tipo “Food” ( comida )
Ahora tenemos que detectar cuando nuestro coche se posiciona encima de una princesa para hacer el efecto de que la hemos recogido y volver a emplazar otra princesa en otro lugar.
Este bloque se encuentra en la categoría “Sprites” y básicamente funciona para detectar cuando un objeto de un tipo concreto se ha superpuesto sobre otro tipo de objeto.
Una vez detectada esta colisión, emplazamos a la princesa en otra coordenada aleatoria de nuestro laberinto.
Marcador de puntos y cuenta atrás
Es interesante ofrecer un poco de dificultad en cada juego a la vez que introducimos un componente de reto o marca personal en modo de puntuación máxima conseguida.
Puntuación
Vamos a crear un contador de puntos que empezará en “0” cuando empiece el juego y lo incrementaremos cada vez que recojamos a una princesa.
Nuestro código queda de la siguiente forma
Si probamos el juego podremos ver en la esquina superior izquierda el marcador de puntos y cómo va incrementando cada vez que recogemos una princesa.
Temporizador y Game Over
El temporizador hay que inicializarlo con el tiempo que queramos y una vez se termine el tiempo podemos finalizar el juego con el típico “Game Over”
Juego 2 - Plataformas
Los juegos de plataformas son una modalidad de juegos muy típica de Arcade, son juegos en los que el personaje se mueve horizontalmente saltando por plataformas y superando los retos propuestos.
Como ejemplo tenemos al clásico Super Mario
Primer nivel
Las plataformas suelen estar compuestas por niveles donde va aumentando la dificultad y también el entorno.
Vamos a diseñar un nivel sencillo donde tenemos una plataforma con agujeros que deberemos saltar para no caernos.
El personaje
Como en el capítulo anterior vamos a crear primero nuestro personaje seleccionándolo de la galería y le llamaremos “heroina”, también pondremos un fondo de juego azul, y haremos que se mueva únicamente de forma horizontal.
Fijaos que para que sólo se desplace horizontalmente tenemos que establecer la velocidad en el “eje Y (vy)” a cero.
Y también hemos hecho que mire hacia la izquierda o derecha según el sentido del movimiento.
La Plataforma
La plataforma la creamos con el editor de mapas que ya vimos en el primer capítulo y como el mapa es mayor que la pantalla de juego tenemos que decirle que la “cámara” siga a nuestro personaje para que no se pierda por la pantalla.
Ahora diseñamos el mapa de la plataforma con algunos agujeros para que nuestra “heroina” pueda saltarlos sin caerse.
No hay que olvidar de “pintar” el suelo que hemos hecho con la herramienta de crear “paredes” ya que nuestra intención es hacer un suelo donde se apoye nuestro personaje.
Caer y Saltar
Objetivo
- Hacer que nuestro personaje tenga una gravedad, para que caiga y se apoye en el suelo
- Que salte cuando pulsemos el botón A
Con el primer bloque establecemos una aceleración positiva ( de arriba hacia abajo ) en el eje y de 300, para que nuestro personaje tienda a caer hasta que le pare cualquier suelo.
El segundo bloque le impulsará con una velocidad negativa en el eje y ( de abajo hacia arriba )
Y probamos nuestro juego, incluso avanzando y saltando a la vez.
Corrección del salto
Si pulsamos repetidas veces en el botón A observamos que nuestra heroina se sigue impulsando incluso cuando ya está en el aire, con lo que podríamos mantenerla "flotando" todo el tiempo que queramos y eso NO es lo que queremos.
Para hacer que sólo salte cuando esté apoyada en el suelo tenemos que modificar nuestro bloque del botón A añadiendo la siguiente condición "is ... hitting wall"
Gestión del Game Over
Cuando probamos el juego vemos que nuestro personaje se puede caer por los agujeros pero no le pasa nada, así que tenemos que solucionarlo de la siguiente forma.:
Objetivo
- Rellenaremos los agujeros con fuego
- Nuestro personaje empezará con 3 vidas
- Cuando el personaje toque el fuego tiene que perder una vida
- Cuando no le queden vidas se terminará el juego “Game Over”
Creando el fuego
Hacemos click en nuestro mapa para abrir el editor de mapas
Y poder crear crear una nueva baldosa “tile”
Pintando todo de rojo, poniendo unos puntos naranjas y amarillos, tendremos un efecto de fuego muy sencillo.
Ahora sólo tenemos que rellenar los huecos con la baldosa creada.
Gestión de vidas
Podemos empezar con el número de vidas que queramos y si se cumple una condición restar una vida.
Nuestra condición para restar una vida será que el personaje toque el fuego, y a su vez volveremos a situarlo al inicio del juego para que vuelva a intentar a hacer el recorrido.
Primero nivel superado
De la misma forma que hemos gestionado las vidas y el Game Over, también tendremos que situar un objetivo para superar nuestro primer nivel y pensar en hacer un segundo o más niveles.
Nuestro personaje tendrá que llegar hasta la bola de cristal que hemos puesto al final de nuestro nivel
Esta vez usaremos otro bloque diferente para detectar cuando el personaje ha alcanzado la bola de cristal, y mostrar que hemos ganado.
.
Resumen
Con pocos bloques de código, puedes crear un juego de plataformas muy divertido.
Reto
Ahora puedes experimentar modificando el juego y creando plataformas a varias alturas. También podrías situar objetos ( por ejemplo monedas ) que vayan incrementando la puntuación.
Juego 3 - De naves
Introducción
Los juegos de naves son otra modalidad de juegos muy entretenida, el objetivo suele ser el controlar una nave o avión que tiene que disparar a los enemigos sin chocarse o sin que te la destruyan e introduciremos el concepto de proyectiles.
Mover la nave por la pantalla
Al igual que en los juegos anteriores empezaremos creando nuestro personaje y haremos que se mueva por la pantalla
Dibujando nuestra nave
Crear un sprite que se llame nave y acceder al editor
Una vez dentro del editor podemos dibujar una nave muy sencilla como la siguiente:
Mover la nave por la pantalla
Con el bloque set (nave) stay in screen ON conseguimos se mantenga siempre dentro del área de la pantalla, con el siguiente bloque que ya hemos visto en los capítulos anteriores podremos hacer que se mueva usando los botones de dirección, aunque esta vez hemos aumentado la velocidad en a 200
También aprovechamos para fijar nuestras vidas iniciales en 3 y ya podemos probar el manejo de nuestra nave.
Proyectiles
Los proyectiles son un concepto muy útil en cualquier tipo de juego. Son otros objetos (sprites) que salen disparados y podemos detectar colisiones con otros sprites.
Ejemplos de proyectiles:
- Balas que dispara nuestro personaje o que nos disparan a nosotros
- Otros coches rivales que aparecen por la pantalla y debemos evitar chocarnos
- Simples nuves o estrellas de fondo que podemos usar para dar más realismo a nuestro juego
Hacer que nuestra nave dispare
Queremos hacer que nuestra nave dispare balas cuando pulsemos el botón A, para ello tenemos el siguiente bloque en la categoría de Sprites
- Creamos un proyectil que le llamaremos bala
- Dibujamos el proyectil como vemos en la siguiente imagen
- Indicamos desde qué sprite existente tiene que salir el proyectil
- Establecemos la velocidad sólo en el eje X porque queremos disparar siempre horizontalmente
Probar el disparo
Una vez dibujada la bala que disparará nuestra nave, sólo nos queda probar el juego
vemos lo sencillo que resulta que nuestra nave se mueva y dispare a la vez
El enemigo
Objetivo
Nuestro enemigo serán meteoritos que aparecerán por la parte derecha de la pantalla y tendremos que destruirlos disparando antes de que choquen con nuestra nave.
Planteamiento
- Cada 1000ms ( 1 segundo ) aparecerá un nuevo meteorito
- Crear un sprite llamado meteorito y establecerlo como tipo "Enemy"
- El enemigo tendrá una velocidad horizontal negativa porque queremos que vaya hacia nuestra nave ( de derecha a izquierda )
- Hacemos que aparezca desde fuera del margen derecho y de forma aleatoria en el eje Y verticalmente
Colisión con el enemigo
Cuando cualquier meteorito ( enemigo ) nos toque perderemos una vida, así que lo programamos de la siguiente forma:
- Con este bloque detectamos la colisión de un objeto tipo jugador con cualquier otro objeto ( otherSprite ) de tipo Enemigo
- Hacemos que el enemigo que ha colisionado con nosotros desaparezca. Nota: Debemos arrastrar la variable "otherSprite" que queremos destruir
- Quitamos una vida
- Desde la sección de Música arrastramos el bloque play sound para que suene cada vez que nos choquemos con un meteorito
Disparando al enemigo
Muy similar a cómo lo hemos hecho con el bloque anterior, detectaremos la colisión de cualquier proyectil con cualquier meteorito enemigo.
- Detectamos la colisión de cualquier proyectil con cualquier enemigo
- Hacemos que el enemigo desaparezca
- Incrementamos la puntuación
- En el bloque que ya teníamos creado para disparar con el botón A, añadimos un sonido de disparo "pew pew"
Resumen
