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

Le Casse-Brique

A travers ce projet tu vas apprendre à maitriser le « Drag and Drop » en français « le Glisser-Déposer ».

 

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 second jeu vidéo sur mobile avec Unity! Pour se faire, nous te proposons de créer ton propre jeu du casse-Brique! A travers ce projet, tu apprendras:

  • Consolider les acquis vu avec le Tape-Taupe pour l’utilisation sur mobile

  • Comment détecter le drag-drop sur l’écran tactile

  • Comment utiliser la physique pour le rebond de la balle

  • Créer des scripts pour faire disparaître des objets

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

Le principal objectif du projet est de se familiariser avec une fonctionnalité très présente sur mobile ou ordinateur à savoir le Glisser-déposer, plus communément nommé en anglais “Drag & Drop”. 

Exemples

Voici quelques exemples de Casse-Brique dont tu peux t’inspirer! 

 

Le Casse Brique est un jeu simple mais qui peut être complexifié par la suite, et au fil des niveau pour ajouter de la difficulté au game-play

 

Démarrage du projet

Installation du module sur Unity Hub

Puisque ce projet survient après celui du tape taupe, ton téléphone et Unity sont déjà configurés pour développer des jeux Unity Mobile. Si besoin, la doc est toujours là pour t’aider en cas de besoin : Installation sur mobile.

Création du projet

Une fois que tu as vérifié que tout est bien configuré, il est temps de créer un nouveau projet! N’oublies pas qu’il faut choisir le template 2D (URP) si on veut pouvoir ajouter du post-processing plus tard! 

Importation des assets

 

Pour ce projet il n’y a pas d’assets à télécharger, tu vas directement créer les éléments de jeu via Unity, tu pourras leur donner une couleur par la même occasion.

Détection du Drag & Drop

On va directement débuter par la fonctionnalité qui nous intéresse principalement, le fameux Glisser-Déposer. Pour se faire on va créer en premier lieu, la Raquette qui va suivre les mouvements du doigt sur l’écran. 

Etape 1: Créer la Raquette

On va créer un nouvel Sprite 2D de type Carré, on va lui donner un Nom, une Couleur, une Taille, un Box Collider 2D et un RigidBody2D qu’on va configurer ainsi :

 

 

On retire la gravité pour que la Raquette ne tombe pas et on Freeze sa Position, et sa Rotation pour éviter que la Raquette ne monte et descende et tourne dans les sens. 

 

Etape 2: Glisser-Déposer

On va créer un nouveau script DragAndDrop qu’on va donner à notre raquette.

 

Note : Attention le Script suivant ne fonctionne que grâce à l’utilisation de Unity Remove 5 du téléphone.  Car Input.GetTouch qui ne marche que sur téléphone. On ne peut donc pas utiliser la souris pour ce script.

 

Dans ce nouveau script, on crée une nouvelle fonction, qu’on va coder pour récupérer les coordonnées du doigt sur le téléphone lorsqu’il est en contact avec la raquette grâce à Input.GetTouch qu’on stocké dans une variable de type Touch nommé touch.

 

On va faire en sorte de modifier la position de la raquette par rapport à point dans l’espace que la caméra visualise.

 

Ensuite puisqu’il s’agit d’un Vector 3, comme on est en 2D, tous les éléments du jeu se trouvent à 0 sur l’axe Z. On remet donc la position.z de notre objet à 0, ce qui évite aussi à notre objet de se retrouver à la position de la caméra. 

 

Puis on donne une position.y pour que la raquette ne puisse bouger vers le haut ou vers le bas.

public class DragAndDrop : MonoBehaviour

{

 

    private void OnMouseDrag()

    {

        Touch touch = Input.GetTouch(0);

        Vector3 touchPosition = Camera.main.ScreenToWorldPoint(touch.position);

        touchPosition.z = 0;

        touchPosition.y = –7;

        transform.position = touchPosition;

    }

   

}

 

Il ne reste plus qu’à tester sur le téléphone que la raquette bouge bien à la guise du joueur.

 

Level Design

Etape 1: Création des Briques

On va créer nos Briques en lignes, pour se faire on va procéder dans l’ordre qui suit. Afin de structurer correctement les briques et permettre les modifications futures possible facilement :

  1. Création dans la hiérarchie d’un Objet Vide “Create Empty”  renommé Briques (qui contiendra toutes les Briques), en position 0 0 0.

  2. Dans ce dossier Briques, un autre Objet Vide “Create Empty”  nommé Ligne, en position 0 0 0.

  3. Dans ce Dossier Ligne une Brique, en position 0 0 0. Cette Brique, un Carré Sprite 2D, à qui tu pourras donner le nom original de Brique, une Couleur, une Taille et un Box Collider 2D.

 

 

Puis tu pourras faire un Prefab de cette Brique en créant au préalable, un Dossier Prefabs dans les Assets. 

Réviser ce qu’est une Prefab

 

 

Tu vas pouvoir dupliquer cette Brique dans la Hiéarchie. Penses bien à les renommer, en les sélectionnant toutes et en changeant leur nom dans l’Inspector. 

 

Tu pourras ensuite les positionner afin de créer une ligne.

 

Tu as à présent une ligne parfaite ! Dupliques dans la Hiérarchie, le Dossier Lignes avec les Briques. Et positionnes les lignes les unes au-dessus des autres.

 

Etape 2: Création des Murs

On va créer un objet vide, donnons- lui un Box Collider 2D et placez-le à gauche, sur toute la longueur.

 

 

Dupliques cet élément et positionne le à droite. Duplique le encore, fait le tourner et place le en haut, répète une dernière fois la manœuvre pour en bas. 

 

La balle pourra rebondir sur les murs. Place les dans Objet vide, nommé Murs.

La Balle

Etape 1 : Création de la Balle 

On va créer un nouvel Sprite 2D de type Circle, on va lui donner un Nom, une Couleur, une Taille, un Box Collider 2D et un RigidBody2D.

Puis on va créer un effet de rebond à la Balle, avec un Physics Material 2D, comme lors du Module Bac à Sable de Découverte d’Unity 2d.

Physique Material 2D

Pour se faire créer un nouveau dossier dans les Assets nommé Physics. 

Dedans Clic droit > Create > 2D >  Physics Material 2D.

Renommer ton Physics Material, retirer sa Friction, pour éviter que l’objet ne s’accroche à d’autres. Et mets le Rebond à 1 qui est égale à 100%.

Tu peux à présent glisser le Physics Material 2D, dans la section Material  du RigidBody2D de la Balle. ainsi que configurer ainsi : 

On met Angular Drag à 0, pour éviter qu’il est un effet d’arrondi lorsque la balle retombe et on Freeze la Rotation de la Balle. 

Etape 2 : Script de la Balle 

On va créer un nouveau Script dans le dossier Script nommé Ball :

On a besoin de récupérer la référence du composant Rigid Body de la Balle, car c’est avec le RigidBody, qu’on pourra agir sur le déplacement de la Balle : 

  • On définit une variable pour stocker le RigidBody.

  • On va ensuite créer une fonction Awake(){} qui se lancera avant même le Start(){}, donc juste avant que le jeu démarre.

  • Et dans la fonction Awake(){}, on va dire que la Variable qu’on a créé plus tôt est égale au composant RigidBody. Grâce à la fonction GetComponent() qui permet d’accéder au composant qu’on souhaite. 

public class Ball : MonoBehaviour

{

    public Rigidbody2D rigidbody; // pouvant accessible depuis un autre objet

    private void Awake()

    {

        rigidbody = GetComponent<Rigidbody2D>(); //Récupère le rigidbody de l’objet

    }

    private void Start()

    {

    }

}

Pour ne pas oublier par la suite, on va sauvegarder le Script, retourner dans Unity, Donner ce Script Ball à la Balle et assigner la Balle dans le public de la Variable rigidbody.

Maintenant on va retourner dans le Script Ball, pour donner de la Force et une direction Aléatoire à la Balle.

  • On va utiliser Vector2 nommé force qui sera égale à 0 au début du jeu. La balle tombera simplement donc au début de la partie.

  • On veut ensuite que la direction de la balle dans l’abscisse X (soit gauche / droite) soit Aléatoire. L’aléa toire sera compris entre -1 et +1, ainsi la Balle penchera soit un peu à droite ou un peu à gauche, ou 0, pile au milieu.

  • et on veut que la balle descende toujours dans l’abscisse Y, donc on met une valeur négative.

  • On ajoute cette force au RigidBody de la Balle.

public class Ball : MonoBehaviour

{

    public Rigidbody2D rigidbody; // pouvant accessible depuis un autre objet

    private void Awake()

    {

        rigidbody = GetComponent<Rigidbody2D>(); //Récupère le rigidbody de l’objet

    }

    private void Start()

    {

       

        Vector2 force = Vector2.zero; // au démarrage force égale à zéro

        force.x = Random.Range(-1f, 1f); // que la balle aille à gauche ou à droite aléatoirement

        force.y = –1f; // on veut toujours qu’elle descende

        this.rigidbody.AddForce(force); //ajouter la force à la balle

    }

}

La dernière chose qu’on va faire c’est ajouter de la Vitesse à la Balle.

  • Pour se faire on va créé une Variable Vitesse

  • Et multiplier la Vitesses à la Force de la Balle

  • Pour ne pas affecter la Force à cause de sa nouvelle Vitesse, on va lui dire de ne pas tenir compte avec “normalized”

public class Ball : MonoBehaviour

{

    public Rigidbody2D rigidbody; // pouvant accessible depuis un autre objet

    public float vitesse = 500f; // V1.1 Ajouter une vitesse

    private void Awake()

    {

        rigidbody = GetComponent<Rigidbody2D>(); //Récupère le rigidbody de l’objet

    }

    private void Start()

    {

       

        Vector2 force = Vector2.zero; // au démarrage force égale à zéro

        force.x = Random.Range(-1f, 1f); // que la balle aille à gauche ou à droite aléatoirement

        force.y = –1f; // on veut toujours qu’elle descende

        this.rigidbody.AddForce(force.normalized * this.vitesse); // V1.2 que la force de bouge pas « normalized »

    }

}

 

Destruction des Briques

A présent que notre balle rebondit bien, que la raquette suit ton doigt sur le téléphone, on va pouvoir passer à la  destruction des briques. On pourrait le faire de différentes manières. 

  • Soit ça pourrait être un Script sur la balle qui détruit l’objet avec le Tag Brique lorsqu’elle le touche, ce qui marcherait très bien. 

  • Soit un Script sur les Briques qui détruit l’objet Brique qui porte le Script si il est touché par la Balle. 

On va utiliser le deuxième cas, pourquoi ? Car si on veut ajouter des points de vie aux Briques par la suite, ça sera beaucoup plus simple ainsi, de modifier le Script qu’on va créer de suite.

 

On peut créer le même Script créé lors du Module Shoot them up à savoir DestroyTargetOnCollision, on va prendre le temps de le redécouvrir, le voici : 

 

public class DestroyTargetOnCollision : MonoBehaviour

{

    public string target;

 

    private void OnCollisionEnter2D(Collision2D collision)

    {

        if (collision.gameObject.tag==target)

        {

            Destroy(this.gameObject);

        }

    }

}

 

La variable target est publique et pourra être renseigné dans Unity directement. Ainsi le Script pourra servir pour différent élément du jeu en modifiant simplement la cible dans l’inspector d’Unity.

 

On créer une fonction OnCollisionEnter2D qui permettra de détecter la collision entre les Objets. 

Puis, pour détruire l’objet, on utilise la méthode Destroy() en mettant l’objet à détruire entre parenthèses.

 

N’oubliez pas après avoir donner ce Script à la Préfab de la Brique de renseigner l’objet Target

Et également de rajouter ce fameux tag à la Balle.

Relancer le jeu si la Balle ratte la raquette

Avec ce script DestroyTargetOnCollision en notre possession on peut facilement relancer le jeu, ajoute à la ligne 4, la possibilité pour Unity de Relancer le Jeu :

using UnityEngine.SceneManagement;

 

Puis en dessous de la condition qui détruit les Brique rajoute une nouvelle condition qui relance le jeu, si on touche un élément avec le tag Finish.

 

Le code qui suit indique de relancer la scène en cours.

if(collision.gameObject.name == « Finish »

        {

            Scene scene = SceneManager.GetActiveScene(); SceneManager.LoadScene(scene.name);

 

        }

De retour dans Unity donne ce script à la Balle. 

 

Et ajoute au Mur qui sert de Sol, le tag Finish.

 

Compter les points

Casser des briques ne nous rapporte pour l’instant  aucun point ! On va procéder exactement comme pour le jeu Tape Taupe, car cette méthode est valable dans beaucoup de cas, que ce soit pour comptabiliser des points, des pièces, des points de vies, ect… ! 

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)

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<TMP_Text>();  /* 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 DestroyTargetCollision

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 si la balle détruit une Brique !

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 balle détruit une Brique ?

Réponse?
Dans le script DestroyTargetCollision!
Dans la fonction OnCollisionEnter2D!

C’est ici que tu vas essayer d’appeler le gestionnaire de score pour le modifier, juste en dessous du Destroy déjà présent : 

Destroy(this.gameObject);

GestionnaireDeScore.Score += 1;