Le graphe de Style
Chaque réglage de l’étape Style est un bouton sur une passe : l’ombrage, les traits, les arêtes du maillage, le nettoyage, les couleurs dans lesquelles sort la planche. L’étape Style est ce graphe : les passes sous forme de boîtes reliées par des liens, chacune montrant l’image qu’elle produit et portant ses propres réglages, si bien que vous voyez le traitement et pas seulement son résultat. Vous pouvez changer l’ordre des passes, en faire passer une par un masque, ou en mélanger deux.
La chaîne d’images, des couleurs du modèle à la planche finie, est l’explication du pipeline. Le bouton en forme d’œil les désactive sur une machine lente.
Vous n’avez pas à travailler dans le canevas : choisir un nœud affiche les mêmes réglages dans l’Inspecteur à droite, donc un curseur est toujours à portée de main. Si aucun nœud n’est choisi, l’Inspecteur affiche le nœud Palette, qui porte les couleurs.
Styles. Un projet a autant de Styles qu’il le souhaite, chacun sous son nom avec son propre graphe de Style, aucun n’appartenant à une caméra. Celui affiché sur le canevas est celui choisi dans la liste Styles ou dans le sélecteur Style de l’en-tête de la fenêtre, et il dessine la caméra et l’action de l’en-tête. Nouveau Style sous la liste crée une copie de celui affiché, nommée d’après lui (Pixel Art 2). Le menu du clic droit d’une ligne le renomme, le duplique, le supprime (Supprimer NAME…, qui demande d’abord confirmation : le premier aussi, tant qu’il en reste un autre), Enregistrer le kit… (Enregistrer le Style comme kit) l’écrit sous forme de kit, avec son graphe et sa palette, et Utiliser un kit… (Utiliser un kit de Style) fait d’un Style enregistré depuis un autre projet un Style de celui-ci. Faites glisser une ligne vers le haut ou le bas pour réordonner la liste. Enregistrés dans la bibliothèque des pipelines, ils sont listés dans la bibliothèque de nœuds sous Mes pipelines ; ceux du projet sont sous Pipelines, à côté du nœud Pixeliser.
Chaque graphe a sa bibliothèque de nœuds sur sa propre gauche, quand son panneau est assez large : les graphes de scène, d’action, de Style et d’asset de la même façon. Elle liste tout ce que le graphe peut contenir, les entrées et les sorties d’abord, puis le reste par groupe, avec une ligne sur ce que fait chacun ; tapez dans Rechercher pour filtrer. Cliquez sur un élément pour l’ajouter là où le graphe le place, relié — ou faites-le glisser sur le canevas pour le poser là où vous le lâchez.
Un projet qui ne modifie jamais aucun nœud n’enregistre toujours aucun graphe et se rend exactement comme avant.
Le graphe de départ
C’est le propre pipeline de Pixor, relié :
De gauche à droite dans l’ordre du travail, si bien que les liens vont vers l’avant et se croisent le moins possible.
-
Caméra est le point de départ du graphe : la caméra pour laquelle ce Style dessine. Chaque caméra qui pointe vers le Style exécute le graphe une fois, depuis son propre côté.
-
Rendu en calques prend la caméra : ce qu’elle a rendu de l’action à cette image, avant toute étape pixel art, avec chacun de ses huit calques sur une sortie à part — albedo, normals, depth, part, material, coverage, key light, shadow. L’ombrage lit normals et shadow, les traits depth, normals et part. C’est un groupe d’atomes : ouvrez-le et c’est le cadre d’un nœud Rendre (une image en calques) et de huit nœuds Calque, chacun extrayant de l’image le calque choisi sur lui. Les liens montrent qui lit quoi, et ils sont réels : reliez un Champ de bruit au shadow de Lumière et ombre et l’ombre devient ce bruit ; non reliée, une passe lit directement le rendu de la caméra.
-
Palette est l’endroit où l’on choisit les couleurs de l’image : combien de couleurs de base et de bandes de lumière, le tramage, une palette à elle, le décalage de teinte. Sortie ne porte rien : c’est l’image.
-
Lumière et ombre transforme la lumière en un cran sur la rampe de couleurs de chaque pixel. C’est un groupe d’atomes que vous avez aussi, dans l’ordre : Bandes de lumière (la bande de la lumière principale dans laquelle tombe chaque pixel, tramée aux bords, maintenue d’une image à l’autre près d’un bord), Lumière du monde (lampes, lignes de vagues, ombres de nuages, rayons de lumière, écume du rivage), Reflets, Lueur, Décalages de rampe (et le cycle de couleurs), puis Couleurs d’ombrage, qui transforme l’ombrage en couleurs. Le lien entre eux transporte un shading : la rampe de chaque pixel et son cran sur celle-ci.
-
Encrage trouve la silhouette, les traits intérieurs et les plis. C’est aussi un groupe : Silhouette, Arêtes (traits intérieurs, plis, pliures convexes), Nettoyer les traits (petits fragments supprimés, coins et doublons retirés) et Couleurs des traits, avec un lien traits entre eux.
Les paramètres d’un groupe sont les réglages des atomes qu’il contient. Sur le nœud ou depuis un script, en régler un le règle sur chaque atome intérieur qui le porte — pxr graph set my.pixor --node light-and-shade --set dither=0.5, --node line-work --set min_inner_line=3 — si bien qu’un groupe que vous construisez vous-même à partir d’atomes se règle comme ceux fournis. Double-cliquez sur un groupe (en dehors de son titre), ou appuyez sur la flèche de son titre, pour l’ouvrir et voir, ou relier autrement, ce dont il est fait.
- Fil de fer apparaît aussi quand le look fil de fer est activé, et entre dans la troisième entrée de Combiner. C’est un groupe de deux atomes : Chemins des liens (là où les arêtes du maillage traversent l’image, et si une arête située derrière la surface est omise, pointillée ou plus sombre), puis Couleurs des fils.
- Combiner les superpose, décide de ce qui se trouve sous les fils et affine les traits les uns par rapport aux autres.
- Nettoyage supprime les pixels isolés et adoucit les coins des traits. C’est un groupe de deux nœuds de base : Pixels isolés (les suites d’une couleur trop petites pour être gardées, et combien de passes les cherchent), puis Adoucir les coins (quels coins des traits descendent d’un cran sur la rampe).
- Sortie est ce que produit le graphe : le sprite de cette caméra à ce moment de l’action, que les nœuds Sprites du graphe d’asset découpent ensuite en listes de sprites. Il ne porte aucun réglage ; les couleurs sont sur la Palette qui le précède.
Ces nœuds appellent exactement le même code que le pipeline : le graphe de départ produit donc exactement les mêmes pixels qu’avant. Les tests de référence de Pixor sont rendus des deux façons et comparés, à chaque fois.
Travailler dedans
Tous les graphes fonctionnent de la même façon — les graphes de scène, d’action, de Style et d’asset : la même barre, le même menu du clic droit, les mêmes touches et les mêmes gestes. Ce tableau les couvre tous, dans les quatre. Chaque modification est une étape de l’historique (Ctrl+Z l’annule), déplacement d’un nœud compris ; les touches fonctionnent tant que le pointeur est au-dessus du graphe.
| Faire | Vers |
|---|---|
| Glisser avec le bouton du milieu (ou Alt et le bouton gauche) | déplacer la vue |
| Molette (ou pincement) | zoomer autour du pointeur, du quart de la taille au double, un cran du même pas que dans la Vue 3D et la Vue 2D ; Cadrer et le premier affichage d’un graphe l’ajustent |
| Cadrer, ou Origine | ramener tous les nœuds à l’écran |
| Cliquer sur le titre d’un nœud | le choisir : ses réglages apparaissent aussi dans l’Inspecteur, et le centre montre ce que produit ce nœud ; là où des nœuds se chevauchent, celui du dessus |
| Maj+clic sur un nœud | le choisir aussi, ou le relâcher |
| Glisser le fond | un cadre : chaque nœud qu’il touche est choisi (Shift garde ceux déjà choisis) |
| Glisser un nœud | le déplacer, avec chaque nœud choisi |
| +, ou clic droit sur le canevas › Ajouter un nœud | la liste de la bibliothèque de nœuds, par groupe : ce qui est choisi y entre ; depuis le clic droit, là où vous avez cliqué. Utiliser un kit… (Ajouter un kit comme groupe) en haut insère un kit sous forme d’un seul groupe |
| Une ligne de la bibliothèque, à gauche | cliquez dessus pour l’ajouter là où le graphe le place, relié ; faites-le glisser sur le canevas pour le placer là où vous le lâchez |
| Glisser du point rond à droite d’un nœud vers un point à gauche d’un autre | les relier ; pendant le glissement, chaque point compatible avec le lien est entouré |
| Relâcher un lien sur une zone vide de la toile | un menu des nœuds qui conviennent : tapez pour le filtrer, Entrée prend le premier |
| Éloigner le point d’une entrée | le délier ; relâchez sur une autre entrée pour y déplacer le lien |
| Cliquer sur un lien, puis Suppr | le couper ; le lien sous le pointeur (ou celui choisi) affiche aussi un × en son milieu qui le coupe en un clic |
| F2, ou un double-clic sur le titre d’un nœud | le renommer : son propre nom sur son titre (celui d’un groupe est son nom) ; vide, il reprend le nom de ce qu’il est |
| Ctrl+D | dupliquer les nœuds choisis, en dessous d’eux, reliés comme eux et lisant ce qu’ils lisent |
| Ctrl+C, Ctrl+V | copier les nœuds choisis, et les coller sous le pointeur — dans n’importe quel graphe du même type : un autre Style, une autre action, un autre pipeline d’asset, l’intérieur d’un groupe. Les nœuds d’un type de graphe ne vont pas dans un autre, et la ligne d’état le signale |
| − (Supprimer le nœud choisi), ou Suppr | supprimer le nœud choisi ; ce qui le lisait lit ce qu’il lisait, une chaîne reste donc une chaîne |
| Grouper, ou Ctrl+G | les nœuds choisis (et celui qui est sélectionné) deviennent un seul groupe, ouvert |
| La flèche à droite du titre d’un groupe, ou un double-clic sur le groupe hors de son titre | l’ouvrir sur place, ou le replier |
| Enregistrer le kit… | le groupe choisi comme kit, ou — si aucun groupe n’est choisi — le graphe entier (le titre de la boîte de dialogue indique lequel) |
| Nettoyer | disposer à nouveau tous les nœuds, de gauche à droite dans l’ordre où se fait le travail |
| Note | placer une note autour du nœud choisi, ou dans la vue |
| L’œil, ou clic droit › Images des nœuds | afficher ou masquer l’image que produit chaque nœud |
| Clic droit sur la toile | tout ce qui précède, avec leurs raccourcis, et ce qu’un graphe a en propre : N’afficher que ce que définit un préréglage, Afficher les réglages de chaque nœud et Revenir au graphe du préréglage du graphe de Style ; Revenir à une seule copie du graphe de scène ; Revenir à une seule planche du graphe d’asset |
Ce qu’est l’image d’un nœud, graphe par graphe : dans le graphe de Style, les pixels qu’il produit ; dans le graphe de scène, les objets qu’il transmet, vus de dessus ; dans le graphe d’action, ce que fait la sortie du nœud sur un passage (ci-dessous) ; dans le graphe d’asset, les images que transmet une liste, ou la planche ou le fichier qu’il écrit.
Dans le graphe d’action, chaque type de nœud a l’image qui en dit le plus sur lui :
| Nœud | Son image |
|---|---|
| Clip, Images clés, Routine, Action | le modèle à quatre instants régulièrement espacés de ce qu’il joue, de gauche à droite — une boucle sur un cycle, le dernier instant juste avant qu’elle ne recommence — le tout vu par une seule caméra qui contient chaque pose, sous l’angle de la caméra affichée |
| Rotation, Bob, Balancement, Pulsation, Glisser, Onde, Bruit, Rampe, Temps de la scène | une courbe de chaque nombre qu’il change vraiment, de sa valeur la plus basse à la plus haute : une rampe pour une Rotation, une vague pour un Bob ; les nombres qui changent de la même façon forment une seule ligne (les trois tailles d’une Pulsation) |
| Filtres, Appliquer à, Sortie, groupes | sous la forme de ce qu’ils transmettent : les poses quand cela déplace plus de trois nombres (un clip, un clip fusionné avec une rotation, tenu par deux), une courbe quand c’est un seul mouvement (un Palier sur une Rotation dessine son escalier) |
Les courbes sont colorées par type — positions en bleu, rotations en ambre, tailles en vert, tout le reste en rose —, six au plus, celles qui vont le plus loin ; avec le pointeur sur l’image, chaque ligne est nommée et le nombre de courbes restantes est indiqué. Les poses cèdent la place aux courbes quand ce qui bouge ne fait pas partie du modèle (une caméra, la lumière). Un nœud qui ne change rien — un Constant, un clip absent — affiche Aucun mouvement à la place de son image. Une ligne sur une courbe, ou une barre sous une pose, suit le temps de la Timeline pendant la lecture.
Les images sont dessinées par le propre rastériseur CPU de Pixor, en petit, sur un thread à part, celle du nœud choisi en premier : le graphe ne les attend jamais. Un nœud garde l’image qu’il avait jusqu’à ce que la suivante soit prête, donc rien ne clignote ; une modification qui ne change pas ce que transmet un nœud ne le redessine pas. Un nœud prend environ 25 ms avec le chevalier et 40 ms avec le modèle FBX humanoïde de test : vingt nœuds sont donc tous dessinés moins d’une seconde après une modification.
Les notes sont des cadres derrière les nœuds, avec vos propres mots en haut : à quoi sert cette partie du graphe, quoi essayer ensuite. Tapez directement dedans. La poignée en haut à gauche la déplace avec tous les nœuds qu’elle contient : une note sert donc autant à garder ensemble une partie d’un grand graphe qu’à l’expliquer ; le coin en bas à droite la redimensionne, et le moins la supprime (les nœuds restent). Une note ne change aucun pixel.
Pendant qu’on fait glisser un curseur dans un nœud, l’image de ce nœud est refaite en premier, puis celle du nœud choisi, puis les autres dans l’ordre — le changement apparaît donc tout de suite là où vous regardez.
Chaque type de lien a sa propre couleur, si bien que ce qui va où se voit sans lire : un calque de couleurs de palette, un masque, un nombre par pixel, une normale, une rampe, une palette, une caméra, un rendu, un ombrage, des traits, des chemins de liens, et les valeurs (oui/non, nombre, texte). Une entrée vide qui a besoin de quelque chose est cerclée de rouge, et la ligne du bas dit ce qui ne va pas. Un lien du mauvais type, ou un lien qui ferait tourner le graphe en rond, est refusé quand vous le relâchez.
Ce que sont les nœuds
La bibliothèque et le menu Ajouter un nœud les listent sous ces groupes :
| Grouper | Nœuds |
|---|---|
| Entrées | Caméra, Rendre, Calque (albédo, normales, profondeur, identifiant de partie, identifiant de matériau, couverture, lumière principale ou ombre d’un rendu), Image, Lumière d’appoint, Mouvement, Tramage de surface, Phase de boucle, Rampe de la couleur, Position sur la rampe, les canaux de matériau Métallique, Rugosité, Émissif, Occlusion, Transparent, et Pixels de bord (là où les arêtes propres du maillage traversent l’image devant tout le reste) |
| Passes | Ombrage, Traits, Arêtes du maillage, Combiner, Nettoyage, Vers la palette — chacun une passe entière en un seul bloc |
| Ombrage | Bandes de lumière, Lumière du monde, Reflets, Lueur, Décalages de rampe, Couleurs d’ombrage, et la finition dessinée à la main : Formes, Retirer les bandes, Éclat, Adoucir les bandes, Hachures |
| Traits | Silhouette, Arêtes, Nettoyer les traits, Couleurs des traits, Bords de couleur, Épaisseur des traits |
| Fil de fer | Chemins des liens, Couleurs des fils |
| Nettoyage | Pixels isolés, Adoucir les coins, Nettoyer la silhouette |
| Couleur | Palette, Couleur la plus proche (chaque pixel prend la couleur de la palette la plus proche de la sienne, sans tenir compte des rampes), Échelonner la rampe, Palier là où c’est masqué, Aplatir, Tramage de palette, Carte de rampe, Couleurs des tuiles, Mouvement sous-pixel |
| Masques | Seuil, Par partie, Par matériau, Par orientation, Bruit, Motif, Pixels pleins, Non, Et, Ou |
| Mélanger | Choisir par masque, Mélange par tramage, Calque par-dessus |
| Maths | Nombre, Ajouter, Soustraire, Multiplier, Diviser, Plus petit, Plus grand, Sans signe, Partie fractionnaire, Nombre entier, Tenue entre, Remapper, Mélanger, Palier à, Transition douce, Concordance, Longueur, Comme nombre, Champ de bruit (le bruit que le masque Bruit seuille, sous forme de nombre) |
| Espace | Décalage, Flou, Pente, Grossir, Rétrécir, Cavité — chacun indique jusqu’où il regarde autour d’un pixel, ce qui garde les raccords de tuiles exacts |
| Valeurs | voir Chaque propriété est une entrée |
| Groupes | Entrée et Sortie, les ports à l’intérieur d’un groupe |
| Sorties | Sortie, CRT (une image à regarder, jamais un sprite) |
Au-dessus, la bibliothèque liste Pipelines (les Styles du projet, et Pixeliser), Mes pipelines et Mes nœuds.
Une image est un calque à vous : un grain de papier, un motif, un ciel peint ou un logo, chaque pixel prenant la couleur de la palette la plus proche de celle de l’image, sur les pixels propres au sprite à partir de l’endroit où elle est placée, ou en mosaïque sur toute l’image. Choisir par masque la pose où vous voulez, Calque par-dessus la place au-dessus. L’image est lue une fois et gardée dans le nœud, si bien qu’un look enregistré ou un kit l’emporte avec lui. Depuis un script :
pxr graph add my.pixor --node picture --set file=logo.png --set tile=false # node 8 on a new project
pxr graph add my.pixor --node layer-over --in under=4 --in over=8 # node 9: the logo over the palette's frame
pxr graph wire my.pixor --from 9 --to 5 --slot layer # into the Output
Le mélange ne crée jamais de nouvelle couleur. Pixor travaille dans l’espace des indices de palette, si bien qu’un mélange choisit un pixel ou l’autre ; il n’en fond jamais deux en un troisième absent de la palette. Mélange par tramage dispose A et B selon un motif ordonné, comme le fait un pixel artist pour fondre.
Une finition dessinée à la main
Certains nœuds font ce qu’un pixel artist fait à la main une fois l’ombrage en place. Aucun ne figure dans le graphe de départ ; ajoutez ceux que vous voulez. Ceux qui agissent sur un ombrage se placent entre Décalages de rampe et Couleurs d’ombrage (ouvrez le groupe Lumière et ombre), dans l’ordre ci-dessous ; ceux qui agissent sur des traits entre Arêtes et Couleurs des traits (ouvrez Encrage). Chaque motif qu’ils posent reste sur la surface : il bouge avec le modèle au lieu de ramper dessus, et rien de ce qu’ils produisent n’est hors palette — sauf CRT, exprès. Ceux qui décident selon ce qui entoure un pixel ou selon sa place sur la surface (Formes, Éclat, Hachures, Retirer les bandes) gardent, là où la surface n’a pas bougé depuis l’image précédente, ce qu’ils avaient décidé alors, si bien qu’ils n’ajoutent aucun scintillement ; un clip en boucle passant par un graphe qui en contient un fait d’abord un tour, pour que sa première image suive sa dernière.
| Nœud | Relier | Ce qu’il fait | Réglages |
|---|---|---|---|
| Formes | ombrage → ombrage | Les formes de lumière et d’ombre nettoyées comme des formes dessinées : une forme d’une bande plus petite que Le plus petit prend la bande dans laquelle se trouve la majeure partie de ce qui l’entoure, puis chaque pixel prend la bande de la plupart des pixels situés à moins de Lisse de lui, ce qui retire les langues de cette largeur et lisse les bordures. Seuls les pixels d’une même partie et d’une même rampe comptent les uns pour les autres, et une bande a besoin de la majeure partie de ce qui entoure un pixel, si bien qu’une tache d’une couleur à part est laissée à Pixels isolés. Un pixel dont la surface n’a pas bougé et dont la lumière est la même garde la bande qu’il avait à l’image précédente. | Le plus petit, Lisse |
| Retirer les bandes | ombrage (+ traits) → ombrage | Un bord de bande qui longe la silhouette, le bord d’une partie ou un trait à distance constante — l’effet « coussin » — est décalé d’un pixel par segments, comme le ferait une main : à la moitié, deux pixels sur quatre le long du bord, comptés sur la surface pour que les décrochements bougent avec elle. | Dans (pixels depuis le bord), Quantité |
| Éclat | ombrage (+ masque, + lumière) → ombrage | Un reflet délibéré sur chaque partie (la partie du rendu, où qu’elle soit dans l’image) là où le masque est actif, sur son pixel le plus lumineux dans la bande supérieure, maintenu là où il était à l’image précédente quand deux sont aussi lumineux ; Par partie en demande davantage, chacun à au moins Écart des autres. Sans lien, la lumière est la lumière principale. | Taille (1 ou 2), Par partie, Écart, Seulement l’éclat (les autres reflets à cet endroit descendent à la bande du haut) |
| Adoucir les bandes | ombrage → ombrage | Les coins de l’escalier entre deux bandes adoucis : entre des bandes qui sautent deux crans ou plus (ombres portées, lampes, reflets), le coin prend le cran intermédiaire ; entre des bandes voisines, avec Tramage, les coins situés sur une couleur d’un damier posé sur la surface prennent l’autre bande — un intermédiaire tramé, dans la palette, que le nettoyage laisse tel quel. | Les deux côtés, Tramage |
| Hachures | ombrage → calque | Les couleurs de l’ombrage, avec des lignes diagonales, des hachures croisées ou des points sur chaque bande sous celle du haut, plus denses à mesure que la bande est sombre, dans le cran inférieur ou dans la couleur des traits. Une bande hachurée est un motif, comme une zone de tramage : le nettoyage laisse tranquilles les pixels entre ses traits. Elle remplace Couleurs d’ombrage. | Motif, Couleur des traits |
| Cavité | (normales, profondeur) → nombre | À quel point la surface se replie vers l’intérieur : au-dessus de 0 dans un pli, en dessous de 0 sur une arête. Appliquez-lui un Seuil et reliez-le à Palier là où c’est masqué de −1 pour des plis un cran plus sombres. Sans lien, il lit le rendu. | Rayon, Saut de profondeur |
| Bords de couleur | (traits, albédo) → traits | Un trait là où la couleur peinte change à l’intérieur d’une partie, du côté le plus sombre pour qu’il fasse un pixel de large, coloré comme les plis (donnez donc une couleur de pli à Couleurs des traits). Placez-le avant Nettoyer les traits, qui garde ses traits sans coins ni doublons. Non relié, il lit les couleurs propres au modèle. | Contraste |
| Épaisseur des traits | traits → traits | La silhouette épaisse de deux pixels du côté opposé à la lumière, et Bordure anneaux de contour autour, dans la couleur du trait extérieur ou, avec Couleur propre, dans Couleur (la plus proche de la palette). Là où un trait intérieur rejoint la silhouette, elle reste d’un pixel. | Côté ombre, Bordure, Couleur propre, Couleur |
| Nettoyer la silhouette | calque → calque | Les pointes d’un pixel retirées du contour (pas l’extrémité d’une partie fine), les encoches et les trous d’un pixel remplis avec la couleur qui les entoure — et non avec celle du contour, là où elle le rendrait épais de deux pixels. | Pointes, Encoches |
| Tramage de palette | calque (+ lumière) → calque | La couleur de surface propre à chaque pixel, éclairée par le facteur relié (1 la laisse telle quelle), sous forme de la paire de couleurs de palette dont le mélange s’en approche le plus (tramage de Yliluoma), posée selon le seuil de la surface. Les traits restent ; le reste est un tramage que le nettoyage ne touche pas. | Écart des paires : plus haut, s’en tient aux paires proches |
| Carte de rampe | nombre (+ rampe) → calque | Une rampe d’artiste lue sur une bande d’image : le nombre de 0 à 1 choisit le long de celle-ci, du sombre au clair. Une bande de plusieurs lignes donne à chaque rampe sa propre ligne. Sans image, les bandes propres à la couleur. Reliez-y la Lumière principale via Remapper. | Fichier |
| Couleurs des tuiles | calque → calque | L’image en tuiles depuis son coin supérieur gauche, chacune limitée à un nombre donné de couleurs, comme la NES dispose des tuiles de 8 × 8 sur 3 : les couleurs les plus utilisées restent (un pixel que contredisent trois de ses voisins compte comme le leur, pour que le pixel de bord d’un rastériseur ne fasse pas basculer le choix), les autres prennent la plus proche d’entre elles, et un pixel seul de sa couleur prend celle de ses voisins dans la tuile. | Tuile, Couleurs |
| Mouvement sous-pixel | calque (+ mouvement) → calque | Une partie qui bouge de moins de Encore en dessous pixels par image (une respiration, un balancement) le montre dans ses pixels de bord : un pixel seulement en partie couvert descend d’un cran sur la rampe, et le pixel vide dans lequel elle progresse prend cette couleur dès qu’il est couvert au quart. N’importe où dans le graphe : le bord est celui du rendu, donc cela fonctionne aussi après Combiner, le contour restant tel quel (seuls les pixels de bord situés à l’intérieur changent). | Encore en dessous, Paliers |
| CRT | calque → calque | Son image est l’image sur un écran — lignes de balayage, masque d’ombre ou grille d’un écran LCD —, quelques pixels d’écran par pixel. Cette image est hors palette : elle sert uniquement à regarder et aux images fixes. Le calque passe au sprite inchangé, et aucune planche ni aucun export ne contient jamais l’écran. Choisissez-le et la Vue 2D affiche l’écran, d’abord à des paliers entiers ; pxr stages MODEL --style KIT --node crt l’écrit sous le nom crt.still.png. Placez-le en dernier, avant Sortie. |
Écran, Taille |
Depuis un script, comme n’importe quel nœud :
pxr graph add my.pixor --node tidy-silhouette --in layer=3 # node 8, after Cleanup
pxr graph wire my.pixor --from 8 --to 4 --slot layer # and into the palette
Éclat et les autres nœuds qui prennent un ombrage vont dans Lumière et ombre, là où se trouve l’ombrage (en dehors, le groupe donne un calque fini) : ouvrez le groupe dans l’application et ajoutez-les là, ou enregistrez le groupe comme kit, modifiez-le et remettez-le avec pxr graph swap --kit.
Chacun a un cas de référence (tests/golden/cases.txt, hand-*) : le graphe de départ du look et le nœud ajouté, sous forme de kit de graphe de Style que lit pxr render --style.
Chaque propriété est une entrée
Les réglages d’un nœud sont ses propriétés : des lignes à l’intérieur du nœud, chacune avec une prise à sa gauche. Réglez-en une sur le nœud, ou reliez-y une valeur, et la ligne se grise et montre ce qu’apporte le lien. Les valeurs sont des nœuds à part entière, sous Valeurs dans la bibliothèque : Valeur numérique, Activé/Désactivé, Angle, Mots, et les calculs sur elles (Ajouter des valeurs, Soustraire des valeurs, Multiplier les valeurs, Diviser des valeurs, Valeur la plus petite, Valeur la plus grande, Est au-dessus, Opposé, Les deux activés, L’un ou l’autre activé, Choisir une valeur), dont les opérandes sont aussi des propriétés. Un seul Activé/Désactivé relié à trois nœuds les active ou les désactive tous les trois d’un coup.
Les propriétés sont réunies en groupes nommés (De et Vers d’un Remapper, Couleurs et Recherche des Arêtes) ; cliquez sur le nom d’un groupe pour le replier. Un lien vers une propriété repliée arrive sur le nom de son groupe.
Les propriétés d’un groupe sont ses entrées de valeur. Groupez des nœuds dont les propriétés sont alimentées par des valeurs, et chaque valeur devient une entrée du groupe, nommée d’après la propriété qu’elle alimente et listée après les autres entrées du groupe : une ligne sur la boîte du groupe, réglée là (ce qui règle chaque propriété intérieure reliée à elle) ou reliée depuis l’extérieur.
Les groupes que règlent les sections d’un Style — Lumière et ombre, Encrage, Fil de fer, Nettoyage — sont réglés par ces sections ainsi que par les propriétés des atomes qu’ils contiennent ; la Palette, ce sont les couleurs de l’image, que règle la section Couleurs.
Une fois par matériau, une fois par partie
Un nœud s’exécute une fois pour toute l’image, sauf indication contraire. Choisissez un nœud et réglez Exécution dans l’Inspecteur sur Une fois par matériau ou Une fois par partie : il s’exécute alors une fois pour chacun, en ne voyant à chaque fois que celui-là, comme si le reste de l’image était vide ; les morceaux sont ensuite réassemblés pixel par pixel. Son titre indique alors chaque matériau ou chaque partie.
C’est ce qui empêche un flou, un grossissement, un contour ou un nettoyage de déborder d’une partie sur la suivante : un nœud Traits exécuté par partie trace un trait autour de chaque partie, là où le même nœud exécuté une seule fois en trace un autour de tout le modèle. Un groupe réglé ainsi exécute de cette façon tout ce qu’il contient. Un nœud exécuté par partie ne regarde pas l’image précédente, il n’a donc pas d’hystérésis contre le scintillement.
Le même réglage en ligne de commande, ou dans un fichier de look, est le scope du nœud : pxr graph set my.pixor --which style --node cleanup --set scope=object (frame, material ou object).
L’image d’un nœud comme calque à part
Le sprite est ce que reçoit le nœud de sortie, mais l’image de n’importe quel nœud peut aussi être écrite. Choisissez le nœud et tapez un nom sous Sortie supplémentaire dans l’Inspecteur : son titre indique alors layer et le nom, et chaque export l’emporte à côté de lines et flat — une planche à part portant son nom avec l’export layers (hero_rim.png), et un calque caché du .aseprite, qu’un nouveau rendu remplace comme les autres calques de Pixor. Une lumière de contour, un masque que lit un shader, les traits d’une partie : tout ce que produit un nœud. Effacez le nom et ce n’est plus une sortie. Il ne peut pas prendre un nom qu’une planche porte déjà (final, lines, flat, normal, depth, emission et autres) ni celui d’une autre sortie supplémentaire.
Depuis un script : pxr graph extra my.pixor --node line-work --name rim, et --drop pour le retirer.
Un exemple : de la peinture usée
Aplatissez l’ombrage, puis choisissez entre la version ombrée et la version plate avec un masque de bruit, et la surface se lit comme une peinture usée par endroits :
Light and shade --+---------------+
| +--> Choose --> Combine --> ...
+--> Flatten ---+
Noise ----------------------------+
- Ajoutez Aplatir et reliez-y Lumière et ombre.
- Ajoutez Bruit ; réglez sa taille à environ 5 pixels.
- Ajoutez Choisir par masque : Lumière et ombre dans A, Aplatir dans B, Bruit dans le masque.
- Retirez le lien de l’entrée shading de Combiner, et reliez Choisir par masque à la place.
Les groupes : une boîte que vous pouvez ouvrir
Un groupe est un graphe utilisé comme un seul nœud. Pixor fournit Pixeliser, tout le pipeline ci-dessus en un seul bloc (dans la bibliothèque sous Pipelines), et les groupes qui composent le graphe de départ : Rendu en calques, Lumière et ombre, Encrage, Fil de fer et Nettoyage — nommés autrement que les passes Ombrage et Traits, qui font en un seul bloc ce que les groupes font par étapes. Aucun n’est un élément intégré privilégié.
Un groupe s’ouvre sur place, dans chaque graphe. Double-cliquez dessus en dehors de son titre, ou appuyez sur la flèche à droite de son en-tête (un groupe est le seul nœud qui en a une) : le groupe lui-même devient le cadre du graphe dont il est fait. Un groupe à l’intérieur d’un groupe ouvert s’ouvre de la même façon, dans son cadre. Son en-tête s’étend en haut, ses paramètres restent sur sa gauche, et à la place de son image sont disposés les nœuds qu’il contient, dans le même graphe. Les liens ne traversent le cadre que par ses deux côtés. Ce qui alimente le groupe arrive à ses entrées, à gauche, et repart d’une ancre à droite de chacune, là où se trouvait le bord de la boîte fermée, vers les nœuds intérieurs qui la lisent. Chaque sortie est une ancre sur le bord droit du cadre, à hauteur de ce qui la produit à l’intérieur, et tout ce qui lit cette sortie est relié à partir de là. Rien de l’intérieur ne sort jamais du cadre, et les nœuds qui le suivent s’écartent pour faire de la place — seulement à l’écran : le graphe garde leur position. Chaque nœud intérieur se modifie comme n’importe quel autre : ses réglages, son image, ses liens, son nom ; un nœud collé ou lâché dans le cadre entre dans le groupe. La flèche, à nouveau, le replie en une boîte avec son image. Quels groupes sont ouverts dépend de la fenêtre, pas du projet.
Créer votre propre groupe. Choisissez les nœuds à y mettre — tracez un rectangle autour d’eux, ou Maj-cliquez dessus ; celui qui est choisi compte aussi — puis Grouper (ou Ctrl+G) : ils deviennent une seule boîte, avec une entrée pour chaque lien entrant et, comme sortie, le résultat que le reste du graphe lisait à partir d’eux. Il s’ouvre aussitôt ; F2 le nomme. Enregistrer le kit… sur la barre conserve le groupe choisi comme kit à vous (Enregistrer le groupe comme kit ; la boîte de dialogue de fichier s’ouvre dans le dossier que la bibliothèque liste sous Mes nœuds), et la bibliothèque le liste à cet endroit, dans chaque projet, dans le graphe de son type ; sans groupe choisi, elle conserve le graphe entier (Enregistrer le graphe de Style comme kit). C’est ce que signifie Enregistrer le kit… dans chaque graphe.
Un groupe voyage sous forme de kit comme n’importe quel autre look, et pxr graph flatten look.pixorkit l’écrit sous forme des simples nœuds qu’il représente, pour qu’il se lise comme un diff plutôt que comme une boîte noire.
Un look enregistré est aussi un groupe. + › Utiliser un kit… place un kit écrit par Enregistrer le kit… d’un Style ou par pxr graph save dans le graphe affiché, sous forme d’un seul groupe : son nœud Sortie devient la sortie de la boîte, un calque, à relier — par-dessus le résultat propre au graphe via Calque par-dessus, par exemple, ou dans un Choisir par masque, pour qu’une partie du modèle reçoive un autre look. Double-cliquez dessus pour voir et modifier le look qu’il contient.
Avec quoi vous pouvez construire
À côté des passes, la bibliothèque contient les petits nœuds avec lesquels un look s’écrit : les entrées, les nœuds de calcul, d’espace, de masque, de couleur et de mélange ci-dessus.
Les groupes fournis — Lumière et ombre, Encrage, Fil de fer et Nettoyage — sont faits d’atomes qui font chacun une seule tâche avec quelques boutons : les bandes de lumière, la longueur minimale d’un trait intérieur, les propres arêtes du modèle, les pixels isolés repérés par leur façon de se raccorder. Les passes entières qu’ils remplacent sont toujours dans la bibliothèque pour un graphe qui veut une seule boîte. Vous pouvez toujours remplacer n’importe lequel par votre propre chaîne — reliez Lumière principale à Remapper, Palier à et Vers la palette et vous avez écrit votre propre ombrage, ou mettez Pixels de bord comme masque d’un Choisir par masque entre un look plat et un look un cran plus haut, et vous avez dessiné le fil de fer vous-même.
Partager un look
Enregistrer le kit… et Utiliser un kit… d’un Style transportent un look d’un projet à l’autre ; le modèle, les clips et les exports restent tels quels. Un kit de Style transporte aussi le graphe, si bien que « chaque asset de mon jeu est assorti » vaut aussi pour un look relié.
Clic droit sur la toile › Revenir au graphe du préréglage abandonne le graphe et revient au pipeline de Pixor. Le projet n’enregistre alors plus aucun graphe.
Chaque graphe a la même barre : ce qu’il montre (le nom d’un pipeline, le chemin de retour d’une routine), puis + (ajouter un nœud), − (supprimer celui choisi), Cadrer, Nettoyer, Note, Grouper, Enregistrer le kit… et l’œil qui affiche ou masque les images des nœuds — chacun fonctionnant dans chaque graphe.
Ce qu’il ne fera pas
- Ni nœuds de script ni nœuds GPU. Chaque nœud est une fonction fixe de ses entrées : le même projet donne les mêmes pixels à chaque fois, aujourd’hui comme dans dix ans (sur une autre machine presque toujours : voir la FAQ).
- Les nœuds ne changent jamais sous vos pieds. Un graphe enregistre la version de chaque nœud avec laquelle il a été fait, et l’ancien comportement reste dans Pixor sous son ancienne version.
- Pas un éditeur d’images généraliste. Ce sont les passes propres à Pixor, typées pour que seules des choses sensées se relient. La peinture, les filtres et les calculs arbitraires ont leur place dans un logiciel de dessin.
Référence des nœuds
Chaque nœud des quatre graphes, avec ce qu’il fait, ce qu’il prend et ce qu’il donne, et chaque réglage avec sa plage et sa valeur par défaut.
Graphe de Style
CaméraRendreCalqueImageLumière d’appointMouvementTramage de surfacePhase de boucleRampe de la couleurMétalliqueRugositéÉmissifOcclusionTransparentPixels de bordOmbragePosition sur la rampeTraitsBandes de lumièreLumière du mondeRefletsLueurDécalages de rampeCouleurs d’ombrageSilhouetteArêtesNettoyer les traitsPixels isolésChemins des liensCouleurs des filsAdoucir les coinsCouleurs des traitsArêtes du maillageCombinerNettoyageVers la palettePaletteÉchelonner la rampePalier là où c’est masquéAplatirSeuilPar partiePar matériauPar orientationBruitChamp de bruitCouleur la plus procheMotifPixels pleinsNonEtOuChoisir par masqueMélange par tramageCalque par-dessusPeindreNombreAjouterSoustraireMultiplierDiviserPlus petitPlus grandSans signePartie fractionnaireNombre entierTenue entreRemapperMélangerPalier àTransition douceConcordanceLongueurComme nombreDécalageFlouPenteGrossirRétrécirFormesRetirer les bandesÉclatAdoucir les bandesHachuresCavitéBords de couleurÉpaisseur des traitsNettoyer la silhouetteTramage de paletteCarte de rampeCouleurs des tuilesMouvement sous-pixelCRTSortieValeur numériqueActivé/DésactivéAngleMotsAjouter des valeursSoustraire des valeursMultiplier les valeursDiviser des valeursValeur la plus petiteValeur la plus grandeEst au-dessusOpposéLes deux activésL’un ou l’autre activéChoisir une valeurRendu en calquesLumière et ombreEncrage
Graphe d’action
ClipImages clésRoutineActionTemps de la scèneConstantOndeBruitRampeRotationBobBalancementPulsationGlisserMathsFonduFusionnerSéquenceDécalage temporelVitesseRognerRépéterInverserRetardPalierLimiteRenommerSélectionnerInstancesAppliquer àSortieValeur numériqueActivé/DésactivéAngleMotsAjouter des valeursSoustraire des valeursMultiplier les valeursDiviser des valeursValeur la plus petiteValeur la plus grandeEst au-dessusOpposéLes deux activésL’un ou l’autre activéChoisir une valeur
Graphe d’asset
SpritesFichier imageFusionnerCalquePlage d’imagesTenueRetournerTagDisposerPlacerPileSuperpositionPlancheFichierJSONFichier AsepriteSpriteFrames GodotCarte de normalesCarte de profondeurCarte d’émissionCalques de traits et d’aplatsPaletteUn GIF par clipAPNG par clipVidéo par clipKit de lumièreCartouche PICO-8RapportCalque d’ombreVariantes de paletteCalques paper dollCalques de parallaxeFichier texteArchive ZIPJeu de tuilesIcônesFichier d’animationJeu de tuiles JSONTileSet GodotTileset TiledPlanche à grille doubleAutotiles GameMakerAutotiles RPG MakerUnity RuleTileProjet LDtkVariantes de palette des tuilesAperçu de la carteValeur numériqueActivé/DésactivéAngleMotsAjouter des valeursSoustraire des valeursMultiplier les valeursDiviser des valeursValeur la plus petiteValeur la plus grandeEst au-dessusOpposéLes deux activésL’un ou l’autre activéChoisir une valeur
Graphe de scène
ImporterObjetAnneauLigneGrilleDispersionRegarderVarierLireFusionnerVu parDifférenceJoindreDéplacerMiroirSubdiviserDéplacerChamp de hauteursBiseauPoser au solSur la surfaceSur des pointsDéfinir la formeAttributSélectionnerSortieFormeImageTexteVolumeLampeEffetÉlémentAccessoireRessortTerrainBrinsFeuillageEauNuagesCielVentRayons de lumièreHeures du jourBlocsValeur numériqueActivé/DésactivéAngleMotsAjouter des valeursSoustraire des valeursMultiplier les valeursDiviser des valeursValeur la plus petiteValeur la plus grandeEst au-dessusOpposéLes deux activésL’un ou l’autre activéChoisir une valeur
Ce que décrit cette page se trouve dans la version complète ; la démo gratuite dans le navigateur se limite au look par défaut et à la planche PNG.
Essayer dans le navigateur Obtenir Pixor