{"id":2342,"date":"2020-06-03T23:17:51","date_gmt":"2020-06-03T21:17:51","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=2342"},"modified":"2025-03-10T16:20:45","modified_gmt":"2025-03-10T15:20:45","slug":"projet-3d-un-jeu-simple","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=2342","title":{"rendered":"Projet 3D – Un jeu simple"},"content":{"rendered":"\n

Nous allons aborder diff\u00e9rents aspects de la cr\u00e9ation d’un jeu simple, appel\u00e9 \u00ab\u00a0RGB, The Color Game\u00a0\u00bb.
Bien qu’au final, nous devrions cr\u00e9er un jeu coh\u00e9rent en plusieurs niveaux, nous scinderons l’\u00e9tude en plusieurs fichiers distincts.<\/p>\n\n\n\n

\n
1. Installer le nouvel Input System<\/h5>\n\n\n\n

Cette section est obsol\u00e8te.<\/p>\n\n\n\n

Depuis la version 2019 d’Unity, il existe un nouvel Input System pour g\u00e9rer les \u00e9v\u00e9nements utilisateur. Plus puissant et plus universel, il n’est cependant pas activ\u00e9 par d\u00e9faut. Il est n\u00e9cessaire au bon fonctionnement des personnages des Starter Assets mais il rend obsol\u00e8te de nombreux scripts d’interactions utilisateur disponibles sur de nombreux tutos internet, \u00e0 commencer par ceux vus \u00e0 la page pr\u00e9c\u00e9dente pour faire avancer un objet avec les fl\u00e8ches du clavier, si vous utilisez un FPS ou un TPS.<\/p>\n\n\n\n

\n
\n

Allez dans Menu Window > Package Manager<\/strong>.

Dans la fen\u00eatre qui s’ouvre, ci-dessous, choisissez en haut \u00e0 gauche Package > Unity Registry<\/strong>.
Apr\u00e8s quelques secondes, la liste s’affiche dans la colonne de gauche. Cliquez sur Input System<\/strong>, puis sur le bouton Install<\/strong> en bas \u00e0 droite.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Une alerte vous pr\u00e9vient que vous allez remplacer l’ancien syst\u00e8me.
Cliquez sur le bouton Yes<\/strong>.
Unity va red\u00e9marrer et l’ancien syst\u00e8me sera d\u00e9sactiv\u00e9.<\/p>\n\n\n\n

Il y a ensuite plusieurs moyens de v\u00e9rifier que le nouvel Input System est bien install\u00e9.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

1_ Allez dans le Menu Assets > Create<\/strong>.
Tout en bas de ce Menu tr\u00e8s long, il doit y avoir la ligne Input Actions<\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

2_ Allez dans le Menu Edit > Project Settings<\/strong> et cliquez sur Player<\/strong> dans la colonne de gauche.
Dans la cat\u00e9gorie Configuration<\/strong>, la propri\u00e9t\u00e9 Active Input Handling<\/strong> doit afficher Input System Package (New)<\/strong>.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Dans la version 2022, ce param\u00e8tre est r\u00e9gl\u00e9 par d\u00e9faut sur Both<\/strong>.<\/p>\n\n\n\n

\u00c0 l’inverse, si besoin, pour d\u00e9sactiver le nouvel Input System :
– ouvrez le Package Manager, s\u00e9lectionnez Input System<\/strong> et cliquez sur le bouton Remove<\/strong> en bas \u00e0 droite,
– Dans les Player Settings, choisissez Input Manager (Old)<\/strong> pour la Propri\u00e9t\u00e9 Active Input Handling<\/strong> (voir ci-dessus).<\/p>\n<\/div><\/div>\n\n\n\n

2. User Interface<\/h5>\n\n\n\n

Dans un jeu, les \u00e9l\u00e9ments d’interface sont courants : pour cr\u00e9er un Menu de d\u00e9marrage, pour afficher un panneau de R\u00e9ussite, pour ajouter des Boutons ou des Scores \u00e0 l’espace de jeu. Ces \u00e9l\u00e9ments sont g\u00e9n\u00e9ralement des objets 2D plaqu\u00e9s sur l’\u00e9cran du jeu. Ils peuvent aussi \u00eatre int\u00e9gr\u00e9s \u00e0 l’espace du jeu, mais c’est plus difficile.<\/p>\n\n\n\n

Cr\u00e9ez un nouveau Fichier 3D.<\/p>\n\n\n\n

\n
\n

Dans le Project<\/strong>, dossier Assets > Scenes<\/strong>, renommez la Scene actuelle \u00ab\u00a0Start_Menu<\/strong>\u00ab\u00a0.<\/p>\n\n\n\n

Si la fen\u00eatre ci-contre s’affiche, cliquez sur le bouton Reload<\/strong>.<\/em><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Tous les \u00e9l\u00e9ments d’interface UI<\/strong> (User Interface) sont disponibles par un Clic Droit > UI<\/strong> dans la Hierarchy<\/strong>.
\u00c0 voir ci-contre. Le plus important est le Canvas<\/strong>, rectangle aux dimensions de la fen\u00eatre du jeu, sur lequel sont plac\u00e9s les \u00e9l\u00e9ments d’interface, textes, images, sliders, panneaux, etc.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\u2022 Placer le Canvas<\/h6>\n\n\n\n

Commencez par ajouter un Canvas<\/strong>. Ci-dessous, sur la Scene<\/strong> \u00e0 gauche en 3D, le Canvas<\/strong> se voit \u00e0 peine sous forme d’un trait blanc fin.
Cliquez sur le Bouton 2D<\/strong> en haut \u00e0 droite de la fen\u00eatre Scene<\/strong> et s\u00e9lectionnez le Canvas<\/strong> dans la Hierarchy<\/strong>. Sur l’\u00e9cran \u00e0 droite, le Canvas<\/strong> se devine comme un cadre blanc tr\u00e8s fin, mais pas entier.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Zoomez en arri\u00e8re et d\u00e9placez le Canvas<\/strong> au centre (avec l’outil Main<\/strong>), comme sur l’\u00e9cran ci-dessous. Ou plus rapide, Double Cliquez sur le Canvas<\/strong> dans la Hierarchy<\/strong>.<\/p>\n\n\n\n

Des poign\u00e9es bleues s’affichent lorsqu’il est s\u00e9lectionn\u00e9. L’outil Rect Tool <\/strong>est actif (voir Les bases d’Unity) mais ne permet pas de modifier les dimensions du Canvas<\/strong>.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Le Canvas<\/strong> a par d\u00e9faut une dimension qui d\u00e9pend de la fen\u00eatre Game<\/strong>, dimension visible dans le Component Rect Transform<\/strong>.
Il peut s’adapter \u00e0 diff\u00e9rentes r\u00e9solutions d’\u00e9cran gr\u00e2ce au Component Canvas Scaler.<\/strong>
Il n’est pas possible de modifier ses dimensions avec le Rect Tool<\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

La dimension de la fen\u00eatre Game<\/strong> peut \u00eatre ajust\u00e9e. Activez la fen\u00eatre Game. Cliquez sur le Menu Free Aspect<\/strong> et choisissez une dimension. En mode Free Aspect, vous pouvez ajuster la fen\u00eatre manuellement avec des poign\u00e9es sur chaque c\u00f4t\u00e9.
La dimension choisie est report\u00e9e dans le Component Rect Transform<\/strong> du Canvas<\/strong>. Revenez sur la Scene<\/strong>.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Adapter l’EventSystem<\/h6>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

En m\u00eame temps que le Canvas<\/strong>, un EventSystem<\/strong> est ajout\u00e9, visible dans la Hierarchy.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Cette Section est obsol\u00e8te<\/p>\n\n\n\n

S\u00e9lectionnez l’EventSystem<\/strong> dans la Hierarchy<\/strong>. Dans l’Inspector<\/strong>, le Component Standalone Input<\/strong> affiche un avertissement. Il faut adapter l’EventSystem au nouvel Input System activ\u00e9 au d\u00e9but de cette page.
Cliquez sur le bouton Replace with InputSystemUIInputModule<\/strong>.
Ci-dessous, \u00e0 droite, le Component Standalone<\/strong> est alors remplac\u00e9 par un Component Input System UI<\/strong>.<\/em><\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\u2022 Ajouter un Panel<\/h6>\n\n\n\n

Par Clic Droit > UI<\/strong> dans la Hierarchy<\/strong>, ajoutez ensuite un Panel<\/strong>, qui va devenir automatiquement Enfant du Canvas<\/strong> (Si vous placez directement un Panel<\/strong> ou un autre UI Object<\/strong>, cela cr\u00e9e automatiquement un Canvas<\/strong> comme Parent).<\/p>\n\n\n\n

Ce Panel<\/strong> a les m\u00eames dimensions que celles du Canvas<\/strong>; il servira de fond. Vous pouvez si besoin changer sa couleur dans l’Inspector<\/strong>.<\/p>\n\n\n\n

Vous pouvez aussi placer une image d’arri\u00e8re plan sur ce Panel<\/strong>. Il faut la pr\u00e9parer dans Photoshop \u00e0 la m\u00eame dimension, puis la faire glisser dans un dossier appropri\u00e9 des Assets<\/strong> (dossier Images<\/strong> par exemple). Il faut la convertir en Sprite<\/strong> pour pouvoir vous en servir ainsi. Ce peut \u00eatre une image JPG ou PNG.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

S\u00e9lectionnez l’image dans les Assets<\/strong>. Dans l’Inspector<\/strong>, dans le Menu Texture Type<\/strong>, choisissez Sprite (2D and UI)<\/strong>. R\u00e9glez Sprite Mode<\/strong> sur Single<\/strong>.
Validez en cliquant sur le bouton Apply<\/strong>.
Dans un jeu en 2D, les images doivent \u00e9galement \u00eatre converties en Sprite<\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

S\u00e9lectionnez le Panel<\/strong>. Dans l’Inspector<\/strong>, au Component Image<\/strong>, faites glisser le Sprite<\/strong> dans la zone Source Image<\/strong>. Ajustez si besoin la transparence de la Color<\/strong> en cliquant sur le rectangle de la couleur. Si la Color n’est pas blanche, elle va colorer votre image.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Pr\u00e9parer des fontes<\/h6>\n\n\n\n

Avant de rajouter des textes sur le Canvas<\/strong>, il faut rajouter des Fonts dans les Assets<\/strong> et les pr\u00e9parer afin qu’elles soient reconnues correctement. Vous pouvez utiliser un fichier ttf<\/strong> ou mieux otf<\/strong>.
Cr\u00e9ez un dossier Fonts dans les Assets<\/strong> et faites-y glisser vos fontes.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Allez dans le Menu Window > TextMeshPro > Font Asset Creator<\/strong>. C’est l’outil qui va vous permettre de convertir les fontes au format Text Mesh Pro<\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Quand vous lancez cet outil pour la premi\u00e8re fois, il faut installer des ressources suppl\u00e9mentaires. Dans la fen\u00eatre qui s’ouvre, ci-dessous, cliquez sur le bouton Import TMP Essentials<\/strong>. Inutile de cliquer sur le bouton Import TMP Example & Extras<\/strong> et fermer cette fen\u00eatre.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Un dossier TextMesh Pro<\/strong> est ajout\u00e9 dans les Assets<\/strong>.
L’activation de TextMeshPro aurait pu se faire manuellement \u00e0 partir de Package Manager.<\/p>\n\n\n\n

La fen\u00eatre ci-dessous apparait. \u00c0 la premi\u00e8re ligne, cliquez sur le cercle \u00e0 droite du r\u00e9glage Source Font File<\/strong> et dans le panneau qui s’ouvre, choisissez une fonte \u00e0 convertir. Seules les fontes pr\u00e9sentes dans les Assets sont reconnues.
Ci-dessous, j’ai choisi la fonte \u00ab\u00a0Game Commands\u00a0\u00bb qu apparait dans la premi\u00e8re ligne. Le bouton Generate Font Atlas<\/strong> devient actif. Cliquez dessus. Cela remplit la zone inf\u00e9rieure de la fen\u00eatre.
<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Cliquez sur le bouton Save<\/strong>. Enregistrez bien dans le dossier Font<\/strong> des Assets<\/strong>.
Les fontes converties apparaissent alors dans les Assets, avec une ic\u00f4ne bleue et la lettre F en bleu, voir ci-dessous.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Faites de m\u00eame pour toutes les fontes n\u00e9cessaires.<\/p>\n\n\n\n

\u2022 Placer du texte<\/h6>\n\n\n\n

Nous allons \u00e9crire le nom du jeu (RGB) avec des \u00e9l\u00e9ments Texte.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Faites un Clic Droit sur la Hierarchy<\/strong> et choisissez UI > Text – TextMeshPro<\/strong>.
Cela place sur le Panel<\/strong> une zone de texte dans laquelle est \u00e9crit \u00ab\u00a0New Text\u00a0\u00bb et dans la Hierarchy<\/strong>, un Objet Text (TMP)<\/strong>, enfant du Canvas<\/strong>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

S\u00e9lectionnez cet Objet Text dans la Hierarchy<\/strong> et faites les r\u00e9glages dans l’Inspector<\/strong> :
– dans la zone de saisie du texte, tapez R en majuscule,
– dans Font Asset, choisissez une des fonte g\u00e9n\u00e9r\u00e9e plus haut,
– r\u00e9glez la Font Size (100) et la Vertex Color (rouge),
– R\u00e9glez l’Alignment, centr\u00e9 dans les deux sens.<\/p>\n\n\n\n

R\u00e9glez ensuite, ci-dessous, la dimension de la zone de texte et gardez sa position \u00e0 0.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Recommencez avec les lettres G et B, avec les m\u00eames r\u00e9glages mais en les colorant respectivement en vert et bleu.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Dans la Hierarchy<\/strong>, ajoutez un Objet Empty (UI > Create Empty<\/strong>), renommez-le \u00ab\u00a0Logo\u00a0\u00bb et faites-le glisser sur le Canvas<\/strong>.
S\u00e9lectionnez les trois textes et faites les glisser sur l’Empty<\/strong>.
Vous devez obtenir le r\u00e9sultat ci-dessous.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Chaque texte R, G et B doit \u00eatre positionn\u00e9 relativement \u00e0 son Parent \u00ab\u00a0Logo\u00a0\u00bb.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

L’objet Logo peut alors \u00eatre positionn\u00e9 globalement sur le Panel.
Voir le r\u00e9sultat ci-dessous.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Vous pouvez rajouter de la m\u00eame mani\u00e8re une base-line, de type \u00ab\u00a0THE COLOR GAME\u00a0\u00bb comme nouveau texte.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Rajouter des boutons<\/h6>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Nous allons ensuite rajouter deux Buttons<\/strong>, un Bouton Play<\/strong> et un bouton Quit<\/strong>.
Clic Droit sur la Hierarchy UI > Button – TextMeshPro<\/strong>.<\/p>\n\n\n\n

Chaque bouton contient un objet Text (TMP)<\/strong>, dans lequel il faut saisir et r\u00e9gler le texte n\u00e9cessaire.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Ci-contre, \u00e0 gauche, l’Inspector<\/strong> du Button<\/strong>.
Le Component Rect Transform<\/strong> permet de r\u00e9gler sa dimension et sa position, ainsi que son alignement, voir ci-dessous.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Dans le Component Image<\/strong>, on choisit la Color de fond.
Dans le Component Button<\/strong>, on peut r\u00e9gler ses diff\u00e9rents aspects, au survol et au clic.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Vous pouvez lancer le Game<\/strong> pour tester l’aspect des boutons (changement au survol). Si cela ne fonctionne pas, v\u00e9rifiez que vous avez bien bascul\u00e9 l’EventSystem<\/strong> dans le nouvel Input System<\/strong> (cf plus haut).<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Ajouter des Scripts aux boutons<\/h6>\n\n\n\n
\n
\n

Dans les Assets<\/strong>, ajoutez un dossier nomm\u00e9 \u00ab\u00a0Scripts\u00a0\u00bb. Cr\u00e9ez \u00e0 l’int\u00e9rieur deux nouveaux Scripts C#<\/strong>, l’un nomm\u00e9 \u00ab\u00a0Bouton_Play\u00a0\u00bb et l’autre \u00ab\u00a0Bouton_Quit\u00a0\u00bb.<\/p>\n\n\n\n

Double-cliquez sur un Script pour ouvrir le code et le modifier.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Script pour le Bouton QUIT :
Dans ce Script<\/strong>, j’ai d\u00e9sactiv\u00e9 la ligne qui permet de quitter le jeu car elle ne fonctionnera que dans le vrai jeu export\u00e9. Pour tester le fonctionnement du bouton, j’ai rajout\u00e9 la ligne Debug.Log<\/strong> qui permet d’afficher un message dans la Fen\u00eatre Console (\u00e0 afficher \u00e0 c\u00f4t\u00e9 de Project<\/strong> par Menu Window > General > Console<\/strong>)<\/p>\n\n\n\n

using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\nusing UnityEngine.UI;\n\npublic class Bouton_Quit : MonoBehaviour {\n    private Button bouton_quit;\n\n    \/\/ Start is called before the first frame update\n    void Start() {\n        bouton_quit = GetComponent<Button>();\n        bouton_quit.onClick.AddListener(QuitGame);\n    }\n\n    \/\/ Fonction pour quitter le programme\n    private void QuitGame() {\n        \/\/Application.Quit();\n        Debug.Log(\"Bouton Quit cliqu\u00e9\");\n    }\n}<\/code><\/pre>\n\n\n\n
Script pour le Bouton PLAY :
Pour tous les Scripts<\/strong> d’\u00e9l\u00e9ments d’interface, il faut rajouter la ligne de chargement des \u00e9l\u00e9ments d’interface UnityEngine.UI<\/strong>
Il faut \u00e9galement charger le SceneManagement<\/strong> pour permettre au bouton Play de provoquer le changement de Scene<\/strong>.
On cr\u00e9e une variable pour stocker le bouton : bouton_play. Dans le void Start, on initialise la variable en lui associant le bon Button. Puis on lui ajoute ce qu’on appelle un \u00e9couteur d’\u00e9v\u00e9nement (Listener<\/strong>). Il va servir \u00e0 activer la fonction void PlayGame lorsqu’on clique sur le bouton (c’est l’\u00e9v\u00e9nement \u00ab\u00a0\u00e9cout\u00e9\u00a0\u00bb).
La fonction PlayGame<\/strong> charge la Scene<\/strong> suivante, ici la 1.<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\nusing UnityEngine.UI;\nusing UnityEngine.SceneManagement;\n\npublic class Bouton_Play : MonoBehaviour {\n    private Button bouton_play;\n    \/\/ Start is called before the first frame update\n    void Start() {\n        bouton_play = GetComponent<Button>();\n        bouton_play.onClick.AddListener(PlayGame);\n    }\n\n    \/\/ Update is called once per frame\n    private void PlayGame() {\n        SceneManager.LoadScene(1);\n    }\n}<\/code><\/pre>\n\n\n\n
\n
\n
Il reste \u00e0 cr\u00e9er une nouvelle Scene, nomm\u00e9e \u00ab\u00a0Level1\u00a0\u00bb par un Clic Droit > Create > Scene<\/strong> dans le dossier Assets \/ Scenes<\/strong>.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Il faut \u00e9galement d\u00e9clarer les Scenes dans le jeu. Menu File > Build Profiles<\/strong> (ignorez au cas o\u00f9 le message sur le chargement de xcrun).
Depuis les Assets > Scenes<\/strong>, faites glisser les deux Scenes dans la zone Build Settings<\/strong>, et fermez juste la fen\u00eatre.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
Appliquez les Scripts \u00e0 leurs boutons respectifs. S\u00e9lectionnez le Button Play dans la Hierarchy<\/strong>. Faites glisser le Script Bouton_Play depuis les Assets sur l’Inspector du Bouton. Cela rajoute un Component Script<\/strong>.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Lancez le jeu pour tester.
Lorsque vous cliquez sur le bouton Quit, vous devez voir un message dans la Console et sur le bouton Play, cela doit afficher la Scene Level1 (vide pour l’instant).<\/p>\n\n\n\n
\u2022 Interface par dessus le jeu<\/h6>\n\n\n\n
Pour afficher un score, un bouton pour recommencer le niveau, un message de r\u00e9ussite, ou autre, il faut cr\u00e9er une interface 2D qui va se superposer \u00e0 l’\u00e9cran du jeu.
Il faut donc commencer par rajouter un Canvas<\/strong> dans une Scene<\/strong> par un Clic Droit dans la Hierarchy : UI > Canvas<\/strong>. Puis vous ajouterez les champs  n\u00e9cessaires.<\/p>\n\n\n\n
Double Cliquez sur la Scene<\/strong> \u00ab\u00a0Level1<\/strong>\u00a0\u00bb pour l’activer et placez-y un Cube aplati et agrandi pour en faire un \u00ab\u00a0Sol\u00a0\u00bb (d\u00e9cochez temporairement le bouton 2D pour cette \u00e9tape). Renommez-le ainsi dans la Hierarchy<\/strong>.<\/p>\n\n\n\n
Nous allons pr\u00e9parer une interface pour apprendre \u00e0 afficher ou masquer un objet. Nous utiliserons pour cela deux boutons, un qui dit \u00ab\u00a0Visible\u00a0\u00bb et l’autre \u00ab\u00a0Invisible\u00a0\u00bb. Vous pouvez aussi les nommer \u00ab\u00a0Afficher\u00a0\u00bb et \u00ab\u00a0Masquer\u00a0\u00bb, \u00e0 votre convenance. Pour aller plus vite, je ne modifierai pas l’aspect des boutons par d\u00e9faut.<\/p>\n\n\n\n
La Hierarchy<\/strong> montre l’imbrication des UI Objects<\/strong>. Une fois le Canvas<\/strong> cr\u00e9\u00e9, ajoutez un Panel<\/strong> (ce sera la bande grise transparente en bas de l’\u00e9cran, \u00e0 dimensionner correctement avec les poign\u00e9es bleues.), puis deux Buttons<\/strong>. Rendez les boutons d\u00e9pendants (Enfants) du Panel<\/strong> en les faisant glisser dessus dans la Hierarchy<\/strong>. Vous devriez obtenir le r\u00e9sultat ci-dessous.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
R\u00e9glez, dans le Component<\/strong> Image<\/strong> du Panel<\/strong>, la Color<\/strong> d’arri\u00e8re plan, comme ci-dessous \u00e0 gauche.
Sur l’\u00e9cran \u00e0 droite, il faut ajuster les Anchors<\/strong> en choisissant leur Mode par le carr\u00e9 en haut \u00e0 gauche. Le meilleur choix est strech\/strech<\/strong>.<\/p>\n\n\n\n
\n
\n
\"L\u2019attribut<\/figure>\n<\/div>\n\n\n\n
\n
\"L\u2019attribut<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Pour rendre Responsive<\/strong> le Panel<\/strong>, il faut que les Anchors<\/strong> soient aux dimensions du Panel<\/strong>. Les Anchors<\/strong> se modifient manuellement avec les petits triangles aux coins du Canvas<\/strong>. Quand c’est OK, les Anchors<\/strong> sont confondus avec les Poign\u00e9es bleues.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Le r\u00e9sultat dans le Game<\/strong>, ci-dessous, avec en plus un cube rouge, nomm\u00e9 \u00ab\u00a0Cube_Rouge\u00a0\u00bb sur le sol (\u00e0 ajouter \u00e0 votre Scene).<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Interface par dessus le jeu<\/h6>\n\n\n\n
Cet aspect, plus complexe, qui consiste \u00e0 int\u00e9grer des \u00e9l\u00e9ments d’interface dans l’univers 3D du jeu, ne sera pas trait\u00e9 ici.<\/p>\n\n\n\n
\u2022 Afficher\/Masquer des objets par des boutons et des actions<\/h6>\n\n\n\n
Afin de contr\u00f4ler les deux Buttons<\/strong>, nous n’allons pas placer un Script<\/strong> sur chacun d’eux. Nous allons cr\u00e9er un Script<\/strong> global qui doit \u00eatre support\u00e9 par un objet invisible. 
Cr\u00e9ez un Empty Object<\/strong> et renommez-le \u00ab\u00a0ScriptManager\u00a0\u00bb. Placez-le tout en haut de la liste dans la Hierarchy<\/strong> et aux coordonn\u00e9es ZERO sur la Scene<\/strong> (Reset dans l’Inspector<\/strong>) . Ce n’est pas obligatoire pour qu’il fonctionne, mais c’est une convention \u00e0 respecter.
Cr\u00e9ez ensuite un nouveau Script<\/strong> nomm\u00e9 \u00ab\u00a0Activate_Object\u00a0\u00bb et faites-le glisser sur le ScriptManager<\/strong> (Attention de bien nommer votre Script imm\u00e9diatement apr\u00e8s l’avoir cr\u00e9\u00e9, sinon, il risque d’y avoir des erreurs).<\/p>\n\n\n\n
Voil\u00e0 ci-dessous le code complet, \u00e0 enregistrer apr\u00e8s l’avoir saisi dans votre Script<\/strong> :<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class Activate_Object : MonoBehaviour {\n\n    public GameObject cubeRouge;\n\n    void Start() {}\n    \n    void Update() {}\n\n    public void activer() {\n        cubeRouge.SetActive(true);\n    }\n\n    public void desactiver() {\n        cubeRouge.SetActive(false);\n    }\n}<\/code><\/pre>\n\n\n\n
La commande qui permet de contr\u00f4ler l’affichage (ou plus exactement l’activation) d’un objet dans Unity est \u00ab\u00a0SetActive()<\/em>\u00ab\u00a0.
Dans un premier temps, dans le Script<\/strong>, il faut d\u00e9clarer comme variable de type GameObject<\/strong>, le  Cube Rouge dont on veut contr\u00f4ler l’affichage. C’est le r\u00f4le de la ligne :
public GameObject cubeRouge;<\/em>
Le nom cubeRouge est volontairement diff\u00e9rent du nom de l’Objet.
Cela fait apparaitre dans l’Inspector<\/strong>, dans le Component<\/strong> du Script<\/strong> (voir la copie d’\u00e9cran ci-dessous), une ligne correspondant \u00e0 cette variable.
Il faut associer cette variable au GameObject<\/strong> qui est concern\u00e9. Faites donc glisser l’objet Cube_Rouge<\/strong> depuis la Hierarchy<\/strong> vers la zone correspondante dans l’Inspector<\/strong>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Vous pouvez ensuite supprimer les deux fonctions de base void Start()<\/strong> et void Update()<\/strong>, inutiles dans ce Script. Je les ai cependant conserv\u00e9es m\u00eame si ce n’est pas n\u00e9cessaire.<\/p>\n\n\n\n
Ajoutez deux fonctions dont nous pouvons choisir le nom comme bon vous semble : void activer()<\/strong> et void desactiver()<\/strong> par exemple. Ces deux fonctions doivent \u00eatre publiques afin de pouvoir y acc\u00e9der dans l’Inspector<\/strong> des boutons. N’oubliez pas les parenth\u00e8ses et les accolades. Cela donne :
public void activer() { }<\/em><\/p>\n\n\n\n
Enfin dans chaque fonction, \u00e0 l’int\u00e9rieur des accolades, on va d\u00e9clarer le SetActive()<\/em> \u00e0 true<\/em> pour afficher le cube rouge ou \u00e0 false<\/em> pour le masquer. Ce qui donne par exemple : 
cubeRouge.SetActive(true);<\/em><\/p>\n\n\n\n
Puis, pour chaque bouton, dans l’Inspector<\/strong> se trouve une zone d’interaction qui permet de choisir une fonction d’un Script<\/strong> \u00e0 associer au comportement On Click()<\/strong>, c’est \u00e0 dire qui doit \u00eatre ex\u00e9cut\u00e9e lorsqu’on clique sur le bouton.<\/p>\n\n\n\n
S\u00e9lectionnez un bouton depuis la Hierachy. Dans l’Inspector, en bas du Component Button, cliquez sur le +. Cela fait apparaitre une zone de r\u00e9glage.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n

Il y a trois r\u00e9glages dans cette zone. 
1. Le Menu local en haut \u00e0 gauche permet de choisir quand ex\u00e9cuter la fonction. Choisir Runtime Only<\/strong> (par d\u00e9faut). Cela ne fonctionne que lorsqu’on lance le jeu, donc dans la fen\u00eatre Game<\/strong>. 
2. La zone \u00e0 compl\u00e9ter, juste en dessous \u00e0 gauche, permet de dire quel est le Script<\/strong> qui contient la fonction \u00e0 ex\u00e9cuter. Faites glisser ici le Script<\/strong> ScriptManager<\/strong>, comme ci-dessous.
3. Il faut enfin, dans le Menu local en haut \u00e0 droite, choisir quelle fonction de ce Script<\/strong> il faut lancer.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"
Pour le bouton \u00ab\u00a0Visible\u00a0\u00bb choisir la fonction activer()<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Pour le bouton \u00ab\u00a0Invisible\u00a0\u00bb, choisir la fonction desactiver()<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Enregistrez et Testez le jeu en lan\u00e7ant le bouton Play<\/strong>. Le r\u00e9sultat est \u00e0 tester dans la fen\u00eatre Game<\/strong> bien entendu.<\/p>\n\n\n\n
3. Les Animations<\/h5>\n\n\n\n
Il y a deux syst\u00e8mes d’animation int\u00e9gr\u00e9s \u00e0 Unity : L’Animation<\/strong> et l’Animator<\/strong>, qui se traduisent par deux Assets<\/strong> distincts..
Le premier est l’Animation<\/strong>, sous forme d’un triangle bleu. C’est le moyen le plus ancien et le plus simple. Il se limite aux animations 3D. Ce syst\u00e8me utilise une fen\u00eatre d’Unity avec une TimeLine<\/strong>, comme dans AfterEffects ou Blender, la Window Animation<\/strong>.
Le second, l’Animator Controller<\/strong> sous forme de deux carr\u00e9s, est plus r\u00e9cent et plus puissant, capable de g\u00e9rer des animations 2D<\/strong> et des animations de Texture<\/strong>. Il fonctionne avec des Nodes<\/strong> et reste plus complexe \u00e0 utiliser.
Dans les versions r\u00e9centes d’Unity, lorsqu’on cr\u00e9e une animation, les deux Assets<\/strong> sont g\u00e9n\u00e9r\u00e9s automatiquement, m\u00eame si l’Animator<\/strong> n’est pas toujours utilis\u00e9. Nous verrons d’abord l’Asset Animation<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Cr\u00e9ation de l’environnement<\/h6>\n\n\n\n
Cr\u00e9ez une nouvelle Scene<\/strong> nomm\u00e9e \u00ab\u00a0Level2\u00a0\u00bb).
Cr\u00e9ez sur cette Scene un sol avec un Plane<\/strong> ou un Cube<\/strong> applati. Placez en plus trois Cubes<\/strong> et aplatissez-les comme des plate-formes. Positionnez-les comme ci-dessous. Cr\u00e9ez des Materials<\/strong> pour les distinguer (le jeu que nous allons cr\u00e9er est bas\u00e9 sur l’utilisation des couleurs RGB; il consistera \u00e0 passer d’une plate-forme \u00e0 l’autre, dans l’ordre de ces trois couleurs). Renommez-les en fonction de leur usage. Pour ma part je les ai nomm\u00e9es respectivement Plateforme_Start, Plateforme_Move et Plateforme_Win.
Cr\u00e9ez \u00e9galement une troisi\u00e8me Scene<\/strong>, nomm\u00e9e \u00ab\u00a0Level3\u00a0\u00bb.
Ajoutez ces Scenes aux Build Profiles<\/strong>.<\/p>\n\n\n\n
\u2022 Ajout du personnage TPC<\/h6>\n\n\n\n
\n
ATTENTION, Obsol\u00e8te, SI VOUS UTILISEZ LES STANDARD ASSETS : apr\u00e8s avoir import\u00e9 et corrig\u00e9 les Standard Assets<\/strong> (utilisez un dossier local d\u00e9j\u00e0 corrig\u00e9) placez un Third Person Character<\/strong> sur la plate-forme de d\u00e9part, la Rouge.<\/p>\n<\/blockquote>\n\n\n\n
Sinon, importez les Starter Assets Third Person et placez un Prefab Third Person<\/strong> Player Armature<\/strong> sur la plateforme rouge, de d\u00e9part.
Si les Materials ne s’affichent pas correctement pour le personnage (il apparait en rose), dans les Assets, s\u00e9lectionnez les Materials du personnage et pour chacun, dans l’Inspector, choisir Shader > Standard<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 Cr\u00e9ation de l’animation<\/h6>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
S\u00e9lectionnez la plate-forme Verte, celle qui va se d\u00e9placer. Les deux autres resteront fixes.<\/p>\n\n\n\n
Allez dans le Menu Window > Animation > Animation<\/strong> pour ouvrir la fen\u00eatre d’animation. Positionnez-l\u00e0 comme cela vous arrange dans l’interface.<\/p>\n<\/div>\n<\/div>\n\n\n\n
La plate-forme Verte \u00e9tant s\u00e9lectionn\u00e9e, il faut commencer par cr\u00e9er une Animation<\/strong>. Cliquez sur le Bouton Create<\/strong>.
Vous devez nommer et enregistrer cette Animation<\/strong>. Pensez \u00e0 cr\u00e9er d’abord un nouveau Dossier \u00ab\u00a0Animation\u00a0\u00bb dans les Assets<\/strong>. Nommez-la  PlateformeMove et enregistrez. Cela cr\u00e9e une Animation<\/strong> \u00e0 gauche et un Animator Controller<\/strong> \u00e0 droite, voir ci-dessous.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Dans le panneau Animation<\/strong>, cliquez sur le Bouton Add Property<\/strong> et choisissez la propri\u00e9t\u00e9 \u00e0 animer. Ici nous voulons cr\u00e9er un d\u00e9placement. Aussi, nous allons choisir la Propri\u00e9t\u00e9 Transform > Position<\/strong> en cliquant sur le +<\/strong> \u00e0 droite.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
La propri\u00e9t\u00e9 apparait dans le panneau de gauche et des images cl\u00e9s dans la Time Line<\/strong> sur une dur\u00e9e de 1 seconde par d\u00e9faut. Cliquez sur la fl\u00e8che \u00e0 gauche de la Propri\u00e9t\u00e9<\/strong> pour faire apparaitre les valeurs d\u00e9taill\u00e9es.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Pour cr\u00e9er le mouvement, il faut passer en Mode Enregistrement<\/strong>.
Pour cela, cliquez sur le bouton Cercle Rouge<\/strong> en haut \u00e0 gauche de la fen\u00eatre Animation<\/strong>.
Puis placez la t\u00eate de lecture \u00e0 1 seconde en cliquant sur la TimeLine<\/strong>, l\u00e0 o\u00f9 est inscrit le temps, dans la zone rouge. La T\u00eate de Lecture est la fine bande blanche verticale. Vous pouvez la d\u00e9placer avec la Souris. Le positionnement dans le temps s’affiche en m\u00eame temps que vous la d\u00e9placez. En haut \u00e0 droite du panneau des propri\u00e9t\u00e9s, la position de la T\u00eate de Lecture s’affiche en Frames<\/strong>. Ci-dessous, 60 Frames correspondent \u00e0 une seconde.
Vous pouvez alors soit d\u00e9placer librement l’Objet \u00e0 animer sur la Scene<\/strong>, soit modifier les valeurs des propri\u00e9t\u00e9s. Le but ici est d’amener la plateforme verte contre la rouge, o\u00f9 se trouve le personnage.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Il faut ensuite boucler le mouvement en ramenant la plateforme verte contre la bleue, \u00e0 sa position de d\u00e9part. Pour cela, il suffit de copier\/coller les images cl\u00e9s initiales plus loin dans le temps, \u00e0 2 secondes. S\u00e9lectionnez les images cl\u00e9s initiales. Copiez-les. Placez la T\u00eate de Lecture sur 2 secondes. Collez.
Vous pouvez \u00e0 pr\u00e9sent arr\u00eater l’enregistrement. D\u00e9placez la t\u00eate de lecture avec la Souris ou cliquez sur le Bouton Play<\/strong> des contr\u00f4leurs pour voir l’animation se jouer.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Cependant, la dur\u00e9e de l’animation est tr\u00e8s courte et le mouvement rapide rend le jeu trop difficile. S\u00e9lectionnez les images cl\u00e9s et d\u00e9placez-les plus loin, respectivement \u00e0 2 et 4 secondes par exemple. Ajustez m\u00eame \u00e0 4 et 8 secondes si besoin car ce n’est pas \u00e9vident du tout.<\/p>\n\n\n\n
\u2022 Corriger le Bug d’adh\u00e9rence<\/h6>\n\n\n\n
Mais si vous lancez le jeu par le Bouton Play<\/strong> en haut de la fen\u00eatre d’Unity, vous verrez dans la fen\u00eatre Game<\/strong> que lorsque vous faites avancer le personnage sur la plate-forme verte, il ne la suit pas et finit par tomber. Il est cependant possible de faire courir le personnage (SHIFT Fl\u00e8che), ce qui peut \u00eatre un choix de jeu\u2026
Mais, pour corriger ce d\u00e9faut, il faut cr\u00e9er pour la plate-forme verte un second Box Collider<\/strong>, d\u00e9clar\u00e9 en Trigger<\/strong>, de sorte que lorsque le personnage entre dedans, il devient Child<\/strong> (Enfant) de la plate-forme. Ainsi, il sera entrain\u00e9 avec. Lorsqu’il la quittera, le parentage sera supprim\u00e9.<\/p>\n\n\n\n
S\u00e9lectionnez la plate-forme verte. Dans l’Inspector<\/strong>, dupliquez le Box Collider<\/strong> existant par Clic Droit > Copy Component<\/strong>, puis par Clic Droit > Paste Component As New<\/strong>. Cochez la case Is Trigger<\/strong> du premier Box Collider<\/strong> et indiquez les valeurs ci-dessous en Y pour les deux Colliders<\/strong>. Vous voyez en bas \u00e0 gauche le Collider Trigger<\/strong> d\u00e9passer au dessus de la plate forme. Il est aussi possible de cocher le Bouton Edit Collider<\/strong> et de manipuler les points du Box Collider<\/strong> pour en modifier l’\u00e9paisseur et la position sur la Scene<\/strong>. Vous pouvez voir le r\u00e9sultat en bas \u00e0 gauche.<\/p>\n\n\n\n
Le Trigger doit d\u00e9passer suffisamment sinon cela ne fonctionne pas, le Player n’\u00e9tant pas d\u00e9tect\u00e9. N’h\u00e9sitez donc pas \u00e0 lui donner une Size en Y de 4 ou 5.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Il reste \u00e0 cr\u00e9er un nouveau Script<\/strong>, que je nommerai \u00ab\u00a0PlatformAttach\u00a0\u00bb. \u00c9ditez ce Script<\/strong> et saisissez le code suivant :<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class PlatformAttach : MonoBehaviour {   \n    public GameObject Player;\n\n    private void OnTriggerEnter(Collider other) {\n    \tif(other.gameObject == Player) {\n                gameObject.GetComponent<Renderer>().material.color = Color.red;\n    \t\tPlayer.transform.parent = transform;\n    \t}\n    }\n\n    private void OnTriggerExit(Collider other) {\n    \tif(other.gameObject == Player) {\n                gameObject.GetComponent<Renderer>().material.color = Color.green;\n    \t\tPlayer.transform.parent = null;\n    \t}\n    } \n}<\/code><\/pre>\n\n\n\n
Faites glisser ce Script<\/strong> sur le plate-forme verte. Si vous lancez le jeu, vous vous rendrez compte qu’il ne fonctionne pas. Il est fait allusion dans le Script<\/strong> \u00e0 un GameObject<\/strong> nomm\u00e9 Player<\/strong>.  Il d\u00e9signe le personnage du jeu. Il faut donc associer ce personnage au Script<\/strong>. Dans l’Inspector<\/strong> de la plate-forme verte, dans le Component<\/strong> du Script<\/strong>, il y a une zone Player<\/strong> qui vient de la ligne du Script \u00ab\u00a0public GameObject Player; Il faut faire glisser le personnage \u00ab\u00a0Player Armature\u00a0\u00bb depuis la Hierarchy<\/strong> sur la case du Player<\/strong>, comme ci-dessous dans l’\u00e9cran de droite.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Enfin, il reste un petit r\u00e9glage \u00e0 faire pour que cela fonctionne. Allez au Menu Edit > Project Settings<\/strong>. Dans la cat\u00e9gorie Physics > Settings<\/strong>, onglet  GameObject<\/strong>, il faut cocher la case Auto Sync Transforms<\/strong> (\u00e7a ne s’invente pas!).<\/p>\n\n\n\n
\u2022 Gagner le Niveau 2 – Passer au Niveau 3<\/h6>\n\n\n\n
Faites pour la plateforme bleue la m\u00eame chose que pour la verte, \u00e0 savoir, dupliquez le Box Collider, d\u00e9clarez-le en Is Trigger et remontez le en altitude et \u00e9paisseur, de sorte qu’il y ait collision lorsque le personnage entrera sur cette plateforme.<\/p>\n\n\n\n
Cr\u00e9ez un nouveau Script, nomm\u00e9 Win2 pour passer au niveau 3. Voici le code :<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\nusing UnityEngine.SceneManagement;\n\npublic class Win2 : MonoBehaviour\n{\npublic GameObject Player;\nprivate void OnTriggerEnter(Collider other) {\n    if(other.gameObject == Player) {\n        gameObject.GetComponent<Renderer>().material.color = Color.red;\n        SceneManager.LoadScene(3);\n    }\n}\n}<\/code><\/pre>\n\n\n\n
Faites \u00e9galement glisser l’Objet Player sur la case appropri\u00e9e du Script Win2 dans l’Inspector de la plateforme bleue.<\/p>\n\n\n\n
Testez. Si vous arrivez \u00e0 rejoindre la derni\u00e8re plateforme, la Scene Level3 s’affichera.
Il est \u00e0 noter que dans les deux scripts pr\u00e9c\u00e9dents, il y a une commande pour changer la couleur en rouge de la plateforme qui est atteinte ou quitt\u00e9e. C’est un bon moyen de v\u00e9rifier que le code fonctionne et que la collision est bien d\u00e9tect\u00e9e.<\/p>\n\n\n\n
On pourrait ainsi cr\u00e9er d’autres niveaux avec des plateformes anim\u00e9es. Je vous laisse le soin d’en imaginer vous-m\u00eames avec des plateformes qui se d\u00e9placent verticalement ou qui tournent\u2026<\/p>\n\n\n\n
4. Pr\u00e9parer les \u00e9l\u00e9ments de la Scene \u00ab\u00a0Level3\u00a0\u00bb<\/h5>\n\n\n\n
Dans cette Scene<\/strong>, nous allons placer un Plane<\/strong> pour le Sol et trois Cubes<\/strong>, respectivement Red, Green et Blue et un Cube<\/strong> pour un Mur, comme sur l’image ci-dessous.<\/p>\n\n\n\n
Il faudra ensuite ajouter un Player, un TP<\/strong>S, joueur \u00e0 la Troisi\u00e8me Personne issu des Starter Assets<\/strong>, \u00e0 importer donc comme dans le niveau pr\u00e9c\u00e9dent. <\/p>\n\n\n\n
\n
Vous pourriez aussi choisir de placer un FPS, \u00e0 installer comme expliqu\u00e9 page pr\u00e9c\u00e9dente :
– Importer le FPS dans les Assets,
– Placer un PlayerCapsule<\/strong> et un PlayerFollowCamera<\/strong> dans la Hierarchy<\/strong>,
– R\u00e9gler le Follow<\/strong> du PlayerFollowCamera<\/strong> sur PlayerCameraRoot<\/strong>,
– Placer le PlayerFollowCamera<\/strong> au m\u00eame endroit que le PlayerCapsule<\/strong>,
– Ajouter \u00e0 la Main Camera<\/strong> un Component Cinemachine > CinemachineBrain<\/strong>.
Testez que le Player fonctionne bien et orientez-le correctement.<\/p>\n<\/div><\/div>\n\n\n\n
Le joueur va devoir attraper les cubes dans l’ordre RBG. Mais un Mur va venir compliquer le jeu. En effet, lorsque le joueur, apr\u00e8s avoir vu les trois Cubes<\/strong> sur le Sol, attrapera le Cube<\/strong> Rouge, le Mur, pr\u00e9alablement masqu\u00e9, va appara\u00eetre.
Il lui faudra activer le d\u00e9placement du mur, en \u00e9vitant le Cube<\/strong> Bleu pour acc\u00e9der au Cube<\/strong> Vert.
Chaque fois qu’il attrapera un Cube<\/strong>, ce dernier disparaitra, un Son<\/strong> sera jou\u00e9 et un Particle System<\/strong> se d\u00e9clenchera.<\/p>\n\n\n\n
Pour d\u00e9clencher tous ces \u00e9v\u00e9nement, il faudra \u00e9galement disposer diff\u00e9rents Cubes<\/strong> invisibles, qui serviront de Trigger<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
Je vous laisse reproduire ou adapter ce sch\u00e9ma. Vous pouvez voir ci-contre, dans la Hierarchy<\/strong>, la totalit\u00e9 des Objets pour l’environnement.<\/p>\n<\/div>\n<\/div>\n\n\n\n
5. Des Scripts pour l’affichage des Objets<\/h5>\n\n\n\n
\u2022 Afficher \/ Masquer des objets avec un Trigger<\/h6>\n\n\n\n
Pour m\u00e9moire, un Trigger<\/strong> est un Objet dont le Component Box Collider<\/strong> est d\u00e9clar\u00e9 IsTrigger<\/strong>. Cela permet de d\u00e9tecter des collisions pour d\u00e9clencher des \u00e9v\u00e9nements. En C#<\/strong>, il y a trois \u00e9v\u00e9nements de type Trigger<\/strong> : OnTriggerEnter(), OnTriggerStay() <\/em>et OnTriggerExit()<\/em>.<\/p>\n\n\n\n
Pour obtenir le m\u00eame r\u00e9sultat que pr\u00e9c\u00e9demment avec des boutons, mais lorsqu’un joueur cogne un objet, il faut cr\u00e9er un Script<\/strong> \u00e0 placer sur un Objet comportant un Trigger<\/strong>. On peut par exemple s\u00e9lectionner le Cube bleu et dans l’Inspector<\/strong>, cocher la case Is Trigger<\/strong> du Component Box Collider<\/strong>. <\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Cr\u00e9ez un Script nomm\u00e9 \u00ab\u00a0CubeBlueTrigger<\/strong>\u00ab\u00a0, enregistrez-le et glissez-le sur le Cube bleu. <\/p>\n\n\n\n
Saisissez ensuite le code ci-dessous, associez l’Object<\/strong> Cube_Blue \u00e0 la variable dans le Component<\/strong> du Script<\/strong> et testez :<\/p>\n<\/div>\n<\/div>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class CubeBlueTrigger : MonoBehaviour {\n\tpublic GameObject blueCube;\n\n    private void OnTriggerEnter() {\n    \t\/\/Destroy(gameObject);\n    \tblueCube.SetActive(false);\n    }\n    \n    private void OnTriggerExit() {\n    \t\/\/Destroy(gameObject);\n    \tblueCube.SetActive(true);\n    }\n}<\/code><\/pre>\n\n\n\n
Vous constaterez que lorsque le joueur se cogne au Cube<\/strong> bleu (OnTriggerEnter<\/strong>), ce dernier devient invisible. Il n’est cependant pas possible de le rendre de nouveau visible en s’\u00e9loignant (OnTriggerExit<\/strong>) car il est d\u00e9sactiv\u00e9 et ne r\u00e9agit donc plus. Ce n’est donc pas une bonne m\u00e9thode pour faire disparaitre et r\u00e9apparaitre un Objet car cela ne fonctionne que dans un sens.<\/p>\n\n\n\n
Pour y arriver correctement, il faut dupliquer le Cube<\/strong> Bleu au m\u00eame endroit et agrandir un peu la copie. Nous nommerons la copie Cube_Blue_T<\/em> (T pour Trigger).
D\u00e9cochez la case Is Trigger<\/strong> du Cube<\/strong> Bleu original et sa case Box Collider<\/strong>. Il faut \u00e9galement supprimer son Component Script<\/strong>.<\/p>\n\n\n\n
La copie sera par contre d\u00e9clar\u00e9e en Trigger<\/strong>, comme d\u00e9j\u00e0 vu et sera masqu\u00e9e en d\u00e9cochant sa case du Mesh Renderer<\/strong>.
C’est sur elle qu’il faudra placer le Script<\/strong>, en l’adaptant l\u00e9g\u00e8rement, comme ci-dessous avec une seconde variable pour le Trigger et en modifiant les r\u00e9f\u00e9rences des variables dans l’Inspector<\/strong>.
Vous pouvez tester.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/div>\n<\/div>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class CubeBlueTrigger : MonoBehaviour {\n\tpublic GameObject blueCube;\n\tpublic GameObject blueCubeT;\n\n    private void OnTriggerEnter() {\n    \t\/\/Destroy(gameObject);\n    \tblueCube.SetActive(false);\n    }\n    \n    private void OnTriggerExit() {\n    \t\/\/Destroy(gameObject);\n    \tblueCube.SetActive(true);\n    }\n}<\/code><\/pre>\n\n\n\n
\u2022 Faire apparaitre le Mur<\/h6>\n\n\n\n
Voici ci-dessous, en trois images le sc\u00e9nario du jeu. La premi\u00e8re image repr\u00e9sente ce que voit le joueur au d\u00e9but du niveau. En se d\u00e9pla\u00e7ant, le joueur d\u00e9couvre le Cube<\/strong> Rouge, \u00e0 cogner en premier. Lorsqu’il rentre en collision avec le Cube<\/strong> Rouge, le Mur apparait , cachant le Cube<\/strong> Vert.
Nous verrons plus loin qu’en m\u00eame temps, le cube rouge disparait avec un son et un effet.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
Le Mur sera donc d\u00e9sactiv\u00e9 par d\u00e9faut en d\u00e9cochant sa case principale dans l’Inspector<\/strong>, ci-contre.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Sur le mod\u00e8le du Cube<\/strong> Bleu, nous allons donc cr\u00e9er un Cube Trigger<\/strong> pour le Cube<\/strong> Rouge en le nommant \u00ab\u00a0Cube_Red_T<\/strong>\u00ab\u00a0.
Ci-contre, l’Inspector<\/strong> du Trigger et le code.<\/p>\n\n\n\n
Cr\u00e9ez un nouveau Script<\/strong>, nommez-le Activate_Wall<\/strong> et appliquez-le au cube Rouge Trigger Cube_Red_T<\/strong>.<\/p>\n\n\n\n
Voici le code ci-dessous :<\/p>\n<\/div>\n<\/div>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class Activate_Wall : MonoBehaviour {\n    public GameObject wall;\n    public GameObject redCube;\n\n    private void OnTriggerEnter() {\n    \twall.SetActive(true);\n    }\n}<\/code><\/pre>\n\n\n\n
\u2022 Supprimer un objet<\/h6>\n\n\n\n
Pour faire disparaitre un objet, apr\u00e8s l’avoir touch\u00e9 par exemple, il y a une autre m\u00e9thode que celle vue pr\u00e9c\u00e9demment, c’est \u00ab\u00a0Destroy(gameObject)<\/strong>\u00ab\u00a0;<\/strong> Ajoutez deux lignes de code au Script<\/strong> pr\u00e9c\u00e9dent, juste apr\u00e8s la ligne pour afficher le mur, avant l’avant derni\u00e8re accolade. Ci dessous, le code modifi\u00e9 de la fonction OnTriggerEnter()<\/em>. La premi\u00e8re ligne Destroy<\/em> supprime le Cube<\/strong> Rouge. La seconde ligne Destroy<\/em> supprime le Trigger<\/strong> pour qu’il n’agisse plus :<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class Activate_Wall : MonoBehaviour {\n    public GameObject wall;\n    public GameObject redCube;\n\n    private void OnTriggerEnter() {\n    \twall.SetActive(true);\n        Destroy(redCube.gameObject);\n        Destroy(gameObject); \n    }\n}<\/code><\/pre>\n\n\n\n
\n
\n
Il y a une autre fa\u00e7on de proc\u00e9der.
Pour supprimer les deux d’un coup, il faut rendre le cube rouge enfant de son trigger. Dans la Hierarchy, faites glisser l’Objet cube_Red sur l’objet cube_Red_T. Faites de m\u00eame avec les 2 autres cubes.
Puis, dans le script, commenter partout les lignes visant redCube.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
public GameObject wall;\n\/\/public GameObject redCube;\n\nprivate void OnTriggerEnter() {\n    wall.SetActive(true);\n    \/\/Destroy(redCube.gameObject);\n    Destroy(gameObject);\n}<\/code><\/pre>\n\n\n\n
\u2022 D\u00e9clencher une animation<\/h6>\n\n\n\n
Comme vu pr\u00e9c\u00e9demment, vous pouvez cr\u00e9er une animation pour le Mur afin de le d\u00e9placer (Position<\/strong>) et de modifier sa dimension (Scale<\/strong>) afin qu’il permette au joueur de rejoindre le Cube<\/strong> Vert.
Par d\u00e9faut cette animation va se jouer en continu. Il faudra commencer par la bloquer.
Puis, il faudra ajouter un Cube Trigger<\/strong> quelque part pour d\u00e9clencher l’animation. Pour corser un peu le jeu, nous pouvons le placer devant le mur, pas tr\u00e8s loin du Cube<\/strong> Bleu, sachant qu’il ne faut pas toucher le Cube<\/strong> Bleu avant le Vert (nous ne g\u00e9rerons cependant pas cet aspect du jeu).<\/p>\n\n\n\n
R\u00e9activez le Mur pour pouvoir le voir (cochez sa case principale dans l’Inspector<\/strong>). Ajoutez, contre le mur, un Cube nomm\u00e9 \u00ab\u00a0Poussoir\u00a0\u00bb et d\u00e9clar\u00e9 Is Trigger<\/strong>, avec un Material vert.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Dans l’Inspector du Cube Poussoir, cochez la case Is Trigger<\/strong>. Si vous d\u00e9cochez le Mesh Renderer<\/strong> comme ci-contre, afin de le rendre invisible, le joueur devra le trouver. C’est plus difficile.<\/p>\n<\/div>\n<\/div>\n\n\n\n
S\u00e9lectionnez le Mur<\/strong>.  Menu Window > Animation > Animation<\/strong>. Enregistez cette animation sous le nom \u00ab\u00a0OuvrirMur\u00a0\u00bb. 
Add Propety<\/strong> pour Position<\/strong> et Scale<\/strong>.
\u00c0 droite de la TimeLine<\/strong>, les points de suspension ouvrent un Menu o\u00f9 vous pouvez v\u00e9rifier la cadence : Set Sample Rate<\/strong> > 60 ims par d\u00e9faut.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Vous pouvez r\u00e9aliser l’animation comme vu plus haut. Il faut \u00e0 la fois r\u00e9duire la largeur du Mur et le d\u00e9placer afin que son c\u00f4t\u00e9 droit reste \u00e0 la m\u00eame place.
Voir ci-dessous les valeurs pour l’image 0 et l’image 2 sec.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Dans les Assets<\/strong>, l’animation comporte les deux composants, l’Animation<\/strong> \u00ab\u00a0OuvrirMur\u00a0\u00bb (le triangle \u00e0 gauche) et l’Animator<\/strong> \u00ab\u00a0Mur\u00a0\u00bb \u00e0 droite.
Cette fois, c’est ce dernier que nous allons utiliser.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Double-Cliquez sur l’Animator \u00ab\u00a0Mur\u00a0\u00bb. Cela ouvre la fen\u00eatre d’Animator. Elle contient des \u00ab\u00a0nodes\u00a0\u00bb, c’est \u00e0 dire des bo\u00eetes de contr\u00f4le de diff\u00e9rentes couleurs pour la gestion de l’animation.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Par ailleurs, dans l’Inspector<\/strong> du Mur, vous pouvez voir son Component Animator<\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Dans la fen\u00eatre Animator<\/strong>, nous allons g\u00e9rer des \u00e9tats, que nous allons relier entre eux pour cr\u00e9er le sc\u00e9nario de l’animation.
La bo\u00eete verte Entry<\/strong> correspond au lancement de l’animation, la bo\u00eete rouge Exit, \u00e0 sa fin.
La bo\u00eete orange \u00ab\u00a0OuvrirMur<\/strong>\u00a0\u00bb repr\u00e9sente l’animation elle-m\u00eame, c’est \u00e0 dire ce que contient le composant Animation<\/strong> des Assets<\/strong>, que l’on contr\u00f4le dans la TimeLine<\/strong>.
La fl\u00e8che orange entre Entry<\/strong> et OuvrirMur<\/strong> indique qu’il faut jouer l’animation au d\u00e9marrage du jeu.<\/p>\n\n\n\n
Dans un premier temps, il va falloir cr\u00e9er un \u00e9tat vide, dans lequel il ne se passe rien, que nous allons relier \u00e0 la bo\u00eete Entry, de sorte qu’au d\u00e9marrage, l’animation ne se joue pas automatiquement.
Clic Droit > CreateState > Empty<\/strong>
Une bo\u00eete grise, nomm\u00e9e New State est alors ajout\u00e9e.<\/p>\n\n\n\n
\n
\n
\"\"
Cr\u00e9er un \u00e9tat vide<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
La bo\u00eete grise New State est ajout\u00e9e<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Il faut lui indiquer que c’est une bo\u00eete de d\u00e9marrage o\u00f9 il se passe rien.
Clic Droit sur cette bo\u00eete > Set as Layer Default State<\/strong>
La bo\u00eete Entry<\/strong> est alors automatiquement reli\u00e9e \u00e0 cette bo\u00eete. Celle-ci devient alors orange et la bo\u00eete de l’animation devient grise.
Si vous lancez le jeu, le mur reste ferm\u00e9.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Puis, dans la fen\u00eatre Animator<\/strong>, cliquez sur l’onglet Parameters<\/strong>, en haut \u00e0 gauche, \u00e0 droite de Layers.
Cliquez sur le bouton \u00ab\u00a0+<\/strong>\u00a0\u00bb et choisir Bool<\/strong>. Renommez-le \u00ab\u00a0ouvrir<\/strong>\u00ab\u00a0, comme ci-dessous.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Dans la fen\u00eatre Animator, s\u00e9lectionnez la bo\u00eete NewState et en haut de l’Inspector<\/strong>, renommez-la  \u00ab\u00a0FermerMur<\/strong>\u00ab\u00a0. Faites un Clic droit dessus et choisissez Transition<\/strong>. Vous devez alors relier cette bo\u00eete \u00e0 la bo\u00eete \u00ab\u00a0OuvrirMur\u00a0\u00bb<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Dans l’Inspector<\/strong> de la bo\u00eete \u00ab\u00a0FermerMur<\/strong>\u00ab\u00a0, cliquez sur le nom de la transition \u00ab\u00a0FermerMur -> OuvrirMur<\/strong>\u00ab\u00a0, voir ci-dessous \u00e0 gauche.
Vous avez alors acc\u00e8s aux Conditions<\/strong>. Cliquez sur le bouton \u00ab\u00a0+<\/strong>\u00a0\u00bb sous les conditions.
La condition \u00ab\u00a0ouvrir<\/strong>\u00a0\u00bb s’affiche, cr\u00e9\u00e9e pr\u00e9c\u00e9demment en tant que Bool<\/strong>. Elle peut avoir la valeur true ou false. Laisser la valeur \u00e0 true<\/strong>. Cela signifie que lorsque cette valeur passera \u00e0 true, autrement dit lorsque le joueur touchera le Trigger Cube<\/strong>, la transition va s’activer et l’animation va se jouer. Le mur va s’ouvrir et laisser l’acc\u00e8s au cube vert.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
Dans l’Inspector de l’Animation<\/strong> (cliquez sur le triangle dans les Assets<\/strong>), il faut aussi d\u00e9cocher le bouton Loop Time<\/strong>, afin que l’animation ne se joue pas en boucle, mais une seule fois.<\/p>\n<\/div>\n<\/div>\n\n\n\n
S\u00e9lectionnez le Cube Trigger<\/strong> \u00ab\u00a0Poussoir<\/strong>\u00ab\u00a0. Cr\u00e9ez un nouveau Script<\/strong> \u00ab\u00a0OpenWall\u00a0\u00bb et associez-le au cube, comme ci-dessous \u00e0 gauche.
<\/p>\n\n\n\n
Voici le code du Script pour ouvrir le mur lorsque le joueur touche le Trigger.<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class OpenWall : MonoBehaviour {\n    public Animator ouvre_mur;\n\n    private void OnTriggerEnter() {\n    \touvre_mur.SetBool(\"ouvrir\", true);\n    }\n}<\/code><\/pre>\n\n\n\n
Dans son Inspector<\/strong>, faites glisser l’Objet Mur<\/strong> depuis la Hierarchy<\/strong> vers la zone de la variable Ouvre_mur<\/strong> ou cliquez sur le cercle \u00e0 droite de cette zone et choisir l’Objet Mur<\/strong>, comme ci-dessous \u00e0 droite.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
D\u00e9sactivez l’Objet Mur, enregistrez et testez.<\/p>\n\n\n\n
6. Les Particules<\/h5>\n\n\n\n
Les Particles Systems<\/strong>  font partie des Effets. Cela permet de simuler plein de situations, fum\u00e9e, feu, explosion, feu d’artifice, gouttes d’eau et bien d’autres. Il s’agit d’\u00e9mettre une forme ou une image de mani\u00e8re continue avec un grand nombre de param\u00e8tres de contr\u00f4le.<\/p>\n\n\n\n
\n
\u2022 Utiliser un Prefab  existant de particules : Standard Assets (obsol\u00e8te)<\/em><\/h6>\n\n\n\n
Dans les Standard Assets<\/strong>, il y a un certain nombre de Prefabs<\/strong> de particules fournis. Ils permettent d\u00e9j\u00e0 beaucoup de choses.<\/em><\/span><\/p>\n\n\n\n
\n
\n
\n
\n
Allez r\u00e9cup\u00e9rer les Standard Assets depuis l’Asset Store dans My assets.
Puis, \u00e0 partir du Menu Window > Package Manager<\/strong>, importez les Standard Assets en cochant uniquement le dossier Particles.
Dans la Fen\u00eatre Project<\/strong>, ouvrez le dossier des Standard Assets > ParticleSystems<\/strong>.<\/em><\/span><\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Nous allons utiliser le Prefab Steam<\/strong> pour g\u00e9n\u00e9rer un nuage de vapeur lorsque les cubes disparaitront apr\u00e8s que le joueur les aura touch\u00e9s. Mais essayez les autres par curiosit\u00e9.<\/em><\/span><\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Faites glisser le Prefab Steam<\/strong> sur la Scene<\/strong> ou dans la Hierarchy<\/strong>. Positionnez-le comme souhait\u00e9 sur la Scene<\/strong>, au m\u00eame endroit que le Cube<\/strong> Rouge par exemple.<\/em><\/span><\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
Dans le Component Particle System<\/strong> vous pouvez r\u00e9gler la dur\u00e9e de l’Effet (Duration<\/strong>), le faire jouer une fois ou en boucle (Looping<\/strong>), changer sa couleur en rouge (Start Color<\/strong>) et tester les autres r\u00e9glages par vous-m\u00eame.<\/em><\/span><\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Sur la Scene<\/strong>, l’Objet Particle System<\/strong> apparait sous forme de petites h\u00e9lices blanches. Le panneau Particle Effect <\/strong>en bas \u00e0 droite permet de tester l’effet en modifiant certains param\u00e8tres.
Le r\u00e9sultat plus bas, avec l’apparition de vapeur rouge.<\/em><\/span><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\u2022 Utiliser un Prefab  existant de particules : Sherbb’s Collection<\/h6>\n\n\n\n
Allez dans l’Asset Store,<\/strong> connectez-vous \u00e0 votre compte si besoin et tapez \u00ab\u00a0particle\u00a0\u00bb dans la recherche. Limitez la recherche aux Free Assets<\/strong>. Rep\u00e9rez dans les r\u00e9sultats le Pack Sherbb’s Particle Collection<\/strong>.
Cliquez sur le bouton Add to My Assets<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Dans Unity, dans le Menu Window > Package Manager<\/strong> choisissez My Assets<\/strong>, cliquez sur le Pack ci-dessus puis sur Download<\/strong>.
Dans la fen\u00eatre qui s’ouvre, gardez tout coch\u00e9 et cliquez sur Import<\/strong>.
Un nouveau dossier apparait dans les Assets.<\/p>\n\n\n\n
Dans la Scene Level3, ouvrez le dossier Sherbb’s > Particles > Normal<\/strong>  dans les Assets. Double cliquez sur les diff\u00e9rents Prefabs pour voir \u00e0 quoi ils ressemblent. Rep\u00e9rez le BirthdayConfetti<\/strong> et faites-le glisser dans la Hierarchy<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Placez le Prefab juste au dessus du cube rouge.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n\n\n\n
R\u00e9glez les param\u00e8tres de ce Prefab dans l’Inspector :
– la dur\u00e9e \u00e0 2s,
_ la case Looping d\u00e9coch\u00e9e afin qu’il ne s’ex\u00e9cute pas en boucle,
– la Start Color \u00e0 rouge
– Le Play On Awake d\u00e9coch\u00e9 pour qu’il ne s’ex\u00e9cute pas au d\u00e9marrage du jeu.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Sur la Scene, le panneau Particles <\/strong>en bas \u00e0 droite permet de tester l’effet en modifiant certains param\u00e8tres<\/span>.<\/p>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u2022 D\u00e9clencher l’effet avec un Script<\/h6>\n\n\n\n
Nous allons faire en sorte que l’effet se d\u00e9clenche lorsque le joueur entre en collision avec le cube rouge, en m\u00eame temps que le cube disparait et que le Mur apparait.<\/p>\n\n\n\n
Depuis les Assets, ouvrez le Script \u00ab\u00a0Activate_Wall\u00a0\u00bb<\/strong>.
Il faut commencer par rajouter une variable d\u00e9di\u00e9e au Particle System<\/strong>, appelons-la \u00ab\u00a0explosion<\/strong>\u00ab\u00a0. Cette variable doit \u00eatre publique.<\/p>\n\n\n\n
Puis, dans la fonction OnTriggerEnter()<\/strong> il faut lancer cet \u00e9l\u00e9ment avec la m\u00e9thode Play()<\/strong> : 
explosion.Play();<\/em><\/p>\n\n\n\n
Voici le code :<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class Activate_Wall : MonoBehaviour {\n    public GameObject wall;\n    public GameObject redCubeT;\n    public ParticleSystem explosion;\n\n    private void OnTriggerEnter() {\n    \twall.SetActive(true);\n    \tDestroy(redCubeT.gameObject);\n    \tDestroy(gameObject);\n    \texplosion.Play();\n    }\n}<\/code><\/pre>\n\n\n\n
\n
\n
Enfin, ne pas oublier d’associer l’Objet concern\u00e9 depuis la Hierarchy<\/strong> vers la variable correspondante.
Afficher pour cel\u00e0 l’Inspector<\/strong> du Trigger<\/strong> Cube_Red_T<\/strong>. Faites glisser le systeme de particules \u00ab\u00a0BirthdauConfetti\u00a0\u00bb dans la case explosion du Script, comme ci-contre.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\u2022 Cr\u00e9er un Syst\u00e8me de Particules personnalis\u00e9<\/h6>\n\n\n\n
\n
\n
Pour cr\u00e9er un syst\u00e8me de particules personnalis\u00e9, faites un Clic Droit sur la Hierarchy<\/strong> et demandez Effects > Particle System<\/strong>.
Voir le r\u00e9sultat sur la Scene<\/strong> ci-dessous.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Cet Objet s\u00e9lectionn\u00e9, l’Inspector<\/strong> ci-dessous \u00e0 gauche pr\u00e9sente les tr\u00e8s nombreux r\u00e9glages disponibles. Par d\u00e9faut, l’effet est celui de l’\u00e9mission de petites billes.<\/p>\n\n\n\n
Il y a, visibles sur l’\u00e9cran \u00e0 droite ci-dessous, trois familles de r\u00e9glages coch\u00e9s par d\u00e9faut parmi tous ceux disponibles : Emission<\/strong>, Shape<\/strong> et Renderer<\/strong>. Ce sont les principaux et si l’un d’eux est d\u00e9coch\u00e9, l’effet ne sera plus visible.<\/p>\n\n\n\n
En bas \u00e0 droite l’onglet Emission<\/strong> permet de modifier la quantit\u00e9 de particules \u00e9mises en m\u00eame temps par Rate over Time<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/div>\n<\/div>\n\n\n\n
Ensuite, l’onglet Shape<\/strong> agit sur la forme globale dans laquelle les particules sont \u00e9mises. Par d\u00e9faut le Shape<\/strong> est un C\u00f4ne<\/strong>, mais il y en a plein d’autres. Essayez pour voir par vous-m\u00eame. Les autres param\u00e8tres permettent d’ajuster la Shape<\/strong> choisie.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Enfin, l’onglet Renderer<\/strong> permet notamment de choisir l’aspect des particules dans le r\u00e9glage Material<\/strong>. Cliquez sur le petit cercle \u00e0 droite du Material Particles Unlit<\/strong>. Une fen\u00eatre Select Material<\/strong> vous propose de choisir un Material<\/strong> parmi ceux pr\u00e9sents dans les Assets<\/strong> du Project<\/strong>.
Nous allons changer ce Material<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Il faut donc commencer par cr\u00e9er un Material<\/strong>. Partons d’une image PNG<\/strong>, \u00e0 fond transparent, pr\u00e9par\u00e9e dans Photoshop.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Importez cette image dans les Assets<\/strong>, dans un sous-dossier adapt\u00e9 (\u00ab\u00a0Images<\/strong>\u00a0\u00bb pour ce qui me concerne, un dossier Texture<\/strong> serait bien aussi) simplement en la faisant glisser.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Cr\u00e9ez un nouveau Material<\/strong> dans les Assets<\/strong>, toujours dans un Dossier adapt\u00e9. Appliquez l’image import\u00e9e sur le Material<\/strong> en tant que Base Map<\/strong>. Je nomme ce Material \u00ab\u00a0light<\/strong>\u00ab\u00a0.<\/p>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
Enfin, comme pr\u00e9c\u00e9demment, dans l’Inspector<\/strong> du Particle System<\/strong>, cliquez sur le petit cercle de choix du Material<\/strong> dans l’onglet Renderer<\/strong> et dans la fen\u00eatre Select Material<\/strong>, choisissez le Material<\/strong> \u00ab\u00a0light<\/strong>\u00ab\u00a0.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Voici le r\u00e9sultat ci-dessous, avec les r\u00e9glages par d\u00e9faut, dans la Scene<\/strong> et dans le Game<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
7. Le son<\/h5>\n\n\n\n
Il est tr\u00e8s simple d’ajouter un Son<\/strong> \u00e0 votre projet.  Utilisez un son au format MP3<\/strong> par exemple. Vous pouvez en trouver sur des sites de sons gratuits ou le cr\u00e9er vous-m\u00eame. Par exemple https:\/\/www.sound-fishing.net<\/a>
Pensez simplement \u00e0 nettoyer les sons en supprimant les zones silencieuses au d\u00e9but ou \u00e0 la fin si elles ne sont pas n\u00e9cessaires, et qui pourraient produire des retards d’effet bizarres.
Pensez \u00e9galement \u00e0 ajuster la dur\u00e9e de vos sons en fonction de leur usage, son d’impact, son d’accompagnement en boucle, etc. Il faut faire attention que les sons ne soient pas trop lourds en poids de fichier pour ne pas ralentir le jeu.<\/p>\n\n\n\n
\u2022 Importer un son<\/h6>\n\n\n\n
Importez votre Son<\/strong> dans les Assets<\/strong>, dans un Dossier adapt\u00e9, en le faisant glisser \u00e0 l’int\u00e9rieur, comme ci-dessous.
Pour l’utiliser, faites le glisser depuis les Assets<\/strong> vers la Hierarchy<\/strong>. Un haut parleur blanc le mat\u00e9rialise sur la Scene<\/strong>.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/div>\n\n\n\n
\n
L’inspector<\/strong> pr\u00e9sente quelques r\u00e9glages importants dans le Component Audio Source<\/strong>.
Pour \u00e9viter que le Son<\/strong> se lance au d\u00e9marrage du jeu, notamment si le Son<\/strong> doit \u00eatre d\u00e9clench\u00e9 par un \u00e9v\u00e9nement du jeu, il faut d\u00e9cocher la case Play On Awake<\/strong>. \u00c0 l’inverse, vous pouvez la garder coch\u00e9e s’il s’agit d’un son d’ambiance.
De m\u00eame la case Loop<\/strong> permet de jouer le Son<\/strong> en continu. Il faut la d\u00e9cocher pour un bruit d’impact.<\/p>\n<\/div>\n<\/div>\n\n\n\n
\u2022 D\u00e9clencher le son sur un \u00e9v\u00e9nement<\/h6>\n\n\n\n
Il faut de nouveau rajouter une variable, d\u00e9di\u00e9es au Sound<\/strong> cette fois. Nous choisirons \u00ab\u00a0sound_Red<\/strong>\u00a0\u00bb pour le Type AudioSource<\/strong> en tant que variable publique.<\/p>\n\n\n\n
Dans la fonction OnTriggerEnter()<\/strong> du Script Activate_Wall, ajoutez : 
sound_Red.Play();<\/em>
<\/p>\n\n\n\n
Voici donc le code complet, avec les particules et le son :<\/p>\n\n\n\n
using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class Activate_Wall : MonoBehaviour {\n    public GameObject wall;\n    public GameObject cubeRed;\n    public AudioSource sound_Red;\n    public ParticleSystem vapeur;\n\n    private void OnTriggerEnter() {\n    \twall.SetActive(true);\n    \tDestroy(gameObject);\n    \tDestroy(cubeRed.gameObject);\n    \tsound_Red.Play();\n    \tvapeur.Play();\n    }\n}<\/code><\/pre>\n\n\n\n
Faites glisser le Son de la Hierarchy vers la variable dans l’Inspector du cube rouge Trigger, dans le Component du Script, comme pr\u00e9c\u00e9demment pour les particules, enregistrez et testez.<\/p>\n\n\n\n
8. Finaliser les interactions<\/h5>\n\n\n\n
Il reste donc \u00e0 faire la m\u00eame chose pour les deux autres cubes, rajouter des particules et du son.<\/p>\n\n\n\n
On pourrait \u00e9galement tester l’ordre dans lequel les cubes sont d\u00e9truits et emp\u00eacher que le cube bleu ou vert soit atteint avant le rouge etc. Cela n\u00e9cessiterait l’emploi de variables booleennes pour donner l’\u00e9tat des cubes et de conditions dans les Scripts.<\/p>\n\n\n\n
On pourrait \u00e9galement afficher un Score\u2026
 et imaginer d’autres niveaux.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Nous allons aborder diff\u00e9rents aspects de la cr\u00e9ation d’un jeu simple, appel\u00e9 \u00ab\u00a0RGB, The Color Game\u00a0\u00bb.Bien qu’au final, nous devrions cr\u00e9er un jeu coh\u00e9rent en plusieurs niveaux, nous scinderons l’\u00e9tude en plusieurs fichiers distincts. 1. Installer le nouvel Input System Cette section est obsol\u00e8te. Depuis la version 2019 d’Unity, il existe un nouvel Input System … Continuer la lecture de Projet 3D – Un jeu simple<\/span>  →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/2342"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2342"}],"version-history":[{"count":120,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/2342\/revisions"}],"predecessor-version":[{"id":5256,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/2342\/revisions\/5256"}],"up":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}