Introducción a MakeCode Arcade – Lope González Vázquez

Lope González Vázquez > ESO y Bachillerato > Computación y Robótica, 2º ESO > Tema 1. Introducción a la programación > Introducción a MakeCode Arcade

Currículo: este documento es un complemento práctico para los contenidos de Introducción a la programación de Computación y Robótica de 2º (programación por bloques) y 3º (programación por texto) de ESO.

Tabla de contenidos

MakeCode Arcade es una herramienta de programación creada por Microsoft que te permite diseñar y crear tus propios videojuegos de tipo arcade utilizando bloques de código. Es como jugar con piezas de construcción digitales: en lugar de construir una torre o una casa, ¡puedes crear un juego desde cero!

Los juegos arcade son videojuegos sencillos que suelen ser en 2D (dos dimensiones).

Originalmente, se jugaban en máquinas recreativas que encontrabas en salones de juegos o centros comerciales, y que hoy están viviendo su segunda época dorada. Juegos clásicos como Pac-Man o Space Invaders son ejemplos de este tipo. Hoy en día, podemos disfrutar de estos juegos en ordenadores, tabletas o consolas.

Para comenzar a crear tus propios juegos, solo necesitas abrir tu navegador web (como Chrome, Firefox o Edge) y visitar la página web https://arcade.makecode.com. Una vez allí, puedes empezar a programar sin necesidad de descargar nada.

Tienes dos opciones para guardar tus proyectos. Si decides registrarte y crear una cuenta, podrás guardar todos tus trabajos online y acceder a ellos desde cualquier ordenador o dispositivo simplemente iniciando sesión. Esto es muy útil si quieres trabajar en tus juegos desde diferentes lugares, como en casa y en el colegio.

Si prefieres no crear una cuenta, puedes usar MakeCode Arcade como invitado. En este caso, tus proyectos se guardarán únicamente en el navegador del ordenador que estás utilizando. Sin embargo, debes tener en cuenta que si cambias de ordenador o se borran los datos del navegador, podrías perder tu trabajo.

Para evitar perder tus juegos sin necesidad de registrarte, puedes descargar tus proyectos como archivos en tu ordenador. Luego, puedes subirlos a tu Google Drive o guardarlos en una memoria USB. De esta manera, tendrás una copia de seguridad y podrás continuar trabajando en tu juego desde otro ordenador si lo necesitas.

Ahora estás listo para empezar a crear tus propios videojuegos.

Explora la interfaz, experimenta con los bloques y deja volar tu imaginación. Recuerda que programar es como resolver un puzle: cada pieza (o bloque) es importante para construir el juego que tienes en mente.

Diviértete y aprende mientras creas tus propias historias interactivas.

1. Interfaz del programa

Cuando abres MakeCode Arcade, encontrarás varias secciones en la pantalla que te ayudarán a crear y probar tus videojuegos. Vamos a conocer cada una de ellas para que puedas navegar y utilizar la herramienta con confianza.

Para empezar a crear un programa hay que hacer clic en Nuevo proyecto, escribir un nombre y pulsar en Crear.

Aparece esta pantalla, que es donde trabajaremos todo el tiempo, y que tiene las siguientes áreas:

Modos de programación

En esta área, puedes elegir cómo quieres programar tu juego. Tienes tres opciones:

Bloques: ideal para principiantes, donde programas arrastrando y encajando piezas como si fueran bloques de construcción.
JavaScript: un lenguaje de programación basado en texto, para cuando estés listo para dar el siguiente paso.
Python: otro lenguaje de programación textual, popular y utilizado en todo el mundo.

Recursos

Aquí encontrarás una biblioteca con todas las imágenes y sonidos que puedes usar en tu juego. Puedes seleccionar personajes, fondos y efectos de sonido ya disponibles, o incluso crear los tuyos propios. Por ejemplo, podrías dibujar a tu propio personaje o diseñar un enemigo único.

Barra de herramientas

Esta es como tu panel de control. Desde aquí puedes:

Volver a la página principal: si quieres empezar un nuevo proyecto o abrir uno existente.
Compartir o publicar tu juego: para que otros puedan jugarlo o para enviárselo a tu profesor para que lo evalúe.
Acceder a tutoriales: si necesitas ayuda o quieres aprender nuevas técnicas.
Ajustes del proyecto: como cambiar el idioma, agregar nuevas funciones o extensiones, y personalizar tu entorno de trabajo.

Área de previsualización

En esta sección puedes probar tu juego y ver cómo funciona en tiempo real. Es como tener una consola de videojuegos en tu pantalla. Debajo de esta área, encontrarás botones para:

Iniciar el juego: comenzar a jugar y ver tus creaciones en acción.
Reiniciar: si quieres empezar de nuevo o probar cambios que has hecho.
Ajustar el volumen: para controlar el sonido de tu juego.
Pantalla completa: para disfrutar de tu juego en todo el monitor.

Además, como curiosidad, este área tiene la estética de una consola portátil que hizo furor en la edad de oro de los juegos Arcade, la Nintendo GameBoy.

Zona de programación

Este es el corazón de tu proyecto. Aquí es donde construyes tu juego:

Si usas bloques: arrastras y conectas bloques que representan diferentes acciones.
Si usas JavaScript o Python: escribes el código directamente, diciéndole al ordenador exactamente qué hacer.

Es como tu lienzo donde plasmas todas tus ideas.

Espacio de descarga

Cuando quieras guardar tu juego en tu ordenador, puedes usar el botón Descargar. Además, si tienes una consola compatible o un dispositivo especial, puedes elegir dónde quieres jugarlo. Así podrás compartir tu juego con amigos o llevarlo contigo.

Nombre y opciones de guardado

En la parte superior, puedes cambiar el nombre de tu proyecto para identificarlo fácilmente. También tienes opciones para guardar tu juego online si tienes una cuenta, o en plataformas como GitHub, que es como una biblioteca para guardar y compartir proyectos de programación.

Opciones de la zona de programación

Si cometes un error o quieres cambiar algo, no te preocupes. Aquí puedes:

Deshacer o rehacer acciones: para corregir o revisar cambios que hayas hecho.
Ajustar el zoom: acercar o alejar la vista para trabajar más cómodamente en tu proyecto.

2. Categoría de bloques

En MakeCode Arcade, los bloques que utilizamos para programar nuestros juegos están organizados en diferentes categorías. Conocer estas categorías te ayudará a encontrar fácilmente los bloques que necesitas y a entender mejor cómo construir tu juego.

Una de las categorías principales es la de Objetos («Sprites»), que son los personajes y objetos del juego. Aquí puedes crear y controlar a tus protagonistas, enemigos o cualquier elemento con el que el jugador pueda interactuar. Por ejemplo, puedes diseñar un astronauta que explore un planeta o un coche de carreras que compita en una pista.

En la categoría de Mando, encontrarás los bloques que te permiten programar cómo el jugador interactúa con el juego. Puedes hacer que tu personaje se mueva al pulsar las flechas del teclado o los botones de un mando, permitiendo movimientos hacia arriba, abajo, izquierda y derecha.

La sección de Juego te ofrece bloques para manejar aspectos generales del juego, como mostrar mensajes en la pantalla, iniciar o reiniciar el juego, y determinar qué sucede cuando el jugador gana o pierde. Por ejemplo, puedes mostrar un mensaje de «¡Bien hecho!» cuando el jugador alcanza la meta.

Si quieres añadir música o sonidos a tu juego, la categoría de Música te permite reproducir melodías, efectos de sonido o incluso componer tus propias canciones. Esto añade emoción y ambiente a tu juego, como poner una melodía alegre en un nivel de celebración.

Para diseñar el fondo o escenario donde se desarrolla tu juego, utiliza los bloques de Escena. Aquí puedes cambiar el fondo, añadir detalles como montañas, edificios o árboles, y crear diferentes ambientes para cada nivel. Por ejemplo, puedes establecer un paisaje nocturno para un nivel más difícil.

La categoría de Información es útil para añadir elementos como contadores de puntos, vidas o tiempo. Puedes mostrar en pantalla cuántas vidas le quedan al jugador, su puntuación actual o el tiempo que le resta para completar un nivel.

Los Bucles son bloques que te ayudan a repetir acciones sin tener que colocar el mismo bloque varias veces. Por ejemplo, puedes hacer que un enemigo se mueva de un lado a otro continuamente o que aparezcan obstáculos cada cierto tiempo, haciendo el juego más dinámico.

En Lógica, encontrarás bloques que te permiten tomar decisiones en tu programa mediante condiciones. Esto significa que puedes establecer reglas como «si el personaje toca un obstáculo, entonces pierde una vida» o «si recoge una estrella, suma puntos», haciendo que el juego responda a las acciones del jugador.

Las Variables son como cajas donde puedes guardar información que cambia durante el juego, como la puntuación, la velocidad de un objeto o el nivel actual. Puedes crear variables para llevar el control de estos datos y utilizarlos para modificar el comportamiento del juego.

La categoría de Matemáticas te ofrece bloques para realizar operaciones matemáticas, como sumar, restar o generar números al azar. Esto es útil para establecer posiciones aleatorias de objetos, calcular puntuaciones o ajustar la dificultad del juego.

Si quieres añadir funciones extra a tu juego, puedes explorar las Extensiones. Al activarlas, aparecerán nuevas categorías con bloques adicionales que te permiten ampliar las posibilidades de tu juego, como agregar nuevos tipos de sensores o efectos especiales.

Por último, en la sección de Avanzado, encontrarás categorías más complejas para cuando tengas más experiencia. Aquí puedes crear animaciones detalladas, funciones personalizadas, trabajar con imágenes y manipular textos de formas más sofisticadas. Esto te permite llevar tu juego al siguiente nivel, añadiendo características únicas.

Conociendo estas categorías y explorando los diferentes bloques que ofrecen, podrás crear juegos más completos. Te animo a que experimentes con los bloques que se ofrecen en cada categoría y descubras todo lo que puedes hacer con MakeCode Arcade.

3. Objetos

Para empezar a crear un juego en MakeCode Arcade, es buena idea añadir primero los personajes y objetos que van a aparecer en tu juego. Estos elementos son como los protagonistas y escenarios de tu historia.

Tienes dos formas de incluir estos objetos:

Usar la biblioteca del programa: MakeCode Arcade tiene una colección de imágenes y gráficos que puedes usar directamente. Para verlos, ve a la sección Recursos y luego haz clic en Galería. Aquí encontrarás personajes, objetos y fondos listos para usar.

Dibujar tus propios diseños: si quieres crear algo único, puedes dibujar tus propios personajes y objetos. Para hacerlo, ve a la pestaña Recursos y pulsa el botón +. Luego, elige qué tipo de recurso quieres dibujar: una imagen, una tesela (una pieza pequeña que se repite para crear un fondo), un mapa de teselas o una animación.

Una vez que seleccionas una opción, se abrirá el editor de dibujo, donde puedes crear tu diseño desde cero o modificar uno existente de la galería.

El editor de dibujo tiene varias áreas que te ayudarán a crear tus imágenes:

Lienzo: es el espacio en blanco donde dibujas tu imagen, como si fuera una hoja de papel.

Tamaño del pincel: puedes elegir el tamaño del pincel para dibujar o colorear, seleccionando entre diferentes opciones como 1×1, 3×3 o 5×5 píxeles. Esto te permite hacer trazos más finos o más gruesos.

Herramientas de dibujo: dispones de varias herramientas como el lápiz para dibujar líneas, el borrador para corregir errores, formas como rectángulos y círculos, y una herramienta de relleno para colorear áreas completas. También puedes elegir los colores que quieras usar en tu dibujo.

Opciones de imagen: estas opciones te permiten rotar tu dibujo o reflejarlo como en un espejo, por si quieres ver cómo queda de otra forma.

Tamaño del lienzo: si necesitas más espacio para dibujar, puedes ajustar el tamaño del lienzo cambiando la cantidad de píxeles de ancho y alto. Si activas el candado, los cambios serán proporcionales, es decir, el dibujo no se deformará.

Nombre del dibujo: aquí puedes ponerle un nombre a tu imagen para identificarla fácilmente más tarde.

Opciones del lienzo: si cometes un error, puedes deshacer o rehacer acciones. También puedes acercar o alejar el zoom para trabajar en detalles pequeños, y guardar tu dibujo cuando hayas terminado.

Con MakeCode Arcade, puedes dar vida a tus propios personajes y objetos dentro de tu juego. Imagina crear un explorador, un animal divertido o cualquier personaje que se te ocurra. También puedes añadir objetos como estrellas, obstáculos o tesoros. Deja volar tu imaginación y diseña elementos que harán que tu juego sea único

Es importante especificar el tipo de cada objeto que añadimos al juego. Para hacerlo, utilizamos el bloque establecer mySprite a sprite de tipo Jugador que encontrarás en la categoría Objetos:

Para crear tu objeto, haz clic en el cuadrado gris dentro del bloque. Aquí puedes dibujar tu propio diseño, seleccionar uno de la galería o elegir un dibujo que hayas creado anteriormente. Por ejemplo, podrías diseñar un robot, una nave espacial o un personaje fantástico.

Si quieres cambiar el tipo de objeto, simplemente haz clic en la palabra Jugador o Player dentro del bloque y elige otro tipo del menú desplegable. Los tipos de objetos que puedes seleccionar son:

Jugador: el personaje principal que controlarás en el juego.
Enemigo: personajes u objetos que representan un desafío o peligro.
Proyectil: objetos que pueden ser lanzados, como pelotas o flechas.
Comida: elementos que el jugador puede recoger para ganar puntos o energía.

También puedes crear un tipo de objeto personalizado si lo necesitas. Esto te permite definir cómo interactúan los diferentes elementos en tu juego. Por ejemplo, podrías programar que tu personaje gane puntos al recoger una estrella (Comida) o que pierda una vida al tocar un obstáculo (Enemigo).

Al especificar el tipo de cada objeto, le indicas al juego cómo debe comportarse y cómo debe interactuar con otros elementos. Esto es fundamental para construir la lógica y las reglas de tu juego.

4. Escenarios

Al igual que con los personajes y objetos, los escenarios de tu juego en MakeCode Arcade pueden añadirse desde la biblioteca del programa o dibujarlos tú mismo.

Dependiendo del tipo de juego que quieras crear, el escenario puede consistir en un fondo sencillo (como una imagen o un color específico), un mapa de baldosas o teselas, o una combinación de ambos.

Por ejemplo, si estás creando un juego de plataformas o un laberinto, necesitarás un mapa de teselas para definir por dónde puede moverse el personaje y dónde hay obstáculos. Esto permite establecer caminos, paredes y áreas que el jugador debe explorar o evitar. Sin embargo, si estás haciendo un juego donde el personaje se mueve libremente por un espacio abierto para recoger objetos, como en un juego de exploración, quizás solo necesites un fondo.

Para acceder al editor de fondos, haz clic en el signo + en la pestaña Recursos y luego selecciona el tipo de mapa que quieres dibujar: tesela (una pequeña imagen que se repite) o mapa de teselas (una combinación de varias teselas para crear un escenario más grande). Al igual que con los objetos, después de seleccionar una opción, se abrirá el editor de dibujo, donde puedes crear tu propio diseño o elegir y modificar uno de la galería.

El editor de fondos para crear baldosas es muy similar al que usas para los personajes. Sin embargo, al diseñar mapas de teselas, el editor tiene algunas herramientas adicionales:

Pantalla de previsualización: aquí puedes ver cómo queda todo el mapa de teselas que estás creando. Es útil para asegurarte de que el escenario se ve como deseas.

Herramientas de dibujo: dispones de herramientas como el lápiz, el rectángulo, el borrador, el círculo y la línea para diseñar tu mapa. En lugar de seleccionar colores, eliges las teselas que has creado o las que están disponibles en la biblioteca para dibujar con ellas.

Propiedades: puedes configurar ciertas baldosas como muros o obstáculos, es decir, lugares que el personaje no puede atravesar. Por ejemplo, podrías establecer que las teselas que representan rocas o paredes sean infranqueables.

Teselas: puedes elegir entre las teselas que has creado previamente o las que ofrece la biblioteca del programa. Las teselas de la biblioteca están organizadas en diferentes categorías o temas, como naturaleza, ciudad o espacio, y puedes cambiar entre ellas usando un menú desplegable.

De la misma manera que hacíamos con los objetos, para añadir un fondo a un juego, hay que programarlo. Para ello disponemos de los siguientes bloques de la categoría Escena:

Con las herramientas que hemos visto en este apartado, puedes diseñar escenarios increíbles para tu juego, como un bosque encantado, una cueva misteriosa o una base espacial. El escenario es el mundo donde tu juego cobra vida, así que usa tu imaginación para hacerlo divertido.

5. Sonidos

En MakeCode Arcade, no sólo puedes crear personajes y escenarios, sino que también puedes agregar sonidos y música para hacer tu juego más atractivo. Los sonidos pueden provenir de la biblioteca del programa o puedes crear los tuyos propios utilizando el editor de sonidos.

Para incorporar sonidos o melodías, debes utilizar los bloques de la categoría Música. Dentro de esta categoría, los bloques están organizados según la duración y el tipo de sonido que quieras agregar.

Si deseas añadir melodías o sonidos largos, puedes usar los bloques de Songs. Por ejemplo, el bloque tocar melodía te permite componer tus propias melodías seleccionando notas musicales, o elegir una melodía predefinida de la biblioteca del programa. Podrías agregar una música de fondo que suene durante todo el juego o en momentos específicos, como al superar un nivel.

Para sonidos cortos o efectos de sonido, como un salto, una explosión o el sonido de recoger un objeto, puedes utilizar los bloques de Sounds. El bloque reproducir sonido te permite seleccionar entre una variedad de sonidos disponibles o crear los tuyos propios con el editor. Por ejemplo, podrías añadir un sonido cada vez que tu personaje salta o cuando encuentra un tesoro.

Además, la categoría Música incluye subcategorías como Tono, Volumen y Tempo. Con Tono, puedes utilizar notas musicales específicas para crear sonidos personalizados, lo que es útil si quieres que tu juego tenga efectos sonoros únicos.

La opción de Volumen te permite ajustar la intensidad del sonido, ya sea para hacerlo más fuerte en momentos de acción o más suave en situaciones tranquilas.

Por último, con Tempo puedes controlar la velocidad a la que se reproduce una melodía, permitiéndote acelerar o ralentizar la música según la atmósfera que quieras crear en tu juego.

Agregar sonidos transforma completamente la experiencia de juego, haciéndola mucho más inmersiva. Experimenta con diferentes sonidos y melodías y verás cómo afectan al ritmo de tu juego.

6. Bucles

Un bucle es una secuencia de instrucciones que se ejecuta varias veces.

En MakeCode Arcade, puedes programarlos con los bloques de la categoría Bucles:

7. Condicionales

Los condicionales son instrucciones que permiten que un programa tome decisiones y realice diferentes acciones según ciertas condiciones. Es como enseñarle al programa a responder a preguntas y actuar en consecuencia.

Supongamos que quieres decidir si llevar una chaqueta al salir de casa. La condición es «¿Hace frío?». Dependiendo de la respuesta:

Si hace frío (la condición es verdadera), entonces te pones la chaqueta.
Si no hace frío (la condición es falsa), entonces sales sin chaqueta.

En este ejemplo, estás evaluando una condición y haciendo una cosa u otra en función del resultado.

Existen diferentes estructuras condicionales en programación:

Condicional simple: ejecuta una acción si se cumple una condición. Por ejemplo, «Si el bizcocho está cocido, entonces apagar el horno».

Condicional doble: permite elegir entre dos acciones según si la condición es verdadera o falsa. Por ejemplo, «Si es hora de cenar, entonces pongo la mesa; si no, sigo estudiando».

Condicional múltiple: permite elegir entre más de dos opciones. Por ejemplo, «Si es lunes, tengo clase de música; si es miércoles, tengo deporte; si es viernes, tengo pintura».

En MakeCode Arcade, puedes programar condicionales utilizando los bloques de la categoría Lógica. Estos bloques te permiten hacer que tu juego tome decisiones:

Puedes hacer que un personaje pierda una vida si toca un obstáculo.
Puedes aumentar la puntuación si recoge un objeto especial.
Puedes cambiar de nivel si el jugador alcanza cierta meta.

Al usar condicionales, haces que tu juego sea más interactivo y responda a las acciones del jugador.

8. Variables

Las variables son como cajitas donde podemos guardar información importante que nuestro programa necesita mientras está funcionando. Esto nos permite usar esa información en diferentes partes del código y actualizarla cuando sea necesario.

Supongamos que estás creando un juego donde un personaje tiene que recolectar estrellas. Podrías tener una variable llamada «estrellasRecolectadas» que comienza en cero. Cada vez que el personaje recoge una estrella, aumentas el valor de esa variable en uno. Así, el juego sabe cuántas estrellas has recolectado en total.

Cuando programamos una variable, podemos asignarle un valor inicial y luego cambiar ese valor a medida que el juego avanza. Las variables se utilizan en casi todos los programas, ya que la mayoría manejan y modifican datos para resolver problemas. Otros ejemplos comunes son llevar el conteo de vidas restantes, el nivel actual del juego o el tiempo transcurrido.

En MakeCode Arcade, algunas variables ya vienen creadas automáticamente. Por ejemplo, cuando defines un personaje, se crea la variable «mySprite» que representa a ese personaje. También hay variables para el contador de tiempo, las vidas y la puntuación.

Además, puedes crear tus propias variables en la categoría Variables y programarlas usando los bloques disponibles en las categorías Variables e Información. Esto te permite personalizar tu juego aún más, guardando y manipulando la información que consideres necesaria.

9. Interacción con el usuario

La interacción con el usuario es cómo un programa se comunica y responde a las acciones de las personas que lo usan. Es como una conversación entre tú y el juego. Por ejemplo, cuando juegas y aparece un mensaje que dice «¡Bienvenido al mundo mágico!» o cuando el juego te pide que pulses un botón para continuar.

En MakeCode Arcade, podemos hacer que nuestros juegos interactúen con los jugadores de diferentes maneras. Una de ellas es a través de diálogos o mensajes en pantalla. Estos diálogos pueden ser:

Mensajes que muestran los personajes u objetos: por ejemplo, si tu personaje encuentra un tesoro, puedes hacer que aparezca un mensaje que diga «¡Has encontrado un cofre lleno de oro!».

Preguntas al jugador: puedes hacer que el juego le pregunte al jugador su nombre al inicio, como «¿Cómo te llamas?» y luego usar ese nombre durante el juego para hacerlo más personalizado.

MakeCode Arcade te permite mostrar mensajes en la pantalla de inicio, crear cuadros de diálogo en cualquier momento del juego o incluso hacer preguntas que requieran una respuesta del jugador. Para programar estas interacciones, utilizamos bloques de las categorías Juego y Texto.

Por ejemplo, puedes usar un bloque para mostrar un mensaje cuando el jugador alcanza cierta puntuación, o para darle pistas sobre cómo avanzar al siguiente nivel. También puedes hacer que el juego pregunte al jugador si quiere jugar de nuevo después de terminar una partida.

Al añadir estas interacciones, hacemos que nuestro juego sea más entretenido, ya que el jugador siente que forma parte de la aventura y no solo está observando.

10. Mi primer videojuego

En este vídeo se explica paso a paso cómo construir tu primer videojuego con MakeCode Arcade.

Primero visualiza el vídeo completo para que hagas una idea de la mecánica de programación. Después, cuando acabes y tengas claro de qué va, ve a classroom y realiza la tarea T1.A2.

11. Campo de asteroides

Siguiendo la misma mecánica que hicimos en el apartado anterior, visualiza este vídeo y después dirígete a classroom para hacer la tarea T1.A3.

12. Profundizar en MakeCode Arcade

Si has terminado de realizar los dos proyectos anteriores te animo a que profundices en la programación de MakeCode Arcade realizando uno o varios de los 15 proyectos que te propongo a continuación:

ATRAPANDO PERLAS