Programa tus juegos con Makecode Arcade

Actualizado hace 4 meses por Robotopia

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:

  1. Añadir una princesa de forma aleatoria al laberinto
  2. 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

  1. Creamos un proyectil que le llamaremos bala
  2. Dibujamos el proyectil como vemos en la siguiente imagen
  3. Indicamos desde qué sprite existente tiene que salir el proyectil
  4. 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

  1. Cada 1000ms ( 1 segundo ) aparecerá un nuevo meteorito
  2. Crear un sprite llamado meteorito y establecerlo como tipo "Enemy"
  3. El enemigo tendrá una velocidad horizontal negativa porque queremos que vaya hacia nuestra nave ( de derecha a izquierda )
  4. 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:

  1. Con este bloque detectamos la colisión de un objeto tipo jugador con cualquier otro objeto ( otherSprite ) de tipo Enemigo
  2. Hacemos que el enemigo que ha colisionado con nosotros desaparezca.  Nota: Debemos arrastrar la variable "otherSprite" que queremos destruir
  3. Quitamos una vida
  4. 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.

  1. Detectamos la colisión de cualquier proyectil con cualquier enemigo
  2. Hacemos que el enemigo desaparezca
  3. Incrementamos la puntuación 
  4. En el bloque que ya teníamos creado para disparar con el botón A, añadimos un sonido de disparo "pew pew"

Resumen