Images et texte

Deux types de contenu ne viennent pas d’un modèle 3D : les images que vous avez déjà, et les mots. Les deux entrent dans le pipeline dès le début, comme parties de la scène, et non comme une retouche par-dessus à la fin — traits, contours, occlusion, ombres et palette s’appliquent donc à eux sans la moindre nouvelle passe.

Une image dans la scène

Dans l’étape Scène, le menu + de l’Arborescence, Une image › À partir d’un fichier image…, place l’image sur un plan : feuillage en billboard, arbre lointain, enseigne, fenêtre éclairée, décor peint. C’est une partie comme les autres, avec une ligne dans l’Arborescence, un bloc Transformation et ses propres réglages dans l’Inspecteur, et c’est un nœud Image du Graphe de scène : la ligne et le nœud ne font qu’un, ses réglages sont aussi sur le nœud, et une Ligne ou un Anneau placés après le répètent.

Réglage	Ce qu’il fait
Orientation	Debout, À plat au sol, Sprite (dans l’espace du sprite) ou Décalque (tous deux ci-dessous).
En miroir	Retourné de gauche à droite. Cela ne coûte rien et ne demande pas de second fichier.
Inclinaison	Incliné vers l’arrière, en degrés.
Quarts de tour	Tourné autour de l’axe vertical. Par quarts seulement : tout angle intermédiaire demanderait un filtrage, et le filtrage rend le pixel art flou.
Mètres par pixel	Quelle part du monde couvre un pixel de l’image.
Prendre la lumière de la scène	Désactivé par défaut : une image est en général déjà ombrée par celui qui l’a dessinée, et l’ombrer à nouveau lui donne deux directions de lumière.
Traits autour	Comme autour de n’importe quelle autre partie.
Évider en dessous	Les pixels aussi transparents deviennent des trous, pour que le feuillage détouré fonctionne.
Compte pour le cadrage	Désactivé pour une étiquette : une bannière « GAME OVER » au-dessus d’un chevalier ne doit pas rétrécir le chevalier.
Calque de parallaxe	Le calque auquel il appartient, compté depuis l’arrière, pour que dessins et 3D partagent une même pile de calques.

Deux boutons le rendent net, et tous deux utilisent la caméra affichée :

• Pixels entiers le dimensionne pour qu’un pixel de l’image couvre un nombre entier de pixels de sprite. Toute autre valeur rééchantillonne.
• Faire face à la caméra l’incline selon l’inclinaison de cette caméra. Une caméra qui regarde vers le bas raccourcit une carte debout, ce qui fait perdre des rangées et transforme les lettres en bouillie.

En ligne de commande :

pxr project set game.pixor --add-picture bush.png:-1.1,0,-0.3:0.05
pxr project set game.pixor --add-picture bush.png:1,0,0.2:0.035 --mirror
pxr project set game.pixor --add-picture sky.png:0,0,-8:0.2 --layer 0 --unframed

Dans l’espace du sprite, une image n’est plus du tout une carte. Une fois la scène dessinée, son image est posée sur les pixels propres au sprite à l’endroit où tombe sa position : elle fait donc face à chaque caméra — un billboard, le même buisson sous chaque côté de la planche — et chaque pixel de l’image fait un nombre entier de pixels de sprite (Pixels de sprite, 1 par défaut) quelle que soit la caméra, ce qu’exigent des lettres exactes. Elle garde la profondeur de sa position, si bien que ce qui se trouve devant cette position la masque toujours, et c’est une partie comme l’est une carte, si bien que les traits, le nettoyage et la palette la traitent comme telle. Elle repose sur sa position, le milieu de son bord inférieur, comme une carte debout ; sa position compte pour le cadrage quand Compte pour le cadrage est activé.

pxr project set game.pixor --add-picture bush.png:-0.8,0,1.1 --facing sprite
pxr project set game.pixor --add-text "+12" --text-at 0.25,0.35,0.9 \
  --facing sprite --picture-pixels 2 --font pixor-5

Une décalcomanie est peinte sur toutes les surfaces situées là où se tiendrait une carte debout, à moins de Portée de son plan (en mètres, de chaque côté) : une enseigne sur un mur, une fissure, une trace de brûlure ; inclinée d’un quart de tour en arrière, une flaque ou un tapis au sol. Elle n’a ni géométrie ni partie à elle : là où une surface dessinée dans l’image tombe dans sa boîte, la surface y prend la couleur de l’image et garde sa propre lumière, ses traits et son contour, si bien qu’une enseigne sur un mur est ombrée comme le mur.

pxr project set game.pixor --add-text "OPEN" --text-at 0,0.3,0.45 \
  --text-size 0.03 --facing decal --decal-reach 0.25 --font pixor-5

Sur la palette. Une image est ramenée à la palette du projet à l’import quand le projet en a une fixe, et le rendu indique combien de ses pixels ont changé :

picture  bush: 330 of 330 pixels moved to the palette (100.0%)

--keep-colours les laisse telles quelles. Un projet à palette automatique n’a encore rien sur quoi se caler — sa palette est construite à partir de ce qui se trouve dans la scène, cartes comprises — si bien que le pipeline s’en charge plus loin.

PNG ou JPEG : un détourage demande la transparence d’un PNG, une photo pour un arrière-plan est le plus souvent un JPEG.

Une image de plusieurs images. Une image composée d’images côte à côte — une torche qui vacille en quatre, un drapeau qui flotte en six — est une seule image avec Images réglé (--picture-frames 4). La carte fait une image de large et montre la première ; un clip créé dans Pixor indique par clés laquelle elle montre (picture:NAME, frame), si bien qu’un vacillement peint se joue dans la planche comme tout le reste. En miroir retourne chaque image sur place, en gardant leur ordre.

Les images peuvent être des fichiers à part au lieu d’une seule bande — Un fichier par image, --picture-sequence : le fichier nommé est le premier, flame_0001.png, et les numéros qui suivent s’enchaînent, complétés de la même façon ; chaque image a la taille de la première. Et elles peuvent se lire toutes seules — Se lit tout seul, --picture-plays : une par image, en boucle, sous tout ce que montre la planche, sauf si un clip indique par des clés laquelle s’affiche. Si rien d’autre ne bouge, ce sont elles l’animation, une boucle appelée picture.

pxr project set game.pixor --add-picture flame_0001.png:0.7,0,0.8 \
  --picture-frames 4 --picture-sequence --picture-plays --facing sprite

Un ciel

Un ciel se place derrière tout, dans les pixels où rien n’a été dessiné — le modèle garde donc le contour qu’il a sans ciel. Ce sont des bandes, une couleur en haut, une en bas et un nombre entier de paliers entre les deux, jamais un dégradé ; ou une image peinte, ancrée en haut de l’image et centrée, un nombre entier de pixels de sprite par pixel d’image, ses bords prolongés au-delà de ses côtés. Ses couleurs sont exactement dans la palette, si bien que les bandes sont les couleurs que vous avez demandées. Il fait partie du monde : le menu + de l’Arborescence, Le monde › Ciel, ou pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4' (ou --sky dusk.png:2), et --no-sky.

Des mots dans la scène

Une carte de texte est une carte dont l’image est dessinée plutôt que lue : les mots profitent ainsi gratuitement de l’orientation, des rotations, de l’échelle, du détourage et des traits d’une carte. Dans l’application, le menu + de l’Arborescence, Une image › Texte, en place une au-dessus du modèle — un nœud Texte du graphe de scène —, un pixel de la police pour un pixel du sprite ; son Inspecteur contient les Mots, la Police, l’Échelle du texte, l’Encre et un Contour, et les réglages propres à la carte en dessous. Les mots sont une étiquette, dans l’application comme depuis un script : ils ne décident pas du cadrage, l’application les place donc juste à l’intérieur du haut du cadre ; activez Compte pour le cadrage pour cadrer plutôt autour d’eux. Depuis un script :

pxr project set game.pixor --size 128
pxr project set game.pixor --add-text "GAME OVER" \
  --text-at 0,2.3,0 --text-size 0.033 --tilt -45 \
  --text-colour '#f4ecf2' --text-outline '#1a1620'

--text-size est le nombre de mètres par pixel de police, si bien que les mots se lisent quand cela fait un pixel de sprite ou plus : le rendu affiche le nombre de pixels de la planche par mètre (environ 40 pour un projet de chevalier à --size 128, 0.033 × 40 ≈ 1.3 ; 37 avec les buissons et images de cette page, toujours au-dessus de 1). À 64 px, c’est environ 24, moins d’un pixel par pixel de police, et les lettres se désagrègent.

Option	Ce qu’il fait
--font NAME|FILE	pixor-11, pixor-5, ou un fichier de police à vous : le format propre à Pixor ou un .bdf.
--align left|middle|right	Où se trouve chaque trait.
--wrap PIXELS	Revenir à la ligne à cette largeur. Un mot trop long reste entier : un mot coupé est plus difficile à lire qu’une ligne qui dépasse.
--letter-spacing N, --line-spacing N	Pixels entiers supplémentaires.
--text-colour, --text-outline, --text-shadow	Encre, un contour d’un pixel, une ombre en pixels.
--text-scale N	Chaque pixel devient N sur N. Par pas entiers uniquement.
--facing sprite, --picture-pixels N	Dans l’espace du sprite, N pixels de sprite par pixel de police, sur chaque caméra.

La mise en page se fait partout en entiers : les avances et les hauteurs de ligne sont des pixels entiers, il n’y a ni mise en forme de texte complexe ni positionnement sous-pixel, si bien qu’une chaîne donne les mêmes pixels sur chaque machine. Un caractère absent de la police donne un blanc plutôt qu’un rectangle, car un rectangle dans un sprite est pire qu’un blanc.

Les mots sont par défaut une étiquette : ils ne décident pas du cadrage. Dans l’espace du sprite, ils sont exacts sous chaque côté, sans inclinaison ni mise à l’échelle selon une caméra : --facing sprite.

Des mots en géométrie

Une forme lettres écrit ses mots et extrude chaque pixel de la police en un bloc, si bien que les lettres reçoivent l’éclairage, les bandes, les contours et la palette comme n’importe quelle autre géométrie — une enseigne, une bannière, une pierre tombale :

pxr shapes -o sign.glb --shape letters:2,0.5,0.25
pxr project set game.pixor --add-shape letters:1.2,0.3,0.1:0,3,0 --words HELLO

Placé à 3 m de hauteur, le mot ne touche pas le casque du chevalier ; comme toute forme, il lui faut au moins un pixel de sprite par pixel de police pour se lire, ce que donne le chevalier avec --size 128.

Seules les faces qu’aucune voisine ne cache sont construites : un mot ne fait que quelques centaines de triangles, et les lettres reposent sur leur encre plutôt que sur l’espace vide dont a besoin un jambage descendant.

Polices

Pixor est fourni avec deux polices, toutes deux dessinées pour lui : pixor-11, la police de l’interface, et pixor-5, cinq pixels par capitale et trois pour la plupart des lettres, pour les nombres au-dessus d’un sprite, les étiquettes et un HUD, là où la plus grande écraserait ce qu’elle nomme. Une forme letters choisit entre les deux avec Police dans son Inspecteur. Une police à vous est un fichier texte de même structure, aussi simple qu’il en a l’air :

== A
.###.
#...#
#####
#...#
#...#

Une ligne == C nomme le caractère (ou == U+00E9 pour un caractère que vous ne pouvez pas taper), puis ses lignes : # est l’encre, . est vide. C’est lisible, ça se compare en diff, et ça ne demande aucune bibliothèque de polices.

Un fichier BDF fonctionne tel quel : c’est le format dans lequel la plupart des polices pixel sont partagées. Ses glyphes reposent sur une cellule définie par l’ascendante et la descendante de la police, et chacun est aussi large que l’avance indiquée par la police : l’espacement choisi par son créateur est conservé et Pixor n’en ajoute aucun.

Une palette à partir d’une image

Un fichier de palette peut être une image : une image de référence, une capture d’écran d’un jeu dont vous voulez le look, ou une bande d’échantillons.

pxr render hero.glb --palette reference.png

Une image de seize couleurs ou moins donne exactement celles-ci, dans un ordre stable ; une image qui en a plus donne jusqu’à seize de ses couleurs les plus représentatives (les couleurs trop proches pour être distinguées n’en font qu’une). La même image donne la même palette sur chaque machine.