Graphismes 2D pour les programmeurs

Voici une autre demande (ou un ensemble de demandes) intégrée dans un tutoriel. Comment créer des graphismes vectoriels pour une petite image, de par exemple 48 x 48 pixels.

Un des avantages des graphismes vectoriels est la possibilité de redimensionnement sans perte. Vous pouvez facilement créer une image et la redimensionner sans sacrifier la qualité. Il n'y aura pas de bordure déchiquetée ou de bloc hideux lorsque vous agrandirez d'un facteur de dix. Cela fonctionne aussi parfaitement dans l'autre sens en créant des fichiers source qui peuvent être utilisés pour des images de jeux plus petites.

Pour moi, c'est bien plus facile de créer quelques cercles et boîtes que de pixeliser un personnage à partir de rien. Il est alors possible de l'animer dans Inkscape et de l'exporter vers un fichier bitmap afin de travailler dessus avec un outil pour bitmap (comme Gimp) après coup.

J'adore travailler avec des fichiers deux fois plus grands que l'image de sortie pour avoir une zone de travail plus grande, car je trouve que l'algorithme de redimensionnement dans les outils pour bitmap fonctionne mieux qu'une exportation d'une image réduite à partir d'Inkscape.

Les principaux éléments sont là et il est temps de vérifier à quoi notre petit personnage ressemblera en réduit dans le jeu. Je veux premièrement vérifier si les contours seront corrects dans une résolution de 48 x 48, s'ils deviendront trop fins pour être lisibles ou encore s'ils deviendront trop gros, recouvrant l'intégralité du personnage.

Maintenant nous avons notre personnage et il est exporté en fichier bitmap.

Vous devriez obtenir quelque chose comme : une image de 96 x 96 pixels avec un fond transparent et un petit gars plein de gloire. Grâce à l’antialiasing, il ne semble pas si différent de notre version vectorielle.

Maintenant, ouvrez le fichier dans un outil pour les bitmap (tel que Gimp).

Dans Gimp, réduisez la taille avec « Image/Echelle et taille de l'image » à 48 x 48 et vous devriez obtenir quelque chose comme ça. Il y a toujours l'antialiasing arrondissant les bordures et adoucissant les couleurs.

Si vous cherchez un aspect plus pixelisé, je vous suggère de réduire le nombre de couleurs (par exemple à 16) et de retoucher manuellement l'image, retirer les contours antialiasés et de redessiner les lignes extérieures pour les rendre régulières.

Cela pourrait être un sujet pour un autre tutoriel – et je vais l'ajouter à ma liste de tâches. Pour l'instant, j'espère que vous avez apprécié ce tutoriel et que vous êtes créatif avec Inkscape.

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

Vous pouvez commenter cet article ou présenter vos réalisations sur le forum.