Découvrez Dragon Crashers - notre dernier projet d'exemple en 2D
De retour dans le cycle de publication 2019 d'Unity, nous avons réalisé notre vision d'autonomiser les artistes et les créateurs 2D avec une suite complète d'outils 2D. La sortie de nos packages 2D comprenait l'animation de squelettes de personnages et la cinématique inverse (IK), la conception de niveaux avec des tilemaps, des formes splines et des outils de pixel art. Consultez notre site web 2D pour avoir une vue d'ensemble.
Depuis, notre équipe 2D a optimisé ces flux de travail et affiné la technologie graphique : le moteur de rendu 2D au sein de l'Universal Render Pipeline. Il n'y a pas de meilleur moyen de mettre ces outils à l'épreuve et de voir comment ils peuvent faire briller vos visuels 2D qu'en explorant un nouvel exemple de projet. Dragon Crashers est maintenant disponible gratuitement sur l'Asset Store.
Dragon Crashers est un projet échantillon officiel réalisé dans Unity 2020.2 qui met en valeur la suite native d'outils 2D et la technologie graphique d'Unity. Le gameplay est une tranche verticale d'un Idle RPG à défilement latéral, populaire sur les plateformes mobiles aujourd'hui.
Tandis que les héros attaquent automatiquement leurs ennemis, vous pouvez déclencher des attaques spéciales en touchant/cliquant sur les différents avatars.
L'exemple de projet a été testé sur des plates-formes de bureau, mobiles et web.
En plus des informations contenues dans cet article, nous vous invitons à participer à notre webinaire en ligne sur Dragon Crashers le 14 avril à 11h00 EST (17h00 CET) pour obtenir des conseils clés et une présentation en direct par notre développeur de contenu mondial, Andy Touch. Conduisez-moi à la section d'enregistrement.
Assurez-vous d'avoir Unity 2020.2 ou 2020 LTS pour obtenir le projet sur l'Asset Store. Tout d'abord, démarrez un nouveau projet 2D, puis allez dans Package Manager > My Assets pour importer Dragon Crashers. Vous verrez apparaître des messages contextuels sur les paramètres du projet ; acceptez-les tous.
Si vous rencontrez des problèmes, n'hésitez pas à nous en faire part dans le forum 2D dédié à Dragon Crashers.
Une fois le projet importé, vous devriez voir une nouvelle option dans la barre de menu qui offre des raccourcis vers les scènes du projet. Sélectionnez Charger le menu du jeu et appuyez sur Jouer pour l'essayer.
Nous recommandons d'utiliser des paramètres d'affichage haute définition dans la vue du jeu, tels que le paramètre Full HD (1920×1080) ou 4K UHD (3840×2160).
Notre groupe de héros et nos ennemis de base sont diversifiés et équipés de tenues, d'accessoires et de variations différentes. Cependant, ce sont tous des bipèdes qui ont une morphologie similaire.
Pour éviter d'animer chacun d'entre eux avec leurs contraintes IK 2D respectives, nous avons créé un mannequin. L'animateur a utilisé ce mannequin, tandis que le dessinateur de personnages a créé des peaux et des accessoires uniques pour les personnages.
Le Mannequin Prefab(PV_Character_Base_Bipedal.prefab) a été utilisé pour créer des variantes Prefab pour chaque personnage. La seule différence entre ces variantes est l'actif de la bibliothèque de sprites, où nous échangeons l'apparence visuelle du personnage bipède.
Tous les éléments de la bibliothèque de sprites des personnages ont la même catégorie et la même étiquette pour définir les parties du corps et leurs variantes. Par exemple, les ennemis chevalier et squelette ont tous deux une catégorie nommée "bouche", avec des variantes de sprites étiquetées "bouche ouverte", "bouche dents" et "bouche normale" utilisées pendant l'animation.
Pour appliquer les animations à tous les personnages, veillez à ce que l'actif visuel ou le PSB de chaque personnage ait un rig similaire. En d'autres termes, ils doivent avoir des os nommés de la même manière, rattachés à des parties du corps de la même catégorie et du même label. Pour gagner du temps, vous pouvez copier le squelette du mannequin (ou les os du personnage de référence) et le coller sur les différents personnages. Cette option est disponible dans l'éditeur d'habillage, qui fait partie de l'éditeur de sprites.
Les Prefabs comprennent des fonctions qui rendent les personnages plus vivants, comme la cinématique inverse et les cartes de normalité et de masque pour une meilleure intégration dans l'environnement éclairé en 2D.
Il n'est pas nécessaire de figer la conception du niveau si tôt dans le processus de prototypage. Les outils 2D de construction de monde inclus dans Unity vous permettent de vous amuser à concevoir des niveaux, puis de les itérer facilement. L'éditeur de mosaïque et la forme des sprites permettent d'automatiser certaines tâches, telles que la configuration des collisionneurs pour qu'ils se conforment aux formes des objets ou du terrain, tandis que la vue Scène est votre terrain de jeu pour rendre le jeu plus excitant et plus agréable sur le plan esthétique.
L'aspect le plus important est d'avoir toutes vos "brosses" prêtes dans la palette de tuiles, qui peut contenir des tuiles répétables, des tuiles animées, des tuiles isométriques ou hexagonales, ou même des GameObjects qui les rendent toutes de manière performante, avec un seul moteur de rendu (Tilemap Renderer). Pour connaître tous les éléments de la grille, reportez-vous à la Palette_GroundAndWalls Tile Palette .
Le mode de dessin des sprites est une autre fonction souvent négligée qui peut s'avérer utile dans la conception des niveaux. Les sprites en mosaïque utilisés pour les couches d'arrière-plan permettent de couvrir une grande zone de la scène avec un petit sprite afin de créer un bel effet de parallaxe.
Une grille Tilemap n'est peut-être pas la solution la plus pratique pour ajouter à votre projet des objets d'aspect plus organique ou des éléments à base de Splines. Nous recommandons plutôt un outil basé sur les splines, tel que 2D Sprite Shape, qui dessine à peu près comme un logiciel de dessin vectoriel. Utilisez-le en tant qu'accessoire d'arrière-plan ou dans le cadre du jeu. Le moteur de rendu SpriteShape vous permet de rendre efficacement de nombreux sprites attachés à la spline ou à la bordure de vos formes. Voir le Prefab P_MineCartTracks_A pour observer comment les pistes sont dessinées à l'aide de la ligne spline, et comment la structure de soutien est réalisée à partir de la texture de remplissage du profil de forme du sprite.
Les Prefab P_Bridge ou P_MineCartTracks_B sont d'autres exemples qui démontrent qu'une bordure de Sprite Shape n'est pas nécessairement une simple ligne, mais qu'elle représente plutôt des éléments plus élaborés - dans ce cas, un pont et une voie ferrée.
Avec le moteur de rendu 2D, utilisez le shader Sprite-Lit pour obtenir des effets d'éclairage avancés. Tirez pleinement parti de ces effets en donnant à vos sprites des textures secondaires.
Les cartes normales peuvent être ajoutées dans l'éditeur de sprites. Ces images RGB représentent la direction XYZ à laquelle le pixel fait face et indiquent aux lumières 2D dans quelle mesure les affecter. Les cartes de masque peuvent également être exploitées par la ressource de données Renderer 2D(RenderData_2D.asset dans le projet), qui fait partie de la fonctionnalité Light Blend Styles (Styles de mélange de lumière). Le style de mélange de lumière appelé "Fresnel" est utilisé pour accentuer la lumière périphérique autour des personnages et des sprites. Pour obtenir un effet de fresnel, par exemple, choisissez d'utiliser les informations du canal R des cartes de masque. Dans ce projet particulier, nous n'avons qu'un seul style de mélange de lumière, de sorte que les trois canaux - R, V et B - ont le même aspect (noir et blanc). Cela rend le processus de création de cartes de masques plus pratique.
Shader Graph est fréquemment utilisé dans la démo pour animer les accessoires sans solliciter le processeur. Vous pouvez observer des éléments comme le vent qui fait bouger les toiles d'araignée( préfabP_SpiderWeb_Blur ), les cristaux qui brillent(P_Crystals_Cluster), ainsi que l'animation de la lave qui coule(P_Lava_Flowing_Vertical), qui utilise une texture de carte de flux pour contrôler la direction des coordonnées UV de la texture principale. La texture de flux utilise les couleurs rouge et verte pour indiquer la direction XY que les pixels suivent dans chaque image. Ouvrez l'organigramme du sous-graphe pour savoir comment obtenir cet effet.
Dans la même scène de bataille de dragons, il existe une autre technique d'animation de shaders appelée "animated alpha clipping", qui crée une animation fluide à partir d'une seule texture. Pour ce faire, une plage spécifique de pixels est affichée dans chaque image en fonction de leur valeur alpha. Des effets visuels tels que les éclaboussures de lave(ParticleSystem_Splatters) ou l'animation des coups(P_VFX_HitEffect) ont été réalisés à l'aide de cette technique avec Shader Graph.
Le style artistique de la démo a été créé en tenant compte des lumières 2D - et de leurs nombreuses possibilités. Comme vous pouvez le constater, les sprites améliorés par les cartes normales et les cartes de masque créées à la main sont relativement plats. Certains sprites, comme le sol, sont en niveaux de gris, c'est-à-dire qu'ils sont colorés à l'aide de l'option Couleur du moteur de rendu de la carte des carreaux, combinée aux zones éclairées de l'environnement.
Les lumières 2D en temps réel vous permettent de passer plus de temps sur la scène finale du jeu dans l'éditeur Unity. Observer les résultats directs tout en composant votre scène avec des lumières et des objets, ou même pouvoir jouer le niveau au fur et à mesure, vous permet de mieux établir l'ambiance et l'atmosphère souhaitées pour votre jeu.
En outre, vous pouvez renforcer l'immersion en animant ces éléments. Par exemple, le préfabriqué P_Lantern_HangingFromPost montre comment attacher une lumière à un objet animé, ou donner au personnage de la sorcière un bâton avec des particules Sprite-Lit.
Un autre avantage de l'utilisation de lumières 2D dans votre projet est la possibilité de réutiliser des éléments. Les environnements et les accessoires peuvent avoir un aspect très différent selon les conditions d'éclairage, ce qui vous permet de recréer de nombreux niveaux différents avec les mêmes sprites.
Pour la création, la structuration, la gestion et l'itération du gameplay, notre projet de démonstration a utilisé une combinaison d'objets scriptables et de préfabriqués.
Les sept personnages, qu'ils soient héros ou méchants, héritent de la structure de base de l'Unit Prefab et utilisent le même code de comportement. Pour différencier les valeurs entre les personnages, nous avons utilisé des objets scriptables pour différents "blocs" de valeurs unitaires. Les valeurs codées en dur rendent difficile l'équilibrage du jeu pour les non-programmeurs et rendent le gameplay rigide. C'est pourquoi nous avons défini des valeurs d'unité telles que le " montant des dégâts d'attaque ", le " temps de refroidissement des capacités en secondes " et la " santé de l'unité " dans des objets scriptables, afin que toute personne travaillant sur le projet puisse procéder à des ajustements rapides. Ces changements de valeur sont ensuite gérés dynamiquement par le code du jeu.
Chaque unité préfabriquée possède un script principal "UnitController" qui agit comme le "cerveau" de l'unité et gère les références de scripts internes à la préfabrication ainsi que l'enchaînement des comportements. Lorsque le dragon est attaqué, par exemple, le "UnitController" exécute des événements comportementaux connexes, tels que la transition vers une animation de flinch, l'émission d'un effet sonore de rugissement et la réduction du nombre de points de vie du dragon. Ces comportements de base adhèrent au concept d'encapsulation et ne gèrent que leurs propres objectifs et tâches respectifs. Par exemple, UnitHealthBehaviour ne gère que la logique, y compris la définition et la suppression des valeurs de santé d'une unité, et les rappels d'événements importants, tels que "HealthChanged" ou "HealthIsZero". Cependant, le "UnitController" envoie des valeurs au "UnitHealthBehaviour" en fonction des scénarios et des actions qui se produisent pendant le jeu.
Dans certains cas, des systèmes externes aux Unités nécessiteraient une mise à jour si un événement spécifique se produisait. Des délégués sont utilisés pour ces mises en place.
Par exemple : Lorsque la sorcière subit des dégâts à la suite d'une attaque et que "UnitHealthBehaviour" exécute l'événement "HealthChanged(int healthAmount)", le "UIUnitHealthBehaviour" souscrit en externe peut mettre à jour la barre de santé de la sorcière en fonction de cette valeur.
L'utilisation des délégués nous permet d'isoler et de tester des domaines sans dépendre d'autres systèmes. Il s'agissait par exemple de tester les performances du système d'affichage des dommages dans une scène distincte, sans avoir à simuler le déroulement de la bataille.
La fonction Timeline d'Unity a été utilisée dans deux domaines : Les cutscenes linéaires et les séquences de capacités de chaque unité.
Les scènes linéaires se déroulent au début et à la fin d'une bataille. Ils gèrent le séquençage dans divers domaines, tels que les transitions de caméra (à l'aide de Cinemachine), les animations de personnages (à l'aide d'Animator), les clips audio, les effets de particules et les animations d'interface utilisateur. Chaque piste est liée à l'instance de scène correspondante.
Un signal Timeline a été intégré à la fin de la cinématique d'introduction afin d'invoquer un événement Unity lorsque la scène est terminée. Cela indique quand commencer la logique de jeu de la bataille.
Timeline a été utilisé pour créer des séquences de compétences préfabriquées pour chaque unité. Cela permet à chaque unité d'avoir ses propres capacités spéciales qui sont liées et associées à son personnage, un peu comme les capacités des champions dans un jeu MOBA.
Chaque unité contient deux Timelines de capacités ; une attaque automatique " de base " et une attaque " spéciale " activée manuellement. Le script UnitAbilitiesBehaviour gère la logique des deux Timelines de capacité en termes de capacité en cours de lecture, de file d'attente de séquence de capacité et de démarrage/arrêt des cooldowns de capacité (en fonction de la logique de gameplay de haut niveau, comme si la cutscene d'introduction est en cours de lecture, ou si une unité est morte). Pistes de la Timeline liées aux systèmes locaux du préfabriqué de l'unité, y compris l'animateur du personnage pour l'animation de l'attaque et les systèmes de particules pour les effets visuels. Cela a permis au programmeur et à l'artiste de créer, de reproduire et d'itérer sur la capacité spécifique d'une unité de manière isolée en utilisant le mode d'édition du préfabriqué avant d'appliquer les changements à chaque instance du préfabriqué de l'unité dans le jeu.
Les signaux de Timeline étaient utilisés lorsqu'une capacité devait appliquer une sorte de valeur modificatrice à la santé d'une cible de l'unité. Lorsque le chevalier donne un coup d'épée, par exemple, nous voulons que les dégâts soient appliqués dès que l'épée atteint un point critique dans l'animation, plutôt qu'au début ou à la fin du coup d'épée. Lorsque le timing des animations et des effets visuels a été modifié au cours du développement, l'artiste a repositionné le signal "Ability Happened" au nouveau point souhaité de la séquence dans le cadre d'un flux de travail très rapide, sans que le programmeur ait à modifier des valeurs dans le code.
Cela nous a également permis d'ajouter plusieurs signaux "Ability Happened" dans une attaque continue, comme le dragon crachant du feu sur le groupe de héros.
Andy Touch, développeur principal de contenu mondial , a animé un webinaire présentant une démonstration en cours d'édition du flux de travail du pipeline de personnages utilisé pour créer le projet. Ce séminaire en ligne explique comment :
- Exporter un personnage 2D de Photoshop vers Unity
- Configurer la plateforme de sprites d'un personnage
- Configurer l'IK pour les membres d'un personnage
- Utilisez l'échange de sprites pour obtenir des visuels de personnages différents.
- Utiliser des préfabriqués imbriqués pour les accessoires d'armes
- Appliquer les cartes de normales et de masques des Sprites pour les styles d'éclairage 2D
- Sequences des capacités des personnages à l'aide de la Timeline
Pour vous remercier d'avoir exploré Dragon Crashers avec nous, nous aimerions partager avec vous un ensemble de fonds d'écran, d'arrière-plans Zoom et d'autres éléments visuels qui vous inspireront tout au long de votre parcours de développeur de jeux en 2D. Obtenez les fonds de Dragon Crasher ici.
Pour ceux qui démarrent un nouveau projet 2D, il existe déjà d'excellents guides sur le blog et les forums. Si vous ne connaissez pas encore les outils, nous vous recommandons de consulter la page web 2D, le blog 2D Tips Lightning Round et la présentation pour obtenir des conseils utiles. Pour en savoir plus, découvrez notre système d'animation squelettique ici, ou notre précédent projet, la crypte perdue et le webinaire correspondant. Comme toujours, nous vous recommandons de consulter nos dernières documentations, et bien sûr, la section Renderer 2D pour plus d'informations sur des fonctionnalités ou API spécifiques.