Da vida a un robot con dos fotogramas en Microsoft MakeCode Arcade: duplica un dibujo, cambia los ojos y prueba tu primera animación en familia.
Parte de Crear en familia · Tutorial 02
Dibuja una cara con los ojos abiertos. Ahora dibuja la misma cara con los ojos cerrados. Si enseñamos una y después la otra, ¿qué parece que hace?
Hoy vamos a conseguir que un robot parpadee. Con dos dibujos y un cambio pequeño. No hace falta saber programar, haber hecho la entrega anterior ni crear una cuenta de IA.
Usaremos Microsoft MakeCode Arcade y un proyecto de inicio que ya tiene preparado el robot. Así podemos dedicar el primer rato a inventar su expresión. La parte de los archivos está resuelta; nosotros vamos a dibujar y probar.
Resultado real del ejemplo, detenido con A para mirar un fotograma. Una captura fija no demuestra movimiento: el proyecto descargable permite verlo alternar los dos dibujos.
Un fotograma es cada dibujo de la animación. En este taller el robot permanece en el mismo sitio y solo cambian sus ojos. Mostrar los dibujos uno detrás de otro crea el parpadeo. No estamos moviendo al personaje por un mapa.
Tenemos dos archivos:
Los dos son imágenes PNG que contienen un proyecto de MakeCode. Conservad los originales: si una aplicación los reduce o recomprime como fotos, puede borrar los datos del proyecto.
Necesitamos ordenador, navegador, conexión y ratón o panel táctil. El teclado sirve para detener la animación. No hay que comprar una consola, instalar programas ni introducir una tarjeta. Calculad 20–30 minutos orientativos, o dos ratos cortos si os apetece dibujar con calma.
El niño o la niña elige la expresión, duplica el dibujo, cambia los ojos y decide el ritmo. El adulto revisa el acceso al servicio, ayuda a importar el archivo y guarda una copia fuera del navegador. No usaremos fotos, voz, nombres completos ni datos del colegio.
Microsoft describe MakeCode como una plataforma gratuita y permite usarla sin iniciar sesión. No requiere Microsoft 365. Esta es la situación comprobada el 28 de septiembre de 2026; no significa que las condiciones no puedan cambiar. Si aparece una petición de pago, parad: no forma parte de este recorrido. Presentación oficial · Cuentas opcionales.
El taller está escrito para 10–14 años. La documentación de MakeCode contempla el uso educativo infantil, pero no fija una edad mínima universal del editor sin cuenta. El adulto revisa las condiciones aplicables a la familia o al centro; acompañar no sustituye una autorización exigida por el servicio. Si no podéis acceder, haced los dos dibujos en papel y alternadlos con la mano. La parte online puede esperar. Privacidad y consentimiento · Condiciones de uso.
No entrar con una cuenta no vuelve privado todo el funcionamiento del sitio: Microsoft documenta telemetría de uso. Nosotros no añadiremos servicios externos, extensiones de terceros ni datos de jugadores. Tampoco publicaremos un enlace del proyecto.
Las capturas corresponden a Microsoft MakeCode Arcade 4.1.25, PXT 13.1.23, en español, con Chrome 153 en macOS. Algunas etiquetas siguen en inglés. En otro sistema puede cambiar el diálogo que permite elegir el archivo; las instrucciones dentro del editor son las observadas en esta versión.
Con el adulto, pulsa Robot de inicio y guarda el archivo robot-inicio.png. Si el navegador solo muestra la imagen, usa su opción Guardar imagen como…. Déjala en una carpeta que podáis encontrar, por ejemplo Mis juegos / Robot que parpadea.
No hace falta abrirla en un editor de fotos. El siguiente paso se hace en MakeCode.
Abre Microsoft MakeCode Arcade. No pulses «Iniciar sesión». Si está en inglés, usa el selector de idioma —«Language» o «Lenguaje»— y elige español.
En Inicio, pulsa Importar → Importar Archivo…. Selecciona robot-inicio.png y confirma con ¡Adelante!. Espera a que aparezca el editor y termine de arrancar el simulador.
Si ves una visita guiada de bienvenida, puedes cerrarla con su X. Si solo se abre una foto, vuelve a MakeCode: necesitamos importar el archivo allí.
A la izquierda está la consola dibujada: es el simulador, donde veremos el robot. En el centro están las categorías de bloques. A la derecha, las instrucciones ya preparadas.
El archivo de inicio tiene un solo fotograma. Que el robot todavía no parpadee es lo esperado.
La pila al iniciar crea el robot, lo amplía tres veces y prepara la animación. El bloque naranja de A permite detenerla. No hay que desmontar nada para empezar a dibujar.
En el bloque verde animar robot, busca cuadros. Pulsa la miniatura del robot junto al pequeño icono de película.
No pulses la miniatura del bloque azul «objeto». Esa es la imagen inicial del personaje. Para cambiar lo que aparece durante la animación necesitamos entrar en cuadros.
Se abre una cuadrícula grande. A la derecha hay una columna con los fotogramas y, encima, una vista previa pequeña. En el archivo de inicio solo hay una tarjeta de fotograma debajo de esa vista previa.
La vista previa de arriba no cuenta como otro fotograma. La tarjeta seleccionada tiene debajo los iconos de duplicar y eliminar.
El dibujo ocupa 16 × 16 casillas, llamadas píxeles. El damero gris indica transparencia. No vamos a cambiar el tamaño ni a desplazar el cuerpo: así el robot no dará un salto al cambiar de imagen.
En la tarjeta de la derecha, pulsa el icono de dos hojas. Al situar el puntero encima, su nombre es Duplicar cuadro actual.
Ahora hay dos dibujos iguales. El botón + crea un fotograma nuevo; para este taller nos interesa duplicar y conservar el cuerpo.
Haz clic en la tarjeta de abajo. Comprueba que el borde de selección está alrededor de esa segunda tarjeta. Vamos a cambiar esta copia y mantener la primera con los ojos abiertos.
En la paleta izquierda, elige Color 6 (verde azulado), el mismo tono del cuerpo. Usa el lápiz y pinta encima de las casillas blancas y negras de los dos ojos hasta que queden del color de la cara.
No uses la transparencia para taparlos: dejaría agujeros. Si te equivocas, pulsa la flecha de Deshacer del editor de dibujo.
Elige el negro de la paleta. Dibuja una línea horizontal corta donde estaba cada ojo. En el ejemplo cada línea ocupa tres casillas. No cambies la boca, la antena ni los pies.
Solo hemos cambiado los ojos de la copia. La posición y el tamaño del personaje siguen siendo los mismos.
Pulsa la primera: ojos abiertos. Pulsa la segunda: ojos cerrados. Si las dos se ven iguales, revisa cuál has editado antes de seguir.
Ya tienes una pequeña secuencia hecha por ti. Si queréis descansar, pulsa Listo y guarda una copia siguiendo el paso 20.
Pulsa el triángulo que hay encima de las tarjetas, Iniciar la Vista Previa de la Animación. Mira el robot pequeño de esa zona: debe alternar sus ojos.
La cuadrícula grande sigue mostrando el fotograma seleccionado para dibujar. No esperes que esa cuadrícula se mueva también.
Junto al pequeño reloj de arriba aparece el Intervalo entre fotogramas (ms). Escribe 700. Son siete décimas de segundo por dibujo.
Con dos fotogramas a ese ritmo, una vuelta completa dura aproximadamente 1,4 segundos. Es una alternancia lenta para reconocer los dibujos, no una imitación exacta de cómo parpadeamos las personas.
Pulsa Listo, abajo a la derecha. El bloque animar robot debe mostrar intervalo (ms) 700. Espera a que el simulador actualice el proyecto.
En ese mismo bloque, bucle debe estar en ACTIVADO. Ya viene así en el punto de partida. Significa: «cuando llegues al último dibujo, vuelve al primero».
Si está desactivado, el robot mostrará la secuencia una vez y se quedará en el último fotograma. No es un error del dibujo; es otra manera de reproducirlo. Cómo funciona la repetición.
Pulsa el botón redondo A de la consola. El robot debe quedarse con una expresión fija. El bloque naranja preparado dice on A button presionado y contiene detener todos animaciones en robot.
También puedes hacer clic en la pantalla del simulador y pulsar la barra espaciadora, comprobada como botón A en esta sesión. Si estás escribiendo en una casilla del editor, la barra no llegará al juego: primero dale el foco al simulador.
Pulsa la flecha circular Reiniciar el simulador, debajo de la consola. El robot vuelve a alternar los dos dibujos. El botón A detiene la animación; no la reanuda con otra pulsación. Para volver a verla, reiniciamos.
Este pequeño proyecto no tiene marcador, victoria ni derrota. El resultado es la propia animación.
Cambia el intervalo (ms) del bloque verde de 700 a 1000. Reinicia y observa. Cada dibujo dura ahora un segundo: un número más grande hace la animación más lenta.
Elige el ritmo que te resulte cómodo. Nuestro archivo terminado conserva 700. No hace falta acelerar mucho ni añadir destellos para que el personaje resulte expresivo.
En la barra inferior, cambia Robot que parpadea por un nombre inventado, por ejemplo Robot dormilón. No pongas datos personales. El adulto puede ayudarte a distinguir la plantilla descargada de tu nueva versión.
Pulsa el disquete Guardar el proyecto, al lado del nombre. MakeCode descarga un PNG y muestra ¡Proyecto guardado!. Pulsa ¡Entendido! cuando hayáis localizado el archivo.
Conservad el PNG original en vuestra carpeta. «Guardar el proyecto» crea una copia; «Compartir» publica un enlace y no hace falta para este taller.
No necesitamos el botón grande Descargar, que también ofrece opciones de hardware. La copia en el navegador puede desaparecer si borráis los datos del sitio, por eso guardamos el archivo. Guardado de proyectos.
Pulsa la casa para volver a Inicio. Repite Importar → Importar Archivo…, selecciona tu PNG y pulsa ¡Adelante!. Espera a que arranque y comprueba el parpadeo.
Después pulsa A: debe detenerse. Reinicia: debe animarse otra vez. Si eso funciona, ya tienes una copia que puedes usar otro día sin rehacer los dibujos.
Señala las dos tarjetas y cuéntale a otra persona qué has cambiado. Puedes decir: «Estos dibujos tienen el mismo cuerpo. Solo cambian los ojos. El intervalo decide cuánto tiempo veo cada uno».
Si luego modificas la antena o el color del cuerpo, recuerda hacerlo en los dos fotogramas para que no cambien de color sin querer. Guarda otra copia cuando te guste el resultado.
| Lo que ocurre | Qué comprobar |
|---|---|
| El robot está quieto nada más importar | Si has abierto robot-inicio.png, tiene un solo fotograma: es correcto. Si es tu versión terminada, espera a que arranque el simulador y reinícialo. |
| He cambiado el dibujo, pero al animarse vuelve al anterior | Abre «cuadros» dentro de «animar», no la miniatura del bloque que crea el objeto. |
| Solo veo un fotograma | La imagen superior es una vista previa. Duplica la tarjeta que hay debajo usando el icono de dos hojas. |
| Los dos dibujos son iguales | Selecciona la segunda tarjeta antes de cerrar los ojos. Alterna manualmente ambas para comprobarlo. |
| El robot parece saltar | Revisa que ambas imágenes midan 16 × 16 y que no hayas desplazado el cuerpo. Duplica la primera de nuevo si es más sencillo. |
| Se mueve una vez y para | Mira si bucle está ACTIVADO. También puede haberse pulsado A; reinicia. |
| La barra espaciadora no detiene nada | Haz clic en la pantalla del simulador o pulsa su botón A con el ratón. |
| La animación va demasiado rápida | Sube el intervalo a 1000. Más milisegundos significa más tiempo para mirar cada dibujo. |
| Mi PNG se abre como una foto | Impórtalo desde MakeCode. Si dejó de funcionar tras editar la imagen, recupera el archivo original. |
Se han comprobado la duplicación, la edición de ojos, la animación, el cambio de intervalo, A, el reinicio y la recuperación de los descargables. Las demás filas son orientaciones de diagnóstico, no una afirmación de que se hayan provocado todos los errores posibles.
No necesitamos IA para completar la actividad. Si el adulto ya utiliza un asistente autorizado y ha revisado sus condiciones, edad y coste, puede pegar estos mensajes en una conversación nueva. No hay que abrir una cuenta para seguir el taller ni ceder una cuenta adulta al menor.
Para entender los fotogramas:
Estoy acompañando un taller familiar con Microsoft MakeCode Arcade.
Tenemos dos dibujos del mismo robot: ojos abiertos y ojos cerrados.
Explícame qué es un fotograma con un ejemplo de dos tarjetas de papel.
Usa tres frases sencillas. No añadas código, cuentas ni instalaciones.Para revisar una animación quieta:
Nuestro robot tiene dos fotogramas en MakeCode Arcade, pero está quieto.
Guíame para revisar una sola cosa cada vez: si son distintos,
si bucle está activado y si hemos detenido la animación con A.
Espera mi respuesta después de cada comprobación.
No pidas datos personales, archivos privados ni acceso al ordenador.Son plantillas preparadas. No se han enviado a un servicio ni se presentan respuestas de IA como pruebas. El resultado esperado es una explicación o una comprobación sencilla; contrastadla con el editor.
No hace falta hacerlos todos. Hoy dos dibujos ya han sido suficientes para que aparezca un gesto.
Proyecto de inicio · Proyecto terminado · Instrucciones del descargable
Consultadas el 28 de septiembre de 2026. Editor estable 4.1.25, PXT 13.1.23. Se probó el simulador real y se recuperaron los dos PNG; no se usó una consola física ni se publicó el proyecto.
Dibuja un personaje, muévelo con las flechas y recoge estrellas. Un primer juego con bloques para niños de 10–14 años y sus familias, sin cuenta ni consola.
Construye una pared, comprueba que bloquea el paso y busca una llave que abre la puerta del laberinto. Mapas y colisiones con Microsoft MakeCode Arcade.
Dibuja una nave, pásala a una cuadrícula y juega con ella. Un taller local de creación y pruebas, con un juego descargable y mensajes opcionales para la IA.