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.

git clone https://github.com/googlevr/gvr-android-sdk.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.

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.

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.

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.

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.

include ':app', ":common", "commonwidget", "panowidget"

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.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.0.0'

    compile project(':common')
    compile project(':commonwidget')
    compile project(':panowidget')

    compile 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'
}

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.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

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

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />

        <category android:name="com.google.intent.category.CARDBOARD" />
    </intent-filter>
</activity>

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.

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.vr.sdk.widgets.pano.VrPanoramaView
        android:id="@+id/pano_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

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.

private VrPanoramaView mVrPanoramaView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mVrPanoramaView = (VrPanoramaView) findViewById(R.id.pano_view);

    loadPhotoSphere();
}

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.

private void loadPhotoSphere() {
    //This could take a while. Should do on a background thread, but fine for current example
    VrPanoramaView.Options options = new VrPanoramaView.Options();
    InputStream inputStream = null;

    AssetManager assetManager = getAssets();

    try {
        inputStream = assetManager.open("openspace.jpg");
        options.inputType = VrPanoramaView.Options.TYPE_MONO;
        mVrPanoramaView.loadImageFromBitmap(BitmapFactory.decodeStream(inputStream), options);
        inputStream.close();
    } catch (IOException e) {
        Log.e("Tuts+", "Exception in loadPhotoSphere: " + e.getMessage() );
    }
}

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.

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

@Override
protected void onPause() {
    mVrPanoramaView.pauseRendering();
    super.onPause();
}

@Override
protected void onResume() {
    super.onResume();
    mVrPanoramaView.resumeRendering();
}

@Override
protected void onDestroy() {
    mVrPanoramaView.shutdown();
    super.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.

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.

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

• Explora RV con Google Cardboard

  RV (realidad virtual) es una tecnología emocionante que promete nuevas vistas de experiencia inmersiva. Con el SDK de Google Cardboard para Android, desarrollar RV...

• Realidad Aumentada Estilo Pokémon GO Con Vuforia

  Con el suceso viral de Pokemon GO, todos han estado hablando sobre realidad aumentada. En este tutorial daremos un vistazo al uso de Vuforia para realidad aumentada...

• Crea un Juego de Realidad Aumentada Estilo Pokémon GO con Vuforia

  En este tutorial comenzaremos a construir una app con Realidad Aumentada usando Vuforia en Unity 3D. Aprenderemos cómo configurar Vuforia y comenzar a desarrollar una RA...

• Realidad Aumentada Estilo Pokémon GO: Marcadores

  Recientemente, Pokémon Go ha tomado al mundo por sorpresa. Una de las partes más interesantes y cautivadoras de este juego es el uso de realidad aumentada, o RA. RA es...