La Realidad Aumentada ya no es exclusiva de desarrolladores expertos. Con MIT App Inventor puedes crear una aplicación de realidad aumentada básica sin programar, utilizando bloques visuales y un dispositivo Android.
En este tutorial paso a paso aprenderás a mostrar la cámara en tiempo real, superponer una imagen como objeto de RA y probar tu aplicación directamente en tu teléfono.
En este tutorial paso a paso aprenderás a:
- Mostrar la cámara del dispositivo en tiempo real.
- Superponer una imagen como objeto de RA.
- Controlar su visibilidad mediante bloques.
- Probar la aplicación directamente en tu Android.
Si buscas crear una app de realidad aumentada sin programar, este ejemplo es el punto de partida ideal.
Introducción a la Realidad Aumentada con App Inventor
La Realidad Aumentada consiste en superponer elementos digitales sobre el entorno real capturado por la cámara.
En el caso de MIT App Inventor, no contamos con seguimiento espacial 3D avanzado. Sin embargo, sí podemos crear un efecto de RA simple superponiendo imágenes transparentes sobre la vista en tiempo real de la cámara.
Este enfoque es ideal para:
- Proyectos educativos.
- Prototipos rápidos.
- Introducción al concepto de RA.
- Aplicaciones demostrativas.
¿Qué necesitas para crear tu app de Realidad Aumentada?
Antes de comenzar, asegúrate de tener:
- Una cuenta en MIT App Inventor: (https://appinventor.mit.edu/).
- Un dispositivo Android.
- La aplicación MIT AI2 Companion instalada.
- Una imagen PNG transparente para usar como objeto de RA.
¿Quieres aprender a crear aplicaciones de realidad aumentada sin programar? Te invito al siguiente link: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)
Aprende a programar aplicaciones de realidad aumentada con javascript en formato WebAR. Te dejo un listado de tutoriales.
- Tutorial de realidad aumentada WebAR con MindAR y JavaScript: Guía Paso a Paso Desde Cero (2026)
- Realidad Aumentada: Optimiza Modelos 3D GLB Para Tu WebAR
- Calibra tu aplicación de Realidad Aumentada con: AR Studio
- Crea un Tracker Crypto en realidad aumentada en tiempo real
- Convierte tus fotos en Realidad Aumentada WebAR con Polycam
Paso 1: Crear un nuevo proyecto
- Ingresa a https://appinventor.mit.edu/explore/get-started y en la parte superior derecha da clic en el botón Create Apps.
- Inicia sesion con tu cuenta de google.
- Haz clic en Projects (Proyectos) y luego Start New Project (Inicia un nuevo proyecto).
- Nombra tu proyecto, por ejemplo (Realidad Aumentada).
Paso 2: Diseñar la interfaz (CameraViewer + Canvas)
En el Diseñador (Designer) agrega los siguientes componentes:
Componente Visor de Cámara CameraViewer
- En la paleta, busca la sección Media (Medios).
- Arrastra CameraViewer a tu Screen1 (Pantalla 1).
- Configura sus propiedades:
- Height (Altura): Fill parent (Ajustar al contenedor).
- Width (Ancho): Fill parent (Ajustar al contenedor).
Este componente mostrará la vista en tiempo real de la cámara.
Componente Lienzo Canvas
En la paleta, busca la sección Drawing and Animation (Dibujo y Animación).
- Arrastra Canvas a tu Screen1.
- ¡Importante! Asegúrate de que el Canvas esté ENCIMA del CameraViewer en la lista de componentes (Components). Puedes arrastrarlo y soltarlo allí.
Configura sus propiedades:
- Height (Altura): Fill parent (Ajustar al contenedor).
- Width (Ancho): Fill parent (Ajustar al contenedor).
- BackgroundColor (Color de Fondo): Selecciona None (Ninguno) para hacerlo transparente. Esto permitirá que la vista de la cámara se vea a través de él.
Componente Objeto Sprite de Imagen (ImageSprite)(Objeto de RA)
En la paleta, busca la sección Drawing and Animation (Dibujo y Animación).
- Arrastra ImageSprite dentro del Canvas.
Configura sus propiedades:
- Picture (Imagen): Sube la imagen PNG transparente que deseas usar como tu objeto de RA. Haz clic en Upload File… (Subir archivo) en la sección Media y luego selecciona tu imagen. Una vez subida, selecciónala en la propiedad Picture del ImageSprite.
- Visible: Desmarca esta casilla por ahora. Lo haremos visible con los bloques.
- X y Y: Establece las coordenadas iniciales donde quieres que aparezca tu objeto. Por ejemplo, 200 para X y 200 para Y. Puedes ajustarlas más tarde.
Componente Botón (Button)
En la paleta, busca la sección User Interface (Interfaz de Usuario).
- Arrastra un Button a tu Screen1. Puedes colocarlo debajo del Canvas si lo deseas, o en la parte superior.
Configura sus propiedades:
- Text (Texto): «Mostrar Objeto RA».
- Width: Fill parent (Opcional, para que ocupe todo el ancho).
Tu árbol de componentes (Components) debería verse algo así:
Screen1
- CameraViewer1
- Canvas1
- ImageSprite1
- Button1
Paso 3: Programar los bloques
Ahora, haz clic en el botón Blocks (Bloques) en la esquina superior derecha de la pantalla para ir al editor de bloques.
Inicializar la Cámara:
- Del cajón Screen1, arrastra el bloque when Screen1.Initialize do.
- Del cajón CameraViewer1, arrastra el bloque call CameraViewer1.Start().
- Conecta el call CameraViewer1.Start() dentro del when Screen1.Initialize do.
(Opcional: Si quieres detener la cámara cuando la aplicación se cierra):
- Del cajón Screen1, arrastra el bloque when Screen1.BackPressed do.
- Del cajón CameraViewer1, arrastra el bloque call CameraViewer1.Stop().
- Luego, del cajón Control, arrastra close application y conéctalo al when Screen1.BackPressed do.
Mostrar el Objeto de Realidad Aumentada con el Botón:
- Del cajón Button1, arrastra el bloque when Button1.Click do.
- En el cajón ImageSprite1, arrastra el bloque set ImageSprite1.Visible to.
- En el apartado cajón Logic (Lógica), arrastra el bloque true y conéctalo al set ImageSprite1.Visible to.
Para posicionar el objeto de RA:
- Del cajón ImageSprite1, arrastra el bloque set ImageSprite1.X to.
- Del cajón Math (Matemáticas), arrastra el bloque number y escribe el valor 200 (o el que desees).
- Haz lo mismo para set ImageSprite1.Y to con el valor 200.
- Conecta estos bloques dentro del when Button1.Click do.
Cómo probar la aplicación en Android
- Conecta tu teléfono a la misma red WiFi.
- En App Inventor ve a Connect → AI Companion.
- Escanea el código QR.
- La aplicación se cargará en tu dispositivo.
- Pulsa el botón “Mostrar Objeto RA”.
- Verás tu imagen superpuesta en la pantalla.
Limitaciones de la Realidad Aumentada en MIT App Inventor
Es importante entender que esta es una RA básica.
No incluye:
- Sin seguimiento de posición 3D: El objeto de RA no se «fija» en el mundo real ni se ajusta a la perspectiva a medida que mueves el teléfono. Simplemente se superpone.
- Sin oclusión: El objeto de RA siempre estará visible, incluso si hay objetos reales delante de él.
- Reconocimiento de marcadores limitado: Esta implementación no incluye un reconocimiento de marcadores avanzado. Para eso, necesitarías integrar una extensión de terceros o un servicio externo (como una API de reconocimiento de imágenes), lo cual es más complejo.
Posibles Mejoras (requieren más bloques/conceptos avanzados)
- Interactividad: Añadir la capacidad de mover, escalar o rotar el ImageSprite arrastrándolo en el Canvas.
- Múltiples objetos de RA: Utilizar múltiples ImageSprites y controlarlos individualmente.
- Cambio de objetos: Permitir al usuario cambiar qué objeto de RA se muestra.
- Detección de «marcadores» simples: Se puede intentar usar el Color del Canvas (aunque es complicado con la cámara) o utilizar la aceleración u orientación del dispositivo (sensores) para activar la visibilidad del objeto de RA.
- Extensiones de la comunidad: Investiga en los foros de MIT App Inventor sobre extensiones de reconocimiento de imágenes o de RA más avanzadas, aunque su uso puede ser más complejo.
¿MIT App Inventor permite crear Realidad Aumentada avanzada?
No completamente.
| Característica | MIT App Inventor | Plataformas WebAR (AR.js / MindAR) |
|---|---|---|
| Seguimiento 3D real | ❌ | ✅ |
| Reconocimiento de marcadores | Limitado | Avanzado |
| Oclusión | ❌ | Parcial |
| Desarrollo sin código | ✅ | ❌ |
MIT App Inventor es ideal para aprendizaje, pero no sustituye motores de RA avanzados.
Preguntas Frecuentes
¿Se puede hacer realidad aumentada real en MIT App Inventor?
Solo a nivel básico. Permite superposición de imágenes, pero no seguimiento espacial real.
¿Funciona en cualquier Android?
En la mayoría de los dispositivos modernos con cámara y soporte para MIT AI2 Companion.
¿Se pueden reconocer imágenes o marcadores?
No de forma nativa. Se necesitan extensiones o herramientas externas.
Conclusión
Has creado una aplicación básica de Realidad Aumentada sin programar usando MIT App Inventor.
Aunque esta implementación no incluye seguimiento 3D ni reconocimiento avanzado, es un excelente punto de partida para comprender cómo funciona la superposición digital en dispositivos móviles.
Si deseas avanzar hacia experiencias con reconocimiento real de marcadores y modelos 3D interactivos, puedes explorar soluciones basadas en WebAR como AR.js o MindAR.