Guía de inicio rápido

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

Crear una cuenta en 8th Wall

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

• Cree experiencias Web AR y Web VR enriquecidas y juegos Web 3D que se ejecutan directamente en un navegador Web móvil.
• Utiliza nuestras nuevas herramientas visuales y nuestro motor de juego, ahora en beta pública.
• Colaborar con los miembros del equipo y almacenar el código en el control de código de fuente.
• Previsualizar instantáneamente proyectos a medida que los desarrolla.
• Inalámbricamente depura su código en tiempo real con registros de consola en directo desde múltiples dispositivos.
• Publicar los proyectos hospedados en la red global de 8th Wall.
• Gestionar 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 8th Wall y, a continuación, 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.

Crear una nueva área de trabajo

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

2. Introduzca un nombre de área de trabajo. Este valor es solo a efectos de visualización y no afecta a ninguna URL asociada a su espárea 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. Elija algo relevante para el nombre de su espacio de trabajo, como el nombre de su empresa.

IMPORTANTE: Este valor se utilizará como subdominio predeterminado para TODOS los proyectos hospedados en 8th Wall de su cuenta (por ejemplo, mycompany.8thwall.app/project-name). Este valor también se utilizará en la URL de su página de perfil público (por ejemplo, www.8thwall.com/**mycompany**).

No puede cambiar este valor más tarde, ¡así que elija sabiamente!Nota: si quiere conectar dominios personalizados a sus proyectos hospedados en 8th Wall para anular la URL predeterminada de , consulte aquí.

Empezar un nuevo proyecto

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

2. Selecciona el tipo de alojamiento (sólo planes Pro/Enterprise): Decide por adelantado si el proyecto utilizará nuevo Niantic Studio (ahora en beta pública), o el clásico Cloud Editor. Tanto Niantic Studio como Editor están alojados en 8th Wall. También puede optar por el autoalojamiento. Este ajuste no se puede cambiar posteriormente. El autoalojamiento sólo está disponible para los espacios de trabajo Pro/Enterprise de pago.

3. Selecciona 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 del Proyecto Destacado (por ejemplo, www.8thwall.com/mycompany/project-name). No se puede cambiar.

4. Selecciona un tipo de licencia (solo Pro/Empresa)

Tipo de licencia:

• Comercial: Los proyectos comerciales están destinados a un uso comercial. When you’re ready to launch a commercial project so that the world can see it, you will need to purchase a Commercial License. Please refer to the Pricing Page on the website for commercial license options. NOTE: In order to purchase a commercial license, the workspace must first have an active Pro plan.

• Uso como prueba: puede crear un número ilimitado de proyectos de prueba que se puedan ver públicamente y que estén destinados estrictamente a promocionar posibles trabajos. En la pantalla de carga aparecerá la etiqueta "Sólo para uso de demostración". Si en algún momento decide comercializar su proyecto, cambie a "Comercial" en el panel de control del proyecto.

• Aplicación Web: Puede crear un número ilimitado de proyectos propios bajo esta licencia. Los proyectos de aplicaciones web requieren que la pantalla inicial (o splash screen) permanezca encendida y será visible públicamente en 8thwall.com tan pronto como se publique. Esta licencia no permite proyectos creados para trabajos por encargo, ya que requieren una licencia comercial.

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

Clonar proyecto de plantilla

1. Tras crear un proyecto, seleccione una plantilla para clonarla. En esta guía, seleccione "Estructura en A: Frame para Colocar el suelo". Este ejemplo interactivo permite al usuario generar modelos 3D en la superficie en delante de usted pulsando. 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ÉEME del proyecto. [Opcional] Para probar la plantilla antes de clonarla, haga clic en el botón Launch y escanee el código QR con tu teléfono.

3. Pulse el botón Clonar Proyecto para continuar. El proyecto de muestra se clonará en su espacio de trabajo , y se abrirá el Editor de la Nube.

Simulador

1. El simulador le permite probar y ver los cambios del proyecto en diferentes tamaños de viewport del dispositivo y simular escenas del mundo real sin necesidad de salir del editor en la nube. El simulador funciona con la ejecución del motor de RA de 8th Wall en tiempo real sobre la colección incluida de secuencias de RA pregrabadas. Para acceder al simulador, utilice el botón Vista previa situado en la parte superior de la ventana del editor en la nube y seleccione la opción Simulador. Puede abrir tantas instancias del simulador como desee, lo que le permite probar los cambios del proyecto en una amplia gama de escenarios. Nota: Ciertas funciones de RA, como efectos del cielo, VPS, objetivos de imagen personalizados y RA intercalada, no pueden simularse en este momento.

2. Puede simular su experiencia a través de una gama de diferentes secuencias de RA que le permiten probar efectos faciales , 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 video como los datos registrados por el giroscopio o la orientación del dispositivo para que pueda simular la RA. Utilice el menú de selección de secuencia de la parte inferior izquierda para cambiar la secuencia de RA. Puede utilizar el carrusel para cambiar entre las opciones de la categoría de secuencia. La pausa de la secuencia solo detiene el video, permitiéndole probar los cambios en el mismo fotograma. Arrastre los controladores 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 el feed de su computadora en lugar de una secuencia de RA pregrabada. Por ejemplo, si su proyecto utiliza efectos faciales y tiene el editor en la nube abierto en la computadora, abrirá su cámara de escritorio, pero si está desarrollando una experiencia de seguimiento de mundo y "allowedDevices: any" está habilitado en su proyecto, debería ver el "modo escritorio" de la implementación metaversal. 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 viewport de la Web móvil. O tal vez quiera ver su proyecto tanto en modo horizontal como vertical. En la parte superior izquierda del simulador, puede elegir entre un conjunto de tamaños de viewport comunes, cambiar la orientación o utilizar el modo responsivo para ajustarse a un tamaño personalizado. También puede hacer doble clic en los bordes del panel del simulador para ajustar automáticamente el simulador al ancho de viewport del dispositivo seleccionado. Nota: Las dimensiones se presentan en píxeles lógicos CSS (dimensiones de viewport), no en píxeles de dispositivo físico. Al seleccionar un dispositivo en el selector, solo se actualizarán las dimensiones de viewport , no el usuario-agente 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 controladores de entrada/salida: Le permiten establecer puntos de bucle, lo que le proporciona un control detallado sobre la secuencia seleccionada.
• Botón de recentrado (parte inferior derecha): Llama a XR8.XrController.recenter(), que recentra el feed 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 de actualización (parte superior derecha): Actualiza la página y conserva el contenido almacenado en caché. Si mantiene pulsada la tecla SHIFT y hace clic en el botón de actualización, se realizará una recarga completa y se ignorará el contenido almacenado en caché.

Avance en directo

1. En la parte superior de la ventana del editor de la nube, haga clic en el botón Vista previa.

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

3. Cuando se cargue la página, se le pedirá que acceda 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 aparece en el Editor de la nube es un código QR temporal y de un solo uso, destinado únicamente a ser utilizado por el desarrollador mientras trabaja activamente en el Editor de la nube. Este código QR le lleva a una URL privada, de desarrollo, y no es accesible por otros. Para compartir su trabajo con otros , consulte la sección Publicar su proyecto.

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

5. Resultado:

Ahorrar, Construir y Aterrizar

Llegados a este punto, tiene un proyecto de WebAR totalmente operativo y lo ha previsualizado en un dispositivo móvil. A continuación, haga 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 del Editor de la Nube, haga un pequeño cambio de texto en el promptText. Para el ejemplo , simplemente cambie el texto de Tocar para colocar el modelo a Tocar para comenzar.

2. Haga clic en Guardar + Construir para guardar su trabajo e iniciar una nueva construcción en la nube de su proyecto.

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

4. Una vez satisfecho con sus cambios, aterrize el código actualizado en el control de código fuente integrado del Editor de la Nube. En la parte superior derecha de la ventana del Editor de la Nubes, haga clic en Aterrizar. El botón será verde, lo que indica que hay cambios en el proyecto que aún no se han aterrizado en el control de origen:

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

Publicar proyecto

El último paso es publicar en el código actualizado y aterrizado de tu proyecto utilizando el alojamiento integrado de 8th Wall. 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. Consulea https://www.8thwall.com/pricing para 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 módulo de carga `` 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 la Nube, haga clic en Publicar

2. En el modal Publicar proyecto, verá una lista de entregas (una por cada versión de código que haya aterrizado en el control de código fuente), así como las URL de desarrollo, puesta en escena y pública del proyecto. Seleccione el botón de opción superior de la columna Público para desplegar la última/nueva versión del código en la URL pública del proyecto y, a continuación, haz clic en Publicar:

3. Complete el proceso de publicación dando a su proyecto un título, una descripción y una imagen de portada. Esto aparecerá en su página de Proyectos Destacados y como vista previa cuando la comparta 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 8th.io y un código QR asociado.

2. Escanee el código QR con tu dispositivo móvil para ver la experiencia Pública WebAR.