Un tour d'horizon des meilleurs conseils pour les jeux en 2D

Envisagez-vous de réaliser un jeu en 2D avec Unity ? Alors, jetez un coup d'œil à ces conseils pratiques de notre chef de produit technique 2D, Rus Scammell, et de notre chef de produit marketing 2D, Eduardo Oriz, qui vous aideront à démarrer rapidement et à travailler efficacement tout au long de votre projet.

Utilisez le modèle 2D pour démarrer rapidement un nouveau projet. Le modèle est disponible dans le Unity Hub. Les paramètres uniques comprennent :
- Une scène par défaut qui utilise une vue 2D et qui est livrée avec une caméra réglée sur la projection orthographique et qui s'éclaircit avec une couleur unie.
- L'éditeur est réglé par défaut sur le mode 2D afin que les nouvelles textures soient importées sous forme de Sprites.
- Illumination globale en temps réel désactivée
- Installation des paquets 2D, notamment 2D Animation, 2D Pixel Perfect, 2D PSD Importer et 2D SpriteShape, ainsi que des dépendances nécessaires.

À partir de la version 2020.2, les éléments du menu 2D s'affichent en tant que menus de haut niveau pour la création de GameObjects et d'actifs. Ils comprennent un ensemble de 2D Sprites primitifs pour un prototypage rapide. Des menus ont également été ajoutés pour les nouvelles fonctionnalités telles que SpriteShape et l'appareil photo Pixel Perfect.

Les pixels par unité (PPU) sont un concept important dans le développement 2D. Le PPU d'un Sprite détermine combien de pixels de largeur ou de hauteur dans une image Sprite correspondent à une unité de distance dans l'espace mondial.
Prenez en compte le PPU de vos sprites le plus tôt possible. Outre le contrôle de la densité des pixels, le PPU affecte également la manière dont les Sprites sont utilisés par les modes de dessin du Sprite Renderer ainsi que par d'autres systèmes tels que Tilemap. Choisissez une densité de pixels adaptée à la conception de votre jeu et à la plate-forme cible, et évitez les textures inutilement grandes.

La fonction 2D PSD Importer permet d'importer dans Unity des fichiers PSB d'Adobe Photoshop en couches. Il vous permet d'utiliser des fonctions telles que Mosaic pour générer automatiquement une feuille de sprites à partir des calques importés et du rig du personnage. Unity réassemble ensuite les Sprites d'un personnage tels qu'ils étaient disposés dans leurs fichiers sources. L'importateur est conçu pour fonctionner de manière optimale avec le système d'Animation 2D et les flux de travail des personnages multicouches.

Il s'agit de réduire le nombre de passages nécessaires pour dessiner la couleur finale à l'écran. Lorsque les pixels sont semi-transparents, vous devez tenir compte de chaque pixel qui se chevauche lors du calcul de la couleur finale. Le surdessin des pixels transparents qui se chevauchent ralentit les performances du GPU, en particulier sur les appareils moins puissants ou lorsque des taux de rafraîchissement plus élevés sont requis. Tous les sprites de votre scène seront considérés comme transparents, mais il existe des moyens de réduire l'effet de surimpression.
Unity ne surdessinera les pixels qu'à l'intérieur de votre masque de sprite. Avec un rectangle complet, la zone complète sera surdessinée, mais si le type de maillage est réglé sur serré, la zone à surdessiner est réduite puisque le maillage généré ne suit que le contour de votre sprite, en ignorant les zones vides. Si vous souhaitez avoir plus de contrôle sur le contour du maillage, vous pouvez le modifier à partir de l'éditeur de sprites.

Vous pouvez également réduire le surdessin en fusionnant les Sprites statiques qui se chevauchent. Si les sprites ne doivent pas bouger ou si vous n'en avez pas besoin pour un effet de parallaxe, envisagez de les fusionner une fois que votre niveau est finalisé.

Lorsque vous avez de nombreux Sprites avec des Colliders 2D statiques, combinez-les avec le composant Composite 2D Collider. Cela permet d'obtenir de meilleures performances et une collision plus douce avec l'ensemble de la surface. Le collimateur composite peut être utilisé avec les cartes de tuiles ; dans l'image ci-dessus, les tuiles violettes sur l'écran sont utilisées comme collimateurs. Vous l'activez en ajoutant le composant et en cochant la case Composite.
Un collisionneur composite 2D peut également être utilisé avec des GameObjects parents. Assurez-vous que les collisionneurs enfants sont activés en cochant la case Used by Composite. Une autre façon d'optimiser les collisionneurs consiste à dessiner manuellement un polygone simple qui fonctionne bien avec votre GameObjects.

Chaque Renderer attaché à un GameObjects tel qu'un Sprite a des frais généraux. Pour afficher efficacement de nombreux Sprites statiques, utilisez le Tilemap Renderer pour une conception plus performante et plus pratique de votre jeu. Vous pouvez rendre des centaines de Sprites avec un seul Renderer. Lorsque vous avez de nombreux sprites à rendre mais que vous n'avez pas besoin de les trier, utilisez le mode "Tilemap Chunk" pour réduire l'utilisation du processeur et de la mémoire, ce qui est important si vous visez des appareils bas de gamme. Pour l'utiliser, placez toutes les tuiles statiques dans le même Tilemap et activez le mode Chunk.
Assurez-vous que toutes les tuiles se trouvent dans le même Sprite Atlas. Les tuiles peuvent ne pas être affichées correctement dans la vue de la scène, mais elles seront triées correctement lorsque vous passerez en mode lecture. Une première approche consiste à concevoir votre niveau en mode individuel et à passer au mode groupé lorsque vous êtes prêt à le publier.
Si vous avez besoin que les sprites soient triés correctement, par exemple pour déplacer un personnage devant et derrière les tuiles individuelles, utilisez le mode individuel. Pour les sprites qui doivent être déplacés ou qui ont des fonctions de jeu, utilisez le mode normal.
2D Sprite Shape est l'outil 2D qui permet de concevoir des formes et des niveaux organiques. Par défaut, l'API Splines vous permet de modifier les nœuds de la spline au moment de l'exécution, ce qui peut avoir un impact sur les performances. Si vous n'avez pas besoin de ce changement au niveau de l'exécution, vous pouvez mettre en cache la géométrie de la Splines pour améliorer les performances. Sélectionnez Sprite Shape Controller, activez Edit Splines puis Cache Geometry pour cuire le maillage. Si vous utilisez Unity 2019 LTS ou des versions ultérieures et que vous modifiez la Splines à l'exécution, alors vous pouvez obtenir une grande amélioration des performances en installant le package Burst. Allez dans le gestionnaire de paquets et installez la version 1.3 ou ultérieure de Burst.

Vous pouvez utiliser les Sprite Shape Profiles pour concevoir des environnements comme vous le feriez avec un logiciel de dessin vectoriel. Les profils peuvent être utilisés à la fois pour le jeu et pour des éléments décoratifs. Ils conviennent parfaitement à différents styles artistiques et permettent de remplir rapidement de grandes zones, tout en utilisant moins de ressources.
Les modes de dessin du générateur de sprites vous permettent de réduire la taille de vos ressources et de rendre le processus de conception des niveaux plus amusant. Avec les Sprites tuilables, vous pouvez avoir différents GameObjects utilisant le même Sprite dans des tailles différentes sans l'étirer. Allez dans l'éditeur de sprites et déplacez les poignées jaunes pour encadrer la partie du sprite qui sera tuilable. Appliquez-le, puis allez dans le GameObjects et changez le Sprite Renderer Draw Mode en Tile Mode.
Vous pouvez également concevoir votre niveau à l'aide de sprites à 9 tranches, en utilisant des blocs qui semblent nets et proportionnés lorsque vous les mettez à l'échelle et les disposez. Dans l'éditeur de sprites, sélectionnez la zone qui doit être carrelée et assurez-vous que les coins s'inscrivent dans la zone des coins qui ne sera pas répétable, puis sélectionnez le mode de dessin pour trancher.
Lorsque vous concevez des jeux en 2D, il peut arriver que certains de vos GameObjects se trouvent dans la même couche de tri et dans le même ordre. Vous pourriez créer plusieurs couches et une logique derrière vos sprites en mouvement pour les afficher dans le bon ordre, mais ce n'est pas efficace. Pour indiquer à Unity l'ordre de rendu d'un sprite dans ces situations, nous utilisons le mode de tri de la transparence dans les paramètres du projet. Unity trie les Sprites dans l'ordre décrit par la direction d'un Vector2 (défini par les axes X et Y dans ces paramètres). Découvrez comment Eduardo Oriz, responsable du marketing produit d'Unity, et Rus Scammell, responsable produit, ont mis en place cette optimisation à environ 9:15 dans leur conférence Unite Now.

La création d'un clip d'animation image par image dans Unity est simple. Sélectionnez une séquence de Sequences dans la fenêtre de projet et faites-les glisser dans la vue Scène ou dans la fenêtre Hiérarchie. Un clip d'animation et un animateur seront automatiquement créés pour vous.
Si vous souhaitez ajouter les clips d'animation à un animateur existant, il vous suffit de faire glisser ces images d'animation sur le GameObjects de l'animateur. Le clip sera ajouté à l'animateur. Maintenez la touche Alt ou Option enfoncée tout en faisant glisser les images d'animation dans la hiérarchie si vous souhaitez créer un GameObject différent pour chaque Sprite.

Unity prend en charge à la fois l'animation image par image et l'animation basée sur les os. Voici les principales différences entre les deux approches :
Image par image
- Chaque image utilise un Sprite unique
- Les clips d'animation supplémentaires nécessitent plus de Sprites
- La fréquence d'images et la vitesse sont généralement constantes
- Les animations de transition nécessitent des Sprites supplémentaires
- Ne fonctionne pas avec la cinématique inverse 2D (2D IK)
A base d'os
- Chaque image d'animation utilise les mêmes Sprites
- Chaque clip d'animation utilise les mêmes Sprites
- Fonctionne bien pour les vitesses d'animation variables
- Le système d'animation permet de créer des transitions pour les clips
- Fonctionne avec l'IK 2D

Installez les paquets Burst/Collections pour optimiser les performances de l'animation 2D pour un nombre élevé d'os et des maillages 2D Sprite avec un nombre élevé de vertex. La déformation des sprites animés au moment de l'exécution bénéficiera également d'une amélioration des performances. Cela permet au package 2D Animation d'utiliser la compilation Burst et des utilitaires de tableau de bas niveau pour accélérer le traitement par Unity de la déformation du maillage des Sprites.
Assurez-vous d'utiliser Unity 2020.2 ainsi que 2D Animation 5.0.x. Lorsque vous installez le paquet Burst 1.3.3 ou plus récent, vous devez également installer Collections qui est un paquet de prévisualisation.


Lorsque vous préparez un Sprite pour le rigging, vous avez un contrôle total sur le maillage. Pour commencer rapidement, l'éditeur d'habillage propose une option de tessellation automatique. Toutefois, vous pouvez personnaliser cette méthode en utilisant les outils de maillage pour ajouter et supprimer des vertices afin de créer le maillage dont vous avez besoin.

Ajoutez des collisionneurs 2D et des composants Rigidbody 2D aux personnages basés sur les os pour piloter les mouvements via le système de physique 2D. Dans l'image ci-dessus, tirée de l'exposé d'Eduardo et de Rus, des collisionneurs de capsules ont été ajoutés à chaque os ainsi qu'aux composants 2D des corps rigides. Ils ont ensuite été reliés par des charnières. Vous pouvez utiliser des limites d'angle sur chaque articulation pour limiter l'amplitude du mouvement et vous pouvez également déterminer si les composants Rigidbody connectés par une articulation entrent en collision les uns avec les autres.

Conservez une densité de pixels cohérente pour l'ensemble de vos actifs. Si votre projet comporte 32 PPU, par exemple, vous pouvez vous attendre à ce qu'une unité contienne 32 pixels, comme la tuile à gauche de l'image ci-dessus.
La caméra 2D par défaut exprime la taille en unités verticales à partir du centre de la caméra. Dans l'exemple de l'image ci-contre, nous pouvons placer 10 carreaux verticalement :

Si vos ressources apparaissent trop petites lorsque vous les ajoutez à la vue Scène, par rapport à votre image de référence originale, cela est probablement dû à une mauvaise correspondance des résolutions.
Le PPU par défaut d'Unity pour les sprites est fixé à 100. Lorsque nous modifions la configuration de l'actif sprite en fonction des 32 PPU de notre projet, le sprite aura alors la bonne taille.

Par défaut, le filtrage bilinéaire est activé pour les assets afin d'adoucir les bords durs, mais si vous souhaitez un aspect pixellisé de style rétro, vous pouvez changer le mode de filtrage en mode point pour obtenir des images nettes qui occupent l'espace de l'écran défini au départ.
Lorsque vous avez de nombreuses ressources à importer dans votre projet, il est fastidieux de modifier les paramètres de chaque sprite pour qu'ils correspondent à ceux de votre projet. Au lieu de cela, créez un modèle d'importation ou un préréglage afin que chaque ressource importée ait la configuration prédéfinie que vous souhaitez. Pour ce faire :
1. Sélectionnez un bien avec la configuration souhaitée
2. Cliquez sur l'icône Settings en regard de la ressource Sprite pour créer un modèle à partir de celle-ci.
3. Enregistrez-la sous un nom qui vous aide à vous souvenir de ce qu'elle fait.
4. Faites-en la valeur par défaut afin que tous les nouveaux actifs importés aient cette configuration (vous verrez l'actif prédéfini dans votre vue du projet).

Si vous travaillez avec des pixels, assurez-vous que l'écran affiche toujours le même nombre de pixels et que tous ces pixels ont la même taille. Tout d'abord, allez dans votre appareil photo et ajoutez l'appareil photo Pixel Perfect. Définissez le PPU de l'actif sur celui que vous utilisez dans votre art du pixel.
Une fois que vous avez ajouté le composant Pixel Perfect Camera, il prend le contrôle de la caméra en mode lecture, mais vous pouvez également voir les changements dans l'éditeur si vous activez l'option Exécuter en mode édition.

Dans votre projet, les personnages et les objets peuvent changer de position, de rotation ou de taille. Par défaut, ils auront une interpolation lisse, mais si vous voulez rester fidèle aux limites du pixel art indiquées par le PPU de votre projet, activez l'option Upscale Texture. Les GameObjects se déplacent par incréments d'un pixel. Les changements de rotation et d'échelle respecteront également les contraintes visuelles. En savoir plus sur les astuces pour créer des jeux 8 bits et 16 bits à l'aspect rétro.
Tri des groupes : Les groupes de tri permettent de regrouper les moteurs de rendu 2D. Il se peut que vous utilisiez le tri des couches et l'ordre dans les couches pour vous assurer que l'ordre de rendu est correct pour chaque personnage, mais cela ne fonctionnera pas s'il y a un chevauchement et que les parties individuelles s'entrelacent.

Vous pouvez placer un groupe de tri sur le GameObjects racine pour chaque personnage afin de regrouper les rendus et de les trier comme un seul. Avec les groupes de tri, les caractères ne s'entrelacent plus et sont triés en tant que groupe. Les groupes de tri fonctionnent avec tous les rendus 2D ainsi qu'avec les systèmes de particules.
Atlas des sprites : Cette ressource regroupe plusieurs sprites dans une seule texture combinée. Unity peut alors utiliser cette texture unique pour augmenter les performances en émettant un seul appel de dessin au lieu de plusieurs appels de dessin pour chaque Sprite qui se trouve dans un seul dossier.
En ajoutant un dossier à un Sprite Atlas, vous pouvez librement ajouter et supprimer des Sprites de votre Sprite Atlas au cours de votre production en changeant simplement le contenu des dossiers emballés.

Il est également possible de créer des variantes de Sprite Atlases de différentes tailles ou avec différents paramètres de compression pour cibler une gamme de plateformes avec les mêmes ressources sources.
Vous devez envisager une stratégie d'atlas qui soit adaptée à votre jeu. Sprite Atlas a été conçu pour que vous puissiez trouver un équilibre entre productivité, flexibilité et performance.
Découvrez comment nous aidons les artistes 2D; apprenez comment Odd Bug a utilisé des lumières 2D pour créer une ambiance dans son jeu Tails of Iron; téléchargez l'exemple de projet 2D The Lost Crypt, et lisez ce guide approfondi sur le choix de la meilleure résolution pour vos ressources 2D. Enfin, vous pouvez regarder la présentation d'Eduardo et de Rus's Unite Now ici.
