Comment construire un jeu de coureur sans fin en réalité virtuelle (Partie 1)

Aujourd’hui, j’aimerais vous inviter à créer un jeu de course VR sans fin avec webVR, un framework qui offre un double avantage: il peut être joué avec ou sans casque VR. Je vais expliquer la magie des commandes basées sur le regard pour nos joueurs de casques VR en supprimant la dépendance des commandes de jeu sur un clavier.

Dans ce tutoriel, je vais également vous montrer comment synchroniser le jeu . Etat entre deux appareils qui vous rapprocheront de la construction d’un jeu multijoueur. Je vais vous présenter plus spécifiquement les concepts A-Frame VR tels que les entités low-poly stylisées, les lumières et les animations.

Pour commencer, vous aurez besoin des éléments suivants:

• Un accès Internet (plus précisément à ). com );
• Un nouveau projet Glitch;
• Un casque de réalité virtuelle (facultatif, recommandé). (J'utilise Google Cardboard, qui est proposé à 15 dollars pièce.)

Note : Vous pouvez voir une démonstration du produit final ici .

Étape 1: Configuration d'une scène de base

Dans cette étape, nous allons configurer la scène suivante pour notre jeu. Il est composé de quelques formes géométriques de base et comprend un éclairage personnalisé, que nous décrirons plus en détail ci-dessous. Au fur et à mesure que vous avancez dans le didacticiel, vous allez ajouter diverses animations et effets pour transformer ces entités géométriques de base en icebergs assis dans un océan.

Vous allez commencer 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 le menu déroulant.
   

   
   

3. Cliquez ensuite sur index.html dans la barre latérale gauche. Nous nous y référerons en tant qu '«éditeur».

Commencez par supprimer tout le code existant dans le fichier index.html actuel. Ensuite, tapez ce qui suit pour un projet webVR de base, en utilisant A-Frame VR. Ceci crée une scène vide en utilisant l’éclairage et la caméra par défaut de A-Frame.

Note : Pour en savoir plus sur le VR A-Frame, cliquez sur aframe.io .

Pour commencer, ajoutez un brouillard, qui obscurcira des objets lointains pour nous. Modifiez la balise a-scene à la ligne 8.

À l'avenir, tous les objets de la scène seront ajoutés entre les balises ... . Le premier élément est le ciel. Entre vos balises a-scene ajoutez l'entité a-sky .

Après votre ciel, ajoutez un éclairage pour remplacer celui par défaut de A-Frame.

Il y a trois types d'éclairage:

• Ambiant
  C'est une lumière omniprésente qui semble émaner de tous les objets de la scène. Si vous souhaitez appliquer une teinte bleue à tous les objets, ce qui crée des ombres bleues, vous devez ajouter une lumière ambiante bleue. Par exemple, les objets de cette scène Low Poly Island sont tous blancs. Cependant, une lumière ambiante bleue donne une teinte bleue.
• Directionnel
  Cela est analogue à une lampe de poche qui, comme son nom l'indique, pointe dans une certaine direction.
• Point [19659037] Encore une fois, comme son nom l'indique, cela émane de la lumière d'un point.

Juste en dessous de votre entité a-sky ajoutez les lumières suivantes: une directionnelle et une ambiante. Les deux sont en bleu clair.

Ajoutez ensuite une caméra avec une position personnalisée pour remplacer la caméra A-Frame par défaut. Juste en dessous de vos entités a-light ajoutez ce qui suit:

Juste en dessous de votre entité a-camera ajoutez plusieurs icebergs à l'aide de cônes en faible poly.

Ensuite, ajoutez un océan, que nous allons représenter temporairement avec une boîte, parmi vos icebergs. Dans votre code, ajoutez ce qui suit après les cônes d'en haut.

Ensuite, ajoutez une plate-forme sur laquelle notre jeu de coureurs sans fin se déroulera. Nous allons représenter cette plate-forme en utilisant le côté d'un grand cône. Après la case ci-dessus, ajoutez ce qui suit:

Enfin, ajoutez le lecteur, que nous représentons à l'aide d'une petite sphère rougeoyante, sur la plate-forme que nous venons de créer. Entre les balises ajoutez ce qui suit:

Vérifiez que votre code correspond maintenant à ce qui suit, exactement. Vous pouvez également afficher le code source complet pour l'étape 1 .

Pour obtenir un aperçu de la page Web, cliquez sur «Aperçu» en haut à gauche. Nous allons parler de cela comme votre preview . Notez que toute modification apportée à votre éditeur sera automatiquement reflétée dans cet aperçu, sauf les bogues ou les navigateurs non pris en charge.

Dans votre aperçu, vous verrez la scène de base de la réalité virtuelle suivante. Vous pouvez visualiser cette scène à l'aide de votre casque VR préféré.

Ceci termine la première étape de la configuration des objets géométriques de base de la scène du jeu. À l'étape suivante, vous allez ajouter des animations et utiliser d'autres bibliothèques VR A-Frame pour plus d'effets visuels.

Étape 2: Améliorer l'esthétique pour la scène de réalité virtuelle

Cette étape consiste à ajouter un certain nombre d'améliorations esthétiques à la scène:

1. Objets Low-Poly
   Vous allez remplacer certains objets géométriques de base par leurs équivalents low-poly par des formes géométriques irrégulières plus convaincantes.
2. Animations
   Le joueur va bouger de haut en bas, bouge légèrement les icebergs et fait de la mer un corps d'eau en mouvement.

Le produit final de cette étape correspondra à ce qui suit:

Pour commencer, importez les composants low-poly de A-Frame. Dans ...ajoutez l'importation JavaScript suivante:

La bibliothèque A-Frame low-poly implémente un certain nombre de primitives telles que lp-cone et lp-sphere chacun d'eux étant une version low-poly d'une primitive A-Frame. Vous pouvez en apprendre plus sur les primitives A-Frame sur ici .

Ensuite, accédez à la section de votre code. Remplacez tous les par .

Nous allons maintenant configurer les primitives low-poly. Toutes les primitives low poly prennent en charge deux attributs contrôlant le degré d'exagération de la stylisation low poly:

1. amplitude
   Il s'agit du degré de stylisation. Plus ce nombre est élevé, plus une forme low poly peut s'écarter de sa géométrie d'origine.
2. amplitude-variance
   Voilà à quel point la stylisation peut varier, d'un sommet à l'autre. Plus ce nombre est grand, plus il y a de variété dans la façon dont chaque sommet peut s'écarter de sa géométrie d'origine.

Pour obtenir une meilleure intuition quant à la signification de ces deux variables, vous pouvez modifier ces deux attributs dans le . Démo Frame low-poly .

Pour le premier iceberg, réglez amplitude-variance sur 0,25. Pour le deuxième iceberg, réglez l'amplitude sur 0,12. Pour le dernier iceberg, définissez l'amplitude sur 0,1

Pour terminer les icebergs, animez la position et la rotation des trois icebergs. N'hésitez pas à configurer ces positions et rotations à votre guise.

Vous trouverez ci-dessous un exemple de réglage:

Naviguez jusqu'à votre aperçu, et vous devriez voir les icebergs low-poly défiler.

Grand aperçu )

Ensuite, mettez à jour la plate-forme et le lecteur associé. Ici, remplacez le cône par un objet low-poly, en changeant un cône en lp-cône pour . De plus, ajoutez des configurations pour l’amplitude .

     ...

Ensuite, toujours dans la section de la plate-forme, accédez à la sous-section de votre code. Ajoutez les animations suivantes pour la position, la taille et l'intensité:

Accédez à votre aperçu et vous verrez votre lecteur balancer de haut en bas, avec une lumière fluctuante sur une plate-forme low poly.

Ensuite, animons l'océan. Ici, vous pouvez utiliser une version légèrement modifiée de l’océan de Don McCurdy. Les modifications nous permettent de configurer l’ampleur et la rapidité des vagues de l’océan.

Créez un nouveau fichier via l’interface Glitch en cliquant sur “+ Nouveau fichier” à gauche. Nommez ce nouveau fichier assets / ocean.js . Collez le texte suivant dans votre nouveau fichier ocean.js :

 / **
 * Primitive d'océan à l'ombre plate.
 * https://github.com/donmccurdy/aframe-extras
 *
 * Basé sur un tutoriel Codrops:
 * http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/
 * /
AFRAME.registerPrimitive ('a-ocean', {
  defaultComponents: {
    océan: {},
    rotation: {x: -90, y: 0, z: 0}
  },
  mappages: {
    width: 'ocean.width',
    profondeur: 'ocean.depth',
    densité: 'densité océan',
    amplitude: 'ocean.amplitude',
    'amplitude-variance': 'ocean.amplitudeVariance',
    vitesse: 'vitesse océan',
    'speed-variance': 'ocean.speedVariance',
    couleur: 'ocean.color',
    opacité: 'océan.opacité'
  }
});

AFRAME.registerComponent ('ocean', {
  schéma: {
    // Dimensions de la zone océanique.
    largeur: {par défaut: 10, min: 0},
    profondeur: {par défaut: 10, min: 0},

    // Densité des ondes.
    densité: {défaut: 10},

    // Amplitude et variance des ondes.
    amplitude: {défaut: 0.1},
    amplitudeVariance: {défaut: 0,3},

    // Vitesse et variance des vagues.
    vitesse: {défaut: 1},
    speedVariance: {défaut: 2},

    // Matériel.
    color: {default: '# 7AD2F7', tapez: 'color'},
    opacité: {défaut: 0.8}
  },

  / **
   * Utilisez play () au lieu de init (), car les mappages de composants - non disponibles en tant que dépendances - sont
   * Il n'est pas garanti d'avoir analysé lors de l'initialisation de ce composant.
   * /
  play: function () {
    const el = this.el,
        data = this.data;
    let material = el.components.material;

    const geometry = new THREE.PlaneGeometry (data.width, data.depth, data.density, data.density);
    geometry.mergeVertices ();
    this.waves = [];
    for (let v, i = 0, l = geometry.vertices.length; i 

Revenez à votre fichier index.html . Dans le de votre code, importez le nouveau fichier JavaScript:

Accédez à la section de votre code. Remplacez la a-box par un a-ocean . Comme auparavant, nous plaçons amplitude et amplitude-variance de notre objet low poly.

Pour votre dernière modification esthétique, ajoutez un curseur rond blanc pour indiquer le pointeur. Naviguez jusqu'au .

Assurez-vous que votre code index.html correspond au code du code source Step 2 . Naviguez vers votre aperçu et vous verrez l’océan mis à jour ainsi qu’un cercle blanc fixé au centre de votre vue.

Ceci conclut vos améliorations esthétiques à la scène. Dans cette section, vous avez appris à utiliser et à configurer des versions low-poly de primitives A-Frame, par exemple. lp-cone . En outre, vous avez ajouté plusieurs animations pour différents attributs d'objet, tels que la position, la rotation et l'intensité de la lumière. Dans l'étape suivante, vous allez ajouter la possibilité pour l'utilisateur de contrôler le lecteur, en regardant simplement différentes voies.

Étape 3: Ajoutez des commandes de vision de réalité virtuelle

Rappelez-vous que notre public est un utilisateur portant une réalité virtuelle. casque. En conséquence, votre jeu ne peut pas dépendre de la saisie au clavier pour les contrôles. Pour rendre ce jeu accessible, nos commandes VR ne s’appuieront que sur la rotation de la tête de l’utilisateur. Il suffit de regarder vers la droite pour déplacer le joueur vers la droite, vers le centre pour se déplacer vers le centre et vers la gauche pour se déplacer vers la gauche. Notre produit final ressemblera à ce qui suit:

Note : La démo GIF ci-dessous a été enregistrée sur un bureau, avec la traînée utilisée par l'utilisateur pour remplacer la rotation de la tête.

Commencez à partir de votre fichier index.html . Dans le ... tag, importez votre nouveau fichier JavaScript, assets / ergo.js . Ce nouveau fichier JavaScript contiendra la logique du jeu.

Ajoutez ensuite un nouvel attribut lane-controls à votre objet a-camera :

créez ensuite votre nouveau code JavaScript. fichier en utilisant "+ Nouveau fichier" à gauche. Utilisez assets / ergo.js pour le nom de fichier. Pour le reste de cette étape, vous travaillerez dans ce nouveau fichier JavaScript. Dans ce nouveau fichier, définissez une nouvelle fonction pour configurer les contrôles et appelez-la immédiatement. Assurez-vous d'inclure les commentaires ci-dessous, car nous ferons référence aux sections de code portant ces noms.

 / ************
 * LES CONTRÔLES *
 ************ /

fonction setupControls () {
}

/ ********
 * JEU *
 ******** /

setupControls ();

Note : La fonction setupControls est appelée dans l'étendue globale, car les composants A-Frame doivent être enregistrés avant l'étiquette . Je vais expliquer ce qu'est un composant ci-dessous.

Dans votre fonction setupControls enregistrez un nouveau composant A-Frame. Un composant modifie une entité dans A-Frame, vous permettant d'ajouter des animations personnalisées, de modifier le mode d'initialisation d'une entité ou de répondre aux entrées de l'utilisateur. Il existe de nombreux autres cas d'utilisation, mais vous allez vous concentrer sur le dernier: répondre aux commentaires de l'utilisateur. En particulier, vous allez lire la rotation de l'utilisateur et déplacer le lecteur en conséquence.

Dans la fonction setupControls enregistrez le composant A-Frame que nous avons ajouté à la caméra précédemment, lane-controls . Nous allons ajouter un auditeur d'événement pour l'événement tick . Cet événement se déclenche à chaque image d'animation. Dans cet écouteur d'événement, le journal de bord est généré à chaque tick.

 function setupControls () {
    AFRAME.registerComponent ('lane-controls', {
        tick: fonction (time, timeDelta) {
            console.log (heure);
        }
    });
}

Accédez à votre aperçu. Ouvrez la console de développement de votre navigateur en cliquant avec le bouton droit n'importe où et en sélectionnant «Inspecter». Cela s'applique à Firefox, Chrome et Safari. Ensuite, sélectionnez «Console» dans la barre de navigation supérieure. Vérifiez que les horodatages affluent dans la console.

Retournez dans votre éditeur. Toujours dans assets / ergo.js remplacez le corps de setupControls par le suivant. Récupérez la rotation de la caméra en utilisant this.el.object3D.rotation puis enregistrez la piste vers laquelle déplacer le lecteur.

 function setupControls () {
  AFRAME.registerComponent ('lane-controls', {
    tick: fonction (time, timeDelta) {
      var rotation = this.el.object3D.rotation;

      if (rotation.y> 0.1) console.log ("left");
      else if (rotation.y 

Retournez à l'aperçu. Ouvrez à nouveau la console du développeur. Essayez de faire pivoter légèrement la caméra et observez la mise à jour de la sortie de la console en conséquence.

Avant la section des contrôles ajoutez trois constantes représentant les voies de gauche, du milieu et de droite x . [19659118] const POSITION_X_LEFT = -0,5;
const POSITION_X_CENTER = 0;
const POSITION_X_RIGHT = 0.5;

/ ************
 * LES CONTRÔLES *
 ************ /

…

Au début de la section des contrôles définissez une nouvelle variable globale représentant la position du joueur.

 / *************
 * LES CONTRÔLES *
 ************ /

// La position est l'un des 0 (gauche), 1 (centre) ou 2 (droite)
var player_position_index = 1;

fonction setupControls () {
...

Après la nouvelle variable globale, définissez une nouvelle fonction qui déplacera le lecteur sur chaque voie.

 var player_position_position_index = 1;

/ **
 * Déplacer le joueur à l'index fourni
 * @param {int} Lane pour déplacer le joueur sur
 * /
fonction movePlayerTo (position_index) {
}

fonction setupControls () {
...

Dans cette nouvelle fonction, commencez par mettre à jour la variable globale. Ensuite, définissez une position fictive.

 function movePlayerTo (position_index) {
  player_position_index = position_index;

  position var = {x: 0, y: 0, z: 0}
}

Après avoir défini la position, mettez-la à jour en fonction de la fonction entrée.

 function movePlayerTo (position_index) {
  ...
  if (position_index == 0) position.x = POSITION_X_LEFT;
  else if (position_index == 1) position.x = POSITION_X_CENTER;
  else position.x = POSITION_X_RIGHT;
}

Enfin, mettez à jour la position du joueur.

 function movePlayerTo (position_index) {
    ...
document.getElementById ('player'). setAttribute ('position', position);
}

Vérifiez à nouveau que votre fonction correspond à la suivante:

 / **
 * Déplacer le joueur à l'index fourni
 * @param {int} Lane pour déplacer le joueur sur
 * /
fonction movePlayerTo (position_index) {
  player_position_index = position_index;
  
  position var = {x: 0, y: 0, z: 0}
  if (position_index == 0) position.x = POSITION_X_LEFT;
  else if (position_index == 1) position.x = POSITION_X_CENTER;
  else position.x = POSITION_X_RIGHT;
  document.getElementById ('player'). setAttribute ('position', position);
}

Revenez à votre aperçu. Ouvrez la console du développeur. Appelez votre nouvelle fonction movePlayerTo à partir de la console pour vous assurer qu'elle fonctionne.

> movePlayerTo (2) # doit aller à droite.

Retournez dans votre éditeur. Pour la dernière étape, mettez à jour votre setupControls pour déplacer le lecteur en fonction de la rotation de la caméra. Ici, nous remplaçons le console.log par les invocations movePlayerTo .

 function setupControls () {
  AFRAME.registerComponent ('lane-controls', {
    tick: fonction (time, timeDelta) {
      var rotation = this.el.object3D.rotation;

      if (rotation.y> 0.1) movePlayerTo (0);
      else if (rotation.y 

Assurez-vous que votre assets / ergo.js correspond au fichier correspondant dans le code source Step 3 . Revenez à votre aperçu. Faites pivoter l'appareil photo à partir de votre joueur suivra désormais la rotation de l'utilisateur.

Ceci conclut les commandes de regard pour votre jeu de coureurs sans fin en réalité virtuelle.

Dans cette section, nous avons appris à utiliser les composants A-Frame et à modifier des propriétés d'entité A-Frame, ce qui conclut également la partie 1 de notre didacticiel de jeu sur les coureurs sans fin. modèle de réalité virtuelle doté d'améliorations esthétiques telles que la stylisation et les animations Low Poly, ainsi qu'un contrôle du regard convivial pour les joueurs utilisant la réalité virtuelle.

Conclusion

Nous avons créé un modèle de réalité virtuelle simple, interactif, pour commencer notre VR en jeu de coureur sans moteur. Nous avons abordé un certain nombre de concepts A-Frame, tels que les primitives, les animations et les composants, qui sont tous nécessaires à la création d'un jeu au-dessus de A-Frame VR.

Voici des ressources supplémentaires et les étapes suivantes pour mieux les utiliser. technologies:

• A-Frame VR
  Documentation officielle pour A-Frame VR, traitant plus en détail des sujets abordés plus haut.
• Page d'accueil de A-Frame
  Exemples de A-Frame projets, présentant différentes capacités de structure A.
• Île Low-Poly
  Modèle VR utilisant les mêmes éclairages, textures et animations que ceux utilisés pour ce jeu sans fin de coureurs.

Dans la partie suivante. de cette série d'articles, je vais vous montrer comment implémenter la logique centrale du jeu et utiliser des manipulations plus avancées de scènes A-Frame VR en JavaScript.

Restez à l'écoute pour la semaine prochaine!

(rb , ra, il)