Cómo crear un juego de realidad virtual multijugador en tiempo real (Parte 1)

 

 

 

  • Planificación y proceso del sistema de diseño, con Nathan Curtis
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. Preparando la escena
      1. 1. Vayamos con una escena básica
      2. 2. Añade atmósfera
    2. Creando los orbes
      1. 3. Crea un orbe de baja poli
      2. 4. Ilumina el orbe
      3. 5. Agregar anillos
    3. Hacer que los orbes sean interactivos
      1. 6. Agregar un cursor
      2. 7. Agregar estados del orbe
    4. Conclusión

    La realidad virtual es un nuevo medio inmersivo para explorar contenido, ya sea una película ( Life of Pi ), un juego ( Beat Saber ) o una experiencia social (como se muestra en Ready Player One ). A pesar de su novedad, la realidad virtual no requiere un conjunto de herramientas drásticamente diferente para diseñar: las mismas herramientas que utilizamos para el desarrollo de juegos web, el modelado 3D y otras siguen siendo aplicables. Este tutorial aprovecha su familiaridad con el desarrollo web para comenzar con el desarrollo de realidad virtual.

     

    En esta serie de tutoriales, crearemos un juego de realidad virtual multijugador basado en la web en el que los jugadores deberán colaborar para resolver un rompecabezas. Usaremos A-Frame para modelado de realidad virtual, MirrorVR para sincronización en tiempo real entre dispositivos y A-Frame Low Poly para estética low-poly. Al final de este tutorial, tendrá una demostración en línea completamente funcional que cualquiera puede jugar.

    Cada par de jugadores recibe un anillo de orbes. El objetivo es "encender" todos los orbes, donde un orbe está "encendido" si está elevado y brillante. Un orbe está "apagado" si está más bajo y oscuro. Sin embargo, ciertos orbes "dominantes" afectan a sus vecinos: si cambia de estado, sus vecinos también cambian de estado. Sólo el jugador 2 puede controlar los orbes dominantes, mientras que sólo el jugador 1 puede controlar los orbes no dominantes. Esto obliga a ambos jugadores a colaborar para resolver el rompecabezas. En esta primera parte del tutorial, construiremos el entorno y agregaremos los elementos de diseño para nuestro juego de realidad virtual.

     

    Los siete pasos de este tutorial se agrupan en tres secciones:

    1. Configurar la escena (pasos 1 y 2)
    2. Creando los orbes (pasos 3 a 5)
    3. Hacer que los orbes sean interactivos (pasos 6 y 7)

    Esta primera parte concluirá con un orbe en el que se puede hacer clic y que se enciende y apaga (como se muestra a continuación). Utilizará A-Frame VR y varias extensiones A-Frame.

    Preparando la escena

    1. Vayamos con una escena básica

    Para comenzar, echemos un vistazo a cómo podemos configurar una escena simple con un terreno:

    Creando una escena simple ( vista previa grande )

    Las primeras tres instrucciones a continuación están extraídas de mi artículo anterior . Comenzará configurando un sitio web con una única página HTML estática. Esto le permite codificar desde su escritorio e implementar automáticamente en la web. Luego, el sitio web implementado se puede cargar en su teléfono móvil y colocarlo dentro de un visor de realidad virtual. Alternativamente, el sitio web implementado se puede cargar mediante un visor de realidad virtual independiente.

    Comience navegando a glitch.com . Luego, haz lo siguiente:

    1. Haga clic en "Nuevo proyecto" en la parte superior derecha,
    2. Haga clic en "hola-página web" en el menú desplegable,
    3. A continuación, haga clic en index.html en la barra lateral izquierda. Nos referiremos a esto como su "editor".

    Ahora debería ver la siguiente pantalla de error con un archivo HTML predeterminado.

    Proyecto Glitch: el archivo index.html ( vista previa grande )

    Al igual que con el tutorial vinculado anteriormente, comience eliminando todo el código existente en el archivo index.html actual . Luego, escriba lo siguiente para un proyecto webVR básico, utilizando A-Frame VR. Esto crea una escena vacía utilizando la iluminación y la cámara predeterminadas de A-Frame.

    !DOCTYPE htmlhtml head titleLightful/title script src="https://aframe.io/releases/0.8.0/aframe.min.js"/script /head body a-scene /a-scene /body/html

    Levante la cámara a la altura de estar de pie. Según las recomendaciones de A-Frame VR ( problema de Github ), envuelva la cámara con una nueva entidad y mueva la entidad principal en lugar de la cámara directamente. Entre las a-sceneetiquetas de las líneas 8 y 9, agregue lo siguiente.

    !-- Camera! --a-entity position="0 3 0" a-camera wasd-controls look-controls/a-camera/a-entity

    A continuación, agregue un cuadro grande para indicar el terreno, usando a-box. Coloque esto directamente debajo de su cámara de la instrucción anterior.

     

    !-- Action! --a-box shadow depth="75" position="0 -1 0" color="#222"/a-box

    Su archivo index.html ahora debería coincidir exactamente con lo siguiente. Puede encontrar el código fuente completo aquí, en Github .

    html head titleLightful/title script src="https://aframe.io/releases/0.8.0/aframe.min.js"/script /head body a-scene !-- Camera! -- a-entity position="0 3 0" a-camera wasd-controls look-controls/a-camera /a-entity !-- Action! -- a-box shadow depth="75" position="0 -1 0" color="#222"/a-box /a-scene /body/html

    Esto concluye la configuración. A continuación, personalizaremos la iluminación para crear una atmósfera más misteriosa.

    2. Añade atmósfera

    En este paso, configuraremos la niebla y la iluminación personalizada.

    Una vista previa de una escena simple con un ambiente oscuro ( vista previa grande )

    Agregue una niebla, que oscurecerá los objetos lejanos para nosotros. Modifique la a-sceneetiqueta en la línea 8. Aquí agregaremos una niebla oscura que oscurece rápidamente los bordes del suelo, dando el efecto de un horizonte distante.

    a-scene fog="type: linear; color: #111; near:10; far:15"/a-scene

    El gris oscuro #111se desvanece linealmente desde una distancia de 10 a una distancia de 15. Todos los objetos a más de 15 unidades de distancia están completamente oscurecidos y todos los objetos a menos de 10 unidades de distancia son completamente visibles. Cualquier objeto intermedio queda parcialmente oscurecido.

    Agrega una luz ambiental para iluminar los objetos del juego y una luz unidireccional para acentuar las superficies reflectantes que agregarás más adelante. Colóquelo directamente después de la a-sceneetiqueta que modificó en la instrucción anterior.

    !-- Lights! --a-light type="directional" castshadow="true" intensity="0.5" color="#FFF" position="2 5 0"/a-lighta-light intensity="0.1" type="ambient" position="1 1 1" color="#FFF"/a-light

    Directamente debajo de las luces de la instrucción anterior, agregue un cielo oscuro. Observe que el gris oscuro #111coincide con el de la niebla distante.

    a-sky color="#111"/a-sky

    Con esto concluyen las modificaciones básicas del ambiente y, más ampliamente, la configuración de la escena. Verifique que su código coincida exactamente con el código fuente del Paso 2 en Github. A continuación, agregaremos un orbe de baja poli y comenzaremos a personalizar la estética del orbe.

    Creando los orbes

    3. Crea un orbe de baja poli

    En este paso, crearemos un orbe reflectante giratorio como se muestra a continuación. El orbe se compone de dos esferas estilizadas de baja poli con algunos trucos para sugerir material reflectante.

    Comience importando la biblioteca low-poly en su headetiqueta. Inserte lo siguiente entre las líneas 4 y 5.

    script src="https://cdn.jsdelivr.net/gh/alvinwan/[email protected]/dist/aframe-low-poly.min.js"/script

    Crea un carrusel, un envoltorio y un contenedor de orbes. Contendrá carouselmúltiples orbes, wrappernos permitirá rotar todos los orbes alrededor de un eje central sin rotar cada orbe individualmente y, containercomo su nombre indica, contendrá todos los componentes del orbe.

     

    a-entity a-entity rotation="0 90 0" position="0 0 0" a-entity position="8 3 0" scale="1 1 1" !-- place orb here -- /a-entity /a-entity/a-entity

    Dentro del contenedor del orbe, agrega el orbe en sí: una esfera es ligeramente translúcida y desplazada, y la otra es completamente sólida. Los dos combinados imitan superficies reflectantes. Podcast ingles diario

    a-entity data-id="0" lp-sphere seed="0" shadow max-amplitude="1 1 1" position="-0.5 0 -0.5"/lp-sphere lp-sphere seed="0" shadow max-amplitude="1 1 1" rotation="0 45 45" opacity="0.5" position="-0.5 0 -0.5"/lp-sphere/a-entity

    Finalmente, gire la esfera indefinidamente agregando la siguiente a-animationetiqueta inmediatamente después del lp-sphereinterior de la .orbentidad en la última instrucción.

    a-animation attribute="rotation" repeat="indefinite" from="0 0 0" to="0 360 0" dur="5000"/a-animation

    Su código fuente para los envoltorios del orbe y el orbe en sí debe coincidir exactamente con lo siguiente.

    a-entity a-entity rotation="0 90 0" position="0 0 0" a-entity position="8 3 0" scale="1 1 1" a-entity data-id="0" lp-sphere seed="0" shadow max-amplitude="1 1 1" position="-0.5 0 -0.5"/lp-sphere lp-sphere seed="0" shadow max-amplitude="1 1 1" rotation="0 45 45" opacity="0.5" position="-0.5 0 -0.5"/lp-sphere a-animation attribute="rotation" repeat="indefinite" from="0 0 0" to="0 360 0" dur="5000"/a-animation /a-entity /a-entity /a-entity/a-entity

    Verifique que su código fuente coincida con el código fuente completo del paso 3 en Github. Su vista previa ahora debería coincidir con lo siguiente.

    A continuación, agregaremos más iluminación al orbe para obtener un tono dorado.

    4. Ilumina el orbe

    En este paso agregaremos dos luces, una de color y otra blanca. Esto produce el siguiente efecto.

    Comience agregando luz blanca para iluminar el objeto desde abajo. Usaremos un punto de luz. Directamente antes #orb0pero dentro #container-orb0, agregue el siguiente punto de luz desplazado.

    a-entity position="-2 -1 0" a-light distance="8" type="point" color="#FFF" intensity="0.8"/a-light/a-entity

    En su vista previa, verá lo siguiente.

    De forma predeterminada, las luces no decaen con la distancia. Al agregar distance="8", aseguramos que la luz decaiga completamente con una distancia de 8 unidades, para evitar que el punto de luz ilumine toda la escena. A continuación, añade la luz dorada. Agregue lo siguiente directamente encima de la última luz.

    a-light distance="8" type="point" color="#f90" intensity="1"/a-light

    Verifique que su código coincida exactamente con el código fuente del paso 4 . Su vista previa ahora coincidirá con lo siguiente.

    A continuación, realizarás la modificación estética final del orbe y agregarás anillos giratorios.

    5. Agregar anillos

    En este paso, producirás el orbe final, como se muestra a continuación.

     

    Añade un anillo #container-orb0directamente antes #orb0.

    a-ring color="#fff" material="side:double" position="0 0.5 0" radius-inner="1.9" radius-outer="2" opacity="0.25"/a-ring

    Observe que el anillo en sí no contiene color, ya que el color será imbuido por el punto de luz del paso anterior. Además, material="side:double"es importante ya que, sin él, la parte trasera del anillo no estaría representada; esto significa que el anillo desaparecería durante la mitad de su rotación.

    Sin embargo, la vista previa con sólo el código anterior no se verá diferente. Esto se debe a que el anillo actualmente está perpendicular a la pantalla. Por lo tanto, sólo el “lado” del anillo (que tiene un espesor 0) es visible. Coloque la siguiente animación entre las a-ringetiquetas de la instrucción anterior.

    a-animation attribute="rotation" easing="linear" repeat="indefinite" from="0 0 0" to="0 360 0" dur="8000"/a-animation

    Su vista previa ahora debería coincidir con lo siguiente:

    Crea un número variable de anillos con diferentes ejes de rotación, velocidades y tamaños. Puede utilizar los siguientes anillos de ejemplo. Cualquier anillo nuevo debe colocarse debajo del último a-ring.

    a-ring color="#fff" material="side:double" position="0 0.5 0" radius-inner="2.4" radius-outer="2.5" opacity="0.25" a-animation attribute="rotation" easing="linear" repeat="indefinite" from="0 45 0" to="360 45 0" dur="8000"/a-animation/a-ringa-ring color="#fff" material="side:double" position="0 0.5 0" radius-inner="1.4" radius-outer="1.5" opacity="0.25" a-animation attribute="rotation" easing="linear" repeat="indefinite" from="0 -60 0" to="-360 -60 0" dur="3000"/a-animation/a-ring

    Su vista previa ahora coincidirá con lo siguiente.

    Verifique que su código coincida con el código fuente del paso 5 en Github. Con esto concluye la decoración del orbe. Una vez terminado el orbe, a continuación le agregaremos interactividad. En el siguiente paso, agregaremos específicamente un cursor visible con una animación de clic cuando apunte a objetos en los que se puede hacer clic.

    Hacer que los orbes sean interactivos

    6. Agregar un cursor

    En este paso, agregaremos un cursor blanco que puede activar objetos en los que se puede hacer clic. El cursor se muestra a continuación.

    En su a-cameraetiqueta, agregue la siguiente entidad. El fuseatributo permite a esta entidad la capacidad de activar eventos de clic. El raycasteratributo determina con qué frecuencia y hasta qué punto se deben buscar objetos en los que se puede hacer clic. El objectsatributo acepta un selector para determinar en qué entidades se puede hacer clic. En este caso, clickablese puede hacer clic en todos los objetos de la clase.

    a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.03; radiusOuter: 0.04" material="color: white; shader: flat; opacity: 0.5" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable" !-- Place cursor animation here --/a-entity

    A continuación, agregue animación del cursor y un anillo adicional por motivos estéticos. Coloque lo siguiente dentro del objeto de cursor de entidad de arriba. Esto agrega animación al objeto del cursor para que los clics sean visibles.

     

    a-circle radius="0.01" color="#FFF" opacity="0.5" material="shader: flat"/a-circlea-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"/a-animation

    A continuación, agregue la clickableclase a #orb0para que coincida con lo siguiente.

    a-entity data-id="0"

    Verifique que su código coincida con el código fuente del Paso 6 en Github. En su vista previa, arrastre el cursor fuera de ellos hacia el orbe para ver la animación del clic en acción. Esto se muestra a continuación.

    Tenga en cuenta que el atributo en el que se puede hacer clic se agregó al orbe en sí y no al contenedor del orbe. Esto es para evitar que los anillos se conviertan en objetos en los que se pueda hacer clic. De esta forma, el usuario deberá hacer clic en las esferas que componen el propio orbe.

    En nuestro paso final de esta parte, agregará animación para controlar los estados de encendido y apagado del orbe.

    7. Agregar estados del orbe

    En este paso, animarás el orbe dentro y fuera del estado apagado al hacer clic. Esto se muestra a continuación.

    Para comenzar, encogerás y bajarás el orbe al suelo. Agregue a-animationetiquetas a la #container-orb0derecha después #orb0. Ambas animaciones se activan con un clic y comparten la misma función de aceleración ease-elasticpara un ligero rebote.

    a-animation easing="ease-elastic" begin="click" attribute="scale" from="0.5 0.5 0.5" to="1 1 1" direction="alternate" dur="2000"/a-animationa-animation easing="ease-elastic" begin="click" attribute="position" from="8 0.5 0" to="8 3 0" direction="alternate" dur="2000"/a-animation

    Para enfatizar aún más el estado apagado, eliminaremos el punto de luz dorado cuando el orbe esté apagado. Sin embargo, las luces del orbe se colocan fuera del objeto del orbe. Por lo tanto, el evento de clic no se pasa a las luces cuando se hace clic en el orbe. Para evitar este problema, usaremos algo de Javascript ligero para pasar el evento de clic a la luz. Coloque la siguiente etiqueta de animación en #light-orb0. La luz se activa mediante un switchevento personalizado.

    a-animation begin="switch" attribute="intensity" from="0" to="1" direction="alternate"/a-animation

    A continuación, agregue el siguiente detector de eventos de clic al archivo #container-orb0. Esto transmitirá los clics a las luces del orbe.

    a-entity ...

    Verifique que su código coincida con el código fuente del Paso 7 en Github. Finalmente, abra la vista previa y mueva el cursor dentro y fuera del orbe para alternar entre los estados activado y desactivado. Esto se muestra a continuación.

    Esto concluye la interactividad del orbe. El jugador ahora puede encender y apagar orbes a voluntad, con estados de encendido y apagado que se explican por sí mismos.

    Conclusión

    En este tutorial, creó un orbe simple con estados de encendido y apagado, que se pueden alternar con un clic del cursor compatible con auriculares VR. Con varias técnicas de iluminación y animaciones diferentes, pudiste distinguir entre los dos estados. Con esto concluyen los elementos de diseño de realidad virtual para los orbes. En la siguiente parte del tutorial, llenaremos los orbes dinámicamente, agregaremos mecánicas de juego y configuraremos un protocolo de comunicación entre un par de jugadores.

    (rb, dm, il)Explora más en

    • Realidad virtual
    • Realidad aumentada
    • La interacción del usuario
    • interfaz de usuario
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear un juego de realidad virtual multijugador en tiempo real (Parte 1)

    Cómo crear un juego de realidad virtual multijugador en tiempo real (Parte 1)

    Planificación y proceso del sistema de diseño, con Nathan Curtis Listas de verificación de diseño de interfaz inteligente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-crear-un-juego-de-realidad-virtual-multijugador-en-tiempo-real-parte-1-996-0.jpg

    2024-05-20

     

    Cómo crear un juego de realidad virtual multijugador en tiempo real (Parte 1)
    Cómo crear un juego de realidad virtual multijugador en tiempo real (Parte 1)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20