Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Créer un inventaire

Alors comme ça, tu veux créer un inventaire dans ton jeu mais tu ne sais pas comment faire?

Ne t’en fais pas! Ce guide est là pour t’apprendre comment te servir de l’outil magique qu’est le ScriptableObject pour compter, ajouter et afficher des objets!

Voici les quelques notions que tu vas découvrir dans ce guide:

    • Découvrir le concept de ScriptableObject pour créer des assets personnalisés
    • Modifier les variables d’un ScriptableObject à partir d’un composant
    • Lire les variables d’un ScriptableObject pour l’afficher dans l’interface utilisateur

Guide vidéo

Un ScriptableObject, c’est quoi?

Tu as eu tout le loisir d’expérimenter avec les composants dans Unity, mais ces derniers se retrouvent assez limités quand il s’agit de stocker des données, comme on le ferait pour un inventaire! Les ScriptableObjects nous permettent de créer des assets qui vont stocker les différents objets de ton inventaire. Tu n’auras plus qu’à les assigner là où tu en as besoin, que ce soit pour ajouter un objet, ou pour l’afficher! 

Pour comprendre la suite de cette page, nous te recommandons fortement d’aller lire le guide sur les Scriptable Objects puisque le système d’inventaire repose énormément sur cette nouvelle notion! 

Créer le modèle d’objet de l’inventaire!

Bien! Maintenant que tu sais ce qu’est un ScriptableObject, il est temps d’en créer un qui te servira de modèle pour tes objets! Chaque objet sera défini par les mêmes variables mais ils auront chacun des valeurs différentes! 

Pour le cas de ton inventaire par exemple, tu veux un ScriptableObject qui puisse stocker ces trois choses:

  • Le nom de l’objet
  • L’icône de l’objet
  • La quantité que le joueur possède

Voici à quoi ressemblerait le script!
Parce que c’est un ScriptableObject, il ne peut pas être attaché en composant des objets! 

using UnityEngine;

[CreateAssetMenu(fileName = »Nouvel item », menuName = »Magic RPG/Item »)]
public class Item : ScriptableObject
{
    public string nom;
    public int quantite;
    public Sprite icone;
}

Tu peux remarquer ceci:

  • MonoBehaviour a été remplacé par ScriptableObject
  • Toutes les variables sont publiques pour qu’on puisse les lire et les modifier depuis d’autres scripts
  • Il y a une ligne CreateAssetMenu au dessus de la classe, qui permet d’indiquer où trouver ce ScriptableObject dans le menu déroulant

Créer les différents items

Partie ScriptableObjects (données)

Maintenant que tu as pu coder le modèle avec la liste de variables qui t’intéresse, tu peux créer tes objets dans les dossier l’onglet Projet! Jette un nouveau coup d’œil au guide sur les ScriptableObjects si tu ne sais pas comment faire!

Dans cet exemple, ça serait: 

Clic droit dans tes assets > Create > Magic RPG > Item

Tu peux créer autant d’objets que tu veux, mais pour ce début de projet nous allons simplement créer un objet Piece! Cet asset servira à compter le nombre de pièces que possède ton joueur!! Tu peux lui assigner le nom de ta monnaie et une belle icône. 

Partie Prefabs (GameObject)

Ce que tu as vu plus haut n’était que pour stocker les données, mais pour représenter tes items en jeu il va te falloir un prefab! 

 

Crée un prefab de Pièce que tu vas pouvoir ajouter un peu partout sur la scène! 

Le prefab de la pièce doit contenir un sprite et un Collider2D en trigger! Le collider permettra de détecter la collision avec le joueur. 

Ramasser un objet

Tu as créé et placé tes objets mais comment faire pour les compter? Tu aimerais bien que lorsque ton joueur touche un item, cela le détruise et s’ajoute au compteur de ton ScriptableObject! Rien de plus simple:

Sur le prefab de ton objet (la pièce dans l’exemple), ajoute un nouveau script en tant que composant. 

public class RamasseItem : MonoBehaviour
{
    // ScriptableObject qui sert de compteur
    public Item item;

    //Quantite à ajouter au compteur. Modifiable dans l’inspecteur
    public int quantite = 1;

    private void OnTriggerEnter2D(Collider2D collision)
    {
        //Pour vérifier que l’objet touche bien le joueur
        if (collision.tag == « Player »)
        {
            // On ajoute la quantite souhaitée à celle qui existe déjà dans le compteur
            item.quantite += quantite;

            // On detruit l’objet
            Destroy(gameObject);
        }
    }
}

Sans oublier d’assigner le bon objet dans l’inspecteur

Et le tag Player sur le joueur

Désormais, lorsque tu lances le jeu et que ton joueur touchent les pièces, deux choses devraient arriver en même temps:

    • Les pièces disparaissent au contact de ton joueur
    • La variable quantite de ton Asset des pièces devrait augmenter de 1 à chaque fois!

Ça y est! Tu sais comment ramasser des objets! Mais cela n’est pas très amusant si on ne voit pas directement dans le jeu le nombre de pièces… Pour cela, il te faudra afficher l’inventaire dans l’UI! 

Afficher le compteur d’objets à l’écran

Généralement dans les jeux, on parle d’inventaire pour désigner les écrans qui affichent tous les objets ramassés par le joueur! Normalement en suivant ce guide, tu as vu comment stocker tes objets à l’aide des ScriptableObjects. La seule chose qui reste à faire est de les afficher dans l’UI. 

Petit rappel sur l’interface utilisateur (aussi appelé UI) et comment afficher une variable à l’écran.

Puisque tu vas vraisemblablement ajouter plusieurs objets à ton inventaire, laisse-nous te présenter une méthode qui te permet d’exploiter pleinement les prefabs pour te simplifier la vie. 

 

Créer un emplacement d’inventaire

Commence par créer le canvas qui servira à contenir tout ton inventaire. Tu peux te référer aux ressources sur l’interface utilisateur.

A l’intérieur du canvas, crée un GameObject vide qui te servira à contenir tous tes emplacements d’inventaire. A l’intérieur de cet objet vide, crée un autre objet vide qui servira quant à lui d’emplacement d’inventaire. 

Un emplacement d’inventaire est composé d’une image représentant l’icône de l’objet, d’un comptant la quantité ramassée, et éventuellement un panel qui sert de fond. 

Tu vas pouvoir faire de cet emplacement d’inventaire un prefab! Cela t’évitera de recréer un emplacement d’inventaire pour chaque objet!  

Remarque: utilise TextMeshPro pour le texte! Unity va te demander d’importer TextMeshPro, alors fais-le! Tu n’as pas besoin d’importer les exemples par contre 😉

 

Coder le lien avec l’item

Malheureusement, même si tu ramasses des objets, tu ne risques pas de voir le compteur changer sur ton écran. Ce n’est qu’un texte fixe. Pour le mettre à jour en temps réel, il va falloir le lier en temps réel avec le ScriptableObject correspondant! 

Dans le prefab de l’emplacement d’inventaire, ajoute un nouveau script EmplacementInventaire. 

using UnityEngine;
using TMPro; // ne surtout pas oublier pour utiliser TMP_Text

public class EmplacementInventaire : MonoBehaviour
{
    // reference a l’asset ScriptableObject qui represente l’item
    public Item item;

    // reference a l’objet texte qui sert de compteur
    public TMP_Text texte;


    // Update is called once per frame
    void Update()
    {
        //On remplace le text par la quantite indiquee dans l’asset du ScriptableObject
        texte.text = item.quantite.ToString();
        //ToString() sert à convertir la valeur numérique en texte!
    }
}

Assigne les variables publiques dans l’inspecteur: 

    • item est une référence au ScriptableObject qui compte ton objet. Par exemple, l’asset Piece que tu as créé plus tôt.
    • texte est une référence à l’objet texte dans l’UI que tu veux mettre à jour avec le compteur. Il est contenu dans ton prefab Emplacement.  

Si tout se passe bien, tu devrais voir le compteur se mettre à jour dès que tu lances le jeu!

Si tu as bien compris le principe, tu peux même mettre à jour l’icône automatiquement en fonction de l’icône contenu dans ton scriptableObject! Cela repose sur le même principe que remplacer le texte sauf que tu veux remplacer une image par une autre!

 

Ajouter d’autres emplacement

Comme l’emplacement que tu as fait est un prefab, il suffit d’en glisser d’autres ou de le dupliquer pour créer de nouveaux emplacements! Modifie l’image avec celle que tu veux et surtout change l’item référencé par un autre! 

A l’aide! Mon compteur ne veut pas se remettre à zéro!

Tu as remarqué que ton compteur ne se remet pas à zéro entre les parties? C’est normal! Si tu as bien lu le guide sur les ScriptableObjects, tu devrais savoir que tes objets existent en dehors de la scène! Ils persistent donc même si tu quittes la scène. 

 

Si tu tiens à ce que tes objets se remettent à zéro à chaque fois que tu appuies sur le bouton play, il va falloir créer un script pour s’occuper de ça!

 

public class ResetItem : MonoBehaviour
{
    public Item item;

    void Start()
    {
        item.quantite = 0;
    }
}



Afficher / Masquer l’inventaire avec un bouton

La dernière chose qui reste à faire est d’activer et de désactiver l’inventaire en cliquant sur un bouton. Imaginons par exemple que tu souhaites afficher l’inventaire en appuyant sur la touche I de ton clavier!

Tu peux te référer au guide sur les inputs pour mieux comprendre comment détecter les entrées de ta manette. 

Attache ce script à un objet vide ou bien directement à ton canvas!

public class AfficherInventaire : MonoBehaviour
{
    public GameObject inventaire; // référence vers l’objet à afficher/masquer

    private void Start()
    {
        inventaire.SetActive(false); // par défaut, on souhaite masquer l’inventaire
    }

    void Update()
    {
        // vérifie bien qu’on appuie sur la touche I
        if (Input.GetKeyDown(KeyCode.I))
        {
            // Le point d’exclamation permet d’obtenir le résultat inverse du booléen
            // true devient false
            // false devient true
            bool inverse = !inventaire.activeSelf;

            // On demande à l’inventaire de prendre l’état inverse de ce qu’il était
            // Si il est actif, il se désactive
            // Si il ne l’était pas, il s’active
            inventaire.SetActive(inverse);
        }
    }
}

Assigne bien dans l’inspecteur l’objet UI que tu souhaites montrer/masquer.