Jusqu'à présent, nous avons préparé les scripts pour nos personnages et appris à modifier les propriétés d'un GameObject à l'aide d'une référence.

Maintenant, nous allons voir comment déclencher les méthodes que nous avons créées à l'aide d'un bouton cliquable.

Remarque : La création d'un bouton implique celle d'une interface utilisateur (UI). Nous n'aborderons pas en détail le fonctionnement des GameObjects de la catégorie UI. Ce sujet sera traité dans un autre chapitre. Ce que vous allez voir ici est une courte introduction, suffisante pour créer notre mini-système de combat.

Comment créer un bouton ?

Dans Unity, un bouton fait partie des GameObjects de la catégorie UI (interface utilisateur). Vous pouvez en créer un comme n'importe quel objet classique : un clic droit dans la fenêtre Hiérarchie, puis sélectionner UI -> Legacy -> Button.

Vous remarquerez qu'il existe un bouton nommé "Button - TextMeshPro". Ce bouton est très similaire à la version Legacy, mais il s'agit d'une version améliorée avec plus d'options. Il est principalement destiné à ceux qui souhaitent ajouter des effets spéciaux, comme un texte en dégradé ou des animations. Toutefois, choisir un UI de type TextMeshPro nécessite l'installation d'assets supplémentaires dans votre projet. Pour l'instant, restons simples, la catégorie Legacy suffira dans la plupart des cas. 

Canvas et Text ? Mais j'ai pourtant cliqué sur Button !

Lorsque vous créez un bouton pour la première fois, plusieurs objets apparaissent dans la scène.

Le premier est le Canvas. Vous pouvez imaginer cet objet comme un film transparent que vous appliquez sur la lentille de la caméra. Ainsi, peu importe le mouvement de la caméra, vous verrez toujours votre Canvas et son contenu. Le Canvas détermine aussi comment ses éléments enfants (comme le bouton et le texte) réagiront en fonction de la résolution et de la taille de l'écran. Par exemple, vous pouvez choisir que les boutons s'étendent horizontalement si le joueur dispose d'un écran plus large que prévu. Nous aborderons ces détails dans un autre chapitre.

Ensuite, vous avez votre bouton avec un enfant Text. Par défaut, un bouton est une simple image de rectangle blanc avec du texte à l'intérieur. Si vous ne souhaitez pas de texte, vous pouvez supprimer l'objet Text (Legacy).

 

Pour notre exercice, nous allons garder cet objet. Vous pouvez modifier son texte dans l'Inspector et inscrire "Attaque". De plus, nous allons ajuster les propriétés "Horizontal Overflow" et "Vertical Overflow" en choisissant l'option "Overflow".

Pourquoi mon bouton est-il gigantesque ?

Vous remarquerez probablement que votre bouton semble énorme par rapport à la scène.

En réalité, il est minuscule. Pour voir sa taille réelle, allez dans la fenêtre Game. 

Lorsque vous créez une interface utilisateur, Unity génère un grand rectangle pour représenter le Canvas. Cela peut être pratique pour manipuler plus facilement l'UI, mais personnellement, je préfère le cacher et effectuer mes ajustements directement depuis la fenêtre Game.

Pour rendre votre Canvas et son contenu invisibles dans la fenêtre Scene, allez modifier les Layers visibles dans le menu en haut de la fenêtre Scene.

 

Votre interface utilisateur sera toujours visible à travers la caméra, donc dans la fenêtre Game, mais ne vous gênera plus dans la fenêtre Scene.

Positionner notre bouton

Avec la fenêtre Game active et votre bouton sélectionné, vous pouvez modifier la taille de votre bouton dans l'Inspector.

Ajustez les valeurs de Width et Height pour obtenir une taille satisfaisante. Par exemple, j'ai défini les valeurs à 400 et 100.

 

 

Ensuite, vous pouvez déplacer votre bouton en ajustant les valeurs de Pos X et Pos Y. Ces valeurs dépendront de la résolution de l'écran. Nous n'entrerons pas dans les détails ici, mais placez simplement le bouton là où vous le souhaitez. Personnellement, voici ce que j'ai fait. J'ai également modifié la couleur du rectangle via la propriété Color.

Lorsque vous agrandissez votre bouton, le texte ne s'ajuste pas automatiquement (contrairement à un bouton Legacy). Vous pouvez donc ajuster la taille du texte en sélectionnant l'objet Text et en choisissant une taille de police (font size) qui vous convient. Voici mes paramètres, et j'ai également modifié la couleur du texte. 

 

Déclencher une méthode

Passons maintenant à l'essentiel : déclencher une action lorsque le bouton est cliqué.

Première étape : Créez un événement pour votre bouton. Sélectionnez-le, puis dans l'Inspector, en bas, cliquez sur le + comme montré dans l'image ci-dessous.

Deuxième étape : Associez l'objet qui contient le script à votre bouton. Glissez l'objet Joueur dans l'espace prévu. 

Troisième étape : Sélectionnez la méthode à exécuter. Trouvez le nom de la méthode dans la liste déroulante. 

Remarque : Cela ne fonctionne qu'avec des méthodes publiques, vous devrez donc modifier le script Joueur pour rendre la méthode Attaquer publique.

Voici un exemple de code :

using UnityEngine;

public class Joueur : MonoBehaviour
{
    public int vie;
	private int mana = 20;
	[SerializeField] int force;

	private GameObject cible;

    void Start()
    {
		cible = GameObject.Find("Ennemie");
    }

    
    void Update()
    {
        
    }

	public void Attaquer()
	{
		Debug.Log("Le joueur a attaqué !");
	}
	
	void Magie()
	{

	}

	void Esquive()
	{

	}
	
	void Mort()
	{
	}
}

J'ai ajouté une ligne de Debug.Log pour que vous puissiez voir le résultat dans la console. Une fois cela fait, vous pourrez sélectionner votre méthode dans le menu déroulant du bouton.

Tester !

Lancez le mode Play et cliquez sur votre bouton dans le jeu.

 

Félicitations, vous savez maintenant comment déclencher des actions avec des boutons d'interface. Il reste cependant encore du travail. En effet, si vous cliquez plusieurs fois sur le bouton, votre personnage attaquera plusieurs fois... Il sera donc nécessaire de créer un système de tour par tour et d'empêcher le joueur de cliquer de manière répétée.

Pour la suite du cours, je vous demanderai de créer un bouton pour chaque action du personnage (attaque, magie, esquive). Voici un exemple de ce à quoi cela pourrait ressembler.

En conclusion

Nous avons fait une brève introduction à l'interface utilisateur (UI). Et désormais, vous savez comment déclencher les méthodes de vos scripts à partir de boutons d'interface.

Dans la prochaine page, nous commencerons à coder la logique de notre système de combat, à savoir le tour par tour.

À bientôt pour la suite !