Crea Realidad Aumentada Sin Código: MIT App Inventor

Introducción a la Realidad Aumentada con App Inventor

La Realidad Aumentada (RA) es una tecnología que superpone información digital sobre el mundo real.

En el contexto de MIT App Inventor, la RA se puede lograr de varias maneras, siendo la más accesible la superposición de elementos gráficos sobre la vista de la cámara web en tiempo real.

Concepto de RA simple en App Inventor: Superposición de Imágenes

MIT App Inventor carece de funcionalidades nativas avanzadas de seguimiento espacial 3D y esto hace que solo podamos realizar un efecto de realidad aumentada simple.

Comencemos con este tutorial

¿Qué necesitaras?

Una cuenta con MIT App Inventor (https://appinventor.mit.edu/).
Dispositivo Android para probar la aplicación.
La aplicación MIT AI2 Companion instalada en tu dispositivo Android.
Una imagen en cualquier formato que desees usar como objeto de RA.

Pasos para crear la aplicación

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).

Diseño de la Interfaz de Usuario (Diseñador)

Arrastra y suelta los siguientes componentes desde la paleta (Palette) al visor (Viewer):

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 de la cámara en tiempo real.

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):

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

Programación de los Bloques (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 RA 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.

Lógica Básica de Bloques:

when Screen1.Initialize
do call CameraViewer1.Start()

when Button1.Click
do set ImageSprite1.Visible to true
set ImageSprite1.X to 100
set ImageSprite1.Y to 100

// Optional: Stop camera when back button is pressed and close app
when Screen1.BackPressed
do call CameraViewer1.Stop()
close application

Probar la Aplicación

Asegúrate de que tu dispositivo Android esté conectado a la misma red Wi-Fi que tu computadora.
En App Inventor, haz clic en Connect (Conectar) > AI Companion.
Abre la aplicación MIT AI2 Companion en tu teléfono y escanea el código QR, o ingresa el código manualmente.
La aplicación se cargará en tu teléfono. Podrás ver la vista de tu cámara.
Haz clic en el botón «Mostrar Objeto RA» y deberías ver tu imagen superpuesta en la pantalla, sobre la vista de la cámara.

Limitaciones y Posibles Mejoras
Limitaciones de esta RA básica:

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.

Conclusión
Has creado una aplicación de Realidad Aumentada básica con MIT App Inventor. Este es un excelente punto de partida para entender cómo la información digital puede interactuar con el mundo real a través de la cámara de un dispositivo. A partir de aquí, puedes explorar más a fondo los componentes de App Inventor, los sensores del dispositivo y las extensiones para crear experiencias de RA más sofisticadas.

Quieres saber más sobre múltiples objetos en una aplicación de Realidad Aumentada, te recomiendo este post del blog: Varios modelos 3D un solo marcador – AR.js y javascript