Advertencia

Este documento está desactualizado. A tener en Cuenta: se menciona contenido alojado en HiFi, se menciona Oculus Quest aunque todavía no es compatible

Tutorial: Crear un BoomBox

Puedes crear un reproductor de música que reproduzca todas tus pistas favoritas y también sincronizar el audio para otros usuarios de tu dominio.

Prerrequisitos

• Crear Nuevas Entidades

• Cambiar el Aspecto de las Entidades

• Definir el Comportamiento de una Entidad

• Comienza con la Codificación

• Scripts de Entidad de Cliente

• Escribe Tus Propios Scripts

Crear una Entidad de Boombox

Tu Boombox consitirá en:

• Un modelo base de boombox: Una entidad de modelo que ejecuta un script de entidad del servidor.

• Un botón de "ON/OFF": Una entidad secundaria que ejecuta un script de entidad de cliente para permitir que los usuarios interactúen con el boombox.

El boombox comenzará a reproducir cuando los usuarios hagan click o activen el botón ON/OFF.

Para crear un boombox:

1. En la interfaz, trae tu HUD o tableta y ve a Crear.

2. Usa la aplicación Crear para importar la entidad de modelo 3D. Puedes crear tu propio modelo 3D para la base del boombox o usar uno que hemos creado.

3. Siguiente paso, crea el botón de entidad con el que los usuarios interactuarán. Puede ser una entidad de cubo.

4. Ve a la pestaña "Properties" para la entidad de botón. Cambia la propiedad "Shape" de "Box" a "Octagon" o "Cylinder" dependiendo de tus preferencias estéticas.

5. Desplázate hacia abajo hasta la sección "Behavior" y asegúrate de que "Grabbable" y "Triggerable" estén marcados.

6. Escala, rota y mueve tu botón para alinearlo a la posición deseada del modelo.

7. Con la aplicación Crear abierta, selecciona el modelo 3D de tu boombox. Ve a la pesataña "Properties" y copia el "ID" en "Name".

8. Selecciona la entidad de cubo que creaste, ve a la pestaña de "Properties" y pega el ID de entidad copiado en el campo "Parent". Esto hace que tu entidad de modelo de boombox sea el padre de tú entidad de botón.

Agrega Datos de Usuario a Tu Boombox

La propiedad "User Data" (Datos de usuario) es un objeto JSON que se puede personalizar para adaptarse a las necesidades de un script. User Data también ayuda a sincronizar y mantener las mismas variables para todos los usuarios de un dominio. En este caso, User Data contendrá:

• Lista de Canciones: Todas las URLs de las canciones que quieras reproducir en tu boombox. También puedes usar archivos MP3 o WAV almacenados en tu máquina local.

• Información sobre el volumen del reproductor de Música: puedes cambiar esto según tus preferencias.

Nota

User Data puede almacenar información sólo hasta un cierto tamaño. Recomendamos mantener el límite de 10 canciones. Soportamos los siguientes formatos:

• WAV: WAV sin comprimir de 16 bits a cualquier frecuencia de muestreo con 1 (mono), 2 (stereo) o 4 (ambisónico) canales.

• MP3: Mono o estéreo, a cualquier frecuencia de muestreo.

• RAW: 48 kHz de 16 bits mono o estéreo. El nombre de archivo debe incluir ".stereo" para ser interpretado como estéreo.

Para agregar Datos de Usuario (User Data) a tu boombox:

1. En la interfaz, trae tu HUD o tableta y ve a Crear.

2. Selecciona la entidad de tu boombox, no el botón.

3. Ve a la pestaña de "Properties". Desplázate hacia abajo a "User Data" y pega la siguiente información JSON. Estos datos JSON consisten de 10 canciones y la configuración de volumen. Puede usar tus propias canciones y cambiar la configuración del volumen:

   {
     "grabbableKey": {
       "grabbable": false
     },
     "music": {
       "All That": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-allthat.mp3",
       "Country Boy": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-countryboy.mp3",
       "Cute": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-cute.mp3",
       "Happiness": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-happiness.mp3",
       "Happy Rock": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-happyrock.mp3",
       "High Octane": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-highoctane.mp3",
       "Hip Jazz": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-hipjazz.mp3",
       "Pop Dance": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-popdance.mp3",
       "Sci-Fi": "https://hifi-content.s3-us-west-1.amazonaws.com/liv/dev/BoomBox/music/bensound-scifi.mp3",
       "Sample": "sample.com"
     },
     "volume": 0.7
   }
   

Escribir Scripts de Reproductores de Música

El sistema boombox contiene los siguientes scripts y archivos que permiten al usuario controlar la reproducción de audio:

Archivo	Descripción	URL
Script del Servidor de Entidades	Este script del servidor maneja el estado del reproductor de música y reproduce el audio para que esté sincronizado con todos los usuarios. Las acciones y los comportamientos de las entidades que deben estar en el mismo estado para todos los usuarios deben ejecutarse en el servidor. EL script del cliente que se ejecuta en el botón transmite las solicitudes de cada función a las que se puede llamar de forma remota para que se ejecuten en el servidor, y el script del servidor maneja la reproducción de audio en consecuencia.	boomBoxEntityServerScript.js
Script de Entidad de Cliente	Este script de cliente maneja las interacciones entre usuarios y muestra la interfaz de usuario (UI) para controlar el boombox a través de una página HTML utilizando la interfaz de script de la tableta. Escucha los clicks del mouse y los activadores del controlador, muestra los controles y sirve como un mecanismo de retransmisión entre la página HTML y el script del servidor de entidad del boombox.	boomBoxEntityScript.js
HTML y CSS	La página HTML muestra la interfaz de usuario del controlador para boombox a través de la interfaz de script de la tableta y está diseñada con CSS. Utiliza EventBridge para enviar la entrada del usuario desde los elementos HTML al script de entidad boombox, que a su vez llama a los métodos del servidor de entidad dependiendo del contenido del mensaje EventBridge.	boomBoxController.html styles.css

Puedes utilizar las versiones existentes de nuestros scripts, modificarlos o escribir tus propios scripts.

Si estás utilizando las versiones existentes de nuestros scripts:

1. En la interfaz, trae tu HUD o tableta y ve a Crear.

2. Selecciona tu modelo de boombox y ve a la pestaña "Properties".

3. Desplázate hacia abajo hasta la sección de "Behavior" (comportamiento) y pega la URL del script del servidor de entidad dentro del campo "Server Script".

4. Selecciona tu botón de entidad y ve a la pestaña "Properties".

5. Desplázate hacia abajo hasta la sección "Behavior" y pega la URL del script de la entidad cliente dentro del campo "Script".

Si estás escribiendo tus propios scripts o modificando algunos que ya existen, y quieres alojarlos en el "Asset Browser" (Explorador de Activos):

1. En tu computadora, crea una carpeta llamada "BoomBox". Guardarás tus archivos aquí con la siguiente estructura.

2. Guarda el script del servidor de entidad, script de entidad cliente,`archivo HTML <https://raw.githubusercontent.com/misslivirose/happy-boombox/master/app/boomBoxController.html>`_, y archivo CSS en la carpeta de tu computadora.

3. En la interfaz, trae tu HUD o tableta y ve a Crear.

4. En la aplicación Create, haz click en "Open This Domain's Asset Server" para ver el Asset Browser.

5. Crea el mismo directorio de boombox en tu "Asset Browser" y sube tus archivos.

6. Utiliza la aplicación Create y selecciona tu modelo boombox y ve a la pestaña de "Properties".

7. Desplázate hacia abajo hasta la sección de "Behavior" y pega la URL del script del servidor de entidad dentro del campo "Server Script".

8. Utiliza la aplicación Create y selecciona tu botón de entidad y ve a la pestaña de "Properties".

9. Desplázate hacia abajo hasta la sección de "Behavior" y pega la URL del script de entidad cliente dentro del campo "Script".

Nota

Algunas notas adicionales:

• Los scripts vinculados anteriormente usan rutas relativas para vincularse entre sí, por lo que es importante preservar la estructura de carpetas proporcionada. Si quieres mover las cosas, asegúrate de actualizar también los enlaces en los propios scripts para hacer referencia a la nueva ubicación del archivo.

• Si quieres hacer modificaciones a tus archivos de script, necesitarás re-subirlos al asset browser. Resubir todo el contenido y resubir tus scripts del servidor de entidad para ver que los cambios surtan efectos después de modificar los archivos.

• Los scripts del servidor de entidad no tienen acceso por pulsación del mouse o eventos del controlador, ya que todos se manejan desde el lado del cliente.

• Las páginas HTML no se mostrarán en el Oculus Quest, entonces solamente los usuarios de escritorio podrán interactuar con los controles del boombox.

Ver también

• Crear Nuevas Entidades

• Cambiar el Aspecto de las Entidades

• Definir el Comportamiento de una Entidad

• Comienza con la Codificación

• Scripts de Entidad de Cliente

• Escribe Tus Propios Scripts

• Interactuar con Tu Entorno