Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Comenzando con Android VR y Google Cardboard: Imágenes Panorámicas

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Durante la conferencia I/O de Google en 2014, Google introdujo el visor Cardboard VR, un dispositivo barato hecho de cartón, el cuál usa lentes y un teléfono del usuario para proporcionar acceso simple a aplicaciones de realidad virtual. Dos años después, Google anunció planes para expandir esta plataforma vendiendo un visor más duradero con un control, conocido como Daydream View, el cuál es construido siguiendo el mismo concepto de usar un teléfono como el principal proveedor de RV. Para tener más aplicaciones desarrolladas que soporten esta plataforma, Google liberó SDKs de Cardboard para Android (SDK estándar y el NDK), iOS, el motor de juegos Unity y el motor de juegos Unreal.

Este tutorial es el primero en una serie corta acerca de Android Cardboard y Daydream SDK. En esta serie, te mostraré cómo usar algunas de las herramientas SDK y vistas pre-fabricadas para agregar características simples a tus apps. ¡Hay una cantidad sorprendente de formas en las que puedes integrar Cardboard SDK en tus aplicaciones para juegos y multimedia!

Me concentraré en tres ejemplos que te dejarán comenzar en el mundo del desarrollo de RV: un visor fotoesféra, un visor 360 y un lector de entrada para el control Daydream. Nos concentraremos en el visor fotoesfera en este tutorial y revisitaremos los otros dos temas en lecciones subsecuentes.

Descarga el Cardboard SDK y Ejecuta los Proyectos Muestra.

A diferencia de la mayoría de librerías en Android, el Android Cardboard SDK no es compatible de manera oficial en un repositorio remoto que puede ser importado como dependencia a través de Gradle. Para usarlo, necesitarás clonar el SDK de Android Cardboard desde GitHub a tu computadora vía Git.

Una vez que has descargado el SDK, comencemos ejecutando una de las muestras pre-empaquetadas. En la pantalla de inicio de Android Studio, seleccióna Importar Proyecto. Después, selecciona el directorio raíz para el SDK que acabas de clonar y presiona OK.

Directory structure of the Cardboard library

En este punto tendrás acceso a toda la librería de componentes y muestras disponibles en el Cardboard SDK para Android. Puedes seleccionar una de las muestras para ejecutar en tu dispositivo desde el menú desplegable de módulo en la parte superior de la ventana de Android Studio. Para asegurarte de que todo trabaja según lo esperado, selecciona samples-sdk-simplepanowidget y da clic en la flecha verde Ejecutar.

Cardboard simple panoramic widget module selection

Una vez que la muestra se ha compilado e instalado, deberías ver una pantalla de información acerca de Machu Picchu, completada con una vista que gira alrededor de una fotoesfera cuando mueves tu dispositivo Android.

Cardboard panoramic sample

Ahora que puedes ejecutar las aplicaciones de prueba en tu dispositivo, adentrémonos a crear nuevas aplicaciónes Android habilitadas para Cardboard.

Creando un Visor Panorámico

Comencemos creando un nuevo proyecto Android con una versión de SDK mínima de 19 (KitKat). Después de pasar los pasasos estándard de seleccionar y crear una de las plantillas de aplicación, necesitarás copiar las librerías necesarias para tu proyecto desde el directorio de librerías del Cardboard SDK en la carpeta raíz de tu proyecto. Para este ejemplo, copia las siguientes carpetas: common, commonwidget y panowidget.

Included libraries for a new cardboard project

Una vez que tus archivos de librería están en su lugar correcto, abre tu archivo de proyecto settings.gradle. Necesitarás agregar esos módulos de librerías a tu proyecto a través de este archivo.

Después, necesitarás referenciar esas librerías en tu archivo build.gradle bajo el nodo de dependencias, permitiéndote accesar a componentes pre-fabricados para Cardboard. También necesitarás agregar la librería de Google Protocol Buffers JavaNano, la cuál es una librería de generación de código y arranque para ayudar a administrar los recursos limitados de dispositivos Android.

Después de que tus dependencias han sido configuradas, abre el AndroidManifest.xml de tu proyecto. Al inicio del archivo, dentro el nodo manifest, necesitarás agregar los permisos de INTERNET y READ_EXTERNAL_STORAGE para el SDK de Cardboard.

Dentro del nodo activity para tu clase MainActivity, agrega una category al intent-filter para el visor CARDBOARD.

Ahora que el proceso de configuración está temrinado, podemos profundizar en la parte divertida, el código. Este proyecto leerá una imagen de fotoesféra de app/src/main/assets y la colocará en VrPanoramaView. Puedes tomar una imagen de fotoesféra a través de la aplicación estándar de cámara de Android y colocarla en este directorio. Para este ejemplo, usaré una imagen llamada openspace.jpg.

Photosphere for displaying in a cardboard app

En el archivo layout para tu Activity, agrega un VrPanoramaView que usarás en tu app.

Después, abre la clase MainActivity. Primero necesitarás obtener una referencia para tu VrPanoramaView en onCreate(Bundle) y después puedes cargar tu Bitmap en él por medio del método de ayuda loadPhotoSphere() que definiremos en un momento.

loadPhotoSphere() regresa nuestra imagen desde la carpeta de recursos y la carga en VrPanoramaView con un objeto VrPanoramaView.Options. Vale la pena notar que estas imágenes pueden ser relativamente grandes, así que esta operación normalmente ocurre en el hilo de fondo, a lo largo de esta lección mantendremos todo en el hilo de UI para simplicidad.

Nota que para el valor VrPanoramaView.Options.inputType, estamos usando TYPE_MONO. Esto significa que el VrPanoramaView está esperando una imagen de canal simple para mostrar, mientras que un inputType de TYPE_STEREO_OVER_UNDER esperaría una imagen que está partida verticalmente con el ojo derecho e izquierdo viendo las mitades superiores e inferiores de la imagen, respectivamente.

OverUnder photosphere image for a cardboard app

La cosa que final que necesitas hacer es la pausa y reanudación de reproducción del VrPanoramaView en onPause() y onResume(), así como desconectarlo apropiadamente en onDestroy().

Ahora que terminamos de configurar la app, procedamos a ejecutarla. Tu app debería mostrar tu fotoesféra en la pantalla y deberías poder mover tu teléfono alrededor para ver diferentes porciones de la imagen.

Our panoramic image in the view outside of a VR viewer

Si presionas en el icono de cardboard en la esquina inferior derecha del View, este partirá la imagen en dos imágenes ligeramente defasadas que pueden ser vistas a través del visor Cardboard o Daydream.

Our panoramic image in the view inside of a VR viewer

Aunque no se usa en este tutorial, también vale la pena notar que el VrPanoramaView puede aceptar un objeto VrPanoramaEventListener que notificará a tu app cuando una nueva imagen ha cargado exitosamente o ha fallado.

Conclusión

Felicidades--has creado tu primera aplicación cardboard, un visor de imagen para fotos panorámicas y de fotoesféra. Aunque es un ejemplo simplificado, te proporciona los básicos sobre cómo crear tus propias aplicaciones para usar el visor Cardboard. Para un ejemplo impresionante de una app que lleva este concepto un paso más allá, recomiendo altamente la app educativa de Google Expeditions.

Espero que hayas disfrutado meter tus dedos del pie en el mundo de la RV. En el siguiente tutorial, te mostraré cómo reproducir archivos de video de 360 grados a través del SDK de Cardboard.

Mientras tanto, revisa algunos de nuestros otros cursos y tutoriales de Android VR, justo aquí en Envato Tuts+.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.