Le pixel art est éternel, mais cela ne signifie pas que les outils et les techniques pour travailler avec lui doivent rester au niveau de 1993.
Le développeur de jeux britannique Cardboard Sword travaille sur le jeu de plateforme furtif bidimensionnel
The Siege and the Sandfox , créé dans Unreal Engine 4 avec Paper2D. L'équipe publie une série
de journaux de développement présentant aux autres développeurs comment utiliser ces outils dans leurs propres jeux.
L'une des principales caractéristiques techniques de
The Siege and Sandfox est l'utilisation de
jeux de tuiles et de sprites dessinés à la main avec des cartes normales, vous permettant d'utiliser des méthodes d'éclairage en trois dimensions dans ce jeu avec un pixel art bidimensionnel assez traditionnel.
L'une des directeurs artistiques de Cardboard Sword, Kate Duke-Cox, a récemment expliqué à Gamasutra comment l'entreprise avait utilisé cette technique, pourquoi elle convenait au jeu et comment appliquer des techniques similaires dans vos propres jeux 2D.
Ajoutez une sensation de profondeur
Quels sont les avantages des cartes normales par rapport à un éclairage plat traditionnel dans un jeu 2D?Kate Duke-Cox : la tâche du directeur artistique est entièrement consacrée à la recherche d'un style individuel et à l'obtention de l'effet souhaité. Nous voulions que notre art soit riche, profond et «convexe». Les normales ont permis d'atteindre cet objectif, donnant un sens de forme et de force au monde et à ses objets.
Cette image, publiée par Keith Duke Cox sur Twitter en août 2017, est un magnifique exemple de technique.Par exemple, l'utilisation de normales donne aux sources de danger un aspect plus tangible. La lumière réagit plus correctement à la surface, et sans normales, une sensation de «feuille de papier» très plate s'est créée.
Lorsqu'elles sont utilisées correctement, les cartes normales peuvent ajouter aux objets de la scène un sentiment de profondeur et de poids que les images 2D plates ne peuvent pas atteindre.L'utilisation de cartes normales est plus une solution visuelle qu'un choix de gameplay fonctionnel. Nous voulions que le joueur plonge plus profondément dans l'environnement, afin que le parkour donne une sensation de profondeur et d'authenticité physique, plutôt que l'impression de motifs découpés sur papier typiques de certains jeux de pixels. Si vous adhérez à des couleurs vives et simples ou à un style rétro, un éclairage plat est tout à fait approprié.
Qu'est-ce qui vous a initialement attiré à utiliser des cartes normales pour l'éclairage 2D? Comment l'avez-vous découvert ou où avez-vous vu une mise en œuvre de qualité?L'application de normales aux graphiques 2D était une continuation naturelle de leur utilisation en 3D, ce qui n'était pas possible sur les anciens systèmes que nous avons inspirés lors de la création du style. Bien sûr, nous n'étions pas les premiers à les utiliser dans les jeux pixel art modernes, mais les résultats étaient différents.
Au début, nous avons refusé d'utiliser cet effet, car dans de nombreux effets que nous avons vus, il détruisait le charme et l'esthétique du pixel art, lui donnant trop d'éclat métallique. Dans notre première tentative de créer des cartes normales de pixels dessinées à la main pour le pixel art, nous avons obtenu des normales très détaillées - après tout, c'est leur principal objectif dans les graphiques 3D. Mais chaque tuile de notre jeu n'a qu'une taille de 32x32 pixels, il ne reste donc pas trop de pixels pour transmettre des informations de surface. En conséquence, le résultat s'est transformé en un chaos bruyant.
Mais ensuite nous avons vu l'art de Gwenael Masset pour
Dead Cells , dans lequel le pixel art avec des normales a été très bien fait, et avons décidé de lui donner une deuxième chance. [Voici
un article sur l'utilisation de modèles 3D dans ce jeu à deux dimensions.] Cette fois, nous avons utilisé une carte normale pas pour les petits détails des surfaces qui peuvent être vus dans les graphiques 3D. Maintenant, la carte normale a été utilisée pour «façonner» de grandes formes de pixel art.
Sculpture de formes à l'aide de cartes normales
Pouvez-vous brièvement parler du processus de développement d'un élément, en particulier des différences par rapport à la création d'un élément Sprite 2D simple similaire?Habituellement, le pixel art est dessiné en tenant compte de la direction "générale" de la lumière. Dans notre cas, pour la plupart des sprites et des tuiles de premier plan, la lumière principale est tombée d'en haut et légèrement vers la droite, et les tuiles de fond avaient une «lumière de caméra» plus générale pour simuler les pièces sombres et ne pas distraire le joueur du premier plan.
Cela signifiait que lorsqu'il s'agissait de rendre les normales pour les sprites et les tuiles, les détails et les matériaux des surfaces étaient déjà sélectionnés. Nous avons constaté que cette approche fonctionnait très bien. Il voulait dire que toutes les formes et tous les détails que nous devions imiter dans les normales étaient déjà très évidents et perceptibles.
En fonction de la nature du sprite auquel les normales ont été ajoutées, nous avons utilisé une combinaison de dessin des couleurs des coins des normales à partir de la "sphère des cartes normales" (en fait, c'est une sphère servant de palette de tous les angles possibles qui peuvent être dessinés sur la carte des normales tangentes) et de dessin dans des canaux RVB séparés. niveaux de gris avec d'autres outils comme ND, Crazybump ou AwesomeBump. Ils ont aidé avec certaines formes et correctement mélangé différentes parties des normales.
Nous avons utilisé Nvidia TextureTools pour Photoshop pour ajuster / normaliser les vecteurs après avoir fini de dessiner une carte normale.
Quels sont les avantages de dessiner des cartes normales manuelles comme celle-ci avec des outils prédéfinis comme Sprite DLight?Lorsque nous avons commencé à chercher des moyens de créer des normales pour un objet 2D sans modèle poly élevé, nous avons trouvé des applications qui dans une certaine mesure effectuaient cette tâche.
Nous avons étudié les didacticiels pour découvrir comment les cartes normales sont créées, mais nous avons constaté qu'elles émettaient des hypothèses basées sur les valeurs de couleur des pixels, qui ne donnent pas des résultats complètement précis ou complètement incorrects, ou nécessitaient plusieurs images en niveaux de gris pour simuler la lumière de différents directions, créant essentiellement les canaux normaux de la carte indépendamment.
Le programme ne peut pas connaître la hauteur et l'angle d'un pixel dans un sprite, surtout lorsqu'il s'agit d'un jeu de pixel art avec une palette très limitée, où une couleur est utilisée pour indiquer les nombreuses profondeurs et angles d'un objet. Cependant, il convient d'ajouter que nous n'avons pas réellement utilisé ces programmes, mais simplement évalué les perspectives de leur application.
Il existe deux méthodes standard pour la génération automatisée accélérée de cartes normales - Conversion en niveaux de gris et reconnaissance de forme. Nous avons effectué des tests avec les trois méthodes et avons constaté que la méthode de dessin manuel donne certainement les meilleurs résultats.
La conversion des niveaux de gris et la reconnaissance de forme peuvent créer des effets mieux que ceux illustrés ici, mais même avec des coûts de main-d'œuvre et de temps importants, ils ne sont toujours pas aussi précis et bons que le dessin manuel.
Utilisation de cartes normales dans des jeux 2D natifs
Quels conseils pouvez-vous donner aux développeurs qui veulent suivre votre propre chemin?La création manuelle de normales 2D précises n'est pas une tâche facile. Le travail sur tous les ensembles de tuiles de premier plan et d'arrière-plan a pris environ 3 mois-homme. Par conséquent, pour obtenir des résultats de haute qualité, préparez-vous à investir beaucoup de temps.
Les normales rapidement créées pour les graphiques 2D, en particulier le pixel art, semblent généralement mauvaises. Des systèmes tels que «créer une solution avec un seul bouton» conduisent souvent à la création de ressources faibles qui, lorsqu'elles sont rendues dans un jeu, sont encore pires que le pixel art éteint. Testez sur une petite partie du jeu (un petit échantillon du premier plan, du fond, des objets et des personnages) et découvrez ce qui vous convient et le style de votre jeu.
En revanche, en termes de rendu, les coûts d'ajout de normales à notre monde sont très faibles. Pour presque tout le monde du jeu, nous avions deux cartes normales 2k. Ils ne prennent pas beaucoup de mémoire et quelques textures supplémentaires pour le passage de rendu normal n'affectent pas trop les appels de dessin. Les sources d'éclairage n'effectuent dynamiquement que l'éclairage, elles ne projettent pas d'ombres sur tout dans le jeu, elles sont donc également très peu coûteuses.
Si vous ne comprenez pas encore comment fonctionnent les normales de l'espace tangent et ce qu'elles signifient, alors même une brève étude vous permettra de les dessiner beaucoup plus facilement.
Pour utiliser cette méthode, vous avez dû adapter les actifs existants et ne pas les implémenter dès le début du développement. Pouvez-vous donner des conseils à ceux qui essaient de compléter les graphiques de sprite prêts à l'emploi avec des cartes normales?Si nous devions le faire à nouveau, nous ferions de même: créer d'abord des graphiques diffus, puis dessiner les normales en utilisant le pixel art comme référence.
Peut-être que nous dessinerions certains objets un peu différemment. Il y avait des problèmes dans le pixel art lorsqu'un pixel pouvait indiquer, par exemple, un clou ou un rivet collant, mais ce pixel dans la carte normale peut correspondre à un seul coin, nous avons donc pu agrandir certains éléments pour mieux transmettre les angles dans l'image.
Si vous utilisez une résolution inférieure à celle que nous utilisons dans nos ensembles de tuiles (32x32), alors la taille vous limitera peut-être trop. Avec une résolution de 16x16 ou 8x8, vous ne pourrez probablement pas transférer la forme ou le volume uniquement si une tuile n'est pas une grande partie, comme une pierre ou un bloc de béton.
En pixel art, les dégradés clairs ne sont pas aussi bons que les surfaces volumineuses aux angles vifs. Si votre style graphique le permet, je suggère d'utiliser plus d'angles que de dégradés sur des surfaces normales. Par exemple, si vous avez un baril, assurez-vous que chaque planche individuelle qui le compose a son propre angle et que le baril lui-même est plus octogonal que rond.
Avez-vous des conseils à donner aux développeurs qui souhaitent utiliser ces techniques en dehors d'Unreal? Par exemple, dans Unity ou dans Gamemaker.Avant de commencer, vérifiez l'orientation de la carte normale. L'approche pour dessiner des normales est la même pour tous les moteurs, seulement ce que signifie chaque canal de couleur de la carte est différent.
Habituellement, seul l'axe Y (canal vert) change dans différents moteurs. Unreal utilise les normales du système de coordonnées à Y de DirectX, mais Unity utilise les normales Y + du système de coordonnées à droite OpenGL (comme il nous semble), donc le canal vert doit être inversé.
Cependant, si vous avez mal peint, alors le plus souvent, un simple retournement du canal vert suffit. Vous verrez que le canal est confus si l'image est éclairée en face du résultat attendu.