[Il y a des GIF 3D sous la coupe]La réalité augmentée (RA) est soudainement devenue un terme très populaire. Grâce à Vuforia, les développeurs peuvent facilement
compléter le monde physique avec du contenu numérique.
Bien que la sortie d'
ARKit et d'
ARCore ait contribué à accroître la popularité de la réalité augmentée, d'autres plateformes et SDK existaient déjà. L'un d'eux était Vuforia; et récemment, Unity a
conclu un accord de partenariat avec Vuforia et intégré cette plate-forme AR dans le moteur de jeu Unity.
Dans ce tutoriel, je vais créer un jeu AR en utilisant le SDK Vuforia intégré au moteur Unity. Dans le processus, je parlerai des composants clés suivants:
- Configurer le transfert de données à partir d'une caméra de réalité augmentée
- Suivi d'images - ce que c'est et comment ça marche
- Attacher du contenu numérique à un objet physique
- Créez des interactions personnalisées qui se déclenchent en fonction de ce que la caméra voit
Remarque: ce tutoriel sur Vuforia suppose que vous connaissez déjà les bases du développement dans Unity. Si vous débutez avec Unity, consultez le formidable didacticiel Mise en route dans Unity .
Développement de jeux AR dans Unity
Il existe de nombreux dispositifs AR sur le marché, mais le principal objectif des applications AR est l'espace mobile des plates-formes telles que iOS et Android. C'est ici que la combinaison d'Unity et de Vuforia est pratique - dans le développement multiplateforme. Un autre avantage est que l'application peut être testée dans l'éditeur. Pour cela, il vous suffit d'une webcam!
Avant de commencer, téléchargez la dernière version d'Unity et installez le
composant Vuforia Augmented Reality Support . Si vous utilisez
Unity Hub , vous pouvez ajouter ce composant à une version déjà installée de Unity.
Se rendre au travail
Maintenant que vous avez Unity, Vuforia et une webcam, vous devez télécharger un exemple de projet (à
partir d'ici ).
Après le téléchargement, extrayez les fichiers et ouvrez le projet
Comment créer un jeu AR à l'aide de Vuforia Starter dans Unity. Lorsque le projet se charge, ouvrez la scène
Starter à partir du dossier
Scenes et regardez la fenêtre Hiérarchie:
Après avoir examiné la composition du projet, cliquez sur le bouton
Jouer dans l'éditeur pour remplir la commande dans notre jeu de pizza.
Super, nous pouvons jouer avec la pizza, mais notre vrai défi est de transformer cela en un jeu AR.
Remarque: les ressources de l'interface utilisateur de ce didacticiel ont été téléchargées depuis shareicon.net
.
Rencontrez le chef Vuforia
Pour ce faire, nous devons faire apparaître la pizza virtuelle sur l'image du tracker que nous détenons dans le monde réel. Après avoir ajouté la garniture à la commande, vous pouvez «servir» physiquement la pizza, la retirer de la visibilité de la caméra ...
Mais tout a son temps. Vous devez d'abord remplacer
la caméra principale par la caméra AR . Retirez la
caméra principale de la scène, puis
cliquez avec le
bouton droit dans la
hiérarchie .
Ajoutez ensuite
Vuforia -> AR Camera . Cela fera apparaître cette fenêtre:
Cliquez sur
Importer et attendez que le package Vuforia soit importé dans le projet, et plusieurs fichiers seront ajoutés.
Vous pouvez ignorer les nouveaux fichiers dans les dossiers
Editor et
Streaming Assets . Ce ne sont que des modèles; Les fichiers dont nous avons besoin sont inclus dans le projet.
Le dossier
Vuforia contient tous les préfabriqués et scripts utilisés par la plate-forme Vuforia, que nous utiliserons.
Il convient également de mentionner le fichier
VuforiaConfiguration dans le dossier
Resources . Ce fichier a été ajouté car une licence est requise pour développer l'application Vuforia. Cependant, si vous le souhaitez, vous pouvez obtenir une licence de développeur gratuite pour le
portail des développeurs Vuforia .
Remarque: si votre projet ne possède pas de clé de licence d'application, elle se trouve dans le fichier README. Copiez la ligne dans le champ d'
inspection du fichier
VuforiaConfiguration .
Maintenant que nous avons une caméra AR dans la scène, il ne reste plus qu'une chose à faire - allumer la réalité augmentée!
Allez dans
Edition -> Paramètres du projet -> Lecteur . Faites défiler les options
XR Settings et assurez-vous que la
case Vuforia Augmented Reality Supported est cochée.
Cliquez dans l'éditeur
Play et dites-vous bonjour!
Remarque: si vous avez cliqué sur lecture et que l'écran «Échec de l'initialisation de Vuforia» apparaît, essayez de redémarrer Unity. Il s'agit d'un bogue aléatoire qui n'apparaît que sur certains systèmes.
Introduction à la reconnaissance des formes
S'admirer est bien sûr génial, mais n'allions-nous pas faire un jeu de pizza?
Par défaut, Vuforia fonctionne avec la
reconnaissance d'image . La reconnaissance de formes, également connue sous le nom de Tracker Recognition ou Image Tracking, est un processus dans lequel une caméra reconnaît une image prédéfinie et sait quoi en faire, par exemple, afficher du contenu par-dessus. Cela fonctionne mieux lorsque l'image de suivi correspond en quelque sorte au contenu, par exemple, les plans d'étage pour le rendu du bâtiment fonctionnent bien au-dessus de l'image avec le bâtiment.
Comment ça marche: il est très important de choisir une image de bonne qualité pour le suivi. Lorsque vous utilisez Vuforia, vous pouvez télécharger l'image sélectionnée sur le portail du développeur pour vérifier la qualité de son suivi, et cela doit être fait
avant de commencer le développement. Le portail des développeurs attribue une note à l'image, mais, plus important encore, affiche ses «points caractéristiques». Pour que le tracker soit bon, ces points caractéristiques (points caractéristiques) doivent être densément répartis sur l'image et ne doivent pas contenir de motifs répétitifs. Au moment de l'exécution, la caméra recherche ces points caractéristiques pour calculer sa position par rapport à l'image.
Pour ce didacticiel, l'image et la base de données de suivi sont déjà configurées. L'image de la pizza se trouve dans le dossier Matériaux que vous avez téléchargé précédemment. Idéalement, imprimez-le. Ou vous pouvez l'ouvrir sur un appareil numérique, puis le «montrer» à l'appareil photo. Voici à quoi ressemble l'image dans la base de données Vuforia Tracker:
Comme vous pouvez le voir, les points caractéristiques sont bien répartis. C’est aussi de la pizza, ce qui est pratique!
Ajout de cibles d'image à la scène
Il est temps de faire la magie! Nous ferons apparaître la pizza virtuelle au-dessus de notre pizza. Encore une fois, utilisez le menu
Créer dans la
hiérarchie et sélectionnez
Vuforia -> Image .
Nous avons maintenant un
GameObject cible d'image dans la scène. Regardez cette cible dans l'inspecteur et vous verrez plusieurs composants. Les plus importants sont le
comportement de la cible d'image et le
gestionnaire d'événements traçables par défaut . Nous examinerons la seconde plus en détail plus tard, mais pour l'instant, assurez-vous que les options de la liste déroulante
Comportement cible de l'
image sont configurées comme suit:
- La base de données est définie sur RW_ItsaPizza
- Cible d'image définie sur PizzaClipArt
Vous vous souvenez des fichiers ajoutés précédemment au projet que j'ai demandé d'ignorer? Vous les avez trouvés! Vuforia ajoute plusieurs bases de données d'exemples Image Target afin que nous puissions commencer à les développer et à les utiliser pour des exemples, tels que celui que nous utilisons, déjà ajoutés au matériel.
Remarque: le tracker Pizza est la seule cible d'image dans votre base de données; cependant, il peut y avoir des centaines d'images dans une base de données. De plus, il peut y avoir plusieurs bases de données dans une seule application.
Maintenant que nous avons configuré la
caméra AR et le
suivi d'images dans la scène, nous avons tout ce dont vous avez besoin pour que la réalité augmentée fonctionne! Dans l'éditeur, cliquez sur le bouton
Lecture et placez l'image imprimée devant la caméra.
Nous avons eu une pizza!
Attacher des objets de jeu aux trackers en tant qu'objets enfants
La pizza est un peu petite, mais elle est fermement collée à l'image du tracker. Vous pouvez également remarquer que si vous supprimez l'image suivie, la pizza restera suspendue en l'air.
Le fait est que même si la webcam peut voir le
traqueur d'image , Vuforia est capable de mettre à jour la position de la
caméra AR dans la scène. Si vous voulez voir cela en action, configurez l'éditeur Unity de sorte que les fenêtres de
jeu et de
scène soient visibles en même temps, puis sélectionnez
AR Camera et cliquez sur Play.
Comment faire pour que la pizza se comporte correctement lorsque la caméra fonctionne? Sélectionnez
ImageTarget dans la hiérarchie. Vous verrez que son échelle sur chaque axe est de
10 . Ceci est contrôlé par le composant
Image Target Behavior . Dans la section avancée, vous pouvez voir que le paramètre
Width a une valeur de
10 . Il a été défini lors du téléchargement de l'image sur le site Web du développeur Vuforia.
Astuce: vous ne comprenez pas pourquoi Image Target a été défini sur une largeur de 10 dans ce didacticiel? Lorsque la taille n'est pas un facteur important pour l'application, le définir sur 10 donne à la caméra une chance accrue de suivre, tout en conservant une bonne position pour le contenu entre les plans proche et éloigné de la caméra AR. Cependant, il est parfois nécessaire que la réalité augmentée ait une certaine échelle. Dans ce cas, vous devez définir la taille de l'image-tracker afin qu'elle corresponde aux mesures physiques lors du téléchargement sur le portail du développeur.
Sélectionnez maintenant GameObject
Pizza dans la
hiérarchie . Faites-le glisser vers
ImageTarget pour en faire un enfant. L'échelle passera à
(X: 0.1, Y: 0.1, Z: 0.1) . Remettez-le aux valeurs
(X: 1, Y: 1, Z: 1) et déplacez également la position jusqu'à
0.01 long de l'axe
Y. Grâce à cela,
Pizza se conformera à
ImageTarget .
Appuyez à nouveau sur
Lecture et vous verrez que la pizza est au-dessus de l'image et disparaît également lorsque l'image disparaît du cadre.
Explorer DefaultTrackableEventHandler
Ce comportement est extrait du
DefaultTrackableEventHandler de l'
ImageTarget . Ouvrez le script et affichez-le.
Le script est bien commenté, mais il convient de prêter attention à certains aspects:
- La fonction Démarrer enregistre ce script en tant que gestionnaire d'événements pour le TrackableBehaviour (dans ce cas, ImageTargetBehaviour ).
- OnDestroy supprime ce lien.
- OnTrackableStateChanged est la fonction la plus importante. Son code indique ce qui devrait se produire lorsque l'état de suivi change.
- OnTrackingFound et OnTrackingLost sont appelés à partir de OnTrackableStateChanged . Dans DefaultTrackableEventHandler, ils basculent les composants Renderer , Collider et Canvas de tout enfant.
Lorsque la caméra détecte une image, elle ne déplace plus simplement la
caméra AR ; elle ordonne également à GameObject
Pizza d'activer tous ses composants de
rendu , et lorsque l'image disparaît de la caméra, il ordonne à nouveau de les désactiver.
Digérez ces informations pour l'instant.
Créez vos propres actions de suivi
Il est temps de faire quelque chose avec ces informations!
Supprimez le composant
DefaultTrackableEventHandler d'
ImageTarget . Ajoutez ensuite le
PizzaTrackableEventHandler , qui se trouve dans le dossier
Scripts . Ouvrez ensuite
PizzaTrackableEventHandler . Il s'agit d'un clone de
DefaultTrackableEventHandler , mais le code de
OnTrackingFound et
OnTrackingLost a été supprimé -
vous devez résoudre ce problème!
L'activation et la désactivation des composants
Renderer sont utiles dans presque toutes les applications AR, alors récupérons ce code. Si vous êtes bloqué, vous pouvez le copier à partir du
DefaultTrackableEventHandler ou le trouver sous le spoiler ci-dessous.
Code protected virtual void OnTrackingFound() { var rendererComponents = GetComponentsInChildren<Renderer>(true);
Nous sommes prêts à transformer ce projet en jeu en réalité augmentée!
Regardez l'interface utilisateur et trouvez le bouton sur lequel le joueur doit appuyer pour terminer sa pizza.
Comme vous pouvez le voir, lorsqu'un bouton est enfoncé, Event
GameManager.CompleteOrder() appelé. Au lieu de forcer le joueur à appuyer sur le bouton, vous pouvez vous assurer qu'il a «servi» de la pizza pour terminer la commande (il a retiré le tracker de la visibilité de la caméra).
Au début de
PizzaTrackableEventHandler, ajoutez un
UnityEvent à appeler lorsque Image perd le suivi.
using Vuforia; using UnityEngine; using UnityEngine.Events; public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler { public UnityEvent OnTrackingLostEvent; ...
Appelons maintenant l'événement dans la méthode
OnTrackingLost :
protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true);
Cela rend
PizzaTrackableEventHandler plus flexible, car nous pouvons maintenant définir l'exécution de toutes les actions si le suivi est perdu. Enregistrez le
PizzaTrackableEventHandler , revenez à l'éditeur Unity et attendez la fin de la compilation. À la fin,
GameManager.CompleteOrder() lorsque le tracker de suivi des pizzas est perdu. Enfin, désactivez ou supprimez
CompleteOrderButton dans l'interface utilisateur.
Enregistrez la scène, cliquez sur
Jouer et servez la pizza!
Où aller ensuite
Félicitations, vous avez terminé le didacticiel!
Un exemple de projet peut être téléchargé
ici .
Pour plus d'informations sur le développement avec Vuforia dans Unity, consultez la
bibliothèque des développeurs Vuforia ou
le didacticiel Unity .
N'oubliez pas de vous créer un compte développeur sur
le portail Vuforia . Vous pouvez également essayer de télécharger plusieurs trackers différents pour vérifier comment ils sont suivis.
Pour plus de détails, lisez
les boutons virtuels . Le site Web de Vuforia contient des exemples de documents. Vérifiez si vous pouvez créer ces boutons virtuels pour remplacer l'interface utilisateur dans un jeu de pizza.
Trouvez de nouvelles idées pour les jeux de réalité augmentée. Peut-être que c'est un jeu de combat de cartes dans lequel les créatures sautent directement des cartes? Qu'en est-il de la tower defense, où contrôlez-vous un hélicoptère de combat à l'aide de votre téléphone?