{"componentChunkName":"component---src-templates-blog-post-js","path":"/fr/blog/unity-step-by-step-ball-game/","result":{"data":{"site":{"siteMetadata":{"title":"A Game Studio","author":"Lythom"}},"markdownRemark":{"id":"2b493a03-023b-5059-9d36-801a0185c33a","html":"

Aperçu:
\n→ Installer Unity
\n→ Afficher un sprite
\n→ Animer un sprite
\n→ Les règles du jeu
\n→ Le moteur physique
\n→ Trucs et astuces

\n

[Note: Article en cours d’écriture, il n’est pas encore finalisé. Merci de votre compréhension]

\n

Cet article a vocation de tutorial et de support de cours pour apprendre les bases de Unity en 2D.\nAucun pré-requis n’est nécessaire, mais il se peut que vous deviez explorer certaines fonctionnalités de Unity par vous même pour réussir certaines étapes.

\n

Il s’agira de développer avec Unity un jeu de ballon, prétexte pour apprendre des notions clés tel que :

\n\n

Installer Unity

\n
    \n
  1. Télécharger et installer Unity Hub
    2. \n
  2. Depuis le hub, installer la dernière version stable de Unity (Installs > Add > Latest Official Release)
    3. \n
  3. Dans les modules,
    4. \n
  4. installer Visual Studio Community 2019 si vous souhaitez l’utiliser comme environnement de développement (IDE). Nous utiliserons plutôt Visual Studio Code (VSCode) pour la suite de ce tutorial.
    5. \n
  5. installer les platformes pour lesquelles vous souhaiter compiler votre projet, au moins une, par exemple “Windows build support” si vous êtes sous windows.
    6. \n
  6. Télécharger et installer Visual Studio Code
    7. \n
  7. Dans VSCode, installer les extensions “C#” et “Debugger for Unity”
    8. \n
  8. Créer un nouveau projet depuis Unity HUB (Projects > New > 2D), choisir un nom et un dossier de destination
    9. \n
  9. Dans Unity, configurer votre éditeur de script externe pour être VSCode en installant le paquet “Visual Code Extension depuis le package manager”.\n\n \n \n \n \n

    \n

    Les onglets manipulés fréquement sont :

    \n
      \n
    • La hiérarchie : va de paire avec la scène. Dans Unity on manipule des objets GameObject qu’on peut hierarchiser dans la scène. un objet peut avoir des enfants et être situé dans un parent. Lorsqu’un parent est déplacé, redimensionné ou tourné, alors les objets enfants subissent la transformation relative à leur parent.
      • \n
    • La scène : Les objets ayant des composants visuels sont affichés sur la scène. Ils peuvent être manipulés (déplacements, etc.) via les outils de la barre d’outils. Les objets n’ayant pas de composants visuels sont également manipulés mais ne peuvent être sélectionnés que via l’onglet hiérarchie.\nIl est fréquent d’avoir des scènes différentes pour différentes étapes du jeu et de basculer d’une scène à l’autre via des scripts.
      • \n
    • Le jeu : Lorsqu’on clique sur le triangle “lecture” en haut de la scène, Unity démarre le jeu et bascule directement sur l’onglet “jet” qui affiche le rendu final du jeu. Ce rendu est celui de la (ou des) caméra(s) configurée(s) dans la scène.
      • \n
    • L’inspecteur : c’est là qu’on peut modifier les propriétés de l’objet sélectionné (qui peut être sur la scène/hierarchie ou dans la vue projet) et de ces composants. C’est également là qu’on peut ajouter à l’objet des nouveaux composants. Un composant est un script qui hérite de MonoBehaviour et qui enrichit l’objet de nouveaux comportements. Certains sont fournis par défaut avec Unity (par exemple SpriteRenderer pour afficher une image) et il est souvent nécessaire de créer des composants personnalités (via le bouton “Add Component > New Script” de l’inspecteur).
      • \n
    • Le projet : Rattaché au système de fichiers du système d’exploitation, c’est à dire au dossier du projet, c’est là qu’on ajoutera toutes les assets (images, sons, scripts, etc.) qui serviront au fonctionnement du projet.
      • \n
    • La console : C’est là qu’apparaitront les erreurs de compilations et les Exceptions non capturées lors de l’exécution (runtime). A consulter lorsque tout ne se passe pas comme prévu.
      • \n
    \n

    Afficher un sprite

    \n
      \n
    1. Ajouter une image (glisser déposer) depuis votre exlorateur de fichier vers la vue projet OU créer le fichier image dans le dossier Assets/ de votre projet.
      2. \n
    2. Dans la vue projet, sélectionner l’image puis regarder l’inspecteur: il affiche les informations d’importation de texture.\n\n \n \n \n \n
      3. \n
    3. En projet 2D la texture est automatiquement configurée de type “sprite (2D and UI)“. Pour texturer un objet 3D on utiliserait “default”. Les autres modes sont pour des usages avancés (vous le saurez quand vous en aurez besoin).
      4. \n
    4. “PixelsPerUnit” Indique à Unity quelle sera la densité de pixels à utiliser par rapport au système d’unité du moteur. Unity est un moteur 3D, et comme la notion de “pixel” n’existe pas dans un espace 3D Unity propose un système d’unité de référence. Ces unités sont totalement arbitraire (on dira “une taille de une unité” ou “une taille de un”) mais permettent de garantir la cohérence des proportions entre les assets quelle que soit la position de la caméra et la résolution finale. Nous n’apprendrons pas à afficher un sprite en rendu pixel perfect (1px du sprite rendu sur 1px dans le rendu final), si vous souhaitez le faire voici un tutorial : https://blogs.unity3d.com/2019/03/13/2d-pixel-perfect-how-to-set-up-your-unity-project-for-retro-8-bits-games/
      5. \n
    5. Si vous utilisez du pixel art, passer le “filter mode” en “Point (no filter)” pour un meilleur rendu.
      6. \n
    6. Depuis la vue projet, glisser déposer l’image vers la scène. Celà créera automatiquement un GameObject avec un composant SpriteRenderer configurer pour afficher votre image.
      7. \n
    \n

    Autres exemples courants

    \n

    Sprite de fond avec répétition

    \n

    \n \n \n \n \n

    \n

    Particularités :

    \n
      \n
    • Draw Mode: Tiled (préciser le nombre de répétitions dans Width et Height)
      • \n
    • (Configuration d’importation de l’image) Mesh Type: FullRect
      • \n
    \n

    Forme géométrique de base (ex. hexagone)

    \n

    \n \n \n \n \n

    \n

    Option 1: Animer à la Unity

    \n
      \n
    • Configurer le Controller au niveau de l’Animator qui a été ajouté automatiquement sur un des game object créés, ajouter des transitions basées sur des propriétés pour basculer d’une animation à l’autre.
      • \n
    \n
    \n\n
    \n
      \n
    • Utiliser un script pour modifier la propriété du controller.
      • \n
    \n
    \n\n
    \n

    AnimateGirl.cs

    \n
    using UnityEngine;\n\n[RequireComponent(typeof(Animator))]\npublic class AnimateGirl : MonoBehaviour {\n\n    Animator animator;\n\n    private void Start() {\n        animator = GetComponent<Animator>();\n    }\n\n    void Update() {\n        if (Input.GetKey(KeyCode.RightArrow)) {\n            animator.SetFloat(\"Speed\", 2f);\n        } else {\n            animator.SetFloat(\"Speed\", 0f);\n        }\n    }\n}
    \n

    Option 2: Animer un sprite via script

    \n

    Personnellement, j’évite le plus possible d’utiliser les Controller et Animator de Unity pour la 2D: ils apportent énormément de complexité pour simplement faire défiler des sprites. Aussi je préfère écrire moi-même un script qui va venir modifier les images du SpriteRenderer à fréquence régulière pour créer l’animation.

    \n

    Je crée un script “SpritesheetAnimator” qui s’occupe d’accepter une configuration de séquences pour un gameObject et de modifier l’image du SpriteRenderer Associé, et un deuxième script comme précédemment pour piloter l’animation en fonction du gameplay.

    \n
    \n\n
    \n

    SpritesheetAnimator.cs

    \n
    using System;\nusing System.Linq;\nusing UnityEngine;\n\n// Lister toutes les animations possibles ici\npublic enum Anims {\n    Iddle,\n    Run,\n    Roll\n}\n\n// Structure de données pour définir une animation\n[Serializable]\npublic struct AnimDefinition {\n    public Anims name;\n    public Sprite[] frames;\n}\n\n// L'animator va changer le sprite du SpriteRenderer à une certaine fréquence (par défaut 25 fois par secondes)\n[RequireComponent(typeof(SpriteRenderer))]\npublic class SpritesheetAnimator : MonoBehaviour {\n\n    [Tooltip(\"animation speed in images per seconds\")]\n    public float animationSpeed = 25;\n\n    public AnimDefinition[] animations;\n\n    // accessors (getters)\n    public AnimDefinition CurrentAnimation => currentAnimation;\n    public int LoopCount => loopCount;\n    public float animationFrameDuration => 1f / animationSpeed;\n\n    // private properties\n    private SpriteRenderer spriteRenderer;\n    private AnimDefinition currentAnimation;\n\n    private int currentFrameIndex = 0;\n\n    // durée en seconde avant l'affichage de la prochaine image\n    private float nextFrameCoolDown;\n\n    // nombre de fois que l'animation est jouée complètement\n    private int loopCount = 0;\n\n    void Start() {\n        spriteRenderer = GetComponent<SpriteRenderer>();\n        nextFrameCoolDown = animationFrameDuration;\n        currentAnimation = animations[0];\n    }\n\n    void Update() {\n        if (currentAnimation.frames.Length == 0) return;\n\n        // déclenche la frame suivante si le temps est écoulé\n        if (nextFrameCoolDown <= 0) {\n            AnimateNextFrame();\n        }\n\n        // si on change la vitesse de l'animation, raccourci le temps d'attente si nécessaire\n        if (animationFrameDuration < nextFrameCoolDown) nextFrameCoolDown = animationFrameDuration;\n\n        // écoule le temps avant la prochaine image\n        nextFrameCoolDown -= Time.deltaTime;\n    }\n\n    public void AnimateNextFrame() {\n        // calcule l'indice de l'image suivante\n        currentFrameIndex = (currentFrameIndex + 1) % currentAnimation.frames.Length;\n        // affiche l'image suivante\n        spriteRenderer.sprite = currentAnimation.frames[currentFrameIndex];\n        // Ajoute un temps d'attente calculé à partir de la fréquence de l'animation\n        nextFrameCoolDown += animationFrameDuration;\n        // compte le nombre de fois que l'animation a été jouée\n        if (currentFrameIndex == 0) loopCount++;\n    }\n\n    public void Play(Anims nextAnimation) {\n        // Si l'animation est déjà jouée, on ne fait rien\n        if (currentAnimation.name == nextAnimation) return;\n        // trouve l'animation correspondante dans la liste\n        currentAnimation = animations.First(a => a.name == nextAnimation);\n        // réinitialise à la première image de la séquence\n        currentFrameIndex = 0;\n        loopCount = 0;\n    }\n}
    \n

    AnimateGirlSpritesheet.cs

    \n
    using UnityEngine;\n\n[RequireComponent(typeof(SpritesheetAnimator))]\npublic class AnimateGirlSpritesheet : MonoBehaviour {\n    SpritesheetAnimator animator;\n\n    void Start() {\n        animator = GetComponent<SpritesheetAnimator>();\n    }\n\n    void Update() {\n        if (Input.GetKey(KeyCode.RightArrow)) {\n            animator.Play(Anims.Run);\n        } else if (Input.GetKey(KeyCode.DownArrow)) {\n            animator.Play(Anims.Roll);\n        } else {\n            animator.Play(Anims.Iddle);\n        }\n    }\n}
    \n

    Le debugger

    \n

    Debugger (déboguer en français, peu utilisé), permet d’inspecter le code alors qu’il est en train d’être exécuté par le programmes. Avec Unity, votre outillage VSCode (avec les plugins installés précédemment) vous permettent d’utiliser directement cette fonctionnalité.

    \n

    1er cas: le fichier launch.json n’existe ppas dans le projet

    \n

    Pour le configurer (première utilisation uniquement), accéde à l’onglet debug (1) puis créez un fichier launch.json si proosé (2).

    \n

    \n \n \n \n \n

    \n

    2eme cas: le fichier existe déjà et “Unity debugger” ne fait pas partie des environnements proposés

    \n

    Dans ce cas ajouter l’environnement comme indiqué dans l’image ci-dessous.

    \n

    \n \n \n \n \n

    \n

    Utiliser le debugger

    \n

    Une fois l’environnement d’exécution “Unity Debugger” sélectionner, lancer “l’attache” en cliquant sur le triangle vert à côté de l’environnement.

    \n

    L’outil de debugging de VSCode va alors s’attacher au debugger intégré à Unity, et vous pourrez alors commencer à mettre des points d’arrêts (breakpoint en anglais).

    \n

    Pour mettre un point d’arrêt cliquer sur la marge gauche d’un ligne de code que vous souhaitez inspecter.

    \n

    \n \n \n \n \n

    \n

    Démarrer le jeu et faites en sorte que la ligne qui contient le point d’arrêt soit atteinte. Le jeu va alors se mettre en pause et la fenêtre se transformer de la façon suivante :

    \n

    \n \n \n \n \n

    \n
      \n
    • (1) La ligne où le debugger est arrêté est surlignée en jaune
      • \n
    • (2) Une barre de navigation en haut à droite permet de controler l’exécution du programme: reprendre, avancer de une ligne, debugger l’intérieur de la fonction, terminer la fonction et debugger à la sortie, relancer le debugger (interrompt la session en cours), arrête de debugger.
      • \n
    • (3) en haut à gauche l’encart “variables” permet d’inspecter les variables du contexte en cours
      • \n
    • (4) à gauche milieu “watch” permet de saisir des expressions à évaluer et d’afficher le résultat par rapport au contexte en cours
      • \n
    • (5) à gauche en bas “call stack” permet de remonter dans la pile d’appel du programme (trouver les contextes des fonctions appelantes)
      • \n
    • (6) à gauche en bas “breakpoints” permet de gérer la liste des breakpoints actuellement acquis
      • \n
    • (7) il est possible de survoler les variables avec le souris pour connaitre leur valeur (ex: maxDistancePerFrame dans cette image)
      • \n
    \n

    Le moteur physique

    \n

    Pour le vocabulaire et les notions clés :

    \n\n

    Déplacement d’un personnage dans un univers physique

    \n
      \n
    1. Ajouter un Rigidbody2D configuré en dynamique. Cocher la case “Contraints: Freeze rotation Z” pour que le sprite ne tourne pas sur lui même.
      2. \n
    2. Ajouter un CircleCollider2D. Il est possible d’ajouter plusieurs collider2D sur un même gameObject pour créer une forme composée, il en faut au moins un. Ici le circle collider eut être édité en cliquant sur le bouton “edit collider” et en modifiant la taille et la position du cercle qui apparait sur le personnage.
      3. \n
    \n

    \n \n \n // peut servir à plein de choses.\n // méthode 1, si on souhaite utiliser LinQ sur la collection d'enfants\n IEnumerable<Transform> children = (IEnumerable<Transform>) this.transform;\n foreach (Transform child in children) {\n child.gameObject.GetComponent<ScriptName>(); // peut être null !\n }\n // méthode 2, plus courte si on veut juste itérer\n foreach (Transform child in this.transform) {\n child.gameObject.GetComponent<ScriptName>(); // peut être null !\n }\n // méthode 3, si on cherche spécifiquement un script\n foreach (ScriptName script in this.GetComponentsInChildren<ScriptName>()) {\n // script n'est pas null\n }\n}\n

    Audio

    \n
      \n
    • AudioSource = Haut parleur qui peut lire un son à la fois.
      • \n
    • C’est un composant à attacher à un game objet, il sera spacialisé à l’endroit de l’objet.
      • \n
    • AudioClip = Clip audio qui peut être lu par un Audio source.
      • \n
    • On peut changer le AudioClip d’un AudioSource par script.
      • \n
    • Le son est capturé par l’AudioListener, positionné par défaut sur la caméra.
      • \n
    \n

    [ExecuteInEditMode]

    \n

    L’annotation [ExecuteInEditMode] permet d’exécuter un script en mode édition. Ex:

    \n\n

    Barre de vie

    \n
      \n
    • \n

      GameObject parent pour positionner le tout

      \n
        \n
      • GameObject BackgroundScaler pour étendre la barre vide
        • \n
      • SpriteRenderer BackgroundSprite avec décalage de 0.5 vers la droite pour décaler le point d’origine du scaling
        • \n
      • GameObject ForegroundScaler pour étendre la barre pleine
        • \n
      • SpriteRenderer ForegroundSprite avec décalage de 0.5 vers la droite pour décaler le point d’origine du scaling
        • \n
      \n
      • \n
    • Ajouter un script pour piloter la taille des éléments visuels (Ex: LifebarController)
      • \n
    \n
    \n\n
    \n

    Exécuter une action étendue sur plusieurs frames / durées

    \n

    Appeler une fois :

    \n
    StartCoroutine (DoRotateByStep ());
    \n

    Effet avec boucle :

    \n
    IEnumerator DoRotateByStep () {\n    Quaternion originalRotation = this.transform.rotation;\n    int durationInFrames = 20;\n    for (int i = 0; i < durationInFrames; i++) {\n        this.transform.rotation = Quaternion.Euler (0, 0, (i * 360f) / durationInFrames);\n        yield return null; // attends la prochaine frame pour continuer\n    }\n    this.transform.rotation = originalRotation;\n}
    \n

    Exemple plus complexe: Shake

    \n
    \n

    Envie de réagir ? Mentionnez @Lythom dans votre tweet ou envoyer un mail à samuel@a-game-studio.com.

    ","frontmatter":{"title":"Unity étape par étape - jeu de ballon","date":"2020-05-21","description":"Cet article tutorial explique étape par étape comment réaliser un jeu de ballon avec Unity."}}},"pageContext":{"lang":"fr","slug":"/fr/blog/unity-step-by-step-ball-game/","previous":{"fields":{"slug":"/fr/blog/2020-a-year-of-temporal-paradoxes/"},"frontmatter":{"title":"2020, une année de paradoxes temporels ?"}},"next":null}}}