Ce tutoriel vous aidera à créer votre première application de VR dans Unity. Il s’agit d’une application élémentaire qui aborde les grands concepts d’Unity comme les objets 3D, les composants et les paramètres de version. Cette application n’utilise pas le package d’intégration Oculus, car ce tutoriel a pour objet de vous familiariser avec l’interface et les concepts de base d’Unity. À la fin de ce tutoriel, vous aurez une application de VR exécutable sur votre ordinateur.
En quoi consiste l’application ?
Il s’agit d’un jeu simple ! La scène se compose d’une zone de jeu entourée par quatre murs et d’une balle représentant un joueur ou une joueuse. L’objectif du jeu et de maintenir la balle en mouvement sans qu’elle touche les murs. En cas de collision avec un mur, la couleur du mur concerné change et un texte apparaît à l’écran pour signaler la collision. Pour les entrées, vous devez utiliser votre clavier ou un joystick compatible avec Unity.
Voilà ce que vous allez créer :
Conditions requises
Avant de commencer ce tutoriel, configurez votre environnement de développement et effectuez les réglages nécessaires.
Cette section présente les éléments de base permettant de créer une application ou une mécanique de jeu. Nous avons limité les explications aux principes fondamentaux du processus qui sont utiles à la création de cette application de VR. Pour en savoir plus sur les concepts et les processus d’Unity, consultez le manuel d’utilisation d’Unity.
Scène : conteneur regroupant un ensemble d’objets de jeu.
Objets de jeu : objets de base représentant les personnages, les accessoires, les éclairages, la caméra ou les effets spéciaux. Dans cette application, nous utiliserons des objets 3D représentant des formes simples comme des plans, des cubes et des sphères.
Composants : définissent le comportement de l’objet de jeu. De manière générale, le composant Transform détermine la position, la rotation et l’échelle de chaque objet de jeu et ses valeurs sont représentées sous la forme de coordonnées X, Y et Z pour chaque propriété. Par défaut, la position est définie sur (0,0,0) qui correspond à ce que l’on appelle le point d’origine à partir duquel toutes les coordonnées de la scène sont calculées.
Matériau : ajoute de la texture et de la couleur à un objet. Dans cette application, nous n’utiliserons les matériaux que pour colorer les objets et nous n’entrerons pas dans les détails techniques.
Créer l’application
Étape 1. Créez des matériaux pour ajouter des couleurs aux objets de jeu.
L’ajout de couleurs et de textures fait partie des actions élémentaires dans la conception d’une application. Les matériaux vous permettent de définir différents effets visuels, par exemple les couleurs, shaders et textures. Dans cette application, nous utiliserons les matériaux uniquement pour ajouter des couleurs.
Dans la vue Project (Projet), dans le dossier Assets (Éléments), créez un nouveau dossier dans lequel vous stockerez les matériaux des différents objets de jeu de l’application, renommez-le Materials (Matériaux) et double-cliquez dessus pour l’ouvrir.
Dans le menu, sélectionnez Assets > Create > Material (Éléments > Créer > Matériau) et renommez le matériau floor-color (couleur du sol).
Dans la vue Inspector (Inspecteur), sous Main Maps (Cartes principales), cliquez sur le champ de couleur Albedo pour ouvrir un sélecteur et sélectionner la couleur de votre choix. Dans cette application, nous utiliserons les valeurs RGB (3,32,70).
Répétez les étapes 2 à 4 pour créer les matériaux des murs, de la balle et le changement de couleur des murs en cas de collision. Renommez-les wall-color (couleur des murs), ball-color (couleur de la balle) et after-collision (après collision), puis définissez les valeurs RGB sur (255,255,255), (240,240,0) et (241,107,8) respectivement.
Étape 2. Créez le sol, la balle et les quatre murs.
Les objets de jeu de cette application sont le sol, la balle et quatre murs, et nous utiliserons les formes de base d’Unity (plan, sphère et cube) pour les créer.
Sol :
Dans le menu, sélectionnez GameObject > 3D Object > Plane (Objet de jeu > Objet 3D > Plan).
Dans la vue Hierarchy (Hiérarchie), renommez le plan floor (sol).
Dans la vue Inspector (Inspecteur), sous Transform (Transformation), vérifiez que la position est définie sur le point d’origine, à savoir (0,0,0). Si ce n’est pas le cas, réinitialisez-la sur (0,0,0).
Sous Transform (Transformation), définissez scale (échelle) sur (2,1,2) afin d’agrandir le sol. L’objet plan est plat et n’a aucun volume. C’est pourquoi la valeur Y est définie par défaut sur 1.
Glissez-déposez le matériau floor-color (couleur du sol) sur le plan pour ajouter la couleur.
Balle joueur·se :
Dans le menu, sélectionnez GameObject > 3D Object > Sphere (Objet de jeu > Objet 3D > Sphère).
Dans la vue Hierarchy (Hiérarchie), renommez la sphère player-ball (balle joueur·se).
À partir du dossier Materials (Matériaux), glissez-déposez ball-color (couleur de la balle) sur la sphère.
Dans la vue Inspector (Inspecteur), sous Transform (Transformation), vérifiez que la position est définie sur (0,0,0), et réglez la valeur Y sur 0.5 comme suit (0,0.5,0) afin que la balle repose sur le sol.
Quatre murs :
Dans le menu, sélectionnez GameObject > 3D Object > Cube (Objet de jeu > Objet 3D > Cube).
À partir du dossier Materials (Matériaux), glissez-déposez wall-color (couleur des murs) sur le cube.
Dans la vue Inspector (Inspecteur), sous Transform (Transformation), réinitialisez la position sur (0,0,0) et réglez scale (échelle) sur (0.5,2,20.5) de sorte que la longueur du mur soit bien alignée sur les arêtes du sol.
Dans la vue Hierarchy (Hiérarchie), faites un clic droit sur le cube et procédez comme suit :
a. Renommez le cube first-wall (premier mur).
b. Dupliquez le cube trois fois pour ajouter trois autres murs, puis renommez-les second-wall (deuxième mur), third-wall (troisième mur) et fourth-wall (quatrième mur), respectivement.
Dans la vue Hierarchy (Hiérarchie), sélectionnez third-wall (troisième mur), puis dans la vue Inspector (Inspecteur) sous Transform (Transformation), définissez la rotation sur (0,90,0). Répétez l’étape pour fourth-wall (quatrième mur).
Dans la vue Hierarchy (Hiérarchie), sélectionnez first-wall (premier mur), puis dans la vue Inspector (Inspecteur), sous Transform (Transformation), saisissez les valeurs suivantes pour repositionner le mur de sorte qu’il entoure le sol dans toutes les directions. Répétez cette étape pour les autres murs.
first-wall (premier mur) sur (-10,0,0)
second-wall (deuxième mur) sur (10,0,0)
third-wall (troisième mur) sur (0,0,10)
fourth-wall (quatrième mur) sur (0,0,-10)
Étape 3: Réglez la caméra et l’éclairage.
Ajustez la caméra principale et l’éclairage pour obtenir une meilleure vue de la scène.
Dans la vue Hierarchy (Hiérarchie), sélectionnez Main Camera (Caméra principale).
Dans la vue Inspector (Inspecteur) sous Transform (Transformation), définissez la position sur (0,10,-20) et la rotation sur (20,0,0).
Dans la vue Hierarchy (Hiérarchie), sélectionnez Directional Light (Éclairage directionnel).
Dans la vue Inspector (Inspecteur) sous Transform (Transformation), définissez la rotation sur (50,60,0).
Étape 4 : Ajoutez le mouvement à la balle joueur·se.
Dans la vue Hierarchy (Hiérarchie), sélectionnez player-ball (balle-joueur·se).
Dans la vue Inspector (Inspecteur), procédez comme suit :
a. Cliquez sur Add Component > Physics > Rigidbody (Ajouter un composant > Propriétés physiques > Corps rigide).
b. Cliquez sur Add Component > New Script (Ajouter un composant > Nouveau script), définissez le nom sur PlayerController (Contrôleur joueur·se), puis cliquez sur Create and Add (Créer et ajouter).
c. Cliquez sur l’icône d’engrenage à côté du script PlayerController (Contrôleur joueur·se), puis sur Edit Script (Modifier le script) afin de l’ouvrir dans l’éditeur de code.
d. Remplacez l’exemple de code par le suivant afin de récupérer les entrées du clavier et d’ajouter des forces pour déplacer la balle.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class PlayerController : MonoBehaviour
{
// Appears in the Inspector view from where you can set the speed
public float speed;
// Rigidbody variable to hold the player ball's rigidbody instance
private Rigidbody rb;
// Called before the first frame update
void Start()
{
// Assigns the player ball's rigidbody instance to the variable
rb = GetComponent<Rigidbody>();
}
// Called once per frame
private void Update()
{
// The float variables, moveHorizontal and moveVertical, holds the value of the virtual axes, X and Z.
// It records input from the keyboard.
float moveHorizontal = Input.GetAxis("Horizontal");
float moveVertical = Input.GetAxis("Vertical");
// Vector3 variable, movement, holds 3D positions of the player ball in form of X, Y, and Z axes in the space.
Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);
// Adds force to the player ball to move around.
rb.AddForce(movement * speed * Time.deltaTime);
}
}
Dans la vue Inspector (Inspecteur) sous le script PlayerController (Contrôleur joueur·se), saisissez la valeur de vitesse dans Speed (Vitesse). Par exemple, 500. Cette variable est identique à la variable speed (vitesse) que nous avons déclarée dans le script PlayerController (Contrôleur joueur·se) à l’étape 4.2.d.
Cliquez sur le bouton Play (Jouer) en haut pour prévisualiser votre application. Appuyez sur les touches fléchées de votre clavier pour faire rouler la balle.
Étape 5. Ajoutez le texte.
Dans le menu, sélectionnez Game Object > UI > Text (Objet de jeu > UI > Texte).
Dans la vue Hierarchy (Hiérarchie), sélectionnez Text, (Texte) et renommez-le message.
Basculez de l’onglet Scene (Scène) à l’onglet Game (Jeu) pour prévisualiser le texte tel qu’il sera présenté à l’utilisateur·ice.
Dans la vue Inspector (Inspecteur) sous Rect Transform (Transformation rectangulaire), repositionnez le texte. Vous pouvez aussi modifier la couleur et la taille de la police de caractères, si vous le souhaitez.
Étape 6. Modifiez la couleur du mur et affichez le texte quand la balle entre en collision ou en sort.
La collision se produit lorsque la balle touche le mur. Vous pouvez ajouter des effets pour accentuer la collision. Par exemple, quand la balle touche le mur, ce dernier change de couleur et le texte Ouch! apparaît à l’écran. À l’inverse, quand la balle reprend sa course, le mur retrouve sa couleur initiale et le texte Keep Rolling... (C’est reparti !) apparaît à l’écran.
Dans la vue Hierarchy (Hiérarchie), sélectionnez first-wall (premier-mur).
Dans la vue Inspector (Inspecteur), cliquez sur Add Component > New Script (Ajouter un composant > Nouveau script), définissez le nom sur ColorController (Contrôleur couleur), puis cliquez sur Create and Add (Créer et ajouter).
Cliquez sur l’icône d’engrenage à côté du script ColorController (Contrôleur couleur), puis sur Edit Script (Modifier le script) afin de l’ouvrir dans l’éditeur de code.
Remplacez l’exemple de code par le code suivant.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ColorController : MonoBehaviour
{
public Material[] wallMaterial;
Renderer rend;
// Appears in the Inspector view from where you can assign the textbox
public Text displayText;
// Start is called before the first frame update
void Start()
{
// Assigns the component's renderer instance
rend = GetComponent<Renderer>();
rend.enabled = true;
displayText.text = "";
}
// Called when the ball collides with the wall
private void OnCollisionEnter(Collision col)
{
// Checks if the player ball has collided with the wall.
if (col.gameObject.name == "player-ball")
{
displayText.text = "Ouch!";
rend.sharedMaterial = wallMaterial[0];
}
}
// It is called when the ball moves away from the wall
private void OnCollisionExit(Collision col)
{
if (col.gameObject.name == "player-ball")
{
rend.sharedMaterial = wallMaterial[1];
displayText.text = "Keep Rolling...";
}
}
}
Dans la vue Hierarchy (Hiérarchie), sélectionnez first-wall (premier-mur).
Dans la vue Inspector (Inspecteur) sous le script ColorController (Contrôleur couleur), procédez comme suit :
a. Développez Wall Material (Matériau du mur) et, dans Size (Taille), saisissez 2. Ensuite, dans Element 0 (Élément 0) et Element 1 (Élément 1), glissez-déposez after-collision (après-collision) et wall-color (couleur-mur), respectivement.
b. Cliquez sur l’icône d’engrenage à côté de Display Text (Afficher le texte) et sélectionnez message. Display Text (Afficher le texte) correspond au champ que nous avons déclaré dans le script ColorController.cs à l’étape 6.4.
Dans la vue Hierarchy (Hiérarchie), sélectionnez second-wall (deuxième-mur).
Dans la vue Inspector (Inspecteur), cliquez sur Add Components > Scripts (Ajouter des composants > Scripts), sélectionnez ColorController (Contrôleur couleur) dans la liste et répétez l’étape 6.
Répétez les étapes 7 et 8 pour les murs restants.
Cliquez sur le bouton Play (Jouer) en haut pour prévisualiser votre application. Appuyez sur les touches fléchées de votre clavier pour faire rouler la balle.
Étape 7. Créez une version de votre application et exécutez-la.
Selon la plateforme cible que vous avez sélectionnée dans les paramètres de version, Unity crée soit un fichier .apk pour Android, soit un fichier .exe pour Windows. Comme nous n’avons pas utilisé le package d’intégration Oculus, l’application pourrait ne pas fonctionner avec les manettes Meta Quest.
Enregistrez votre scène.
Sélectionnez File > Build and Run (Fichier > Créer et exécuter).
Double-cliquez sur le fichier pour exécuter l’application sur votre ordinateur. Utilisez votre clavier ou un joystick compatible avec Unity pour jouer.