3 LM Jeux Vidéo Imen Hmida
TP 1 : Dessiner l’environnement du jeu avec Tilemap & Tile
Palette
Après avoir installé les Assets du AssetStore.unity.com :
1. Project : Assets/Pixel Aventures/Assets/Terrain : Sélectionner la 1ère image
2. Inspector : Pixel per unit ➔ 16 et Sprite mode ➔ multiple
Apply
3. Sprite editor: Slice: changer le type ➔ Grid by cell size | pixel size ➔ 16 x 16
4. Hierarchy : Créer une Tilemap nommée « Terrain »
3 LM Jeux Vidéo Imen Hmida
5. Window : 2D ➔ Tile Palette
6. Créer nouvelle palette : Enregistrer la sous « Assets/Terrain »
7. Projet : Drag and drop l’image dans la Tile Palette ; enregistrer sous
Assets/Terrain/Tiles
8. Utiliser les unités d’images pour créer la scène/terrain avec l’outil « active brush » ou
la raccourcis du clavier « U »
3 LM Jeux Vidéo Imen Hmida
9. Refaire les étapes 2 et 3 avec l’image sous Background puis drag and drop cette image
dans la Tile Palette
10. Créer une Tilemap dans la même Grid nommée Background
11. Vous pouvez changer les différentes palettes :
12. Lorsque vous dessinez un background, elle va couvrir le terrain !
• Inspector: Sorting Layer ➔ Add Sorting Layer: créer 2 « Layers » dans cet ordre:
• Essayer de dessiner avec active Tilemap : Background !
3 LM Jeux Vidéo Imen Hmida
13. Hierarchy : créer 2D object ➔ Sprites ➔ Square nommé « Player »
• Vous allez avoir un carreau, vous pouvez le déplacer dans la scène en utilisant la
raccourcis « w »
• Déplacer le au-dessus du terrain
14. Project : Assets/Pixel Aventures/Assets/Main caracters/Virtual guy
• Drag and drop l’image idle (32x32) du caractère ➔ Inspector : Sprite
• Changer la taille du pixel de tous les images dans ce dossier : Pixel per unit ➔ 16
15. Sélectionner Player puis Inspector : Add component ➔ Rigidbody2D (toujours on
choisit rigidbody2D dans le cas du 2D jeux vidéo)
➢ Rôle principal de Rigidbody2D :
Permet à un objet 2D d’être affecté par le moteur physique de Unity (gravité, forces,
collisions, etc.).
➢ Ce que Rigidbody2D permet de faire :
• Appliquer la gravité à un objet.
• Détecter les collisions avec d'autres objets physiques (via un Collider2D).
• Déplacer un objet de manière réaliste, par l'application de forces, de vitesses, ou d'impulsions.
• Réagir à des forces externes (comme un coup de vent ou une explosion).
• Gérer les interactions dynamiques entre plusieurs objets (comme des rebonds ou des
glissements).
16. Inspector : Add component ➔ Box Collider 2D (permet de mettre 2 objets en
collision lorsqu’ils se touchent)
• Cliquer sur Edit Collider puis ajuster le carreau autour le caractère pour qu’il
devient plus petit que le caractère.
3 LM Jeux Vidéo Imen Hmida
• Cliquer sur play pour Tester !
17. Ajouter un Tilemap Collider 2D pour le terrain !
• Ajouter Composite collider 2D pour le terrain
• Check « Used by Composite » dans Tilemap Collider 2D
• Cliquer sur play pour Tester !
18. Pour Fixer le terrain, il faut le mettre Statique (voir figure ci-dessous). Puis Testez le
jeu.
3 LM Jeux Vidéo Imen Hmida
TP 2 : Déplacer ton joueur 2D!
19. Hierarchy : Sélectionner Player
Inspector : Add component ➔ new script nommé “PlayerMovement”. Puis double
clique sur le script crée pour ouvrir l’éditeur Visual Studio :
Vous allez avoir 2 fonctions :
1. Void Start () : contient le traitement qu’il va s’exécuter lorsque le jeu
commence
2. Void Update () : contient le traitement qu’il va s’exécuter chaque ‘frame’ par
seconde au cours du jeu (par exemple 60 images/ 1 sec).
20. Essayer d’écrire : Debug.Log(“hello world!”); dans la fonction Start()
• Tester le jeu
• Voir ce qui a donné dans la console
• Déplacer cette ligne de code dans la fonction Update() et tester
❖ Sauter :
21. Vous allez maintenant ajouter un mouvement ‘jump’ pour votre caractère avec la
touche du clavier ‘espace’
3 LM Jeux Vidéo Imen Hmida
• On veut donner un mouvement pour le composant Rigidbody2D de notre
caractère
• Vector3 est une variable qui contient 3 valeurs (x, y, z)
• On peut utiliser Vector2(x, y) c’est suffisant pour un jeu 2D
• Lorsque vous testez le jeu en appuyant sur « espace » et ne lâcher pas le
caractère ne retournera pas sur le terrain, donc on modifie GetKey ➔
GetKeyDown
• Essayer de modifier gravity scale et voir ce que ça va donner.
22. Edit➔ Project Settings ➔ Input Manager (unity input system) : pour voir tous les
boutons qu’on peut l’utiliser dans les Scripts
3 LM Jeux Vidéo Imen Hmida
23. Créer une variable Rigidbody2D nommé « rb »
24. Remplacer GetKeyDown(“space”) par GetButtonDown(“Jump”) et modifier son code
comme suit :
rb.velocity = new Vector2(rb.velocity.x, 14f);
25. Dans la fonction Start() initialiser cette variable avec GetComponent<Rigidbody2D>()
26. Par suite remplacer GetComponent<Rigidbody2D>() par « rb » dans le code
❖ Se déplacer à gauche et à droite :
27. Dans la fonction Update() : Créer une variable de type float nommé « dirX »
float dirx = Input.GetAxis(“Horizontal”);
28. Ajouter cette ligne pour déplacer le caractère horizontalement :
rb.velocity = new vector2(dirX * 7f, rb.velocity.y);
29. Essayer le jeu puis remplacer GetAxis par GetAxisRaw et interpréter ce qui se passe.
3 LM Jeux Vidéo Imen Hmida
30. Pour que la caméra suit le caractère lors de son mouvement :
• Déplacer Main Camera sous Player
• Dans Transformer modifier les valeurs de sa position :
• Pour enlever les rotations lorsque le caractère tombe du terrain il faut :
Sélectionner Player ➔ Regidbody2D ➔ Constraints ➔ Freeze rotation Z
❖ Ajouter des animations
31. Project : Assets/Pixel Aventures/Assets/Main caracters/Virtual guy
Inspector : Faire le slice pour l’image idle(32x32) (Modifier le carré bleu afin qu’il
limite les dimensions de la coupe pour toutes les autres positions de l’animation.)
3 LM Jeux Vidéo Imen Hmida
32.Project : créer une animation nommée ‘Player_idle’ avec le bouton droit de la
souris
Maintenant drag and drop cette animation vers l’objet Player dans hiérarchie.
Vous allez avoir un autre fichier : ce fichier relie l’animation avec l’objet Player.
33. Ouvrir la fenêtre animation dans window (ou ctrl+6):
Sélectionnez l’objet "Player", ouvrez l’image "idle (32x32)", puis sélectionnez toutes
les sous-images (sprites) qu’elle contient (sélectionnez la première + shift +
sélectionnez la dernière).
3 LM Jeux Vidéo Imen Hmida
Tester l’animation en cliquant sur ‘espace’ ou le petit bouton ‘play’ dans la fenêtre
animation.
C trop rapide !
Cliquez sur les trois points à droite de la fenêtre animation et cliquez sur ‘show
sample rate’
Par défaut il est égal à 60, changez-le à 30, Tester, puis à 18 et tester.
Ouvrir dans window : animator, vous allez voir que l’animation du player se faite une
seule fois quand le jeu commence.
34. Vouz devez mettre l’animation en boucle / Loop :
1. Project : sélectionnez le fichier d’animation que vous avez créé.
2. Inspector : sélectionnez Loop Time
3. Testez
35. Créer animation ‘Player_runnig’ : refaire le même travail avec l’image run(32x32) à
partir de l’étape 32
36. Il faut dire à Unity comment faire la transition d’une animation (player) à une autre
(run).
Ouvrir animator dans window : clique droite sur Player_running ➔ make Transition
3 LM Jeux Vidéo Imen Hmida
Lier Player_running avec Player_idle puis créer une transition inversement !
37. Il faut ajouter une condition pour séparer les 2 animations :
• Sélectionner la première transition du player_running vers player_idle
• Créer une variable booléenne :
• Dans Inspector ➔ déséléctionner “Has Exit time” / settings: Transition duration = 0
3 LM Jeux Vidéo Imen Hmida
38. Dans la partie conditions : choisir la variable crée et mettre la « False » c.a.d : quand
la variable booléenne Running est fausse la transition du Player_running vers
Player_idle se déclenche.
➢ L’animation Player_running s’arrête
➢ L’animation Player_running se déclenche
39. Sélectionner la deuxième transition du player_idle vers player_running et régler sa
condition.
40. Pour terminer, ouvrir le script du player et mettre à jour le code comme ci-dessous :
41. Ajouter deux variables pour modifier la vitesse du personnage et la force de saut:
« speed » / « Jforce »
• Initialiser ces deux variables avec les valeurs 7 et 14.
• Remplacer les valeurs dans le code par les deux variables créées.
• Pour modifier les variables dans l’interface de l’éditeur Unity, ajouter cette
propriété avant la déclaration de chaque variable : [SerializeField]
42. On veut voir le changement de la direction du caractère :
Dans votre code (dans la fonction Start()), créez une variable nommée sprite qui contient
le composant SpriteRenderer, responsable de l’affichage graphique de votre personnage
(l’image) :
3 LM Jeux Vidéo Imen Hmida
• Déclarer la variable en haut de ton script : private SpriteRenderer sprite;
• Et ensuite dans Start() : sprite = GetComponent<SpriteRenderer>();
• Ajoutez maintenant cette ligne de code dans la condition où votre personnage change
de direction vers la gauche :
sprite.flipX = true ;
• Pour qu’il puisse revenir à sa direction initiale, ajoutez cette ligne de code dans la
condition où votre personnage avance vers la droite :
sprite.flipX = false ;
