Spriters : Un nouvel espoir.

Au cours de la dernière décennie, la croissance du jeu vidéo a explosé en raison des technologies émergentes. Au début, tous les jeux n’avaient que d’excellents gameplay et des pixels. Mais au cours des dernières années, les jeux 3D sont devenus plus dominants et maintenant, avec l’essor du HTML5, les spriters peuvent à nouveau pousser les pixels pour les jeux !

Pour les développeurs, l’aspect le plus attrayant du HTML5 est qu’il fonctionne sur plusieurs plateformes – depuis les interwebs jusqu’aux appareils portables. Cela entraîne certaines limites pour l’art. Pourtant, les artistes qui préfèrent une approche classique trouveront que cette plateforme leur donne un moyen de s’épanouir. Notamment à travers le pixel art.

Pour les artistes, la chose la plus cool à propos du HTML5 est le potentiel pour davantage de jeux en pixel art. Ces types de jeux ont un certain charme. Lorsque vous regardez une image d’un jeu de pixels, vous voyez les éléments constitutifs – l’ossature qui compose une belle composition.

J’ai beaucoup de respect pour les artistes qui peuvent faire plus avec moins. Il est facile d’oublier les milliers de pixels qui composent une image lorsque vous regardez un grand jeu haute résolution. Les artistes pixel construisent une image à partir de zéro. Pour y parvenir, il faut de la planification, de la prévoyance et un très bon sens de la théorie des couleurs.

Une partie du plaisir de pousser des pixels réside dans le sentiment d’accomplissement que vous ressentez lorsque vous terminez un arrière-plan ou un personnage. Cela rappelle la réalisation d’un ensemble LEGO. Toutes les petites pièces s’intègrent à leur juste place pour créer quelque chose de grand et de cool. Pour les artistes qui n’ont pas essayé le pixel art, je le recommande fortement comme exercice. Cela forge le caractère.

Voici donc la partie qui m’enthousiasme : la possibilité d’un jeu de pixel art produit à pleine échelle. Les forums tels que Pixel Joint sont remplis d’œuvres qui ne demandent qu’à être transformées en jeux de longue durée.

Connexes : Unity Asset Store — Illustrations, outils et modèles prêts à l'emploi qui s'intègrent directement dans votre projet Unity.

Pourriez-vous imaginer un jeu complet conçu avec le temps et le soin qu’il faut à ces artistes pour créer UNE seule image ?! Ce serait LEGEN (attendez) DARY. Et aussi ceci : CanvasCycle. Époustouflant. Les arrière-plans aux couleurs cyclées seraient épiques utilisés dans une aventure à défilement horizontal !

Un bon exemple de jeu de pixels récent est Sword & Sworcery. J’adorerais voir plus de nouveaux jeux comme celui-ci. La commodité multiplateforme du HTML5 signifie une croissance continue du développement de jeux et une demande plus élevée pour les artistes pixel.

La vérité est que vous pourriez créer un jeu de pixels vraiment badass avec HTML5. Certains diront peut-être que le pixel art est de la merde en basse résolution, mais je vois du pointillisme numérique et une belle forme d’art qui aurait autrement disparu.

Notre sélection : Udemy Game Development Courses — Cours à la demande couvrant la programmation Unity, Unreal, C++, C# et shader.

Points clés à retenir

• La portée multiplateforme du HTML5 est la principale raison pour laquelle le pixel art prospère à nouveau — un seul ensemble d’assets peut s’exécuter dans un navigateur, sur un téléphone et sur une tablette.
• Le pixel art n’est pas une limitation que l’on accepte ; c’est une discipline qui impose une composition, une théorie des couleurs et une planification solides.
• L’élément canvas et des outils comme CanvasCycle ouvrent des techniques (cyclage de palette, arrière-plans procéduraux) qui sont véritablement difficiles à mettre en œuvre dans les pipelines 3D.
• Un jeu de pixel art produit à pleine échelle est un objectif réalisable pour une petite équipe, pas une chimère — la barrière est l’artisanat et le temps, pas la technologie.
• Si vous êtes un artiste qui n’a pas essayé de pousser des pixels, considérez cela comme un exercice. Cela forge le caractère.

Pourquoi HTML5 a changé la donne pour les artistes pixel

Le principe du HTML5 est simple : écrivez une fois, exécutez n’importe où. Sous le capot, le cheval de bataille est l’élément <canvas>, qui donne à JavaScript un accès direct à un bitmap dans lequel vous pouvez dessiner, image par image.

Pour un artiste pixel, c’est un cadeau. Vous ne combattez pas un pipeline de textures ou un compilateur de shaders — vous dessinez des rectangles de couleur sur une grille, ce qui est exactement la façon dont le pixel art est créé à l’origine.

Comparez les deux mondes :

Préoccupation	Pipeline 3D traditionnel	Pipeline canvas / pixel HTML5
Création d’assets	Modélisation, UV mapping, rigging, texturing	Dessin sur une grille de pixels fixe, export d’une feuille de sprites
Taille du fichier	Grands maillages et textures	Minuscules PNG et palettes indexées
Mise à l’échelle	Dépend de la résolution, nécessite des LOD	La mise à l’échelle du voisin le plus proche conserve des bords nets
Portage	Builds et shaders par plateforme	Une seule base de code, de nombreux navigateurs et appareils
Risque de direction artistique	Facile à paraître générique	Distinctif par défaut

Le compromis est cependant réel. Le rendu canvas est lié au CPU dans de nombreux cas, et vous devez être délibéré sur le nombre de sprites que vous poussez par image.

Vous devez également gérer les ratios de pixels de l’appareil avec soin, sinon vos pixels soigneusement placés deviendront flous sur un écran haute DPI. La solution consiste à effectuer le rendu sur un canvas de support basse résolution et à le mettre à l’échelle avec le lissage de l’image désactivé — une technique que chaque développeur de pixels HTML5 finit par apprendre.

Le métier derrière « Faire plus avec moins »

Lorsque vous regardez une image d’un jeu de pixels, vous voyez les éléments constitutifs – l’ossature qui compose une belle composition. J’ai beaucoup de respect pour les artistes qui peuvent faire plus avec moins. Il est facile d’oublier les milliers de pixels qui composent une image lorsque vous regardez un grand jeu haute résolution. Les artistes pixel construisent une image à partir de zéro.

Connexes : Amazon: Game Dev Books & Gear — Livres de programmation de jeux, claviers mécaniques, moniteurs et matériel de développement.

Pour y parvenir, il faut de la planification, de la prévoyance et un très bon sens de la théorie des couleurs. Quelques principes pratiques qui distinguent le bon pixel art du bruit :

• Limitez votre palette. Le matériel classique imposait des limites strictes — la NES, par exemple, fonctionnait avec un petit ensemble de couleurs simultanées. Les contraintes vous obligent à choisir des couleurs qui sont réellement efficaces.
• Utilisez un contour sélectif. Un contour entièrement noir aplatit un sprite. Des contours colorés et brisés suggèrent la lumière et la forme.
• Contrôlez vos valeurs. Plissez les yeux devant votre sprite. Si la silhouette n’est pas lisible, aucun détail ne la sauvera.
• Respectez la grille. L’anticrénelage manuel, un pixel à la fois, est une compétence — mais savoir quand ne pas le faire l’est tout autant.
• Pensez en tuiles. Les arrière-plans construits à partir de tuiles réutilisables sont moins coûteux à produire et plus faciles à animer.

C’est pourquoi le pixel art récompense la planification. Vous ne pouvez pas cacher une composition faible derrière un nombre élevé de polygones. Chaque pixel est une décision, et le spectateur les voit tous.

Color Cycling : le super-pouvoir oublié

Et aussi ceci : CanvasCycle. Époustouflant. Des arrière-plans utilisant le cycle de couleurs seraient épiques dans une aventure à défilement horizontal !

Si vous faites du shopping : Construct 3 — Moteur HTML5 sans code basé sur un navigateur qui exporte vers le Web, les appareils mobiles et les ordinateurs de bureau.

Pour ceux qui ne l’ont pas vu : le cycle de couleurs (color cycling) est une technique où l’on ne déplace aucun pixel. Au lieu de cela, on fait pivoter les entrées d’une palette indexée, et l’image semble s’animer — l’eau coule, les torches scintillent, le ciel change. C’était un incontournable des ères 8 bits et 16 bits, et c’est étonnamment peu coûteux en ressources car on ne réécrit qu’une petite palette, sans redessiner la scène.

CanvasCycle ravive cela sur le Web en rendant des illustrations classiques à cycle de couleurs dans un canevas HTML5. Pour une aventure à défilement horizontal, l’attrait est évident : des arrière-plans vivants et organiques qui ne coûtent presque rien en CPU par rapport à l’animation manuelle de chaque image. Si vous créez un jeu HTML5 et que vous voulez de l’atmosphère sans impact sur les performances, le cycle de palettes est l’un des outils les plus sous-utilisés de la boîte.

D’une image à un jeu complet

Voici la partie qui m’enthousiasme : la possibilité d’un jeu en pixel art produit professionnellement. Des forums tels que Pixel Joint regorgent d’œuvres qui ne demandent qu’à être transformées en jeux complets. Pourriez-vous imaginer un jeu entier conçu avec le temps et le soin qu’il faut à ces artistes pour créer UNE seule image ?! Ce serait LEGEN (attendez un peu) DAIRE.

L’écart entre une image fixe magnifique et un jeu commercialisé est l’endroit où la plupart des projets meurent, et il faut être honnête sur les raisons :

• Un seul sprite de héros peut prendre des heures. Un ensemble d’animations complet prend des jours. Idle, marche, attaque, blessure, mort — chacun est un puzzle en soi.
• Les arrière-plans se multiplient. Un side-scroller a besoin de couches de parallaxe, de transitions et de tuiles qui se raccordent parfaitement.
• L’UI est aussi de l’art. Les menus, les polices et les icônes nécessitent tous le même soin, et les polices pixel sont une discipline à part entière.
• La cohérence est le plus difficile. Maintenir un style cohérent sur des centaines d’assets est autant un problème de gestion qu’artistique.

La bonne nouvelle est que HTML5 abaisse la barrière technique à la publication. Vous n’avez pas besoin d’un kit de développement console ou d’un éditeur. Vous avez besoin d’un canevas, d’une boucle de jeu et de la discipline pour finir. C’est pourquoi la communauté du pixel art et la communauté HTML5 s’entendent si naturellement — toutes deux récompensent ceux qui aiment construire les choses à partir de zéro.

Apprendre de Sword & Sworcery

Un excellent exemple de jeu récent en pixel art est Sword & Sworcery. J’adorerais voir plus de nouveaux jeux comme celui-ci. Ce qui le rend instructif, ce n’est pas seulement l’art — c’est la façon dont l’art, la musique et le rythme fonctionnent ensemble. L’esthétique pixel n’est pas une décoration ; c’est toute l’ambiance. Cela prouve qu’une petite équipe avec une identité visuelle forte peut créer quelque chose qui semble plus grand que son budget.

Si vous l’étudiez, regardez comment il utilise des palettes limitées, comment il laisse respirer les scènes et comment il traite l’écran comme une composition plutôt que comme une fenêtre sur un espace 3D. Ce sont des leçons que vous pouvez appliquer à n’importe quel projet HTML5.

Conseils pratiques pour les aspirants spriters

Pour les artistes qui n’ont pas essayé le pixel art, je le recommande vivement comme exercice. Cela forge le caractère. Quelques façons de commencer qui fonctionnent vraiment :

• Recréez quelque chose de petit. Choisissez un sprite que vous aimez et reconstruisez-le pixel par pixel. Vous apprendrez plus en copiant qu’en lisant.
• Travaillez à une taille fixe. Commencez avec un canevas 16×16 ou 32×32 et refusez de tricher en augmentant l’échelle.
• Étudiez les palettes. Des outils comme Lospec hébergent des palettes communautaires que vous pouvez charger directement dans Aseprite, GraphicsGale ou Piskel.
• Animez tôt. Même un rebond sur deux images vous en apprendra plus sur la lisibilité qu’un chef-d’œuvre statique.
• Publiez et acceptez la critique. Des communautés comme Pixel Joint et les subreddits de pixel art vous diront la vérité, ce qui est exactement ce dont vous avez besoin.

Une partie du plaisir de « pousser des pixels » réside dans le sentiment d’accomplissement que l’on ressent en terminant un arrière-plan ou un personnage. Cela rappelle la finalisation d’un set LEGO. Toutes les petites pièces s’emboîtent à la bonne place pour créer quelque chose de grand et de cool.

Le chemin à parcourir

La commodité multiplateforme du HTML5 signifie une croissance continue du développement de jeux et une demande plus élevée pour les artistes pixel. La vérité est que vous pourriez créer un jeu en pixel art vraiment génial avec HTML5. Certains diront peut-être que le pixel art est une camelote en basse résolution, mais j’y vois du pointillisme numérique et une belle forme d’art qui aurait autrement disparu.

La technologie n’est plus le goulot d’étranglement. Les navigateurs sont rapides, le canvas est performant et les outils — d’Aseprite à Tiled en passant par les moteurs de jeu construits sur eux — sont matures. Ce qui reste, c’est la même chose qui a toujours compté : le savoir-faire, la patience et la volonté de placer un pixel à la fois jusqu’à ce que quelque chose de beau apparaisse.

Santé !

Jacob Weberg est un artiste numérique chez Massively Fun. Il aime créer des jeux, jouer à des jeux et manger de l’Easy Cheese.

Questions fréquemment posées

Qu’est-ce qu’un “spriter” ?

Un spriter est un artiste qui crée des sprites — de petites images 2D alignées sur une grille utilisées pour les personnages, les objets et les effets dans les jeux. Le terme vient de l’ère classique du développement de jeux, lorsque les sprites étaient des objets matériels que la console pouvait déplacer indépendamment sur l’écran. Aujourd’hui, il est utilisé largement pour toute personne travaillant dans le pixel art pour les jeux.

Pourquoi HTML5 convient-il si bien aux jeux de pixel art ?

L’élément canvas de HTML5 permet à JavaScript de dessiner directement sur un bitmap, ce qui correspond naturellement à la façon dont le pixel art est créé. Combiné au fait qu’une seule base de code fonctionne sur les navigateurs, les téléphones et les tablettes, cela signifie qu’une petite équipe peut déployer un jeu en pixel art partout sans le reconstruire pour chaque plateforme. La faible taille des ressources signifie également des temps de chargement rapides sur le Web.

Qu’est-ce que le cycle de couleurs, et pourquoi est-ce important ?

Le cycle de couleurs anime une image en faisant pivoter les entrées d’une palette de couleurs indexées plutôt qu’en déplaçant les pixels. C’était courant dans les jeux 8 bits et 16 bits pour l’eau, le feu et les cieux, et c’est extrêmement peu coûteux en ressources. CanvasCycle démontre la technique dans un canvas HTML5, et c’est une excellente astuce pour les arrière-plans atmosphériques à défilement latéral.

Ai-je besoin de logiciels coûteux pour créer du pixel art ?

Non. Des outils gratuits ou peu coûteux comme Piskel, GraphicsGale et Aseprite (payant mais abordable) couvrent tout ce dont la plupart des spriters ont besoin. Ce qui compte bien plus que l’outil, c’est votre sens de la couleur, de la composition et de la retenue. De nombreux jeux en pixel art célèbres ont été créés avec des outils bien plus simples qu’une suite 3D moderne.

Comment garder le pixel art net sur les écrans haute résolution ?

Effectuez le rendu de votre jeu sur un canvas de support basse résolution, puis redimensionnez ce canvas pour l’adapter à l’affichage avec le lissage d’image désactivé. Cela préserve les bords nets des pixels au lieu de les flouter. La gestion correcte du ratio de pixels de l’appareil est l’un des premiers obstacles techniques rencontrés par tout développeur de pixel art HTML5.

Le pixel art est-il juste une question de nostalgie ?

Pas du tout. Le pixel art est une esthétique délibérée avec de réels avantages : il est lisible à petite taille, peu coûteux à produire et à distribuer, et distinctif sur un marché rempli de jeux 3D d’apparence similaire. De nombreux jeux modernes le choisissent pour des raisons artistiques, et non parce qu’ils y sont limités. Comme je l’ai déjà dit, c’est du pointillisme numérique.