II. Libresprite

1) introduction à Libresprite: 1

cf Annexes X.1, un schéma de l’interface de libresprite
sauvegarder: ctrl S (File>Save/Save As)
crayon: B (Pencil Tool)
gomme: E (Eraser Tool)
annuler: Ctrl Z; dés-annuler: Ctrl Y
couleurs (palette à gauche, sélecteur de couleurs en bas)
pipette: alt-clic ou I (Eyedropper Tool)
déplacement d’une image: V (Move Tool) ou ctrl cliquer-glisser
déplacement dans l’image (molette: zoom; espace cliquer-glisser ou clic molette glisser: se déplacer)
taille et forme de la brosse (menu du haut)

–
EXERCICE 1
faire un objet en 16*16 pixels (par exemple l’icône de la barre de vie du personnage principal du projet de fin d’année, un objet qui redonne de la vie, un icône de sort, une potion, etc.) –> pour se familiariser avec l’interface de libresprite –

pot de peinture: G (paint bucket)
formes géométriques: U (Rectangle/Ellipse Tool)
forme: D (Contour Tool)
échanger les couleurs d’arrière-plan et d’avant-plan (X)

–
EXERCICE 2
faire un personnage en 32*32 pixels (soit le perso de son projet de fin d’année, soit un autre personnage, soit un fanart, etc.)
–> pour se familiariser avec libresprite et pour s’entraîner à synthétiser des formes pour le pixel art
–

3) introduction à libresprite: 2

calques / layers (créer nouveau, supprimer, déplacer, visibilité)
preview window
nouveau document, ouvrir un document, etc.
sauvegarder et systeme de fichiers
couleurs (principale et secondaire, changement de couleur, palettes loading and saving)
changement de couleurs (Edit > Replace Color (sur le calque actif); palette > Edit Color (dans la palette))
sélectionner tout (ctrl A)
tout déselectionner (ctrl D)
copier couper coller (ctrl C ctrl X ctrl V)
Calques / Layers
- ajouter/supprimer/déplacer un calque
- opacité de calques
- modes de calques
  - overlay et/ou multiply pour les ombres
  - overlay et/ou normal à faible opacité pour la lumière
  - tester les autres pour voir ce qu’ils font
- verrouiller un calque
- utilisation
  - pour des éléments superposés séparés (pour la peau d’oignon)
  - pour des éléments secondaires (fumée de cigarette, queue de cheval, cape)
  - pour des éléments non-permanents (pour avoir plusieurs versions du même personnage, avec ou sans chapeau par exemple, ou avec ou sans tatouages)
  - pour des tests dont on pourrait décider, une fois finis, que finalement ils ne nous plaisent pas
Modes de brosse:
- normal (Simple Ink)
- transparence (Alpha Compositing)
- ne dessiner que sur des pixels opaques ou semi-opaques (Lock Alpha)
Aperçu / Preview
Suppr: tout effacer (sur le calque actif)
globalement, dans beaucoup de programmes graphiques:
- utiliser la souris et ctrl/alt/shift pour se déplacer,
- shift pour maintenir les proportions (par exemple quand on redimensionne)
- ctrl C copier, ctrl V coller, ctrl X couper, ctrl Z annuler
- ctrl S sauvegarder, ctrl shift S sauvegarder sous
- ctrl W fermer la fenêtre, ctrl Q quitter
- ctrl A tout sélectionner
- shift: ajouter à la sélection

–
EXERCICE 3
faire des variantes d’ennemis ou de pnj avec des calques sur la même base (vêtements ou objets additionnels ou attaques feu/eau ou etc.)
–> pour se familiariser avec les calques
–

4) introduction à libresprite: 3

outils de sélection (premier icône tout en haut des outils; laisser appuyer pour voir les différents outils)
- Shift: ajouter à la sélection
- Shift Alt: enlever de la sélection
Paint Bucket tool (la goutte d’eau) (G)
- options (dans la barre du haut): Tolérance, Contiguous, plus d’options
outils de déplacement (V) et déformation (ctrl T) (le pixel art en général n’aime pas être redimensionné à la main, ni pivoté)
redimensionnement
- redimensionnement de l’image (Sprite > Sprite Size, Method: nearest neighbour, utiliser un multiple entier de la taille actuelle (200%, 300%, pas 212%))
- redimensionnement du canevas (Sprite > Canvas Size)
- Couper les bords de l’image (Sprite > Trim)
les courbes doivent être régulières; le nombre de pixels doit faire par exemple 3,2, 2,1,2,2,3 et non 3,1,2,1,3,2,3

–
EXERCICE 4
faire des variantes d’ennemis ou de pnj en modifiant leur couleur, et les exporter en taille *3
–> pour utiliser les outils de sélection, de couleur, de redimensionnement –

5) gestion ressources

noms de fichiers: a-z, A-Z, 0-9, -, _ sont sûrs, éviter ponctuation, /, \, accents et symboles (cf une source au pif)
organisation de répertoire et conventions de nommage communes par projet pour tout le monde, sous-répertoires.
exports .ase incrémentiels (noms descriptifs, numérotés, dans un dossier à part éventuellement, par exemple: utiliser l’option “File>Save” (ctrl S) et/ou “File>Save As” avec le nom MonPersonnage.ase, dès qu’on y pense (toutes les cinq minutes), et utiliser l’option “File > Save Copy As” dès qu’on est à une étape importante: MonPersonnage-01-silhouette.ase, MonPersonnage-02-couleur.ase, etc.)
- /!\ si sauvegarde en plus basse qualité, d’abord sauver sous un autre nom puis réduire la qualité
essayer de se créer des ressources réutilisables (tilemaps, icones, UI)
git lfs (au 2nd semestre, cours de Outils informatiques collaboratifs (git))
plusieurs supports de sauvegarde des fichiers importants

6) les formats graphiques

Ici, j’appelle “fichier de travail” un fichier contenant toutes les informations utilisées pour l’édition d’un fichier, et “fichier de lecture” un fichier utilisé uniquement pour le visionnage du fichier (plus largement lisible et plus léger).
Un fichier de travail est généralement lisible uniquement par le logiciel qui l’a produit, alors que la plupart des fichiers de lecture dont je parle ici sont lisibles sur les lecteurs de fichier par défaut et sur les pages web.
Même une fois le travail fini, il est mieux de toujours conserver un fichier de travail de ce qu’on a fait.

Formats 2D principaux pour ce cours-ci:

.jpg: très léger, forte compression (pas très bonne qualité), ne l’utiliser que comme fichier d’export final, et jamais pour le pixel art (la compression abîme l’image), lisible partout, ne contient jamais de transparence ni de calques
.png: assez léger, lisible partout, très bon format pour l’export final de pixel art, très léger s’il y a peu de couleurs ou de grandes plages de la même couleur (typiquement: le pixel art), peut contenir de la transparence mais pas de calques
.ase: fichier de travail de libresprite, lisible uniquement par les ordinateurs ayant libresprite installé, pas de compression (très bonne qualité), lourd, peut contenir de la transparence, des calques, des animations, etc.

autres:

.gif: utilisé pour des animations de petite taille (l’animation se lance automatiquement dans la plupart des lecteurs et des pages web), peut contenir de la transparence. À qualité visuelle équivalente, souvent plus lourd qu’un autre format vidéo bien compressé, mais est traité comme une image, donc ne nécessite pas de lecteur vidéo pour être lu, ce qui est parfois pratique. Pas de son.
.avi, .mov: fichier vidéo, souvent compressé
.mkv: fichier vidéo open source, souvent compressé, pouvant contenir plusieurs pistes audio et de sous-titres différentes
.xcf: fichier de travail de gimp
.psd: fichier de travail de photoshop
.kra: fichier de travail de krita
.pdf: utilisé pour des documents à plusieurs pages et/ou avec des charactères écrits

7) un chouilla de théorie des couleurs

éviter a priori les couleurs trop saturées
- éviter encore plus deux complémentaires très saturées côte-à-côte; ça brûle les yeux
  - les couleurs complémentaires sont celles qui sont opposées sur le cercle des teintes: rouge et vert, violet et jaune, bleu et orange
- mais pour faire ressortir un détail (de petite taille) et attirer l’attention, on peut saturer davantage ses couleurs (sur un petit espace)
  - ou utiliser une couleur complémentaire à celles généralement utilisées dans le niveau
pour info: notre perception des couleurs change en fonction de celles qui les entourent
source
roues des couleurs
source

8) Recap général

ombres et lumières de teintes différentes (typiquement un vert clair sera plus jaune, un bleu clair plus cyan, et un rouge clair ou un jaune foncé plus orange)
- choisir la complémentaire de la couleur de base pour les ombres (des ombres marron foncé pour un personnage bleu ou vert, violettes pour un personnage jaune, etc.) les fait ressortir davantage
- mais il ne faut pas non plus que les couleurs des ombres changent à chaque objet
styliser et simplifier
- choisir consciemment ce qu’on représente
- il n’est pas toujours nécessaire, par exemple, que les personnages aient une bouche
partir d’une forme simple (carré, rond, triangle) et sculpter avec le pinceau et la gomme pour les détails
- commencer avec une silhouette monochrome pour être sûr qu’elle soit bien lisible
PENSER À REGARDER LA PREVIEW RÉGULIÈREMENT; le pixel art n’est pas très lisible de très près, c’est normal, il faut juste qu’il soit lisible quand on joue
ORGANISATION DU PROJET (couper en petits bouts finis) (cf Annexes X.2b)

99) plus de ressources (principalement en anglais)

un article écrit plus théorique de l’artiste de Celeste
comment paramétrer godot pour le pixel art (écrit)
le canal youtube de Brandon James Greer
un tutoriel général qui contient des trucs intéressants, notamment IV., parties Banding, Pillow-shading, Noise, et V. Color ramps et Hue Shifting
un autre tutoriel général avec des concepts intéressants, notamment de bonnes explications sur les choix de couleurs et les contours
plein de tutoriels format gif, courts et efficaces: https://blog.studiominiboss.com/pixelart
des astuces pour libresprite ou aseprite
l’aide officielle de asprite

100) quelques ressources en français

exemples de différents styles graphiques en pixel art
un tweet de sy0sa
structure d’un crâne humain
proportions du torse
une traduction d’extraits du tuto de Arne (http://androidarts.com/pixtut/pixelart.htm):
- Palettes:
  Sauf à travailler avec de très petites palettes (de 3 couleurs par exemple), on aura probablement besoin de mettre en place des rampes de couleurs (dégradés) à un moment. Quand on crée sa rampe je déconseille de mélanger du noir et du blanc à la couleur de base pour créer les deux bouts de la rampe. Dans la nature, la teinte d’une couleur change souvent avec la lumière, donc une rampe noir-rose-blanc peut sembler terne et artificielle. En plus, un objet, comme un visage par exemple, a souvent des teintes différentes selon les endroits. Pour de la peau, j’aime faire l’ombre un violet sombre un peu gris, garder le ton moyen orange, et la lumière presque jaune. Dans les scènes d’extérieur je mélange aussi des tons gris plus froids pour l’ombre (à cause de la lumière du ciel) et du jaune dans les couleurs claires (à cause de la lumière chaude du soleil)
- Fluo:
  Il existe de nombreuses couleurs, mais certaines sont plus facilement utilisables que d’autres, particulièrement quand on fait des trucs réalistes. J’éviterais de construire des ramples entières à partir de couleurs très saturées, sauf si on fait un travail sur le fluo ou expérimental. Ça ne veut pas dire que toutes les couleurs devraient être grises ou pastel; les couleurs très saturées peuvent être très efficaces pour ajouter une dimension supplémentaire à certains points, mais je pense que leur fréquence dans la palette devrait être proportionnelle à leur utilisation. Ici j’ai dessiné une petite créature fluo étrange parce que ça correspond à la palette. Pour des visages ou de la nature je devrais avoir une approche plus artistique.
- Contours:
  Un excès de contours noirs peut naître d’une sorte de compulsion à marquer et séparer chaque détail. Quand les couleurs sont entourées de noir elles ont l’air plus sombres et ternes. On perd aussi de l’espace et tout le personnage est aplati parce que les lignes poussent tous les détails au même plan (surtout si les rampes de couleur utilisées sont peu contrastées). Une autre manière de séparer les détails est d’utiliser le contraste et des lignes additives plus claires (les lignes noires sont soustractives). Le style que j’utilise a l’avantage d’un mélange de lignes soustractives, de lignes perdues (suggérées mais pas explicitement dessinées) et de lignes additives.
- Contours au sol:
  Une autre considération quand on travaille avec des contours noirs est que les lignes à la base de la forme ressemblent un peu à une ombre et peuvent donner l’impression que la figure entière flotte. Si on enlève les contours au contact avec le sol, la forme semble solidement posée.
  Si on enlève tout le contour on gagne plus de place pour les détails internes, mais après il faut se reposer sur le contraste avec le fond pour la lisibilité de la silhouette.
- Lignes:
  Des lignes de pixels posées rapidement semblent irrégulières et désordonnées, un peu comme un croquis au crayon d’un débutant qui repasse plusieurs fois sur les lignes (lignes barbelées). Certains détails utilisent des lignes irrégulières, mais en général on voudra utiliser des courbes de type 1, 1, 2, 3, ou 2, 1, 2, ou quelque chose du genre. Dans l’ombre des objets je remplis parfois les diagonales, mais parfois ça peut ne pas sembler très propre.
- Bruit:
  Du bruit et des pixels inutilement orphelins (non reliés à d’autres pixels de la même couleur), c’est ce qu’on obtient quand on essaie d’incorporer trop de détails. Il est tentant d’en inclure autant que possible, mais il faut considérer l’échelle du pixel art et comment être clair, et aussi la facilité d’animation (des détails lisibles sur une image pourraient être difficiles à dupliquer sur l’image suivante, légèrement tournée). L’artiste connaît peut-être l’intention derrière chaque pixel, mais le joueur généralement pas, et les verra donc probablement comme du bruit (et l’artiste aussi en y retournant plus tard).
  Cela dit, il est intéressant de conserver quelques endroits avec plus de bruit pour ajouter des variations dans la texture.