Les jeux VR ont toujours été une admiration pour nous. C'est une sorte de magie dans une coque numérique, le plein effet de l'immersion dans un autre monde. À toutes les conférences, les projets VR reçoivent le plus d'attention, des stands à grande échelle, des centaines de spectateurs faisant la queue pour plonger dans un univers fraîchement créé. Étant donné que notre entreprise ne concerne pas principalement le divertissement, mais plutôt l'évolution et les approches progressives, nous avons examiné en détail la question de savoir comment la blockchain peut être utile dans un genre de développement de jeu aussi jeune que la réalité virtuelle.
La réponse est venue tout de suite: des contrats intelligents et la dernière norme de jeton de réseau Ethereum ERC1155, conçue spécifiquement pour créer des ressources de jeu / numériques. ERC1155 est un jeton qui combine les meilleures fonctionnalités des populaires ERC20 et ERC721 (les détails techniques peuvent être trouvés dans le fichier Lisez-moi du référentiel github ). Imaginez une situation classique - vous avez éliminé un objet ou un skin rare et cher. Comment le vendre pour que vous ne soyez pas trompé par l'acheteur ou que vous-même n'ayez pas pu prendre librement l'argent des autres sans donner l'objet? La bonne réponse est des contrats intelligents. Et le jeton ERC1155 est exactement ce dont vous avez besoin pour implémenter une telle fonctionnalité. Un article peut avoir ses propres caractéristiques - sous la forme de résistance, de dégâts, de durabilité, de protection, de dommages supplémentaires (caractéristique du jeton ERC721) et de sa valeur (caractéristique du jeton ERC20) dans une seule coque - cela ne semble-t-il pas inspirant? Tous les jeux peuvent devenir sûrs et faciles à stocker, transférer et vendre leurs actifs numériques. Essayons de résoudre ce problème en utilisant l'exemple d'un jouet que nous avons conçu.
Nous avons trouvé le concept assez rapidement - un analogue du jeu de cartes populaire «Munchkin», transféré dans l'univers VR, avec des contrats intelligents pour échanger tous les objets, armures et armes qui ont été éliminés pendant le jeu. Le choix de la technologie d'implémentation pour nos développeurs indépendants n'a pas été facile, mais nous voulons vous en dire plus sur cette expérience.
React 360
Étant donné que la plupart de l'équipe avait une vaste expérience de développement sur React, il y avait un désir d'essayer React-360 pour résoudre la tâche. La description de l'outil semblait assez fonctionnelle, nous avons donc fait un choix dans sa direction.
Installation et description
L'installation de React-360 commence par l'installation de sa CLI avec npm, qui vous aide à initialiser, démarrer et créer rapidement et facilement un projet à partir de la ligne de commande.
Après l'initialisation du projet, nous avons reçu un modèle de projet prêt à l'emploi dans lequel les deux fichiers principaux sont client.js et index.js, ainsi que le dossier static_assets, où tous les fichiers aset pour le rendu, index.html et d'autres fichiers de configuration sont stockés.
Rendu
Le premier fichier (client.js) contient le code de rendu et fonctionne avec la classe React360 principale. React360 a deux types d'objets de rendu: renderToLocation, qui est responsable du rendu d'un objet 3D, et renderToSurface, qui est responsable du rendu d'un objet 2D. Nous avons également défini un contrôleur pour la caméra, qui décrit son comportement: dans notre cas, le mouvement de la caméra (en tant que personnage principal) en appuyant sur certains boutons du clavier est décrit. Ensuite, nous avons défini l'arrière-plan par défaut pour l'ensemble du projet et dans la dernière ligne, nous avons écrit React360 dans l'objet fenêtre (qui est un objet global pour les applications de navigateur).
Par la suite, la méthode init de React360 est appelée dans le fichier index.html comme suit:
Dans le deuxième fichier (index.js), les composants sont enregistrés dans l'application, en vue de leur utilisation ultérieure pour le rendu dans le fichier client.js.
Ainsi, le rendu de flux du composant (objet) se présente comme suit:
a) Création dans un fichier séparé;
b) Enregistrement dans index.js;
c) Rendu dans client.js.
Positionnement
Le moment suivant consiste à positionner un objet dans un plan 3D. Dans React-360, lors du positionnement, comme dans le rendu, il existe des différences entre les objets 3D et 2D. Les objets 3D peuvent être positionnés de deux manières.
- Via l'emplacement lors du rendu.
- Via Transform dans l'objet lui-même.
Nous avons choisi Transformer à l'emplacement par défaut, comme le conseille le site officiel React-360. Translate est responsable du positionnement dans le plan 3D.
Les objets 2D sont positionnés à l'aide du système flex, comme dans React Native, ce qui dans notre cas était assez gênant:
Pour positionner le bouton à droite de la caméra, vous avez dû créer une vue, comme dans React Native, et définir sa largeur correspondant à la distance du point le plus à gauche de l'écran à l'endroit où l'objet devrait être, et la hauteur correspondant à la distance entre le point haut de l'écran et la zone, où doit être l'objet. Il était également nécessaire de définir certains styles afin que le contenu interne se trouve en bas à droite de la vue. En conséquence, tout cela semble lourd et peu pratique, il est plus facile d'utiliser la même traduction pour placer ces objets, en les présentant comme des objets 3D avec une profondeur de 0.
Importer des objets
L'élément suivant est l'importation d'objets 3D dans React-360. Et ici, à première vue, tout est simple et clair. Il existe un composant modèle standard qui a une source d'accessoires qui accepte un objet JS du chemin d'accès aux fichiers .obj (le fichier de l'objet lui-même) et .mtl (le fichier matériel de cet objet):
Mais même ici, il y avait des pièges intéressants. En fin de compte, le fichier .mtl a une texture de carte par défaut au format .tga et le chemin prescrit sur le disque de la personne qui l'a développé. Nous avons non seulement dû modifier manuellement le chemin d'accès aux fichiers, mais également les modifier en .png, car les fichiers au format .tga n'étaient pas affichés dans le navigateur. Le format .png nous a permis de rendre correctement les textures.
Eclairage
Comme le système d'éclairage n'était pas du tout décrit dans la documentation, j'ai dû aller dans le code source de react-360 et y trouver quelque chose concernant Lights, puis regarder des exemples de qui faisait quoi et comment travailler avec ce zoo. Par essais et erreurs, nous l'avons compris et l'avons appliqué aux modèles AmbientLight, SpotLight et PointLight. Leur positionnement est le même que celui des objets 3D, mais il y a aussi un angle:
La lumière ne s'appliquait pas à l'objet, mais nous ne nous sommes pas retirés, et, après une longue recherche et contourner divers problèmes dans le référentiel react-360, nous sommes tombés sur la nécessité de mettre les accessoires allumés vrai, et ce n'est qu'après que la lumière a commencé à agir sur l'objet.
Mouvement
Nous avons pris la caméra principale comme acteur principal avec lequel nous effectuons des mouvements et des actions. Pour ce faire, ils ont écrit Controller pour la caméra, où ils ont initialisé la fonction principale de l'interface:
qui transmet la position actuelle de la caméra et sa rotation. Vous pouvez travailler avec eux dans la caméra pour changer en fonction d'un événement, nous avons appuyé sur les boutons WASD en tant qu'événement (comme d'habitude), plus tard, nous avons voulu les remplacer en appuyant sur le bouton et en se déplaçant sur les coordonnées auxquelles le bouton a été enfoncé, de sorte que puis remplacez-le par VR Controller. Pour un bonbon, ils ont réglé la vitesse de déplacement et la distance avec laquelle ils ont travaillé. Nous avons eu un mouvement avec des secousses et un manque total de physique: nous avons traversé les textures, volé hors des limites, etc. Dans la documentation, le physicien n'est pas décrit à partir du mot «en général» (et en principe, un semblable n'est pas «amical de jeu» à ce stade de l'immersion devient habituelle).
Conclusion
Bien que React-360 fonctionne avec Three.js et WebGL, il ne convient absolument pas pour résoudre de tels problèmes, de plus, il n'était probablement pas destiné au développement de jeux. React-360 fait un excellent travail avec des présentations 3D, des visites virtuelles d'objets, la visualisation de panoramas, etc.
Mais même si vous vous engagez à faire de telles choses dans cette pile technologique, vous rencontrerez des difficultés sous la forme d'une mauvaise documentation, ce qui vous obligera à passer des heures à résoudre une tâche petite et apparemment simple.
JS, React, JSX, ( ), , , React, React Native. - .
Unité
Après tous les tourments, nous avons décidé d'utiliser le deuxième outil dans le cadre de nos compétences. Cette fois, le choix s'est porté sur Unity, car l'équipe a des développeurs C #.
Installation et description
L'installation est assez simple - téléchargement et déballage banals du kit de distribution depuis le site officiel. Il y a un «mais»: jusqu'à présent, Unity ne fonctionne que sur Windows et Mac (depuis la version 10). Par conséquent, nous avons dû transférer d'Ubuntu vers Mac.
Étant donné que Unity est un moteur de jeu qui comprend une interface utilisateur bonne et pratique, le projet est créé avec un simple clic sur le bouton, après quoi vous obtenez un modèle complet des fichiers nécessaires. Fondamentalement, tout se trouve dans le dossier Actifs.
Rendu
Étant donné que le moteur lui-même est en cours de rendu, vous n'avez pas besoin d'enregistrer quoi que ce soit.
Positionnement
Le positionnement est aussi simple que le rendu. Il suffit de faire glisser l'objet dans le champ et de travailler soit avec les curseurs sous la forme appropriée, soit dans une interface graphique pratique. Comme pour le rendu, la situation est telle que rien n'était requis pour être enregistré.
Importer des objets
Un simple Drag'n'Drop, initialement à l'intérieur de l'actif dans le dossier approprié, puis une opération similaire sur le champ GUI. Il n'y a pas de code.
Eclairage
Travailler avec l'éclairage est aussi simple qu'avec les paragraphes précédents. La création d'un nouvel éclairage a lieu dans l'onglet approprié du projet. Le système est également décrit de manière suffisamment détaillée dans la documentation.
Mouvement
C'est le premier point où vous devez coder quelque chose. À savoir, le comportement du joueur et de la caméra lors du déplacement. Pour le système de mouvement, nous avons utilisé le système de NavMesh et ses agents. Nous avons décrit la zone où vous pouvez vous promener dans l'interface graphique, identifié la caméra et le modèle en tant qu'agent dans le système de navigation. Ensuite, nous avons créé un script, cela se fait très simplement dans l'interface graphique:
- L'objet est sélectionné;
- Le bouton Ajouter des composants est enfoncé;
- Sélectionne un nouveau script;
- Le nom est écrit.
Et le tour est joué - un modèle de script standard dans le dossier racine est créé. Nous avions juste besoin de le transférer dans le dossier Scripts et de l'ouvrir (il s'ouvre par défaut dans VS, ce qui est très pratique). Le modèle de script standard possède une interface intuitive sous la forme de deux fonctions:
- Démarrer - utilisé lors de la configuration des composants;
- Mise à jour - appelée sur chaque image.
Dans la fonction Démarrer, nous avons verrouillé le curseur au centre de l'écran et enregistré notre composant dans la propriété correspondante de la classe, et également déclaré les paramètres par défaut pour les propriétés restantes.
Dans la fonction Update, nous avons écrit la logique de rotation de l'objet derrière le curseur, ainsi que le mouvement de l'objet par clic:
Conclusion
En plus de la conclusion assez évidente sur la commodité d'Unity, je voudrais noter que pour travailler sur Unity, vous ne pouvez pas du tout être programmeur. Unity propose un grand nombre de didacticiels pour les débutants, très simples et directs, ainsi qu'une documentation complète de haute qualité et une communauté dynamique et active.