Chasse au trésor toutes les explications
Liens rapides vers le tutoriel:
Tutoriel de chasse au trésor inclusive avec et sans vision! ***Avec toutes les explications***
De quoi ai-je besoin ?
- d’un PC
- d’un smartphone compatible (liste disponible dans le tableau à ce lien https://developers.google.com/ar/discover/supported-devices ) et du cable usb pour envoyer un fichier sur le smartphone(sinon le bluetooth fonctionne mais c’est plus long)
- un ensemble de logiciels à installer, comme expliqué pas à pas dans le tutoriel : Unity, Android Build Support, Package ARCore pour Unity, Android Studio, JDK
- d'un fichier son, MP3 par exemple, qui sera le bruit de votre trésor (cela peut être un bruit de sonar, un bip ou une musique).
- Attention ! À votre première utilisation, vous avez besoin d’internet pour créer et vous connectez à un compte Unity afin d'activer les fonctionnalités
Ca fait quoi quand c'est fini ?
Vous allez pouvoir scanner des surfaces plates (par exemple le sol), et toucher l’écran de votre smartphone pour y mettre un objet virtuel : le trésor. Ce trésor fait du bruit, en 3D, ce qui permet de le retrouver.
Sommaire
Installer Unity
Nous allons maintenant installer Unity, qui permet de créer des jeux vidéos et des applications.
Télécharger Unity
Unity demande d'installer un installateur (appelé Unity hub). Il nous servira à sélectionner la version de Unity à télécharger.
Aller sur le site de Unity sur la page du téléchargement https://unity3d.com/fr/get-unity/download et cliquer sur « Sélectionnez votre version de Unity + télécharger » (en bas à gauche sur l’illustration)
Sélectionner la version « Personal » si vous entrez dans les critères (principalement, vous ne voulez pas vendre ou faire des bénéfices avec ce que vous réaliserez avec, ni que vous l’utiliserait dans le cadre de votre entreprise) en cliquant sur « Try Personal » visible en bas à droite de illustration.
Sur la page suivante (illustration), cochez la case pour accepter les conditions d’utilisation « Personal » visible en haut sur l’illustration (la phrase commence par « by clicking, »), puis en cliquant sur le bouton de téléchargement « Download Unity Hub » visible en bas sur l’image.
Le téléchargement devrait commencer, enregistrer le fichier sur votre ordinateur quand cela vous ait proposé, en cliquant sur « Enregistrer le fichier » si cela vous est demandé comme visible sur l’illustration
Télécharger sur votre PC
Ouvrez le fichier téléchargé et accepter l’application à réaliser des modifications sur votre appareil si on vous le demande. L’assistant d’installation Unity est ouvert (illustration), vous pouvez cliquer sur « J'accepte » si les termes de l'utilisation cous conviennent, pour commencer l’installation de Unity Hub.
Vous allez choisir l'emplacement d'installation de Unity Hub. Si l'installation vous convient, cliquer sur "Installer".
Attendez la fin de la barre de chargement. Sur la fenêtre de fin d'installation, vérifier que "Lancer Unity Hub" est coché et appuyer sur "Fermer".
S'il y a une alerte de sécurité, décochez tout et cliquer sur "Autoriser l'accès".
Installer sur votre PC
Quand Unity Hub s'ouvre, cliquer sur "Add" en haut à droite quand on se trouve sur "Installs" dans le menu de gauche.
Choisissez une version Unity 2018 ou 2017 (sur l'image, Unity2018.4.0f1) et appuyer sur "Next" (qui signifie "suivant").
Vous allez maintenant choisir exactement ce que vous allez télécharger. Comme visible sur l’illustration, je télécharge Android Build Support qui permet créer des applications pour Smartphone et tablette Android plus tard. Personnellement, j'installe aussi Vuforia que j'utilise dans d'autres projets (tutoriels à venir).
Cliquer sur "Done" en bas de l'écran.
Accepter l’application à réaliser des modifications sur votre appareil si on vous le demande
Vous pouvez voir la barre s'installation qui se remplit en bleu au dessus, puis qui indique "Installing"
Attendez la fin de l’installation.
Cette étape finie, vous pouvez fermer.
Lancer Unity
Maintenant, vous devez démarrer Unity (en le sélectionnant dans votre menu démarrer ou en cliquant sur le raccourci sur votre Bureau Windows). L’icone de Unity est visible sur l'illustration.
Attention ! À votre première utilisation, vous avez besoin d’internet pour vous connectez à un compte Unity (et en créer un si vous n’en avez pas en cliquant sur « create one ») comme demandé (illustration). Les prochaines utilisations ne nécessitent pas de connexion à part si vous voulez télécharger un élément Unity (par exemple, un élément en 3D pour décorer votre monde dans l’Asset Store).
Sélectionnez ensuite votre licence d’utilisation Unity (comme Unity Personal si vous respectez les conditions) puis cliquez sur « Next ».
A l’étape suivante, sélectionnez pourquoi vous avez choisi la licence sélectionnée précédemment si cela est demandée, par exemple car on ne l’utilise pas dans le cadre professionnel en bas (comme sur l’illustration) puis cliquez sur « Next ».
Une fois l’activation réalisée, vous pouvez utiliser Unity !
Préparer le nécessaire (la scène de « jeu vidéo »)
Partie 1 : Créer une scène vide et comprendre l’organisation des fenêtres du logiciel
Créer un nouveau projet Unity
Ouvrez Unity et créez un nouveau projet.
Pour cela, ouvrez Unity en double-cliquant sur le raccourci Unity sur le bureau ou ouvrant Unity via le menu Démarrer de Windows. Unity peut mettre un petit moment avant de s’ouvrir, c’est tout à fait normal. Une fois que Unity est ouvert, cliquer sur « New » (qui signifie « Nouveau » en français) en haut à droite
Vous pouvez l’appeler « Chasse au tresor » (ne mettez aucun accent ni caractères spéciaux ) dans le champ Project name (Illustration). Cliquez ensuite sur « Create project » pour créer le projet en bas à droite.
Le projet s’ouvre avec une nouvelle scène et plusieurs fenêtres (illustration)
Arranger et comprendre les fenêtres de Unity
Ce passage est une question de préférences personnelles. Voici comment j’organise personnellement les fenêtres de Unity, que j’utiliserai par la suite. Voici comment faire : Aller en haut à droite de votre fenêtre unity et cliquer sur « Layout » puis sélectionner « 2 by 3 », comme visible sur l’illustration. Vous pouvez ensuite faire un « drag and drop » aussi appelé un "glisser-déposer" (maintenir la souris cliquée sur un élément pendant que l’on déplace cet élément vers l’endroit où l’on veut le déplacer) pour positionner l’onglet « Projet » sous l’onglet « Hierarchy ». Puis, faites glisser l'onglet "Project" sous l'onglet "Hierarchy" en maintenant le clique sur l'onglet "Project" et en le positionnant sous l'onglet "Hierarchy". Vous pouvez ensuite enregistrer cette disposition des onglets dans Unity en cliquant sur le même menu mais en choisissant « Save Layout » (qui signifie en français « sauvegarder cette disposition ») puis en choisissant le nom que vous donnez à cette configuration.
Vous avez donc (illustration) à gauche, en haut l’onglet indiqué comme s’appelant « Scene », et l’onglet indiqué comme s’appelant « Game » en dessous. Au milieu se trouve l’onglet « Hierachy » en haut et « Project » juste en dessous. A droite se trouve l’onglet « Inspector ».
L’onglet « Scene » permet de voir la scène (souvent 3D) chargée dans Unity et les objets dedans. Les scènes sont des environnements où le jeu se passe. Cela peut correspondre à différents niveaux dans un jeu par exemple. Pour l’instant, c’est une nouvelle scène et elle est presque vide (seulement une caméra et une lumière comme visible dans l’onglet « Hierarchy »).
L’onglet « Hierarchy » permet de voir quels objets (« Game objects » dont dans la scène chargée dans Unity et leur organisation). Ici, on voit que dans la scène chargée à l’ouverture (appelée « SampleScene » qui signifie « Scène-Echantillon ») contient les éléments indispensables : une caméra principale (« Main Camera ») et une lumière directionnelle (« Directional Light »). Une caméra permet de créer une image quand on lance un jeu vidéo. La lumière directionnelle permet de mettre la lumière (sinon ce que voit la caméra sera noir).
Ce que voit la caméra est affiché dans l’onglet « Game » (game signifie jeux en français).
L’onglet « Project » on voit tous les éléments du projets, qu’ils soient ou non dans la scène. On y retrouve même les autres scènes quand il y en a plusieurs.
L’onglet « Inspector » permet d’avoir les informations (d’« inspecter ») sur ce que l’on a sélectionné, par exemple dans l’onglet « Hierarchy ».
Partie 2 : Lancer ARCore
ARCore est un package, c'est à dire un ensemble de fonctionnalités qui existe déjà et que l'on n'a pas besoin de refaire. Nous allons maintenant installer un ensemble de fonctionnalités de réalité augmentée déjà existantes : le package ARCore
Seulement si vous avez installé Unity2019 : Vous avez deux éléments en plus à installer. Aller en dans Unity, dans le menu en haut cliquer sur l’onglet Windows puis sur Package Manager : Window > Package Manager. Attendez que les packages (liste à gauche de la fenêtre qui s’ouvre) soit chargée, et sélectionner « Multiplayer HLAPI » et « XR Legacy Input Helper. ». Si vous ne les trouvez pas, c'est que vous n'avez pas Unity 2019, vous pouvez passer à la suite.
Dans tous les cas : Nous allons télécharger le SDK ARCore.
Le SDK ? Cela signifie ‘Software Development Kit’, et si on mélange plein de lettres ça veut dire que c’est tout ce dont on a besoin pour faire ses propres programmes informatiques (ici, tout ce qu’on a besoin pour faire de la réalité augmentée avec ARCore).
Pour commencer, aller sur la page https://github.com/google-ar/arcore-unity-sdk/releases et descendez jusqu’à trouver le fichier à télécharger appelé arcore-unity-sdk-V1.9.0.unitypackage
Cliquer sur ce lien pour télécharger le fichier et enregistrez le fichier sur votre ordinateur
Maintenant que le package est téléchargé, nous allons l’importer dans le projet Unity :
Aller dans le menu du haut dans Unity et cliquer sur Assets, puis sur Import Package, puis cliquer sur Custom Package (illustration). Dans la fenêtre qui s’ouvre, trouvez et sélectionner le package que vous venez de télécharger et cliquez sur ouvrir.
Sur la fenêtre qui s’ouvre, vérifier que tout est bien coché et cliquer sur import en bas à droite(illustration) , puis attendez que l’importation se termine.
Une fois l’importation terminée, aller dans l’onglet « Project », dans « Assets » cliquer sur le dossier « GoogleARCore », puis sur « Examples », « HelloAR » et enfin « Scenes ». Dans ce dossier il y a un élément (une scène) appelée HelloAR (illustration). Double cliquez dessus pour l’ouvrir.
Une scène presque vide (illustration) est ouverte.
Partie 3 : Rajouter le « trésor » sonore de base
L’idée est de faire un trésor à trouver qui fait un son de plus en plus fort quand on se rapproche, et un son dans l’oreille gauche que l’objet est sur la gauche etc.
D’abord on va créer un premier modèle de trésor (c’est à dire un cube qui fait du bruit), on l’améliorera après avoir fait une application de smartphone.
Aller dans le menu en haut de Unity sur « GameObject », puis « 3D Object », puis sélectionner « Cube ». Cela devrait ressembler à l’illustration.
Dans la fenêtre « Hierarchy », faites un clic droit sur le cube, sélectionner « Audio » puis « Audio Source » (Illustration 1). Cela rajoute cet élément à votre cube, comme visible dans la fenêtre « Inspector » (illustration 2). Une source audio permet de rendre un objet sonore.
Il faut maintenant copier le son que l’on va attribuer au trésor (au cube) dans le projet. Pour cela, il faut ouvrir le dossier de votre ordinateur avec le son que vous souhaitez associer au cube (par exemple une musique sur votre ordinateur). Une fois sur ce dossier ouvert, faites un « glisser-déposer » (drag and drop en anglais ) : cliquez sur le fichier son, maintenez cliqué et déplacer la souris en maintenant cliqué pour ne le relâcher qu’une fois sur votre souris est sur le dossier « Assets » dans le fenêtre « Project »
En ayant sélectionné « Audio source » du cube dans la fenêtre « Hierarchy », on peut voir dans l’inspecteur un champ « Audio clip ». Cliquer sur le rond à droite du champ, une fenêtre s’ouvre pour choisir un son, choisissez le son que vous allez attribuer au trésor en double cliquant dessus (illustration).
Bouger le slider « Spatial blend » tout à droite pour que le son soit un son 3D comme sur l’illustration (le son 2D correspond à un son d’ambiance)
Pour que le son tourne en boucle, cocher la case « Loop ».
Maintenant, nous allons définir cet object (cube + son) comme notre modèle de trésor. C’est ce que l’on appelle un préfab. Pour cela, cliquer sur « cube » la fenêtre « Hierarchy », et faites un glisser-déposer sur « Assets » dans le fenêtre « Project ». Votre cube apparaît dans « Project » (illustration ). Vous pouvez supprimer le cube dans la « Hierarchy ».
Dans « Hierarchy », sélectionner « Example Controller ». Dans « Inspector », cliquer sur le rond à droite du champ « Andy plane prefab » et sélectionner le prefab « Cube » en double cliquant dessus dans la fenêtre qui s’ouvre (illustration ).
Enregister votre scène dans Unity en allant dans le menu Unity "File" "Save". Il n’y a « plus qu’à » faire l’application sur Smartphone !
Faire l'application de smartphone:
Installer le nécessaire pour faire l’application de smartphone Android
Mais, pourquoi ça ne fonctionne pas déjà directement sur un smartphone ?
On peut faire la métaphore entre les différents systèmes d’exploitation (Windows, Android), avec les climats (Windows = climat tropical, Android = Climat tempéré). Votre programme sur Unity est une plante, tropicale donc. Mettez là sur le climat tempéré de Android, cela ne fonctionnera pas. Il y a donc deux solutions : faire une greffe sur un pied qui supporte les climats tempérés (c’est ce que l’on fait dans cette partie). L’autre façon (que l’on évite ici) c’est de faire une serre pour faire croire à plante qu’on est sous à climat tropical, c’est à dire croire que l’on est sous Windows alors qu’on est sous Android (c’est le principe de la machine virtuelle).
Revenons à notre application : on va donc faire en sorte que notre application-plante soit adaptée à Android, alors que nous ne sommes pas du tout sur Android car nous sommes sur Windows. Nous allons déjà préparer le terrain pour avoir un pied sur lequel greffer notre version Windows. Et ensuite on emballera la plante greffée pour pourvoir l’envoyer dans notre Android-Zone tempérée.
Partie 1: Installer le JDK
La première étape est d’installer le JDK sur votre ordinateur, ce qui veut dire ‘Java Development Kit’, et si on mélange plein de lettres ça veut dire que c’est tout ce dont on a besoin pour faire ses propres programmes informatiques utilisant Java, et Android se base sur Java. Donc le JDK, c’est le compost, on va pouvoir mettre notre pied pour la greffe juste ensuite.
Pour cela aller sur le site https://www.oracle.com/technetwork/java/javase/downloads/index.html , et cliquer sur le carré avec marqué Java, et « jdk » indiqué en dessous (illustration).
Sur la page suivante, descendez jusqu’à voir les liens de téléchargement pour Windows.
Cliquer sur « Accept Licence Agreement » pour accepter la licence d’utilisation si elle vous convient, puis cliquer le lien Windows terminant par « .exe »
Enregistrer le fichier sur votre ordinateur (illustration) puis ouvrer ce fichier.
Si on vous demande si vous souhaitez que ce fichier apporte des modifications à votre ordinateur, cliquer sur « Oui » ou « Accepter ». Cliquer sur « Next » sur la fenêtre qui s’ouvre pour installer le JDK (illustration).
La page suivante vous demande si vous souhaitez changer l’emplacement de l’installation. Si l’emplacement vous convient, cliquer sur « Next ».
Attendez la fin de la barre de chargement.
Vous pouvez ensuite appuyer sur « Close » pour fermer l’assistant d’installation. Bonne nouvelle, le terreau est prêt !
Partie 2: Installer le SDK Android (Android studio)
Encore un SDK ? Cela signifie toujours ‘Software Development Kit’, et si on mélange plein de lettres ça veut dire que c’est tout ce dont on a besoin pour faire ses propres programmes informatiques (ici, tout ce qu’on a besoin pour faire utiliser Android).
On a le terreau (le JDK), maintenant, on va voir besoin du pied pour faire la greffe de votre plan. Nous allons donc installer Android Studio,
Aller sur la page https://developer.android.com/studio puis descendre jusqu’à la partie « Android Studio Download », et cliquer sur le lien se terminant par ".exe" sur la ligne Windows.
Si vous êtes d’accord avec les conditions d’utilisation, cochez la case « I have read and agree with the above terms and conditions », puis appuyez sur « DOWNLOAD ANDROID STUDIO FOR WINDOWS »
Puis enregistrer le ficher sur votre ordinateur
Une fois que le fichier est enregistré, aller dans le dossier où le fichier est téléchargé et faire double-cliquer dessus pour lancer l'installateur. Si on vous demande si vous souhaitez que ce fichier apporte des modifications à votre ordinateur, cliquer sur « Oui » ou « Accepter ».
Sur la première page de l'assistant d'installation, cliquez sur "Next".
Dans la fenêtre "Choose Components" (qui signifie "Choisir les composants" à installer), garder séléctionné Android Studio, le deuxième point n'est pas obligatoire. Puis cliquez sur "Next".
La page suivante vous demande si vous souhaitez changer l’emplacement de l’installation. Si l’emplacement vous convient, cliquer sur « Next ».
Dans la fenêtre suivante, cliquez en bas sur "Install".
Attendez la fin de l'installation, que vous pouvez suivre grâce à la barre de progression (illustration).
Finalement, décochez "Start Android Studio" et cliquez sur "Finish".
Partie 3: Configurer Unity
Nous allons maintenant indiquer à Unity où se trouve Android Studio installé juste avant.
Il faut aller dans Unity, menu Edit en haut, puis cliquer sur « Preferences »
Dans la fenêtre qui s’ouvre, aller dans « External tool » et dans la partie « Android », cliquer sur « Browse » et naviguer jusqu’au dossier où a été installé le SDK Android, puis cliquer sur « Sélectionner le dossier » .
Vous pouvez fermer la fenêtre.
Revenons sur la métaphore de la plante. Nous avons notre plante d’origine (notre projet Unity), notre terreau (le JDK), notre plant pour la greffe (le SDK Android). Maintenant, nous allons faire la greffe et emballer le tout pour le transport. En pratique, nous allons créer le fichier d’installation de l’application Android (build), pour le télécharger sur le smartphone et installer l’application.
Dans UNity ouvert avec votre projet de chasse au trésor ouvert, allez dans le menu « Files » et sélectionner « Build Settings ».
Dans la fenêtre qui s’ouvre, vous avez quatre choses à faire : (1) sélectionner « Android » sur le menu à gauche, et (2) Appuyer sur « Add open scene » en haut à droite, puis cliquer sur « Switch Platform » en bas (illustration). (3) Attendez que la « Switch Platform » soit fini, cette opération permet de créer le fichier d’installation d’une application (fichier apk). Finalement, (4) cliquer sur « Player settings ».
Dans « Player settings », nous allons définir les informations nécessaires pour l’application. Vous pouvez mettre votre nom ou le nom de vos institutions (à la place de « Default Company »), le nom de l’application telle qu’elle sera sur le smartphone est à indiquer juste en dessous, ne mettez aucun accent ni caractères spéciaux. Vous pouvez choisir une image du projet pour l’icone de l’application sur votre smartphone dans la ligne « Default Icon »
Descendre pour voir dans « Other settings » section « identification ». La ligne « Package Name » doit être modifée : elle doit être personnalisée et unique pour chaque application. Choisissez un nom, par exemple « Com.MonNom.ChasseAuTresor ». Pour « Minimum API Level », il faut choisir à partir de quelle version d’Android l’application fonctionnera. ARCore que l’on utilise fonctionne à partir de Android 7.0 Nougat (API level 24), c’est ce qu’il faut selectionner. Pour « Target API level », choisissez « Automatic (highest installed)»
Descendez et cliquer sur XR settings, puis cochez la case « ARCore supported »
Mettre l'application sur smartphone
Partie 1: Créer le ficher d'installation de l'application
Nous allons maintenant créer le fichier d'installation, à mettre ensuite sur votre smartphone.
De retour dans la fenêtre « Build Settings », Cliquer sur « Build ». Choisissez où enregistrer le fichier apk et son nom, par exempe AppTresor.apk.
Attendre que la barre de progression soit finie, cela peut prendre plusieurs minutes.
Partie 2: préparer votre smartphone en installant ARCore
En premier lieu, installer via Google play l’application « ARCore de Google » sur votre smartphone.
Une fois que cela est fait, envoyer le fichier de votre application (AppTresor.apk) sur votre smartphone, par cable USB ou Bluetooth, et une fois téléchargé ouvrez-le sur le smartphone. Suivez les instructions pour l’installer : c’est fini !
Partie 3: Utiliser
Lancer votre application « Chasse au tresor » sur votre smartphone : vous devriez trouver l’application sur le menu de votre smartphone.
Une fois lancée, diriger la caméra vers le sol ou une surface plane pour voir un maillage apparaître (indiquant que l’application a détecté la surface). Toucher l’écran là où il y a le maillage, et le « trésor » apparaît là où on a touché l’écran.
Utiliser un casque ou des écouteurs. Le son est rendu comme si le smartphone était la tête : incliner le smartphone équivaut à tourner la tête, approcher ou éloigner le smartphone rend le son plus ou moins fort.
Avoir un vrai trésor
L'Asset Store
Afin d'avoir des éléments plus sympas que des cubes, il existe des éléments prêts à télécharger, gratuits ou payants, qui s'appellent des assets. Nous allons pouvoir télécharger ces assets sur l'Asset Store.
Dans Unity, aller dans Window, et selectionner « Asset Store ».
Dans la fenêtre qui s’ouvre, chercher dans la barre de recherche en haut « treasure » et appuyer sur « entrée ».
Cliquer sur « pricing » en bas à droite, puis bouger le rond de droite tout à gauche sur le slider afin de ne garder que les objets gratuits
Cliquer sur un objet qui vous plait, par exemple « Treasure Set- Free Chest ».
Sur la pop-up qui s’ouvre, appuyer sur « Download »
Connectez-vous à votre compte Unity (celui utilisé pour l’installation) si cela est demandé, et appuyer sur « Import » une fois le téléchargement terminé, puis sur à nouveau « Import » dans la fenêtre qui s’ouvre
Cliquer sur l’onglet « Scene » pour y revenir.
Faites un glisser-déposer de ce prefab dans l’onglet « Hierarchy »
Si vous souhaitez rajouter des pièces dans le trésor avec ChestFree, trouver l’objet « coins » un peu plus bas, faites un glisser déposé sur « chest_open » dans l’onglet « Hierarchy ». Toujours dans « Hierarchy », cliquer sur « coins » en dessous de « chest_open » puis dans l’onglet à droite « Inspector », mettez la Positon, et la Rotation à 0 partout, et Scale à 1 partout.
Pour etre sur que votre objet sera dans le bon sens, dans l'onglet "Hierarchy", faites un clic droit et sélectionner "Create Empty". Cela va créer un objet "vide", sans doute applelé "GameObject".
Faites glisser votre objet trésor "chest_open" sur ce "GameObject". "chest_open" apparait en dessous de "GameObject".
Maintenant, il faut refaire comme avec le cube: on ajoute une audio-source avec un son, puis on transforme l'objet en préfab, et on l'enlève de la "hierarchy", et finalement le définit comme le prefab à utiliser dans Exemple Controller.
Aller dans menu Files et cliquer sur Save As pour enregistrer la scène sous un nouveau nom, pour ne pas perdre la première version.
Générez un nouveau fichier d'installation (apk), et réinstallez-le sur votre smartphone.