Guía de inicio rápido

Esta guía proporciona los pasos necesarios para ponerte en marcha con el Estudio y el Editor de la nube de Niantic 8th Wall .

Crear una cuenta en 8th Wall

Crear una cuenta en 8th Wall te da la posibilidad de:

• **Cree experiencias de realidad virtual y realidad aumentada y juegos web en 3D que se ejecuten directamente en un navegador web móvil.
• Utiliza nuestras herramientas visuales y nuestro motor de juego.
• Colaborar con los miembros del equipo y almacenar el código en el control de código fuente.
• Vea al instante los proyectos a medida que los desarrolla.
• Depura** tu código de forma inalámbrica en tiempo real con registros de consola en directo desde varios dispositivos.
• Publicar proyectos alojados en la red mundial de 8th Wall.
• Gestione suscripciones, información de facturación y licencias para proyectos comerciales.
• Crea un Perfil público y Proyectos destacados en 8thwall.com, lo que te permitirá mostrar tu trabajo en , demos en directo y/o código.

Nuevos usuarios: Empieza a crear gratis en https://8thwall.com/get-started

Usuarios existentes: Inicie sesión en https://www.8thwall.com/login

Crear gratis

La plataforma Niantic 8th Wall Studio y Built-in Hosting está disponible para todos de forma gratuita y Cloud Editor está disponible para los espacios de trabajo con una suscripción de pago. 8th Wall ofrece un plan básico gratuito para que pueda acceder a toda la potencia de 8th Wall y empezar a crear experiencias WebAR, sin necesidad de tarjeta de crédito .

El trabajo comercial o de marca requiere un plan Pro y una licencia comercial 8ª Las suscripciones a Wall y las licencias de se renuevan automáticamente hasta que las canceles. No hay reembolsos ni créditos por meses parciales o no utilizados en . Para gestionar la configuración de su suscripción, consulte Guía de configuración de la cuenta

1. En la página de inicio de 8th Wall o en la página de precios, haga clic en Crear gratis.

2. Cree su cuenta introduciendo su nombre, correo electrónico y contraseña o utilice un inicio de sesión social. Revise y confirme : Acepte los [Términos y Condiciones] de la 8ª Pared (https://www.8thwall.com/terms) y luego haga clic en Siguiente.

3. Confirme su dirección de correo electrónico. Se enviará un correo electrónico con un código de verificación. Introduzca el código de verificación y haga clic en Confirmar.

4. Haga clic en Continuar para completar la creación de la cuenta.

Cree su espacio de trabajo

1. Opcional: añada una imagen de perfil, que se verá públicamente.

2. Introduzca un nombre para el espacio de trabajo. Este valor es sólo a efectos de visualización y no afecta a ninguna URL asociada a su espacio de trabajo.

3. Selecciona para qué utilizas Niantic 8th Wall.

4. Seleccione lo que mejor describa su función.

5. Introduzca una URL del espacio de trabajo. Elige algo relevante para el nombre de tu espacio de trabajo, como el nombre de tu empresa .

IMPORTANTE: Este valor se utilizará como subdominio por defecto para TODOS los proyectos alojados en de 8th Wall en su cuenta (por ejemplo, miempresa.8thwall.app/nombredelproyecto). Este valor también se utilizará en la URL de su página de perfil público (por ejemplo, www.8thwall.com/\*\*miempresa\*\*).

**No puedes cambiar este valor más tarde, así que elige sabiamente.

Nota: si desea conectar dominios personalizados a sus proyectos alojados en 8th Wall para anular la URL predeterminada de , consulte aquí.

Iniciar un nuevo proyecto

1. En la página de inicio (inicio de sesión) o en el panel del espacio de trabajo, haga clic en "Iniciar un nuevo proyecto".

2. Seleccione el tipo de alojamiento (sólo planes Pro/Enterprise): Decida por adelantado si el proyecto utilizará 8th Wall Studio o el editor heredado. Tanto Studio como Editor están alojados en 8th Wall. Alternativamente, los usuarios de del plan Enterprise o Legacy Pro pueden optar por el autoalojamiento. Este ajuste no puede modificarse posteriormente.

3. Seleccione un nombre de proyecto: El nombre del proyecto se utiliza tanto en la URL predeterminada del proyecto (por ejemplo, mycompany.8thwall.app/project-name) como en la URL de la página Featured Project (por ejemplo, www.8thwall.com/mycompany/project-name). No se puede cambiar más tarde.

4. Seleccione un tipo de licencia (sólo Pro/Enterprise)

Tipos de licencia:

• Comercial: Los proyectos comerciales están destinados a un uso comercial. Cuando esté listo para lanzar un proyecto comercial para que el mundo pueda verlo, necesitará adquirir una licencia comercial . Consulte la Página de precios en el sitio web para conocer las opciones de licencia comercial. NOTA: Para adquirir una licencia comercial, el espacio de trabajo debe tener primero un plan Pro activo.

• Uso de demostración: Puede crear un número ilimitado de proyectos de demostración que son visibles públicamente y estrictamente destinado a lanzar el trabajo prospectivo. En la pantalla de carga aparecerá una etiqueta "Sólo para uso de demostración". Si en algún momento decide comercializar su proyecto, cambie a "Comercial" en el panel del proyecto .

• Aplicación web: Puede crear un número ilimitado de proyectos de origen bajo esta licencia. Los proyectos de aplicaciones web requieren que la pantalla de presentación permanezca encendida y se podrá ver públicamente en 8thwall.com en cuanto se publique . Esta licencia no permite proyectos creados para trabajo por encargo, ya que requieren una licencia comercial de .

Todos los proyectos deben mostrar el distintivo Powered by 8th Wall en la página de carga. Se incluye por defecto en el Loading Module y no puede eliminarse. Consulte aquí para obtener instrucciones sobre la personalización de la pantalla de carga.

Clonar proyecto de plantilla

1. Después de crear un proyecto, seleccione una plantilla para clonar. En esta guía, seleccione "A-Frame: Toque para Colocar suelo ". Este ejemplo interactivo permite al usuario generar modelos tridimensionales en la superficie de que tiene delante pulsando. Aquí se muestra el raycasting, la instanciación de objetos, la importación de modelos 3D y el sistema de animación.

2. En la siguiente pantalla, se mostrará un LÉAME del proyecto. [Opcional] Para probar la plantilla antes de clonarla, haz clic en el botón Launch y escanea el código QR con tu teléfono.

3. Haga clic en el botón Clonar proyecto para continuar. El proyecto de ejemplo se clonará en su espacio de trabajo y se abrirá el Editor de Nube.

Simulador

1. El simulador le permite probar y ver los cambios del proyecto en diferentes tamaños de pantalla de dispositivos y simular escenas del mundo real sin necesidad de salir del Editor Cloud. El simulador funciona mediante , que ejecuta el motor de realidad aumentada 8th Wall en tiempo real sobre la colección incluida de secuencias de realidad aumentada pregrabadas . Puede acceder al Simulador utilizando el botón Vista Previa situado en la parte superior de la ventana del Editor de Nubes y seleccionar la opción Simulador. Puede abrir tantas instancias del Simulador como desee. le permite probar los cambios del proyecto en una amplia gama de escenarios. Nota: Ciertas características de AR como Sky Effects, VPS, Custom Image Targets, y Inline AR no pueden ser simuladas en este momento .

2. Puede simular su experiencia a través de una gama de diferentes secuencias de RA que le permiten probar los efectos de cara , seguimiento de manos, efectos de mundo, escala absoluta, RA compartida y mucho más. Una secuencia de RA incluye tanto los datos de grabación de vídeo como los datos registrados por el giroscopio o la orientación del dispositivo para que pueda simular la RA de . Utilice el menú de selección de secuencia de la parte inferior izquierda para cambiar la secuencia AR. Puede utilizar el carrusel para cambiar entre las opciones de la categoría de secuencia. La pausa de la secuencia sólo detiene el vídeo, permitiéndole probar los cambios en el mismo fotograma. Arrastra los tiradores de reproducción para establecer puntos de bucle de entrada/salida.

3. Live View sigue la misma lógica que la configuración XR8 de su proyecto, lo que le permite simular su proyecto utilizando la alimentación de su escritorio en lugar de una secuencia AR pregrabada. Por ejemplo, si su proyecto utiliza Efectos Faciales y tiene el Editor en la Nube abierto en el escritorio, abrirá su cámara de escritorio pero si está desarrollando una experiencia de Seguimiento del Mundo y "allowedDevices: any" está habilitado en su proyecto, debería ver el "modo escritorio" de Metaversal Deployment. Nota: Live View en el Simulador puede pedirle que habilite los permisos de cámara, micrófono o ubicación dependiendo de qué esté habilitado en su proyecto. Haga clic en Permitir para ver su experiencia en Live View.

4. Su proyecto puede tener un aspecto diferente en distintos dispositivos debido a las diferencias en el tamaño de la ventana gráfica de la web móvil . O puede que quieras ver tu proyecto tanto en modo horizontal como vertical. En la parte superior izquierda de del simulador, puede elegir entre un conjunto de tamaños de vista de dispositivo comunes, cambiar la orientación de o utilizar el modo de respuesta para ajustarse a un tamaño personalizado. También puede hacer doble clic en los bordes del panel Simulador para ajustar automáticamente el Simulador a la anchura del dispositivo seleccionado viewport. Nota: Las dimensiones se presentan en píxeles lógicos CSS (dimensiones de la ventana gráfica), no en píxeles del dispositivo físico . Al seleccionar un dispositivo en el selector, sólo se actualizarán las dimensiones de la ventana gráfica , no el agente de usuario del cliente.

5. El Simulador dispone de una serie de controles de reproducción y funciones prácticas como:

• Barra de reproducción, scrubber y tiradores de entrada/salida: Le permiten establecer puntos de bucle, lo que le proporciona un control granular sobre la secuencia seleccionada.
• Botón de recentrado (abajo a la derecha): Llama a XR8.XrController.recenter(), que recentra la alimentación de la cámara a su origen. NOTA: También se llama a Recenter cada vez que la secuencia hace un bucle y cada vez que se selecciona una nueva secuencia.
• Botón Actualizar (arriba a la derecha): Actualiza la página, conservando el contenido almacenado en caché. Si mantienes pulsada la tecla SHIFT y haces clic en el botón de actualización de , se realizará una recarga completa, ignorando cualquier contenido almacenado en caché.

Vista previa en directo

1. En la parte superior de la ventana del Editor de nubes, haga clic en el botón Previsualizar.

2. Escanee el código QR con su dispositivo móvil para abrir un navegador web y ver una vista previa en directo del proyecto WebAR.

(/images/editor-preview.jpg)

3. Cuando se cargue la página, se te pedirá acceso a los sensores de movimiento y orientación (en algunos dispositivos ) y a la cámara (todos los dispositivos). Haga clic en Permitir para todas las solicitudes de permiso.
   le llevará a la URL de desarrollo privado de este proyecto.

Nota: El código QR "Vista previa" que se muestra en el Editor de Nube es un **código QR temporal de un solo uso ** destinado únicamente a ser utilizado por el desarrollador mientras trabaja activamente en el Editor de Nube. Este código QR te lleva a una URL privada, de desarrollo, y no es accesible por otros. Para compartir su trabajo con , consulte la sección Publicar su proyecto.

4. Cuando se cargue la vista previa de WebAR, toca en la superficie que tengas delante para generar modelos 3D.

5. Resultado:

Ahorrar, construir y aterrizar

En este punto, usted tiene un proyecto Web AR completamente operativo y lo ha previsualizado en un dispositivo móvil. A continuación, realice un cambio de código muy pequeño para ilustrar cómo actualizar el proyecto, previsualizar el nuevo código, y aterrizar los cambios en el control de código fuente.

1. Dentro de body.html del proyecto Cloud Editor, haga un pequeño cambio de texto en el promptText. Para el ejemplo de , simplemente cambie el texto de "Toque para colocar el modelo" a "Toque para comenzar".

2. Haz clic en Save + Build para guardar tu trabajo e iniciar una nueva compilación en la nube de tu proyecto.

3. Si el navegador del móvil sigue abierto después de escanear el código QR Preview en el paso 2, el teléfono se recargará automáticamente una vez finalizada la compilación. Si la página del navegador móvil ya no está abierta, vuelva a escanear el código QR de vista previa para previsualizar las actualizaciones del proyecto.

4. Una vez que esté satisfecho con los cambios, introduzca el código actualizado en el control de código fuente integrado del Editor en nube. En la parte superior derecha de la ventana del Editor de nubes, haga clic en Tierra. El botón será verde, lo que indica que hay cambios en el proyecto que aún no se han aterrizado en la fuente control:

5. En el campo Mensaje introduzca un breve mensaje que describa los cambios realizados y, a continuación, haga clic en Aterrizar:

LandReview

Publique su proyecto

El paso final es publicar el código actualizado y aterrizado de su proyecto utilizando el alojamiento incorporado de 8th Wall en . Esto permite que el proyecto pueda ser visto públicamente por cualquier persona en Internet.

Nota: Los proyectos comerciales requieren licencias comerciales adicionales cuando se lanzan. Consulte https://www.8thwall.com/pricing para obtener más información.

Todos los proyectos deben mostrar el distintivo Powered by 8th Wall en la página de carga. Se incluye por defecto en el Loading Module y no puede eliminarse. Consulte aquí para obtener instrucciones sobre la personalización de la pantalla de carga.

1. En la parte superior derecha de la ventana del Editor de nubes, haga clic en Publicar.

2. En el modal Publicar Proyecto, verá una lista de commits (uno por cada versión de código que haya aterrizado en el control de código fuente) así como las URLs de Desarrollo, Staging y Pública para el proyecto . Seleccione el botón de opción superior de la columna Público para desplegar la versión más reciente de en la URL pública del proyecto y, a continuación, haga clic en Publicar:

3. Complete el proceso de publicación asignando a su proyecto un título, una descripción y una imagen de portada. Esta información de aparecerá en tu página de proyecto destacado y como vista previa cuando lo compartas en plataformas sociales y aplicaciones de mensajería.

Ver el proyecto público

1. Vuelva al Panel de control del proyecto en la navegación de la izquierda. En la sección QR 8.code, se mostrará la URL pública del proyecto junto con un enlace corto a 8th.io y el código QR asociado.

2. Escanee el código QR con su dispositivo móvil para ver la experiencia AR de la Web Pública.