Comment créer un jeu de réalité virtuelle multijoueur en temps réel (première partie)

Dans cette série de didacticiels, nous allons créer un jeu de réalité virtuelle multijoueur sur le Web dans lequel les joueurs devront collaborer pour résoudre un problème. puzzle. Nous allons utiliser A-Frame pour la modélisation de la réalité virtuelle, MirrorVR pour la synchronisation en temps réel de plusieurs appareils et A-Frame Low Poly pour une esthétique low-poly. À la fin de ce didacticiel, vous aurez une démonstration en ligne entièrement opérationnelle à laquelle tout le monde peut jouer.

Chaque paire de joueurs reçoit un anneau d'orbes. L’objectif est d’allumer toutes les orbes, où une orbe est allumée si elle est élevée et brillante. Un orbe est désactivé s'il est plus bas et plus sombre. Cependant, certaines sphères «dominantes» affectent leurs voisins: si elles changent d'état, ses voisins changent également d'état. Seul le joueur 2 peut contrôler les orbes dominantes tandis que seul le joueur 1 peut contrôler les orbes non dominantes. Cela oblige les deux joueurs à collaborer pour résoudre le puzzle. Dans cette première partie du didacticiel, nous allons créer l'environnement et ajouter les éléments de conception de notre jeu de réalité virtuelle.

Les sept étapes de ce didacticiel sont regroupées en trois sections:

1. Configuration de la scène (Étapes 1–2)
2. Créer les orbes (étapes 3 à 5)
3. Rendre les orbes interactifs (étapes 6 à 7)

Cette première partie se terminera par un orbe cliquable qui s'allume et off (comme sur la photo ci-dessous). Vous allez utiliser A-Frame VR et plusieurs extensions A-Frame.

Configuration de la scène

1. Partons avec une scène de base

Pour commencer, voyons comment créer une scène simple avec un motif:

Les trois premières instructions ci-dessous sont extraites de mon article précédent . Vous commencerez par configurer un site Web avec une seule page HTML statique. Cela vous permet de coder à partir de votre bureau et de les déployer automatiquement sur le Web. Le site Web déployé peut ensuite être chargé sur votre téléphone portable et placé dans un casque VR. Sinon, le site Web déployé peut être chargé par un casque VR autonome.

Commencez par naviguer vers glitch.com . Ensuite, procédez comme suit:

1. Cliquez sur "Nouveau projet" en haut à droite,
2. Cliquez sur "hello-webpage" dans la liste déroulante,
3. . Cliquez ensuite sur index.html dans la barre latérale gauche. Nous nous référerons à cela en tant qu '«éditeur».

Vous devriez maintenant voir l'écran Glitch suivant avec un fichier HTML par défaut.

Comme pour le didacticiel lié ci-dessus, commencez par supprimer tout le code existant dans le index.html actuel. fichier. Ensuite, tapez ce qui suit pour un projet webVR de base, en utilisant A-Frame VR. Cela crée une scène vide en utilisant l’éclairage et l’appareil photo par défaut de A-Frame.

Soulevez l’appareil photo à hauteur debout. Conformément aux recommandations VR de la structure A ( de Github ), enveloppez la caméra d'une nouvelle entité et déplacez directement l'entité mère à la place de la caméra. Ajoutez ce qui suit entre vos balises a-scene sur les lignes 8 et 9.

Ensuite, ajoutez une grande boîte pour indiquer le sol, en utilisant a-box . Placez-le directement sous votre appareil photo à partir de l'instruction précédente.

Votre fichier index.html doit maintenant correspondre exactement à ce qui suit. Vous pouvez trouver le code source complet ici, sur Github .

La configuration est terminée. Nous allons ensuite personnaliser l'éclairage pour créer une atmosphère plus mystérieuse.

2. Ajouter atmosphère

Dans cette étape, nous allons configurer le brouillard et l’éclairage personnalisé.

Ajoutez un brouillard qui obscurcira des objets lointains pour nous. Modifiez la balise a-scene de la ligne 8. Nous allons ajouter ici un brouillard sombre qui masque rapidement les bords du sol, donnant l’effet d’un horizon lointain.

Le gris foncé # 111 apparaît en fondu linéaire d'une distance de 10 à une distance de 15. Tous les objets distants de plus de 15 unités sont complètement masqués et tous les objets situés à moins de 10 unités de distance sont complètement visibles. Tout objet situé entre les deux est partiellement masqué.

Ajoutez une lumière ambiante pour éclaircir les objets du jeu et une lumière unidirectionnelle pour accentuer les surfaces réfléchissantes que vous ajouterez plus tard. Placez-la directement après la balise a-scene que vous avez modifiée dans l'instruction précédente.

Directement sous les lumières de l'instruction précédente, ajoutez un ciel sombre. Remarquez que le gris foncé # 111 correspond à celui du brouillard lointain.

Ceci conclut les modifications de base apportées à l'ambiance et, plus largement, à la configuration de la scène. Vérifiez que votre code correspond au code source de l'étape 2 sur Github, exactement. Nous ajouterons ensuite un orbe low-poly et commencerons à personnaliser l’esthétique de l’orbe.

Creating The Orbs

3. Créer un orbe à faible teneur en poly

Au cours de cette étape, nous allons créer un orbe réfléchissant et rotatif, comme illustré ci-dessous. L'orbe est composé de deux sphères low poly stylisées avec quelques astuces pour suggérer un matériau réfléchissant.

Commencez par importer le format low-poly. bibliothèque dans votre tête tag. Insérez ce qui suit entre les lignes 4 et 5.

Créez un carrousel, un wrapper et un conteneur orbe. Le carrousel contiendra plusieurs orbes, le wrapper nous permettra de faire pivoter tous les orbes autour d'un axe central sans faire tourner chaque orbe individuellement, et le conteneur – son nom suggère – contient tous les composants de l'orbe.

À l'intérieur du contenant de l'orbe, ajoutez l'orbe lui-même: une sphère est légèrement translucide et décalée et l'autre est complètement solide.

Enfin, faites pivoter la sphère indéfiniment en ajoutant la balise a-animation suivante immédiatement après la lp-sphere à l'intérieur du .orb l'entité dans la dernière instruction.

Votre code source doit correspondre exactement au code suivant:

Vérifiez que votre code source correspond au code source complet de l'étape 3 sur Github. Votre aperçu doit maintenant correspondre aux éléments suivants:

Nous allons ensuite ajouter plus d’éclairage à l’orbe pour lui donner une teinte dorée.

4 . Light Up The Orb

Dans cette étape, nous allons ajouter deux lumières, une de couleur et une blanche. Cela produit l'effet suivant:

Commencez par ajouter la lumière blanche pour éclairer l'objet de dessous. Nous allons utiliser un point lumineux. Juste avant # orb0 mais dans # conteneur-orb0 ajoutez le point lumineux suivant:

Dans votre aperçu, vous verrez ce qui suit:

Par défaut, les lumières ne s'éteignent pas avec la distance. En ajoutant distance = "8" nous nous assurons que la lumière se désintègre complètement à une distance de 8 unités, afin d'éviter que le point lumineux n'illumine toute la scène. Ensuite, ajoutez la lumière dorée. Ajoutez ce qui suit directement au-dessus du dernier feu.

Vérifiez que votre code correspond bien au code source de l'étape 4 . Votre aperçu correspondra à ce qui suit:

Vous allez ensuite apporter votre dernière modification esthétique à l’orbe et ajouter des anneaux en rotation. 19659068] 5. Ajouter des bagues

Au cours de cette étape, vous produirez l'orbe final, comme illustré ci-dessous.

Ajouter un anneau à ] # container-orb0 directement avant # orb0 .

Remarquez que l'anneau lui-même ne contient pas de couleur, car il sera imbibé du voyant ponctuel de l'étape précédente. De plus, le matériau = "côté: double" est important, car sans lui, le dos de l’anneau ne serait pas rendu; cela signifie que l'anneau disparaîtrait pendant la moitié de sa rotation.

Toutefois, l'aperçu contenant uniquement le code ci-dessus ne sera pas différent. C'est parce que l'anneau est actuellement perpendiculaire à l'écran. Ainsi, seul le «côté» de la bague (qui a une épaisseur égale à 0) est visible. Placez l'animation suivante entre les balises a-ring dans l'instruction précédente.

Votre aperçu devrait maintenant correspondre aux éléments suivants:

Créez un nombre variable d'anneaux avec différents axes de rotation, vitesses et tailles. Vous pouvez utiliser les exemples de bagues suivants. Tous les nouveaux anneaux doivent être placés sous le dernier anneau .

Votre aperçu correspondra à celui-ci:

Vérifiez que votre code correspond au code source de l'étape 5 sur Github. Ceci conclut le décor pour l'orbe. Avec l'orbe terminé, nous allons ensuite ajouter de l'interactivité à l'orbe. Dans l'étape suivante, nous allons spécifiquement ajouter un curseur visible avec une animation en cliquant lorsque des objets cliquables sont pointés.

Rendre les orbes interactifs

6. Ajouter un curseur

À cette étape, nous allons ajouter un curseur blanc pouvant déclencher des objets cliquables. Le curseur est illustré ci-dessous.

Dans votre balise a-camera ajoutez l'entité suivante. L'attribut fuse permet à cette entité de déclencher des événements de clic. L'attribut raycaster détermine la fréquence et la distance de vérification des objets cliquables. L'attribut objects accepte un sélecteur pour déterminer quelles entités sont cliquables. Dans ce cas, tous les objets de la classe cliquables sont cliquables

Ajoutez ensuite une animation de curseur et un anneau supplémentaire pour l'esthétique. Placez les éléments suivants dans l'objet de curseur d'entité ci-dessus. Cela ajoute une animation à l'objet curseur afin que les clics soient visibles.

Ajoutez ensuite la classe cliquable à la # orb0 pour qu'elle corresponde à ce qui suit.

Vérifiez que votre code correspond au code source de l'étape 6 sur Github. Dans votre aperçu, faites glisser votre curseur dessus sur l'orbe pour voir l'animation de clic en action. Ceci est illustré ci-dessous.

Notez que l'attribut cliquable a été ajouté à l'orbe lui-même et non à son conteneur. Cela permet d'éviter que les anneaux ne deviennent des objets cliquables. De cette façon, l'utilisateur doit cliquer sur les sphères qui constituent l'orbe lui-même.

Dans la dernière étape de cette partie, vous allez ajouter une animation pour contrôler les états d'activation et de désactivation de l'orbe.

7. Ajouter des états d'orbe

Au cours de cette étape, vous animerez l'orbe qui entre et sort d'un état désactivé au clic. Ceci est illustré ci-dessous.

Pour commencer, vous réduirez et abaisserez l'orbe au sol. Ajoutez les balises a-animation au # conteneur-orb0 juste après # orb0 . Les deux animations sont déclenchées par un clic et partagent la même fonction d'accélération avec un léger rebond .

Pour accentuer davantage l'état désactivé, nous allons supprimer le point lumineux lorsque l'orbe est éteint. Cependant, les lumières de l’orbbe sont placées à l’extérieur de cet objet. Ainsi, l'événement click n'est pas transmis aux voyants lorsque l'utilisateur clique sur l'orbe. Pour contourner ce problème, nous utiliserons un langage Javascript clair pour transmettre l'événement clic à la lumière. Placez la balise d'animation suivante dans # light-orb0 . La lumière est déclenchée par un événement personnalisé switch .

Ensuite, ajoutez l'écouteur d'événement de clic suivant à # container-orb0 . Cela transmettra les clics aux lumières de l'orbe.

Vérifiez que votre code correspond au code source de l'étape 7 sur Github. Enfin, affichez votre aperçu et déplacez le curseur sur l’orbite pour basculer entre les états désactivé et activé. Photo ci-dessous.

Ceci conclut l’interactivité de l’orbe. Le joueur peut maintenant activer et désactiver les orbes à volonté, avec des états activés et désactivés d'eux-mêmes.

Conclusion

Dans ce tutoriel, vous avez construit un simple globe avec des états activé et désactivé, qui peut être basculé par un VR. -headset-friendly curseur curseur. Avec un certain nombre de techniques d’éclairage et d’animations différentes, vous avez pu distinguer les deux états. Ceci conclut les éléments de conception de la réalité virtuelle pour les orbes. Dans la prochaine partie du didacticiel, nous allons peupler les orbes de manière dynamique, ajouter des mécanismes de jeu et mettre en place un protocole de communication entre deux joueurs.

(rb, dm, il)