Tutoriel Complet Unity Défi 2

Transcription

1 Tutoriel Complet Unity Défi 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 Les scripts dans unity Inputs C# Les Animations avec du C#

2 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]

3

4 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 :

5 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 :

6 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.

7 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.

8 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 :

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

10 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 :

11 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?

12 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!

13 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) :

14 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 :

15 /!\ 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 :

16

17 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.

18 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.

19 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 :

20 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.

21 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.

22 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.

23 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#]

24

25 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]

26 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 :

27 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.

28 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 :

29 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 :

30 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 :

31 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 :

32 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 :

33 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) :

34 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 +

35 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 :

36 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.

37 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 :

38 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.

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

40 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 :

41 Annexe 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.

42 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

43 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

44 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.

45 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.

46 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.

47 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:

48 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 :

49 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.

50 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.

51 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 :

52 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

53 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 :

54 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 :

55 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:

56