Immagini e parole

Due tipi di contenuto non vengono da un modello 3D: le immagini che hai già, e le parole. Entrambi entrano nella pipeline all’inizio, come parti della scena, non come ritocco alla fine: così linee, contorni, occlusione, ombre e palette funzionano su di essi senza un solo passaggio nuovo.

Un’immagine nella scena

Nella fase Scena, il menu + della Struttura, Un'immagine › Da un file immagine…, mette l’immagine su un piano: fogliame billboard, un albero lontano, un’insegna, una finestra illuminata, un fondale dipinto. È una parte come le altre, con una riga nella Struttura, un blocco Trasforma e le sue impostazioni nell’Ispettore, ed è un nodo Immagine del grafo di Scena: la riga e il nodo sono una cosa sola, le sue impostazioni stanno anche sul nodo, e una Riga o un Anello dopo di essa la ripete.

Impostazione	Cosa fa
Orientamento	In piedi, Piatto a terra, Sprite (nello spazio dello sprite) o Decalcomania (entrambi sotto).
Specchiato	Specchiato da sinistra a destra. Non costa nulla e non serve un secondo file.
Inclinazione	Inclinato all’indietro, in gradi.
Quarti di giro	Ruotato attorno all’asse verticale. Solo di quarti: qualsiasi valore intermedio richiederebbe un filtro, e il filtro sfoca la pixel art.
Metri per pixel	Quanto mondo copre un pixel dell’immagine.
Prendi la luce della scena	Disattivato per impostazione predefinita: un’immagine di solito è già ombreggiata da chi l’ha disegnata, e ombreggiarla di nuovo le darebbe due direzioni di luce.
Linee attorno	Come attorno a qualsiasi altra parte.
Ritaglia sotto	I pixel così trasparenti sono buchi, così il fogliame ritagliato funziona.
Conta per l'inquadratura	Disattivato per un’etichetta: una scritta “GAME OVER” sopra un cavaliere non dovrebbe rimpicciolire il cavaliere.
Livello di parallasse	A quale livello appartiene, contato dal fondo, così disegni e 3D condividono un’unica pila di livelli.

Due pulsanti lo rendono nitido, ed entrambi usano la camera mostrata:

• Pixel interi lo dimensiona in modo che un pixel dell'immagine copra un numero intero di pixel dello sprite. Qualsiasi altro valore ricampiona.
• Rivolto alla camera lo inclina secondo l’inclinazione di quella camera. Una camera che guarda in basso scorcia un cartoncino in piedi, il che fa perdere righe e trasforma le lettere in poltiglia.

Dalla riga di comando:

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

Nello spazio dello sprite un’immagine non è affatto un cartoncino. Dopo che la scena è disegnata, la sua immagine viene posata sui pixel dello sprite dove cade la sua posizione: così è rivolta verso ogni camera (un cartellone, lo stesso cespuglio da ogni lato dello sheet) e ogni pixel dell’immagine è un numero intero di pixel dello sprite (Pixel dello sprite, 1 per impostazione predefinita) qualunque sia la camera, ed è ciò che serve per lettere esatte. Mantiene la profondità della sua posizione, così ciò che sta davanti a quella posizione la nasconde comunque, ed è una parte come lo è un cartoncino, quindi linee, pulizia e palette la trattano come tale. Poggia sulla sua posizione, il centro del suo bordo inferiore, come fa un cartoncino in piedi; la sua posizione conta per l’inquadratura quando Conta per l’inquadratura è attivo.

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

Una decalcomania viene dipinta su qualsiasi superficie si trovi dove starebbe un cartoncino in piedi, entro Portata dal suo piano (in metri, da entrambi i lati): un’insegna su un muro, una crepa, una bruciatura; inclinata all’indietro di un quarto di giro, una pozzanghera o un tappeto a terra. Non ha geometria né una parte propria: dove una superficie disegnata nel fotogramma cade dentro il suo riquadro, la superficie prende lì il colore dell’immagine e mantiene la propria luce, le linee e il contorno, così un’insegna su un muro viene ombreggiata come il muro.

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

Sulla palette. Un'immagine viene portata alla palette del progetto all'importazione, quando il progetto ne ha una fissa, e il render dice quanti dei suoi pixel sono cambiati:

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

--keep-colours li lascia come sono. Un progetto con una palette automatica non ha ancora nulla a cui agganciarsi (la sua palette è costruita da ciò che c’è nella scena, cartoncini compresi), quindi la pipeline lo fa più avanti.

PNG o JPEG: un ritaglio vuole la trasparenza di un PNG, una fotografia per lo sfondo è il più delle volte un JPEG.

Un’immagine di più fotogrammi. Un’immagine con fotogrammi affiancati (una torcia che tremola in quattro, una bandiera che sventola in sei) è una sola immagine con Fotogrammi impostato (--picture-frames 4). Il cartoncino è largo un fotogramma e mostra il primo; una clip creata in Pixor mette chiavi su quale mostra (picture:NAME, frame), così un tremolio dipinto si riproduce nello sheet come qualsiasi altra cosa. Specchiato ribalta ogni fotogramma sul posto, mantenendone l’ordine.

I fotogrammi possono essere file a sé invece di un’unica striscia: Un file per fotogramma, --picture-sequence: il file indicato è il primo, flame_0001.png, e i numeri successivi seguono, con lo stesso riempimento di cifre; ogni fotogramma ha la dimensione del primo. E possono riprodursi da soli: Si riproduce da solo, --picture-plays: uno per fotogramma, a ciclo continuo, sotto qualunque cosa mostri lo sheet, a meno che una clip non decida con le chiavi quale mostrare. Se non si muove nient’altro, sono loro l’animazione, un loop chiamato 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 cielo

Un cielo va dietro a tutto, nei pixel su cui non è stato disegnato nulla — così il modello mantiene il contorno che ha anche senza. Sono bande, un colore in alto e uno in basso con un numero intero di gradini in mezzo, mai una sfumatura; oppure un'immagine dipinta, ancorata in cima al fotogramma e centrata, un numero intero di pixel dello sprite per pixel dell'immagine, con i bordi prolungati oltre i lati. I suoi colori sono esattamente nella palette, quindi le bande sono i colori che hai chiesto. Fa parte del mondo: il menu + della Struttura, Il mondo › Cielo, o pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4' (o --sky dusk.png:2), e --no-sky.

Parole nella scena

Un cartoncino di testo è un cartoncino la cui immagine viene disegnata invece che letta, così le parole ottengono gratis l'orientamento, le rotazioni, la scala, il ritaglio e le linee di un cartoncino. Nell'app, il menu + della Struttura, Un'immagine › Testo, ne mette uno sopra il modello — un nodo Testo del grafo di Scena — un pixel del font per un pixel dello sprite; il suo Ispettore contiene le Parole, il Font, la Scala del testo, l'Inchiostro e un Contorno, e sotto le impostazioni proprie del cartoncino. Le parole sono un'etichetta, nell'app come da uno script: non decidono come viene inquadrata la ripresa, quindi l'app le mette appena dentro il bordo superiore del fotogramma; attiva Conta per l'inquadratura per inquadrare invece attorno a esse. Da uno 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 indica i metri per un pixel del font, così le parole si leggono quando arriva a un pixel dello sprite o più: il render stampa i pixel per metro dello sheet (circa 40 per un progetto del cavaliere a --size 128, 0.033 × 40 ≈ 1.3; 37 con i cespugli e le immagini di questa pagina, ancora oltre 1). A 64 px è circa 24, meno di un pixel per pixel del font, e le lettere si sfaldano.

Opzione	Cosa fa
--font NAME|FILE	pixor-11, pixor-5, o un tuo file di font: il formato di Pixor o un .bdf.
--align left|middle|right	Dove sta ogni linea.
--wrap PIXELS	Vai a capo a questa larghezza. Una parola troppo lunga resta intera: una parola spezzata è più difficile da leggere di una riga che sporge.
--letter-spacing N, --line-spacing N	Pixel interi in più.
--text-colour, --text-outline, --text-shadow	Inchiostro, un contorno di un pixel, un’ombra di un pixel.
--text-scale N	Ogni pixel diventa N per N. Solo passi interi.
--facing sprite, --picture-pixels N	Nello spazio dello sprite, N pixel dello sprite per un pixel del font, su ogni camera.

La disposizione usa solo interi ovunque: avanzamenti e altezze di riga sono pixel interi, non c’è shaping né posizionamento sub-pixel, così una stringa dà gli stessi pixel su ogni macchina. Un carattere che il font non ha è uno spazio vuoto e non un riquadro, perché un riquadro in uno sprite è peggio di uno spazio.

Le parole sono un’etichetta per impostazione predefinita: non decidono come viene inquadrata la ripresa. Nello spazio dello sprite sono esatte da ogni lato, senza inclinazione e senza adattarsi a una camera: --facing sprite.

Parole come geometria

Una forma lettere compone le sue parole ed estrude ogni pixel del font in un blocco, così le lettere ricevono illuminazione, bande, contorni e palette come qualsiasi altra geometria — un'insegna, uno stendardo, una lapide:

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

A 3 m d’altezza, la parola sta al di sopra dell’elmo del cavaliere; come ogni forma ha bisogno di almeno un pixel dello sprite per ogni pixel del font per leggersi, che il cavaliere a --size 128 dà.

Vengono costruite solo le facce che nessun vicino nasconde, così una parola è qualche centinaio di triangoli, e le lettere poggiano sul loro inchiostro invece che sullo spazio vuoto che serve a un discendente.

Font

Pixor include due font, entrambi disegnati apposta: pixor-11, il font con cui è disegnata l’interfaccia, e pixor-5, cinque pixel per una maiuscola e tre per la maggior parte delle lettere, per numeri sopra uno sprite, etichette e un HUD, dove quello più grande peserebbe più di ciò che nomina. Una forma letters sceglie tra i due con Font nel suo Ispettore. Un tuo font è un file di testo con la stessa struttura, semplice come sembra:

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

Una riga == C indica il carattere (o == U+00E9 per uno che non puoi digitare), poi le sue righe: # è inchiostro, . è vuoto. È leggibile, si confronta con un diff e non richiede alcuna libreria di font.

Un file BDF funziona così com'è: è il formato in cui si condivide la maggior parte dei font pixel. I suoi glifi stanno su una cella che va dall'ascendente al discendente del font, e ognuno è largo quanto l'avanzamento indicato dal font, così la spaziatura scelta dal suo designer viene mantenuta e Pixor non ne aggiunge.

Una palette da un’immagine

Un file di palette può essere un'immagine: un'immagine di riferimento, uno screenshot di un gioco di cui vuoi l'aspetto, o una striscia di campioni di colore.

pxr render hero.glb --palette reference.png

Un'immagine con sedici colori o meno dà esattamente quelli, in un ordine stabile; una con più colori ne dà fino a sedici tra i più rappresentativi (i colori troppo vicini per distinguerli diventano uno solo). La stessa immagine dà la stessa palette su ogni macchina.