Los juegos de realidad virtual siempre han sido una admiraci贸n para nosotros. Este es un tipo de magia en un caparaz贸n digital, el efecto total de la inmersi贸n en otro mundo. En todas las conferencias, los proyectos de realidad virtual reciben la mayor atenci贸n, stands a gran escala, cientos de espectadores esperando en la cola para sumergirse en un universo reci茅n creado. Dado que nuestra compa帽铆a no se trata principalmente de entretenimiento, sino m谩s bien de evoluci贸n y enfoques progresivos, examinamos en detalle la cuesti贸n de c贸mo blockchain puede ser 煤til en un g茅nero de desarrollo de juegos tan joven como la realidad virtual.
La respuesta lleg贸 de inmediato: contratos inteligentes y el 煤ltimo est谩ndar de token de red Ethereum ERC1155, dise帽ado espec铆ficamente para crear activos de juegos / digitales. ERC1155 es un token que combina las mejores caracter铆sticas de los populares ERC20 y ERC721 (los detalles t茅cnicos se pueden encontrar en el archivo L茅ame del repositorio de Github ). Imagine una situaci贸n cl谩sica: noque贸 un elemento o aspecto raro y costoso. 驴C贸mo venderlo para que el comprador no lo enga帽e o usted mismo no tenga la capacidad de tomar libremente el dinero de otras personas sin regalar el art铆culo? La respuesta correcta es contratos inteligentes. Y el token ERC1155 es exactamente lo que necesita para implementar dicha funcionalidad. Un elemento puede tener sus propias caracter铆sticas (en forma de fuerza, da帽o, durabilidad, protecci贸n, da帽o adicional (caracter铆stica del token ERC721) y su valor (caracter铆stico del token ERC20) en un caparaz贸n. 驴No suena inspirador? Todos los juegos pueden volverse seguros y f谩ciles de almacenar, transferir y vender sus activos digitales. Intentemos resolver este problema usando el ejemplo de un juguete que concebimos.
Se nos ocurri贸 el concepto con bastante rapidez: un an谩logo del popular juego de cartas "Munchkin", transferido al universo de realidad virtual, con contratos inteligentes para intercambiar cualquier art铆culo, armadura y arma que se elimin贸 durante el juego. La elecci贸n de la tecnolog铆a de implementaci贸n para nuestros desarrolladores independientes no fue f谩cil, pero queremos contarte m谩s sobre esta experiencia.
Reaccionar 360
Como la mayor铆a del equipo ten铆a una amplia experiencia en desarrollo en React, hab铆a un deseo de probar React-360 para resolver la tarea. La descripci贸n de la herramienta parec铆a bastante funcional, por lo que tomamos una decisi贸n en su direcci贸n.
Instalaci贸n y descripci贸n
La instalaci贸n de React-360 comienza con la instalaci贸n de su CLI con npm, que le ayuda a inicializar, iniciar y construir un proyecto de manera r谩pida y conveniente desde la l铆nea de comandos.
Despu茅s de la inicializaci贸n del proyecto, recibimos una plantilla de proyecto lista para usar en la que los dos archivos principales son client.js e index.js, as铆 como la carpeta static_assets, donde se almacenan todos los archivos aset para renderizado, index.html y otros archivos de configuraci贸n.
Renderizado
El primer archivo (client.js) contiene el c贸digo de representaci贸n y funciona con la clase principal React360. React360 tiene dos tipos de objetos de representaci贸n: renderToLocation, que es responsable de representar un objeto 3D, y renderToSurface, que es responsable de representar un objeto 2D. Tambi茅n definimos un controlador para la c谩mara, que describe su comportamiento: en nuestro caso, se describe el movimiento de la c谩mara (como el personaje principal) presionando ciertos botones del teclado. Luego establecemos el fondo predeterminado para todo el proyecto y en la 煤ltima l铆nea escribimos React360 en el objeto de la ventana (que es un objeto global para aplicaciones de navegador).
Posteriormente, el m茅todo init de React360 se llama en el archivo index.html de la siguiente manera:
En el segundo archivo (index.js), los componentes se registran en la aplicaci贸n, para su posterior uso para la representaci贸n en el archivo client.js.
Entonces, la representaci贸n de flujo del componente (objeto) sale as铆:
a) Creaci贸n en un archivo separado;
b) Registro en index.js;
c) Representaci贸n en client.js.
Posicionamiento
El siguiente momento es posicionar un objeto en un plano 3D. En React-360, al posicionar, como en el renderizado, hay diferencias entre los objetos 3D y 2D. Los objetos 3D se pueden colocar de dos maneras.
- V铆a ubicaci贸n al renderizar.
- Via Transformar en el objeto mismo.
Elegimos Transformar en la ubicaci贸n predeterminada, como aconseja el sitio web oficial React-360. Traducir es responsable del posicionamiento en el plano 3D.
Los objetos 2D se colocan usando el sistema flexible, como en React Native, que en nuestro caso fue bastante inconveniente:
Para colocar el bot贸n a la derecha de la c谩mara, ten铆a que crear una Vista, como en React Native, y establecer su ancho correspondiente a la distancia desde el punto m谩s a la izquierda de la pantalla hasta el lugar donde deber铆a estar el objeto, y la altura correspondiente a la distancia desde el punto superior de la pantalla al 谩rea, donde debe estar el objeto. Tambi茅n era necesario establecer ciertos estilos para que el contenido interno se ubicara en el punto inferior derecho de la Vista. Como resultado, todo parece engorroso e inconveniente, es m谩s f谩cil usar el mismo traductor para colocar dichos objetos, present谩ndolos como objetos 3D con 0 profundidad.
Importar objetos
El siguiente elemento es la importaci贸n de objetos 3D en React-360. Y aqu铆, a primera vista, todo es simple y claro. Hay un componente de modelo est谩ndar que tiene una fuente de accesorios que acepta un objeto JS de la ruta a los archivos .obj (el archivo del objeto mismo) y .mtl (el archivo material de este objeto):
Pero incluso aqu铆 hubo trampas interesantes. La conclusi贸n fue que el archivo .mtl tiene una textura de mapa por defecto en formato .tga y la ruta prescrita en el disco de la persona que lo desarroll贸. No solo tuvimos que cambiar la ruta de los archivos manualmente, sino tambi茅n cambiarlos a .png, ya que los archivos con formato .tga no se representaron en el navegador. El formato .png nos permiti贸 renderizar texturas correctamente.
Iluminaci贸n
Como el sistema de iluminaci贸n no se describi贸 en la documentaci贸n, tuve que ir al c贸digo fuente de react-360 y encontrar algo all铆 con respecto a Lights, y luego ver ejemplos de qui茅n estaba haciendo qu茅 y c贸mo trabajar con este zool贸gico. Por prueba y error, lo descubrimos, lo aplicamos a los modelos AmbientLight, SpotLight y PointLight. Su posici贸n es la misma que la de los objetos 3D, pero tambi茅n hay un 谩ngulo:
La luz no se aplicaba al objeto, pero no nos retiramos, y, despu茅s de una larga b煤squeda y de recorrer varios problemas en el repositorio react-360, nos encontramos con la necesidad de encender los accesorios, y solo despu茅s de eso la luz comenz贸 a actuar sobre el objeto.
Movimiento
Hemos tomado la c谩mara principal como el jugador principal con el que llevamos a cabo movimientos y acciones. Para hacer esto, escribieron Controller para la c谩mara, donde inicializaron la funci贸n principal de la interfaz:
que transmite la posici贸n actual de la c谩mara y su rotaci贸n. Puede trabajar con ellos en la c谩mara para cambiar de acuerdo con alg煤n evento, presionamos los botones WASD como tal evento (como de costumbre), luego quisimos reemplazarlos presionando el bot贸n y movi茅ndonos a la coordenada en la que se presion贸 el bot贸n, para que luego reempl谩celo con el controlador VR. Para un dulce, establecieron la velocidad de movimiento y la distancia con la que trabajaron. Obtuvimos un movimiento con contracciones y una falta total de f铆sica: pasamos por texturas, salimos de l铆mites, etc. En la documentaci贸n, el f铆sico no se describe a partir de la palabra "en general" (y, en principio, uno similar no es "amigable para el juego" en esta etapa de la inmersi贸n se vuelve familiar).
Conclusi贸n
Aunque React-360 funciona con Three.js y WebGL, es completamente inadecuado para resolver tales problemas; adem谩s, probablemente no fue dise帽ado para desarrolladores de juegos. React-360 hace un excelente trabajo con presentaciones en 3D, recorridos virtuales de objetos, visualizaci贸n de panoramas, etc.
Pero incluso si se compromete a hacer tales cosas en esta pila tecnol贸gica, encontrar谩 dificultades en forma de documentaci贸n deficiente, lo que lo obligar谩 a pasar horas resolviendo una tarea peque帽a y aparentemente simple.
JS, React, JSX, ( ), , , React, React Native. - .
Unidad
Despu茅s de todo el tormento, decidimos usar la segunda herramienta dentro de nuestras competencias. Esta vez, la elecci贸n recay贸 en Unity, ya que el equipo tiene desarrolladores de C #.
Instalaci贸n y descripci贸n
La instalaci贸n es bastante simple: descarga banal y desempaqueta el kit de distribuci贸n desde el sitio oficial. Hay un "pero": Unity hasta ahora solo funciona en Windows y Mac (desde la versi贸n 10). Por lo tanto, tuvimos que transferir de Ubuntu a Mac.
Dado que Unity es un motor de juego que incluye una interfaz de usuario buena y conveniente, el proyecto se crea con un simple clic en el bot贸n, despu茅s de lo cual obtienes una plantilla completa de los archivos necesarios. B谩sicamente, todo se encuentra en la carpeta Activos.
Renderizado
Como el motor en s铆 mismo est谩 renderizando, no necesita registrar nada.
Posicionamiento
El posicionamiento es tan f谩cil como el renderizado. Es suficiente arrastrar el objeto al campo y trabajar con los controles deslizantes en la forma adecuada o en una GUI conveniente. Al igual que con el renderizado, la situaci贸n es tal que no era necesario registrar nada.
Importar objetos
Un simple Drag'n'Drop, inicialmente dentro del Asset en la carpeta apropiada, y luego una operaci贸n similar en el campo GUI. No hay codigo.
Iluminaci贸n
Trabajar con iluminaci贸n es tan simple como con los p谩rrafos anteriores. La creaci贸n de una nueva iluminaci贸n se lleva a cabo en la pesta帽a correspondiente del proyecto. El sistema tambi茅n se describe con suficiente detalle en la documentaci贸n.
Movimiento
Este es el primer punto donde necesita codificar algo. A saber, el comportamiento del jugador y la c谩mara mientras se mueve. Para el sistema de movimiento, utilizamos el sistema de NavMesh y sus Agentes. Describimos el 谩rea donde puede caminar en la GUI, identificamos la c谩mara y el modelo como Agente en el Sistema de navegaci贸n. Luego creamos un script, esto se hace de manera muy simple en la GUI:
- El objeto est谩 seleccionado;
- Se presiona el bot贸n Agregar componentes;
- Selecciona Nueva secuencia de comandos;
- El nombre esta escrito.
Y listo: se crea una plantilla de script est谩ndar en la carpeta ra铆z. Solo necesit谩bamos transferirlo a la carpeta Scripts y abrirlo (por defecto se abre en VS, lo cual es muy conveniente). La plantilla de script est谩ndar tiene una interfaz intuitiva en forma de dos funciones:
- Inicio: se utiliza al configurar componentes;
- Actualizaci贸n: llamada en cada fotograma.
En la funci贸n Inicio, bloqueamos el cursor en el centro de la pantalla y registramos nuestro componente en la propiedad correspondiente de la clase, y tambi茅n declaramos par谩metros predeterminados para las propiedades restantes.
En la funci贸n Actualizar, escribimos la l贸gica de rotaci贸n del objeto detr谩s del cursor, as铆 como el movimiento del objeto haciendo clic:
Conclusi贸n
Adem谩s de la conclusi贸n bastante obvia sobre la conveniencia de Unity, me gustar铆a se帽alar que para trabajar en Unity no puedes ser un programador en absoluto. Unity tiene una gran cantidad de tutoriales para principiantes, muy simple y directo, as铆 como documentaci贸n extensa y de alta calidad y una comunidad viva y activa.