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/

 
 

Introduction

A propos de ce guide

Ce guide a été créé avec la dernière version stable de Unity au moment de la rédaction (2021.3.3f)

Objectifs du projet

A l’aide de cette fiche ressources, tu vas découvrir comment créer un jeu vidéo sur mobile avec Unity! Pour se faire, nous te proposons de créer ton propre jeu du tape-taupe! A travers ce projet, tu apprendras:

  • Comment créer un projet Unity 2D que tu vas pouvoir lancer sur mobile

  • Comment détecter le tapotement sur l’écran tactile

  • Comment utiliser des scripts pour faire apparaître et disparaître des objets

  • Comment compter un score et l’afficher à l’écran

Le principal objectif du projet est de se familiariser avec le geste le plus utilisé dans les applications mobiles: le tapotement. 

Exemples

Voici quelques exemples de tape-taupe dont tu peux t’inspirer! 

Le tape-taupe est le jeu idéal pour apprendre, mais rien ne t’empêche de taper autre chose que des taupes! 

Démarrage du projet

Installation du logiciel

La première chose qu’il faut avoir pour développer un jeu vidéo sur Unity… c’est Unity! Tu devrais normalement l’avoir déjà installé lors des modules précédents, mais si ce n’est pas le cas et que ta machine n’a pas installé Unity, tu peux te référer à ce guide d’Installation de Unity

Installation du module sur Unity Hub

Tu as Unity installé correctement sur ta machine et tu te sens prêt pour créer un nouveau projet qui fonctionnera directement sur ton mobile? Ce n’est pas si simple! Il y a encore quelques configurations spécifiques à mettre en place si tu comptes développer un jeu sur mobile! Heureusement le guide d’Installation sur mobile est là pour te couvrir! Tu vas notamment devoir ajouter un nouveau module iOS ou Android dans ton installation Unity avant de lancer ton projet. 

Création du projet

Après avoir installé un nouveau module iOS ou Android en suivant le guide d’Installation sur mobile, il est enfin temps de créer un nouveau projet! 

Tu peux te référer au guide de Création d’un projet 2D. Attention cependant: À partir de maintenant, nous te conseillons de toujours créer un projet avec le template URP! Tu ne sais pas ce que c’est? Tu peux en apprendre plus dans la fiche ressources sur le Universal Render Pipeline (URP)

C’est au moment de choisir ton template que tu peux décider si ton projet intègre l’URP. C’est grâce à l’URP que tu vas pouvoir notamment ajouter des effets à ton image ou des lumières 2D. 

Configurer le téléphone sur Unity

Ton Unity est installé! Ton projet est créé! Ça y est, tu peux commencer à travailler sur ton jeu! Cependant, nous avons une dernière astuce à te présenter: comment faire pour lancer ton jeu directement sur ton téléphone en appuyant sur le bouton Play ▶ 

Les étapes sont expliquées sur la page Installation sur mobile (Tester le jeu sur mobile depuis l’éditeur). N’hésite pas à tester sur ton mobile pour vérifier que ça marche!

Importation des assets

La dernière chose qui te reste à faire pour te préparer, c’est d’importer les assets!

  • Si les assets sont composés de sprites, voici un rappel concernant l’importation des sprites.

  • Si les assets se présentent sous la forme d’un unitypackage, il suffit de le glisser-déposer dans le projet. 

Détection du Tap / Clic

Ça y est! Te voilà enfin prêt à développer ton premier jeu mobile! Tu vas d’ailleurs tout de suite entrer dans le vif du sujet en apprenant comment faire pour détecter le tapotement. 

Le tapotement est le geste le plus fondamental des jeux mobiles. Il permet le plus souvent de sélectionner un objet. Unity ne fait pas de différence entre la souris et le doigt, ce qui nous permet d’utiliser la fonction OnMouseDown() pour détecter le tapotement! 

Etape 1: Importer le sprite de la taupe sur la scène

Prends le sprite de la taupe que tu as importé et glisse-le sur la scène.

Le sprite apparaît à la fois sur la scène et sur la hiérarchie. Tu peux utiliser les outils pour le déplacer et l’agrandir comme bon te semble. 

Etape 2: Ajouter un collider

Afin de pouvoir cliquer sur ton objet, celui-ci doit posséder un collider! Sinon ton clic risque de passer au travers. Comme nous sommes en 2D, il faut ajouter un Collider 2D, par exemple un Box Collider 2D.

Add component > Physics 2D > Box Collider 2D

Etape 3 : Ajouter un script

Nous allons ajouter un script pour tester le tapotement! Pour cela, tu vas créer un nouveau script sur le sprite de la taupe (besoin d’un rappel sur les scripts?)

Add Component > New Script > Nom de ton script

Lorsque tu ouvres le script, tu retrouves les fonctions classiques Start et Update. Tu utiliseras aucune des deux pour détecter le tapotement! En effet, il existe une autre fonction qui se lance uniquement lorsqu’on pose le doigt ou lorsqu’on clique à la souris: OnMouseDown

Voici un guide sur les inputs de mobile

Efface Start et Update et remplace par OnMouseDown. Tu peux utiliser le Debug.Log() pour afficher un message. (Tu peux te référer à la fiche sur le debug pour comprendre l’utilisation du debug.log)

private void OnMouseDown() {
  Debug.Log(« Tap »);
}

Lance ton jeu en cliquant sur le bouton play et tapote sur l’écran de ton téléphone! A chaque fois que tu touches à l’écran, tu devrais voir le message du debug.log() apparaître sur la console! 

Faire disparaître la taupe

Tu comprends désormais le principe derrière le tapotement! Taper sur l’écran fait apparaître un message dans la console, mais comment faire pour faire disparaître la taupe?

Ajoute un nouveau script à la taupe! Tu peux l’appeler Taupe. Le but du script sera de changer de sprite en fonction de l’état de la taupe. 

Assigner les sprites dans l’inspecteur

Crée deux variables publiques pour stocker tes sprites! 

  • spriteOn pour la taupe dévoilée 

  • spriteOff pour la taupe cachée

    public Sprite spriteOn;
    public Sprite spriteOff;

Les variables apparaissent désormais sur l’inspecteur. Tu peux assigner les sprites correspondants depuis tes assets

Faire changer le sprite grâce à un booléen

L’idée est de faire changer l’attribut Sprite du SpriteRenderer. Mais plutôt que de le faire à la main, tu vas utiliser le script Taupe pour s’en occuper pour toi au moment du tap!! 

Dans le script Taupe, ajoute une variable privée SpriteRenderer. Elle te servira à désigner et manipuler le composant pour changer le sprite!! 

private SpriteRenderer spriteRenderer;

Il faut donc demander à Unity d’aller chercher le SpriteRenderer attaché à l’objet pour l’assigner à la variable nouvellement créée. On peut faire ça grâce à la fonction GetComponent!

private void Start()
{
spriteRenderer = GetComponent();
}

 Ajoute une nouvelle variable publique booléenne. 

public bool present;

La variable apparaît maintenant sur l’inspecteur. Tu vas pouvoir cocher et décocher pour voir comment cela affecte ta taupe. Mais avant cela, il reste un dernier bout de code à ajouter:

private void Update()
{
    if (present)
    {
          spriteRenderer.sprite = spriteOn;
    } else
    {
        spriteRenderer.sprite = spriteOff;
    }
}

Lance le jeu et regarde ce qui se passe quand tu coches et décoches la variable Présent. 

Faire changer le booléen au moment du tap

Tout ce qu’il suffit de faire maintenant est de faire disparaître la taupe au moment du tap. Autrement dit, désactiver le booléen present dans la fonction OnMouseDown. 

private void OnMouseDown()
{
    present = false;
}

Tu peux lancer ton jeu et le tester directement sur ton téléphone!

Faire apparaître la Taupe

C’est bien beau de savoir faire disparaître une taupe en tapant dessus, mais le jeu n’est pas très intéressant si la taupe ne réapparaît plus!

Fonction pour faire apparaître la taupe

Pour cela, il faut faire un dernier ajout au script Taupe. 

public void Apparaitre()
{
    present = true;
}

Cette fonction n’a qu’un seul objectif: réactiver le booléen qui fait apparaître la taupe. 

As-tu remarqué que contrairement aux fonctions que tu as pu voir jusqu’ici, celle-ci commence par le mot public? Ce n’est pas un hasard, c’est justement fait pour qu’un autre script puisse faire appel à cette fonction! 

Besoin d’un rappel sur les fonctions? Cette fiche explique la différence entre les fonctions publiques et privées. 

Celui qui commande: Le gestionnaire de taupe

Tu remarqueras qu’ajouter la fonction Apparaître ne suffit pas à faire apparaître la taupe. En effet, cette fonction ne sert à rien si elle n’est jamais appelée! Mais plutôt que de compter sur la taupe pour décider si elle doit apparaître ou pas, ce sera un autre objet qui va s’occuper de décider quelle taupe doit réapparaître.  Cet objet, nous l’appellerons le Gestionnaire de Taupes!

  1. Créer un objet vide avec un script appelé GestionnaireDeTaupes

Clic droit sur la hiérarchie > Create Empty

Puis dans l’inspecteur, Add Component > New script > GestionnaireDeTaupes

  1. Faire en sorte que ce script puisse exécuter du code après un certain délai 

Tu peux te référer au guide sur le chronomètre dans Unity.

  1. Faire apparaître la taupe

Il ne reste plus qu’à faire apparaître la taupe! Tout d’abord, on va demander au script de créer une variable publique qui va nous permettre de lier notre objet Taupe!

public Taupe taupe;

Glisse et dépose la taupe de ta scène dans le nouveau champ créé sur le composant de ton script GestionnaireDeTaupes! Vérifie bien que ta taupe possède le script Taupe sinon ça ne va pas marcher!

Il reste une ligne de code à écrire! Rappelle-toi que le script Taupe a une fonction publique Apparaitre qu’on peut appeler depuis un autre script! C’est justement ce qu’on va faire!

Écrit cette ligne de code au bon endroit, de manière à ce qu’il s’exécute par intervalles comme indiqué dans le guide sur le chronomètre 

taupe.Apparaitre();

Lorsque tu lances ton jeu, tu devrais voir ta taupe apparaître après un certain délai une fois que tu l’as tapé dessus! 

Une Taupe, deux taupes, trois taupes...

Une taupe c’est bien, mais plusieurs c’est mieux! 

Un jeu de tape-taupe avec une seule taupe serait vite lassant! Heureusement, ajouter plusieurs taupes n’est pas très compliqué à faire sur Unity car tu vas pouvoir te servir d’un outil très pratique: les prefabs. 

Multiplier les taupes grâce au prefab

Le prefab est le mot utilisé pour décrire un modèle d’objet qu’on va pouvoir instancier autant que nous le souhaitons! Sur Unity, tout objet présent dans la hiérarchie peut être glissé dans les assets, faisant de cet objet un prefab qu’on va pouvoir glisser à plusieurs endroits dans la scène. 

Besoin d’un rappel sur les prefabs? C’est ici

Tu vas utiliser le même principe pour multiplier tes taupes. Prends la taupe présente dans ta scène et glisse la dans tes assets. 

Cela a comme conséquence de créer un prefab Taupe dans tes assets. 

Même si tu supprimes la taupe dans ta scène, le prefab, quant à lui, sera toujours présent dans tes assets. Pour ajouter une taupe, il te suffit de faire l’inverse, c’est-à-dire glisser le prefab depuis tes assets vers ta scène. 

De cette manière, tu peux ajouter plusieurs taupes en glissant-déposer le prefab à des endroits différents de l’écran. 

Pourquoi est-ce qu’on préfère utiliser des prefabs plutôt que de copier-coller une taupe? 

Tu t’es peut-être posé la question en le faisant, mais cela aurait été sans doute plus simple de dupliquer (avec le raccourci CTRL+D) la taupe présente dans la scène pour obtenir plusieurs taupes. Pour être honnête, ça aurait très bien marché! Tu aurais obtenu le même résultat qu’avec un prefab! Alors pourquoi s’embêter?

L’avantage du prefab c’est que toutes les taupes qui ont été créées à partir d’un prefab sont juste des instances différentes du même modèle de taupe. Cela veut dire que si on veut modifier quelque chose qui va affecter toutes les taupes (comme lui mettre un nouveau sprite par exemple), il suffira simplement de modifier le prefab directement! Si le prefab est modifié, toutes ses instances appliqueront la même correction! C’est super pratique! 

A l’inverse, si tu n’avais fait qu’une duplication de la taupe sans passer par un prefab, tu serais obligé d’appliquer manuellement la modification sur toutes les taupes car elles sont toutes considérées comme des objets différents. 

Adapter le gestionnaire de taupes pour appeler une taupe aléatoire

Tiens, étrange. J’ai plusieurs taupes sur mon écran mais seulement une seule d’entre elles réapparaît une fois que je l’ai tapée. 

Ce n’est pas un bug! Il est vrai que tu as pu ajouter plus de taupes à l’écran, mais te souviens-tu de l’objet qui se charge de faire apparaître ces taupes? Et oui, le gestionnaire de taupes! C’est lui qui décide de quand une taupe doit réapparaître! 

Rappelle-toi, le script que tu as écrit pour le gestionnaire de taupes ne prend qu’une seule variable. C’est donc normal qu’une seule taupe apparaisse puisque c’est la seule qui est référencée par notre script. 

Comment faire pour référencer les autres taupes? Avec un tableau! 

Ouvre donc le script du gestionnaire de taupes et ajoute une variable taupes (au pluriel parce qu’on s’attend à y stocker plusieurs taupes!) qui va servir à remplacer la variable taupe que tu utilisais jusque là. 

public Taupe taupe; //ancienne variable qui référence une seule taupe
public Taupe[] taupes; // nouvelle variable qui référence plusieurs taupes

Remarque la différence entre les deux! La première est une variable simple, alors que l’autre est ce qu’on appelle un tableau! Si tu as besoin d’un rappel sur les tableaux, n’hésite pas à lire la page ressources Les Variables dans Unity

Dans l’inspecteur, ils apparaissent différemment: 

(Tu peux retirer la variable Taupe, car tu en auras plus besoin!)

La liste de taupes n’affiche rien car elle a zéro élément. Tu peux lui indiquer le nombre de taupes que tu comptes lui donner puis assigner chaque taupe en faisant un glisser déposer.

Maintenant que tu as placé ta liste de taupes à activer, tu peux adapter le code pour appeler une taupe au hasard. 

int nombre_aleatoire = Random.Range(0, taupes.Length);
Taupe taupe = taupes[nombre_aleatoire];
taupe.Apparaitre();

Compter les points

Taper sur les taupes ne prend tout son sens qu’à partir du moment où on compte les points! C’est tout ce qu’il te reste pour avoir un jeu d’arcade digne de ce nom! 

Pour cela, il va te falloir faire trois choses: 

  • Créer un script pour compter les points

  • Afficher le compteur à l’écran

  • Modifier le score depuis un autre script

Créer le gestionnaire de score pour compter les points

Le script pour compter les points commence très simplement. Au fur et à mesure que le système de points va se complexifier, le script suivra.

    1. Dans ta hiérarchie, crée un objet vide (clic droit > Create Empty) qui te servira de gestionnaire de score

    2. Ajoute à cet objet un nouveau script (que tu peux appeler GestionnaireDeScore ou ScoreManager)

    3. Ajoute à ce script une variable publique statique Score (de type int puisque ton score se comptera en nombre entiers)

      1.  

public class GestionnaireDeScore : MonoBehaviour
{
    public static int Score;
}

 

static? Ce mot-clé ne t’est sans doute pas familier! 

Une variable statique est une variable qui vit en dehors des instances. C’est à dire qu’elle est unique à toute la classe et que tous les objets qui en résultent partagent cette même variable. Tu en sauras plus en lisant Les Variables dans Unity (Variable Statique)

La raison pour laquelle tu peux utiliser une variable statique ici est parce qu’il n’y a qu’un seul score. Tu n’as pas besoin d’instancier plusieurs gestionnaires de score vu qu’un seul suffit. Tu verras plus tard à quel point c’est pratique!

_____

Tu devrais voir la variable score apparaître dans l’inspecteur. C’est ici que sera affiché ton score en attendant que tu apprennes à l’afficher directement dans le jeu.

 

Afficher le score sur l’écran

Le score est peut-être présent sur un script, mais le joueur n’a aucun moyen de le voir! Pour cela il faut l’afficher à l’écran. 

Tu devrais déjà savoir comment ajouter une interface utilisateur (UI) sur Unity. Tu peux suivre le guide Ajouter du Texte ou des Variables pour afficher le score. 

Créer un UI Text

Clic droit sur la hierarchie > UI > Text – TextMeshPro

 

Si c’est la première fois que tu utilises TextMeshPro sur ton projet, Unity va te proposer d’importer TMP Essentials pour l’utiliser. Clique donc sur le bouton Import TMP Essentials. 

Après ça, positionne le texte à l’endroit où tu souhaites afficher le score

Lier le texte à la variable score

Crée sur ton objet texte un script AffichageScore qui remplace le contenu du texte par la valeur de GestionnaireDeScore.Score

Au début du script, pense bien à inclure ces deux lignes. 

using UnityEngine;
using TMPro; /* Nécessaire pour utiliser TMP_Text */

La classe utilise une variable de type TMP_Text. TMP_Text représente le composant TextMeshPro qui contient notre texte. C’est ce composant qu’il faut récupérer pour modifier le contenu du texte!

public class AffichageScore : MonoBehaviour
{
    private TMP_Text textMeshPro; /* représente le composant TextMeshPro attaché à ton objet */


    private void Start()
    {
        textMeshPro = GetComponent();  /* retrouve le composant pour l’assigner à la variable */
    }

    private void Update()
    {
        int score = GestionnaireDeScore.Score; /* récupère le score */
        textMeshPro.text = score.ToString(); /* transforme le nombre en texte */
    }
}

Le texte va maintenant refléter le score enregistré par GestionnaireDeScore! 

C’est bien beau tout cela mais le score reste toujours à zéro! C’est un peu vexant! Et bien, c’est normal, il faut faire la modification au moment où une taupe est tapée! Et c’est exactement ce que tu vas voir dans la suite!

Modifier le score depuis le script Taupe

Avant de continuer, il faut se poser la question: Quel événement déclenche le changement de score?

Pour l’instant, ne t’occupe pas des situations où le joueur perd des points. Définis juste quand le joueur en gagne:

  • Le joueur gagne un point s’il appuie sur une taupe sortie de son trou!

Maintenant que tu as établis ça, il faut retrouver l’endroit dans ton code où cet événement intervient. Dans quel script, quelle fonction, mettrais-tu le code pour qu’il s’exécute au moment précis où le joueur appuie sur une taupe?

Réponse?
Dans le script Taupe!
Dans la fonction OnMouseDown!

C’est ici que tu vas essayer d’appeler le gestionnaire de score pour le modifier ! 

GestionnaireDeScore.Score += 1;

 

Défis !

Défi: Perdre des points

Maintenant que tu as tous les éléments pour ton tape-taupe, il ne te manque plus qu’une seule chose: Perdre des points! 

Tu pourrais pénaliser ton joueur si jamais il touche une taupe qui n’est pas encore sortie! Comment t’y prendrais-tu? 

Indice: Il va falloir jeter un oeil au script Taupe et te servir de la variable present

Défi: Faire disparaître une taupe

Fais en sorte que lorsque la taupe n’est pas tapée au bout d’un certain temps, elle se recache en faisant perdre un point au joueur! Tu peux te référer au guide sur le chronomètre dans Unity.