Graphismes 2D pour les programmeurs

Travailler de façon optimale pour les bitmap

Chris Hildenbrand

Traducteur

Alexandre Laurent

Apprenez à créer des graphismes vectoriels prévus pour être efficacement exportés en images bitmap.

Commentez

- Titre : Graphismes 2D pour les programmeurs

- Auteur : Chris Hildenbrand

- Traducteur : Alexandre Laurent

- Parution : 5 février 2015

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Travailler de façon optimale pour les bitmap

- II. Remerciements

- III. Commenter

I - Travailler de façon optimale pour les bitmap

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.

Commencez avec un carré.

Définissez la largeur et la hauteur à deux fois la taille du bitmap (pour une manipulation plus simple et une meilleure exportation).

Tous les éléments doivent rester dans le cadre afin de rentrer dans l'image bitmap. Verrouillez ce calque.

Créez un nouveau calque pour travailler dessus.

Ensuite, créez un petit personnage en commençant par un cercle pour la tête.

Dupliquez la forme et réduisez-la un peu pour créer un reflet.

Ensuite, créez un cercle déformé pour le corps et dupliquez-le pour le cou.

Les jambes sont aussi issues d'un cercle déformé avec un nœud supplémentaire pour la base.

En déformant encore plus les cercles, on obtient la chaussure (symétrie pour l'autre côté, ainsi que la jambe).

Dupliquez la jambe et déplacez le nœud inférieur droit vers le bas pour former le bras. Formez un coin avec le nœud inférieur gauche pour créer le poing.

Ajoutez un autre cercle déformé pour la manche et placez les bras avec le corps. Copiez et faites une symétrie pour le côté gauche.

Trois autres cercles pour les oreilles. Créez une « forme de banane » et réduisez-la pour correspondre à la largeur du tracé.

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.

Il est maintenant temps de faire un export rapide de vérification. Débloquez le calque de base (nous souhaitons aussi exporter la boite).

Sélectionnez tous les éléments et exportez-les avec « Fichier/Exporter en bitmap ». Choisissez l'option « Sélection »

Définissez la taille du bitmap à 96 x 96. Inkscape va choisir le PPP adéquat. C'est facilement rectifiable dans un outil pour bitmap.

Ouvrez l'image dans un outil pour bitmap et redimensionnez-la à 48 x 48 pixels. Vérifiez l'image et corrigez le tracé si besoin.

Utilisez l'outil de lignes droites pour ajouter des cheveux au personnage.

Sélectionnez tous les nœuds de cheveux et transformez-les en courbes et coins. Ajustez-les pour que cela soit joli.

Ajoutez quelques rectangles arrondis (de la taille du tracé pour les yeux) et quelques cercles pour le nez, la bouche et les joues.

Débloquez le calque inférieur et sélectionnez le carré. Définissez le remplissage à « pas de remplissage ».

Sélectionnez tous les éléments et exportez en bitmap (Ctrl + Maj + E).
Cette fois, le bitmap a un fond transparent.

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

J'ai passé l'ajout de quelques détails supplémentaires (par exemple, la ligne d'ombrage dans les cheveux (qui est simplement une copie des cheveux sans le tracé et colorié avec un violet sombre et semi-transparent)) et les reflets dans les cheveux (qui ne sont que des gribouillis avec l'outil de tracé à main levée).

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.

Certains moteurs (plus spécifiquement pour iOS et Android) nécessitent un PPP (Point Par Pouce ou une résolution x et y) défini. J'ai trouvé compliqué d'ajuster mes graphismes dans Inkscape pour les exporter directement avec le PPP correct. À la place, j'ai changé le PPP dans l'outil pour les bitmap lorsque j'en avais besoin. Dans Gimp, cela se fait avec l'outil « Échelle et taille de l'image ». Vous pouvez définir la résolution x et y (par exemple 73 PPP pour les applications iOS) lors du redimensionnement.

II - Remerciements

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.

III - Commenter

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