Imagens e palavras

Dois tipos de conteúdo não vêm de um modelo 3D: imagens que você já tem e palavras. Ambos entram no pipeline no início, como partes da cena, e não como uma pintura por cima no final — então traços, contornos, oclusão, sombras e a paleta funcionam neles sem uma única passada nova.

Uma imagem na cena

Na etapa Cena, o menu + da Estrutura, Uma imagem › De um arquivo de imagem…, coloca a imagem num plano: folhagem em billboard, uma árvore distante, uma placa, uma janela acesa, um cenário pintado. É uma parte como qualquer outra, com uma linha na Estrutura, um bloco Transformar e seus próprios ajustes no Inspetor, e é um nó Imagem do grafo de Cena: a linha e o nó são uma coisa só, os ajustes também ficam no nó, e uma Linha ou um Anel depois dele o repete.

Ajuste	O que ele faz
Orientação	Em pé, Plano no chão, Sprite (no espaço do sprite) ou Decalque (ambos abaixo).
Espelhado	Espelhado da esquerda para a direita. Não custa nada e não precisa de um segundo arquivo.
Inclinar	Inclinado para trás, em graus.
Quartos de volta	Girado em torno do eixo vertical. Só quartos de volta: qualquer coisa entre eles exigiria filtragem, e a filtragem borra a pixel art.
Metros por pixel	Quanto do mundo um pixel da imagem cobre.
Usar a luz da cena	Desligado por padrão: uma imagem normalmente já foi sombreada por quem a desenhou, e sombreá-la de novo lhe dá duas direções de luz.
Traços em volta	Como em volta de qualquer outra parte.
Recortar por baixo	Pixels transparentes assim são buracos, então folhagem recortada funciona.
Conta para o enquadramento	Desligado para um rótulo: uma faixa “GAME OVER” sobre um cavaleiro não deve encolher o cavaleiro.
Camada de paralaxe	A que camada pertence, contada a partir do fundo, para que arte desenhada e 3D compartilhem uma só pilha de camadas.

Dois botões o deixam nítido, e ambos usam a câmera exibida:

• Pixels inteiros o dimensiona para que um pixel da imagem cubra um número inteiro de pixels do sprite. Qualquer outra coisa reamostra.
• Virar para a câmera o inclina pela inclinação daquela câmera. Uma câmera que olha para baixo encurta um cartão em pé, o que perde linhas e transforma as letras numa papa.

Pela linha de 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

No espaço do sprite, uma imagem nem é um cartão. Depois que a cena é desenhada, a imagem dela é colocada nos próprios pixels do sprite onde cai a sua posição: assim ela fica de frente para todas as câmeras — um billboard, o mesmo arbusto de todos os lados da folha — e cada pixel da imagem é um número inteiro de pixels do sprite (Pixels de sprite, 1 por padrão), seja qual for a câmera, que é o que letras exatas precisam. Ela mantém a profundidade da sua posição, então o que fica na frente dessa posição continua a escondendo, e ela é uma parte como um cartão é, então os traços, a limpeza e a paleta a tratam como tal. Ela fica sobre a sua posição, o meio da borda inferior, como um cartão em pé; sua posição conta para o enquadramento quando Conta para o enquadramento está ligado.

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

Um decalque é pintado sobre as superfícies que estiverem onde um cartão em pé ficaria, dentro do Alcance do seu plano (em metros, para os dois lados): uma placa numa parede, uma rachadura, uma marca de queimado; inclinado um quarto de volta para trás, uma poça ou um tapete no chão. Ele não tem geometria nem parte própria: onde uma superfície desenhada no quadro cai dentro da sua caixa, a superfície assume a cor da imagem ali e mantém sua própria luz, traços e contorno, então uma placa numa parede é sombreada como a parede.

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

Na paleta. Uma imagem é levada à paleta do projeto na importação quando o projeto tem uma paleta fixa, e a renderização diz quantos dos seus pixels mudaram:

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

--keep-colours os deixa como estão. Um projeto com paleta automática ainda não tem para onde ajustá-las — a paleta dele é montada a partir do que está na cena, cartões incluídos — então o pipeline faz isso mais adiante.

PNG ou JPEG: um recorte quer a transparência de um PNG; uma fotografia para fundo, na maioria das vezes, é um JPEG.

Uma imagem de vários quadros. Uma imagem de quadros lado a lado — uma tocha tremulando em quatro, uma bandeira tremulando em seis — é uma imagem com Quadros definido (--picture-frames 4). O cartão tem a largura de um quadro e mostra o primeiro; um clipe feito no Pixor define por chaves qual ele mostra (picture:NAME, frame), então um tremular pintado toca na folha como qualquer outra coisa. Espelhado espelha cada quadro no lugar, mantendo a ordem.

Os quadros podem ser arquivos próprios em vez de uma tira — Um arquivo por quadro, --picture-sequence: o arquivo nomeado é o primeiro, flame_0001.png, e os números depois dele seguem, preenchidos do mesmo jeito; todo quadro tem o tamanho do primeiro. E eles podem tocar sozinhos — Toca sozinho, --picture-plays: um por quadro, sem parar, por baixo do que a folha mostrar, a menos que um clipe defina com chaves qual aparece. Sem mais nada se movendo, eles são a animação, um loop chamado 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

Um céu

Um céu fica atrás de tudo, nos pixels em que nada foi desenhado — então o modelo mantém o contorno que tem sem céu. Ele é feito de faixas, uma cor de cima e uma de baixo e um número inteiro de degraus entre elas, nunca uma mesclagem; ou de uma imagem pintada, ancorada no topo do quadro e centralizada, com um número inteiro de pixels do sprite por pixel da imagem, e as bordas prolongadas além das laterais. As cores dele estão exatamente na paleta, então as faixas são as cores que você pediu. Ele faz parte do mundo: o menu + da Estrutura, O mundo › Céu, ou pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4' (ou --sky dusk.png:2), e --no-sky.

Palavras na cena

Um cartão de texto é um cartão cuja imagem é desenhada em vez de lida, então as palavras ganham de graça a orientação, os giros, a escala, o recorte e os traços de um cartão. No app, o menu + da Estrutura, Uma imagem › Texto, põe um acima do modelo — um nó Texto do Grafo de cena —, um pixel da fonte para um pixel do sprite; o Inspetor dele traz o Texto, a Fonte, a Escala do texto, a Tinta e um Contorno, e os ajustes do próprio cartão abaixo deles. Palavras são um rótulo, no app como num script: não decidem como a tomada é enquadrada, então o app as põe logo dentro do topo do quadro; ligue Conta para o enquadramento para enquadrar em volta delas. Por um 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 é em metros por pixel de fonte, então as palavras ficam legíveis quando isso dá um pixel de sprite ou mais: a renderização mostra os pixels por metro da folha (cerca de 40 para um projeto de cavaleiro com --size 128, 0.033 × 40 ≈ 1.3; 37 com os arbustos e as imagens desta página, ainda acima de 1). A 64 px fica em cerca de 24, menos de um pixel por pixel de fonte, e as letras se desfazem.

Opção	O que ele faz
--font NAME|FILE	pixor-11, pixor-5, ou um arquivo de fonte seu: o formato próprio do Pixor ou um .bdf.
--align left|middle|right	Onde fica cada traço.
--wrap PIXELS	Quebrar a linha nesta largura. Uma palavra longa demais fica inteira: uma palavra partida é mais difícil de ler do que uma linha que sobra.
--letter-spacing N, --line-spacing N	Pixels inteiros extras.
--text-colour, --text-outline, --text-shadow	Tinta, um contorno de um pixel, uma sombra de pixel.
--text-scale N	Cada pixel vira N por N. Só passos inteiros.
--facing sprite, --picture-pixels N	No espaço do sprite, N pixels de sprite por pixel de fonte, em todas as câmeras.

O layout é só com inteiros em todo lugar: larguras de avanço e alturas de linha são pixels inteiros, não há shaping nem posicionamento de subpixel, então um texto dá os mesmos pixels em qualquer máquina. Um caractere que a fonte não tem vira um espaço em vez de uma caixa, porque uma caixa num sprite é pior que um espaço.

As palavras são, por padrão, um rótulo: elas não decidem como a tomada é enquadrada. No espaço do sprite, ficam exatas de todos os lados, sem inclinação e sem dimensionamento pela câmera: --facing sprite.

Palavras como geometria

Uma forma de letras escreve as suas palavras e extruda cada pixel da fonte num bloco, então as letras recebem iluminação, faixas, contornos e a paleta como qualquer outra geometria — uma placa, uma faixa, uma lápide:

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 de altura, a palavra fica livre do elmo do cavaleiro; como qualquer forma, ela precisa de um pixel de sprite ou mais por pixel de fonte para ser lida, o que o cavaleiro em --size 128 dá.

Só as faces que nenhum vizinho esconde são construídas, então uma palavra tem algumas centenas de triângulos, e as letras ficam de pé sobre a tinta delas, e não sobre o espaço vazio que uma descendente precisa.

Fontes

O Pixor traz duas fontes, ambas desenhadas para ele: pixor-11, a fonte em que a interface é desenhada, e pixor-5, com cinco pixels por maiúscula e três para a maioria das letras, para números sobre um sprite, rótulos e um HUD, onde a maior pesaria mais do que aquilo que nomeia. Uma forma letters escolhe entre elas com Fonte no Inspetor. Uma fonte sua é um arquivo de texto com o mesmo formato, tão simples quanto parece:

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

Uma linha == C indica o caractere (ou == U+00E9 para um que você não consegue digitar), depois as linhas dele: # é tinta, . é vazio. É legível, funciona com diff e não precisa de biblioteca de fontes.

Um arquivo BDF funciona como está: é o formato em que a maioria das fontes pixeladas é compartilhada. Os glifos dele ficam numa célula da ascendente e descendente da fonte, e cada um é tão largo quanto a fonte diz que ele avança, então o espaçamento que o designer escolheu é mantido e o Pixor não acrescenta nenhum.

Uma paleta a partir de uma imagem

Um arquivo de paleta pode ser uma imagem: uma imagem de referência, uma captura de tela de um jogo cujo visual você quer, ou uma faixa de amostras.

pxr render hero.glb --palette reference.png

Uma imagem com dezesseis cores ou menos dá exatamente essas, numa ordem estável; uma com mais dá até dezesseis das suas cores mais representativas (cores próximas demais para distinguir viram uma). A mesma imagem dá a mesma paleta em todas as máquinas.