Pixel art, on dessine ?

Quelle marge a-t’on avec quelques pixels pour se démarquer des styles déjà existant ? La forme isométrique ou non, les patterns, et le nombre de couleurs (shading)? Le style d’animation, les formes, la taille, … ?

Décrire des styles, même s’il existe moultes façons de faire, je les décrirai par des exemples de jeux du point de vue historique :

Sans être précis de qui a fait quoi en premier, mais de ce qui reste accessible au détour d’une conversation à l’ombre d’un sapin, avec un arrière goût de nostalgie ou pas si on est millenial ou pas.

🏓Pong, 👾Space invader, ⍩⃝ Pac man, 🦍Donkey Kong, 🧩Tetris

Quelques titres :

• 2 couleurs noir et blanc — Pong [ taito, Arcade sport, 1972]
• 4 couleurs noir, blanc, vert, rouge — Space invader [ Atari inc., Arcade shoot ’em up, 1978 ]
• 8 couleurs noir, blanc, bleu 1, jaune, rouge, rose, bleu 2, orange — Pac man [ Namco , Arcade labyrinthe, 1980 ] Pac-Man is not in Unicode
• Retro gaming ! — Boom 1981! [ Donkey kong, 1981] [ Mario, Arcade plates-formes] [ 1942, Arcade scrolling shooter, 1984 ] [ Arkanoid, Arcade casse-briques, 1982] [ Tetris, Jeu de puzzle, 1984] etc…
• « indie game » — Beaucoup de couleurs ** Les jeux indépendants d’aujourd’hui !

Quand le boum s’est-il produit ? 1981 ? Quels sont les jeux les plus marquants ?
** Beaucoup de style, la courbe de progression a-t’elle atteint le plafond en 2022 ?

Approfondir ses connaissances ?

Il y a deux articles en fr et en, bien différents parlant de pixel art sur wikipedia :

https://fr.wikipedia.org/wiki/Pixel_art

https://en.wikipedia.org/wiki/Pixel_art

Et sur les Indies games :

https://fr.wikipedia.org/wiki/Jeu_vid%C3%A9o_ind%C3%A9pendant

https://en.wikipedia.org/wiki/Indie_game

Conclusion et notes

Le but de cet article était de dessiner un peu avec l’excellent soft aseprite :

https://www.aseprite.org/ une pépite, une usine à pixel avec d’incroyable outils !

D’utiliser l’astuce suivante sur les images pour les afficher en pixel perfect en affichant en 256×256 px des images qui ont un source de 32x32px, ajouter la classe pixelart :

.pixelart {
image-rendering: pixelated;
}

CSS

La valeur pixelated de la propriété image-rendering semble nécessaire, mais semble ne pas marcher sur smartphone.

1