Tutoriel Complet Unity ­ Défi 2 2.0 ­ Présentation

Objectif Ce que tu vas apprendre Méthodologie

2.1 ­ Fais parler tes personnages (UI) 2.2 ­ Fais parler tes personnages (scripts) 2.3 ­ Promène toi dans l’espace 2.4 ­ Contrôle ton personnage 2.5 ­ Crée ton menu 2.6 ­ Met du Son

Annexe 1.3.2 ­ Les scripts dans unity 1.3.4 ­ Inputs C# 1.3.5 ­ Les Animations avec du C#

2.0 ­ Présentation

Objectif

On a maintenant un jeu rempli de personnages animés, avec un super décor en prime. On

va rajouter de la vie dans notre jeu en utilisant des dialogues entre différents personnages,

du son et surtout des déplacements ! On verra aussi comment créer un menu pour rendre

notre jeu plus agréable.

Ce que tu vas apprendre

Créer des dialogues

Créer un menu

Intégrer du son

Déplacer des personnages

Méthodologie

On va commencer par faire parler les personnages. Pour cela, on va d’abord créer les éléments de l’UI dans le [Tuto Dialogue ­ UI]. Ensuite, je te conseille de relire le [Tuto Script C#] avant de passer au [Tuto Dialogue ­ Script]. Ensuite, on va voir comment se déplacer dans l’espace dans le [Tuto déplacement]. Je te

conseille de relire le [Tuto Input C#] avant de passer au [Tuto contrôler ton personnage] qui

t’apprendra comment te déplacer avec les touches du clavier et comment gérer les

animations de ton personnage !

Enfin, on va créer de nouveaux éléments de l’UI afin de créer un menu dans le [Tuto Menu],

puis on verra comment rajouter des musiques de fond et des bruitages pour notre jeu dans

le [Tuto Son]

2.1 ­ Fais parler tes personnages (UI)

pré­requis : Tutoriel sur les Scripts Afin de faire parler tes personnages, on va utiliser l’interface d’Unity pour créer des éléments de l’UI (interface utilisateur, “user interface” en anglais), et les scripts pour créer une discussion. C’est quoi l’UI ? l’UI c’est l’interface de ton jeu, donc les boutons de menu, l’affichage des vies, une mini­map … C’est en fait tous les éléments du jeu qui restent en permanence affichée. Dans Unity, c’est un ensemble d’objets 2D (différents des GameObject qu’on a vu jusqu’à maintenant) qui ne se déplacent pas en fonction de ta caméra. Voici un exemple concret :

Création de l’UI

a. Création du canvas C’est assez simple, il faut tout d’abord créer un Objet de type “Canvas” comme ceci :

Cette objet va représenter notre écran, c’est ici que l’on va mettre tous nos éléments de l’UI : textes, images, boutons ... Si je le sélectionne je peux voir ma zone de travail :

On va modifier le Canvas afin qu’il s’adapte à n’importe quelle résolution d’écran. Pour cela, va dans l’inspector, trouve le composant “Canvas Scaler” et met le mode “Scale With Screen Size” au “Ui Scale Mode”. On va donner dans le “X” et le “Y” la taille de référence de l’écran ; Unity s’occupera ensuite d’adapter la fenêtre à l’écran du joueur. Nous te conseillons 1920 pour X et 1080 pour Y.

b) Création de la boîte de dialogue Maintenant que notre Canvas est prêt, on va mettre une image à l’intérieur : fais un clic gauche sur ton Canvas (dans la hiérarchie), choisis UI > Image.

Tu as donc une image blanche au milieu de ton écran. En haut à gauche de l’écran, clique sur l'icône entourée de vert :

Cette icône va te permettre de changer la taille (en tirant sur les bords) et la position de ton image. /!\ Attention : En sélectionnant ton image, ne clique pas sur le petit rond bleu au milieu de ton image car il ne te permet pas de déplacer ton image.

Une fois que tu as modifié la taille et la position de ton image, il va falloir lui donner une texture. Cette image va être ma boîte de dialogue : je vais donc mettre ma texture dans sa variable Source Image en choisissant “Preserve Aspect” pour ne pas étirer l’image.

Vérifie que ta texture est de type “Sprite” :

Puis met là sur ton image (glisser ­ déposer) :

Et voilà une belle boîte de dialogue : on va pouvoir rajouter une image et du texte par dessus ! Pour l’image du personnage dans la boîte de dialogue il faut faire la même chose (créer une image, la placer, puis lui mettre une texture). c) Le texte

Pour rajouter le texte c’est un petit peu différent : clic gauche sur le Canvas, UI > Text. Un petit texte s’est alors ajouté au milieu de ton écran. Pour le personnaliser, sélectionne le et modifie le comme ceci :

Tu peux mettre ton texte ici. Je te conseille de choisir les deux options du milieu à côté de “Alignment” (entouré en vert) pour centrer ton texte. Coche aussi “Best Fit” afin qu’il remplisse la boîte de dialogue Si tes textes sont très longs, tu peux augmenter “Max Size”

Comme pour l’image, tu peux déplacer et changer sa taille. Au final, tu auras quelque chose ressemblant à cela :

Comment créer une discussion ?

Ici je veux créer une discussion entre mon personnage et mon saphir, pour cela, je vais donc créer un texte et une image pour le saphir (de la même manière que pour mon personnage).

Problème : tout s’affiche en même temps dans notre boîte de dialogue ! On va donc tout désactiver (sauf la boîte de dialogue), puis les activer au fur et à mesure avec un script. Pour cela, sélectionne chaque objet (texte et image UI) et décoche cette case pour le désactiver :

On va donc passer au script afin de modifier tout cela !

2.2 ­ Fais parler tes personnages (scripts)

Dans mon script je vais donc commencer par rajouter un package en utilisant “using”, puis je vais créer 4 variables de type GameObject afin de récupérer mes 4 éléments UI (pour pouvoir les modifier). Attention de mettre le script sur la boîte de dialogue, sinon tu ne pourras pas l’activer / la désactiver (par exemple si tu veux l’enlever à la fin de ton dialogue).

Dans ton inspector, tu as maintenant des variables qui sont affichées, il faut que tu glisses et déposes chaque objet qui correspondent à chaque variable que tu viens de créer.

Vu qu’on va faire parler plusieurs fois les personnages, on va créer une fonction “parler”. Elle prendra un “choix” (le nom du personnage qui va parler) et le texte (ce qu’il va dire) :

On a quand même un petit problème : au fur et à mesure de notre dialogue, tous nos textes vont s’afficher l’un sur l’autre. On va donc commencer par tout désactiver :

On peut maintenant faire parler le joueur, mais toujours pas faire un dialogue. Pour cela, il faut qu’on puisse attendre entre deux “parler”. On va utiliser les coroutines : ce sont des fonctions un peu particulières dont la première instruction indique combien de temps on doit attendre avant d’exécuter la fonction. Petite subtilité : on ne peut pas appeler directement la fonction, il faut l’entourer de “Start_coroutine”. On a donc :

/!\ Attention : Le “WaitForSeconds(3)” correspond au temps d’affichage du dialogue AVANT la coroutine actuelle, c’est donc le temps d’affichage du message précédent. Il est possible d’enchaîner plusieurs coroutine de cette manière. Un exemple pratique pour pouvoir désactiver les personnages à la fin du dialogue :

2.3 ­ Promène toi dans l’espace

Pré­requis : Tutoriel sur les Scripts, les Inputs Afin de déplacer tes personnages dans le jeu, il va falloir utiliser des scripts. On va voir comment déplacer un personnage et le téléporter directement à un endroit ! Déplacements sans Inputs Tout d’abord je vais créer un script et le placer sur le personnage que je souhaite déplacer.

Dans mon script, je vais donc appeler une fonction qui va déplacer mon objet dans une direction donnée. Si je met cette fonction dans mon Update, l’objet va se déplacer à l’infini.

le problème ici c’est que mon objet va aller à l’infini à droite, moi j’aimerais qu’il se téléporte quand il arrive à un certain endroit. Pour savoir à quel moment téléporter mon objet, il faut que je récupère la position x de cet endroit. Pour trouver une position précise dans ma scène, il suffit de placer un objet à cet endroit et regarder sa position x et y (en utilisant l’inspector). Une fois que j’ai la position, je peux remettre mon objet là où il était, bien entendu !

Les x permettent de se déplacer à l’horizontale (gauche ­ droite), les y à la verticale (haut ­ bas). Une fois que j’ai trouvé ma position (0.5f) il ne me reste plus qu’a modifier mon script :

On notera que la position où je téléporte mon objet n’est pas sur l’écran c’est pourquoi on ne le voit plus. Dernier petit soucis, mon objet se déplace dès que le jeu commence. Je vais donc créer une variable de type booléen, la mettre à faux au début et déplacer l’objet que si cette variable est à vrai.

Il faut maintenant mettre cette variable à vrai lorque l’on veut déclencher le déplacement, par exemple à la fin de la conversation. Pour cela je retourne dans mon script Dialogues, je rajoute une variable GameObject qui contiendra l’objet que je souhaite déplacer afin de pouvoir mettre la variable à true.

Je récupère le script sur mon objet avec un GetComponent, puis je met la variable va_a_droite à true.

n’oublie pas de glisser ­ déposer ton objet dans la variable de l’inspector sinon ton objet sera vide et la fonction ne marchera pas

Une fois la téléportation terminée, remet la variable à faux.

2.4 ­ Contrôle ton personnage

On a vu dans le [tuto Input] comment utiliser le clavier, on va maintenant voir comment faire pour déplacer notre personnage via les touches du clavier. Pour commencer, on va déplacer notre personnage à droite si on appuie sur la flèche de droite.

Maintenant je vais faire déplacer mon personnage dans toutes les directions. Il faut aussi orienter le personnage dans la direction donnée.

Et voilà ! Tu peux désormais déplacer n’importe quel objet n’importe quand tu le souhaite ! Maintenant n’oublie pas de t’occuper des animations comme on l’avait vu dans le [Tuto Animation et C#]

2.5 ­ Crée ton menu

Commence par sauvegarder ta scène si ce n’est pas déjà fait, puis crée une nouvelle scène :

Vous arrivez sur une nouvelle scène qui va vous servir de menu. Le menu, ce n’est que de l’UI, donc on va recréer un canvas puis une image de fond comme on a vu dans [TUTO UI]

Mon image de fond est plus grande que mon Canvas car la résolution de l’image n’est pas la même, mais ce n’est pas grave. Ensuite je vais rajouter des boutons, pour cela :

un bouton a un texte comme enfant :

Tu peux donc modifier le texte comme tu le souhaites, moi je vais marquer “Jouer” car ce bouton va permettre de lancer le jeu. Je vais aussi renommer mon Bouton en : “Bouton_JOUER”. Un bouton a un composant “Image”, on peut donc lui donner une texture comme une image classique.

Une fois que j’ai fais un beau bouton, je vais le dupliquer trois fois, puis les placer et les renommer.

Je vais aussi créer un texte et un bouton retour pour les crédits :

Mais je vais les désactiver, car ils ne seront visibles que lorsqu’on clique sur le bouton CRÉDITS.

Je vais aussi rajouter un texte d’introduction sur un autre fond qui apparaîtra quand on cliquera sur le bouton JOUER, pour cela je vais rajouter une image puis lui mettre une texture :

Puis je rajoute 2 textes, un pour la page de gauche :

et un sur la page de droite :

Pour finir on rajoute un bouton qui va lancer le jeu :

On n’oublie pas de désactiver tous ces objets, car comme pour les crédits, ils ne doivent s’afficher que lorsque l’on clique sur le bouton jouer. Pour le moment, si on clique sur un bouton, rien ne se passe, on va donc passer à la partie Script afin de lier les boutons à des fonctions. Je vais donc créer un Script, dans ce Script je vais récupérer tous les objets qui vont devoir s’activer ou se désactiver, je vais aussi créer 5 fonctions, une fonction par bouton :

Chaque fonction sera appelée lorsqu’on clique sur le bouton correspondant (nous verrons cela après) ; ici nous allons remplir ces fonctions, voici ce que font Press_Jouer et Press_Continuer :

Voici ce que vont faire les fonctions Press_Credits et Press_Retour. /!\ Attention: dans ma fonction “Press_Quitter”, je vais appeler la fonction qui quitte l’application, elle ne fonctionne que dans la version finale (quand on aura “buildé” l’application, pas pendant les tests dans Unity donc) :

Je n’oublie pas de mettre mon script sur un objet qui sera toujours Activé (Image_Menu par exemple) puis je glisse et dépose chaque objet dans les variables correspondantes :

Pour finir, il faut dire à chaque bouton : “Quand on te clique dessus, appelle cette fonction ! ”, avec “cette fonction” qui correspond aux fonctions que l’on vient de créer. On sélectionne donc un premier bouton, tout en bas de son inspector, il y a un “+”

ce “+” va vous permettre de rajouter un appel de fonction lorsque ce bouton est cliqué.

Après avoir cliqué sur ce “+”, on glisse dans cette case, l’objet qui contient notre script de menu :

On clique ensuite sur “No Function” > Le_Nom_De_Notre_Script > La_Fonction_Correspondante

N’oublie pas de sauvegarder ta scène sous le nom de “menu”, tu as maintenant deux scènes : une pour le menu et une pour le jeu.

2.6 ­ Met du Son

En premier lieu, il faut trouver des sons avant de les jouer dans ton jeu. Il existe de nombreux site gratuits où tu peux trouver des sons pour ton jeu comme freesound, tu peux aussi en trouver sur l’asset store. Une fois que tu as téléchargé tes sons, glisse et dépose les dans ton dossier “sons” de Unity (crée ce dossier si tu ne l’a pas). Tu devrais donc voir ton son un peu comme cela :

Pour jouer ton son dans Unity, clique sur ta MainCamera > Add Component, Tape audios dans ta barre de recherche puis clique sur Audio Source :

On va donc faire un glisser & déposer de notre Son dans la case “AudioClip” On va cocher la case “Play On Awake” : cette case permet de jouer ton Son dès que la scène se lance.

On va aussi cocher la case “Loop” : cette case permet de jouer ton Son à l’infini.

Dans mon jeu, si je veux qu’un son se déclenche à un moment précis, je vais donc ajouter un son (de la même manière, avec un AudioSource) sur l’objet qui doit jouer le son (dans mon exemple, c’est le joueur). /!\ Attention : Pense à décocher les cases “Play On Awake” et “Loop” ! Lorsque le moment est venu, j'appelle la fonction Play de AudioSource :

Annexe

1.3.2 ­ Les scripts dans unity

Jusqu’à maintenant nous avons utilisé l’éditeur graphique d’Unity. Même si celui­ci est très

puissant, il a ses limites et nous allons donc voir comment créer des scripts, indispensable

dans n’importe quel projet.

Quel langage est utilisé dans unity ?

En faisant un clic droit dans votre projet et en sélectionnant “Create” vous aurez la

possibilité de choisir entre deux langages :

Le plus commun et le plus documenté sur internet est le C#. Nous allons donc nous

concentrer exclusivement sur ce langage lors de ce tutoriel.

Note : on prononce “C#” “C­sharp” et non “C­dièse”, ne soyez pas étonnés si vous

l’entendez dans une vidéo !

À quoi sert un script ?

Un script permet de donner des instructions précise à un objet en utilisant plusieurs

paramètres. Par exemple un script pour les déplacements du personnage ou un script pour

déplacer la caméra en fonction des déplacements du joueur.

Quelques règles importantes

Il est important d’organiser un minimum nos scripts, car on peut facilement s’y perdre

(essayez de retrouver une feuille dans une boîte remplie de feuilles …). On va donc séparer

les scripts et créer un script par objet de notre code. On aura donc un script pour le joueur,

un script pour le bonus (une pièce par exemple), un script pour chaque type d’ennemi.

À l’intérieur même de nos scripts, il est important de rester clair, pour cela quelques

règles de base :

Les noms de variables doivent être clairs. Pas de “a”, “b” et “c”, mais plutôt

“pointsDeVie”, “attaque”, “maCamera” …

Rajoutez des commentaires ! Ils seront très importants quand vous relirez votre

code.

Sautez régulièrement des lignes pour “aérer” votre code

Démarrage sur Unity

Il est possible d’utiliser beaucoup d’éditeurs différents avec Unity. Nous allons utiliser

“MonoDevelop” (un éditeur présent avec Unity)”. Allez dans :

Et choisissez MonoDevelop comme “External Script Editor”

Créez votre premier script C# intitulé “Test” (clic droit dans la partie project, et “create C#

script”)

(On met toujours une majuscule au nom des scripts).

Ouvrez le par un double­clic.

Expliquons dans l’ordre les différents éléments présent dans le fichier de base.

Lignes 1 et 2 Permet d’importer des “packages” de code ; un peu comme les “packages”

d’assets, il y en a certains présents dans Unity par défaut, et on peut en récupérer sur

Internet si besoin.

Ligne 4 Il faut remettre ici le nom du fichier (toujours avec une majuscule, donc Test) ; la

syntaxe (manière d’écrire les choses) est importante à respecter, sinon Unity ne comprendra

pas.

Ligne 6 et 11 ce sont des commentaires, mettre un // dans une ligne permet à Unity

d’ignorer ce qu’il y a après. C’est très pratique pour indiquer à quoi sert telle ligne ou bout de

code !

Ligne 7, il s’agit de la fonction Start ;elle est très utile car c’est ici qu’on initialise les valeurs

de nos variables.

Ligne 12, une autre fonction très utile, la fonction Update. Elle est appelée une fois par

image(“frame” en anglais). C’est là que se passera la majorité de notre code (les

évènements qui se passeront en boucle, comme les déplacements).

Les variables

Avant de rentrer vraiment dans le code, il est important de comprendre ce que c’est qu’une

variable. Une variable est une boîte qui peut contenir une valeur. La valeur peut être un

nombre entier(54), un nombre à virgule (12,34), un booléen (valeur vrai ou faux), un texte

(“coucou”), ou encore des objets Unity (un gameObject par exemple).

Comme on peut le constater, chaque variable a aussi un type : ce que la boîte contient. En

C#, il est indispensable de préciser le type d’une variable avant de l’utiliser, et on ne peut

pas changer son type : si la variable “pointDeVie” est un nombre entier et contient 50, elle ne

peut pas devenir du texte et contenir “coucou”.

Il existe de nombreux types de variables, et nous n’allons pas tout utiliser. Regardons

d’abord comment utiliser les types dit “de base” (qu’on peut retrouver dans à peu près tous

les langages de programmation) :

Important : On met toujours une minuscule au début des nom de variables et une majuscule

pour séparer les mots qui la composent.

Nous avons aussi des types propres à Unity. Tous les composants d’un objet qu’on peut

trouver dans l’inspecteur ont un type en C#.

Déclaration:

Initialisation:

Les fonctions

On utilise des fonctions pour interagir avec Unity, que ça soit pour lui donner des

informations (changer l’animation d’un personnage), ou pour en récupérer (savoir si

l’utilisateur a appuyé sur la touche droite par exemple). Start() et Update() qu’on a vu un peu

plus tôt sont aussi des fonctions ; de manière générale une fonction c’est juste plusieurs

lignes de code.

Une fonction peut éventuellement renvoyer une valeur : c’est le cas quand on

demande à Unity si l’utilisateur a appuyé sur la touche droite. Certaines fonctions n’en

renvoient pas, par exemple, changer l’animation d’un personnage. Cette valeur est comme

une variable, et elle a donc un type.

Une fonction prend (quasiment) tout le temps des arguments. Les arguments sont

des variables qu’on va donner à la fonction pour qu’elle puisse fonctionner. Par exemple, à

une fonction “bouger”, on va lui donner le nombre de pas dont on doit avancer.

Un exemple d’utilisation de fonction, avec et sans retour de valeur :

1.3.4 ­ Inputs C#

Pré­Requis: Tutoriel sur les Scripts

On va gérer comment interagir avec l’utilisateur, c’est à dire savoir si le joueur a appuyé sur

une touche de son clavier ou l’écran tactile d’une tablette ou déplacé la souris.

On va procéder de la même manière pour tout : on va utiliser des fonctions qui vont nous

renvoyer un booléen : vrai si l’utilisateur est en train d’interagir avec nous d’une certaine

manière. On va tester directement le résultat avec un “if” (si en anglais).

Le clavier

On a ici trois fonctions, qui prennent toutes un paramètre, la touche qu’on veut tester. Les

plus utilisées sont Space (touche espace), Enter (entrée), A­Z (touches des lettres),

RightArrow/LeftArrow/DownArrow/UpArrow (flèche droite ­ gauche ­ bas ­ haut). Tu peux

trouver une liste complète des touches en anglais ici.

La souris

Cela fonctionne sensiblement de la même manière et on a les mêmes fonctions. Elles

prennent un paramètre, le bouton de la souris qu’on veut tester. 0 correspond au bouton

gauche, 1 au bouton droit, 2 à la molette.

L’écran tactile (tablette / ordinateur)

Cette fois ci cela fonctionne un peu différemment : vu qu’on peut avoir plusieurs “touch”

simultanés (si on appuie avec 2 doigts à un endroit différent), Unity nous renvoie une liste de

touch. Pour accéder à chaque touch individuellement, on va utiliser une syntaxe un peu

différente avec un foreach :

On utilise une méthode un peu différente : au lieu d’appeler une fonction pour savoir si on

appuie (ou pas), on va tester si la “phase” (l’état) du “touch” est égale à soit :

Les axes

Les axes nous permettent de savoir où se trouve la souris dans la fenêtre. La fonction

GetAxis prend le nom en paramètre et renvoie un nombre (à virgules) entre ­1 et 1. Il en

existe 2 :

1.3.5 ­ Les Animations avec du C#

Pré­Requis: Tutoriels sur Animations, Animator, les Scripts

Je veux lancer l’animation de mon personnage quand je le fais marcher.

Lors du tuto “Animator”, nous avons vu comment ajouter des paramètres (bool, int, float,

etc…) pour déclencher les animations selon certaines conditions.

Nous allons ici utiliser un paramètres de type bool : enDéplacement, qui vaut vrai si on est

en train d’appuyer sur la flèche droite OU gauche, et faux si aucune n’est appuyée.

Voyons comment en C# je peux agir sur ces paramètres.

Pour celà il va nous falloir :

une variable de type “Animator” pour accéder au composant du même nom.

un bout de code qui va tester si on appuie sur la touche flèche droite (comme on a vu dans

le tuto sur les Input) et change les valeurs du paramètre dans l’Animator.

Ici, on utilise deux nouvelles choses :

Le “||” ; c’est un “OU”. Ainsi, on mettra “enDéplacement” à true si on appuie sur la

touche droite OU sur la touche gauche. Il existe aussi le “&&” pour le ET (vérifie que

les deux conditions sont vraies)

Le “else” : le code qui suit dans les crochets s’exécute uniquement si la condition du

if n’est pas vérifiée. Ici, le code s’exécutera si on n’appuie pas sur la touche gauche

et qu’on n’appuie pas sur la touche droite.

Dans l’animator, il suffit de tester si “EnDéplacement” vaut vrai :

Pour chaque type de paramètre il existe un “Set….()”

En voilà trois exemples: