Imágenes y palabras

Dos tipos de contenido no vienen de un modelo 3D: las imágenes que ya tienes y las palabras. Ambos entran en el pipeline al principio, como partes de la escena, no como un repintado al final, así que las líneas, los contornos, la oclusión, las sombras y la paleta funcionan sobre ellos sin una sola pasada nueva.

Una imagen en la escena

En el paso Escena, el menú + del Esquema, Una imagen › Desde un archivo de imagen…, pone la imagen sobre un plano: follaje en billboard, un árbol lejano, un cartel, una ventana iluminada, un fondo pintado. Es una parte como cualquier otra, con una fila en el Esquema, un bloque Transform y sus propios ajustes en el Inspector, y es un nodo Imagen del grafo de Escena: la fila y el nodo son una misma cosa, sus ajustes también están en el nodo, y una Fila o un Anillo después la repiten.

Ajuste	Qué hace
Orientación	De pie, Plano sobre el suelo, Sprite (en espacio de sprite) o Calcomanía (ambos abajo).
Reflejado	Volteado de izquierda a derecha. No cuesta nada y no necesita un segundo archivo.
Inclinación	Inclinado hacia atrás, en grados.
Cuartos de vuelta	Girado sobre el eje vertical. Solo en cuartos de vuelta: cualquier valor intermedio necesitaría filtrado, y el filtrado emborrona el pixel art.
Metros por píxel	Cuánto del mundo cubre un píxel de la imagen.
Tomar la luz de la escena	Desactivado de forma predeterminada: una imagen normalmente ya viene sombreada por quien la dibujó, y sombrearla otra vez le da dos direcciones de luz.
Líneas a su alrededor	Igual que alrededor de cualquier otra parte.
Recortar por debajo	Los píxeles así de transparentes son agujeros, para que el follaje recortado funcione.
Cuenta para el encuadre	Desactivado para una etiqueta: un cartel de «GAME OVER» sobre un caballero no debería encoger al caballero.
Capa de parallax	A qué capa pertenece, contando desde el fondo, para que el arte dibujado y el 3D compartan una misma pila de capas.

Dos botones lo hacen nítido, y ambos usan la cámara que se muestra:

• Píxeles enteros le da un tamaño con el que un píxel de la imagen cubre un número entero de píxeles del sprite. Cualquier otra cosa remuestrea.
• Mirar a la cámara la inclina según la inclinación de esa cámara. Una cámara que mira hacia abajo escorza una tarjeta vertical, lo que elimina filas y convierte las letras en una papilla.

Desde la línea de comandos:

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

En el espacio del sprite una imagen no es una tarjeta en absoluto. Una vez dibujada la escena, su imagen se pone sobre los propios píxeles del sprite donde cae su posición: así mira a cada cámara (un cartel, el mismo arbusto desde cada lado de la hoja) y cada píxel de la imagen es un número entero de píxeles de sprite (Píxeles de sprite, 1 por defecto) sea cual sea la cámara, que es lo que necesitan las letras exactas. Conserva la profundidad de su posición, así que lo que está delante de esa posición la sigue ocultando, y es una parte igual que una tarjeta, así que las líneas, la limpieza y la paleta la tratan como tal. Se apoya en su posición, el centro de su borde inferior, como una tarjeta vertical; su posición cuenta para el encuadre cuando Cuenta para el encuadre está activado.

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 calcomanía se pinta sobre las superficies que haya donde estaría una tarjeta vertical, dentro del Alcance de su plano (en metros, a cada lado): un letrero en un muro, una grieta, una marca de quemadura; inclinada un cuarto de vuelta hacia atrás, un charco o una alfombra en el suelo. No tiene geometría ni parte propia: donde una superficie dibujada en el fotograma cae dentro de su caja, la superficie toma ahí el color de la imagen y conserva su propia luz, líneas y contorno, así que un letrero en un muro se sombrea como el 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

En la paleta. Al importar una imagen, se lleva a la paleta del proyecto cuando este tiene una fija, y el render indica cuántos de sus píxeles cambiaron:

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

--keep-colours los deja como están. Un proyecto con paleta automática aún no tiene ninguna a la que ajustarse —su paleta se crea a partir de lo que hay en la escena, tarjetas incluidas—, así que el pipeline lo hace más adelante.

PNG o JPEG: un recorte quiere la transparencia de un PNG; una fotografía para un fondo suele ser un JPEG.

Una imagen de varios fotogramas. Una imagen de fotogramas uno al lado de otro (una antorcha que parpadea en cuatro, una bandera que ondea en seis) es una sola imagen con Fotogramas definido (--picture-frames 4). La tarjeta tiene el ancho de un fotograma y muestra el primero; un clip hecho en Pixor anima con claves cuál muestra (picture:NAME, frame), así que un parpadeo pintado se reproduce en la hoja como cualquier otra cosa. Reflejado voltea cada fotograma en su sitio, manteniendo su orden.

Los fotogramas pueden ser archivos propios en lugar de una tira: Un archivo por fotograma, --picture-sequence: el archivo indicado es el primero, flame_0001.png, y le siguen los números posteriores, con el mismo relleno de ceros; cada fotograma tiene el tamaño del primero. Y pueden reproducirse solos: Se reproduce sola, --picture-plays: uno por fotograma, una y otra vez, bajo lo que muestre la hoja, salvo que un clip fije con claves cuál se muestra. Sin nada más que se mueva, ellos son la animación, un bucle llamado 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 detrás de todo, en los píxeles en los que no se dibujó nada, así que el modelo conserva el contorno que tiene sin él. Son bandas, un color superior y uno inferior y un número entero de pasos entre ellos, nunca un degradado; o una imagen pintada, anclada en la parte superior del fotograma y centrada, con un número entero de píxeles de sprite por píxel de imagen, y sus bordes prolongados más allá de sus lados. Sus colores están exactamente en la paleta, así que las bandas son los colores que pediste. Forma parte del mundo: el menú + del Esquema, El mundo › Cielo, o pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4' (o --sky dusk.png:2), y --no-sky.

Texto en la escena

Una tarjeta de texto es una tarjeta cuya imagen se dibuja en lugar de leerse, así que el texto recibe sin coste la orientación, los giros, la escala, el recorte y las líneas de una tarjeta. En la aplicación, el menú + del Esquema, Una imagen › Texto, pone una encima del modelo —un nodo Texto del grafo de Escena—, un píxel de la fuente por píxel del sprite; su Inspector contiene el Texto, la Fuente, la Escala del texto, la Tinta y un Contorno, y debajo los ajustes propios de la tarjeta. El texto es una etiqueta, tanto en la aplicación como desde un script: no decide cómo se encuadra la toma, así que la aplicación lo pone justo dentro de la parte superior del encuadre; activa Cuenta para el encuadre para encuadrar a su alrededor. Desde 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 son metros por píxel de fuente, así que el texto se lee cuando eso equivale a un píxel de sprite o más: el render muestra los píxeles por metro de la hoja (unos 40 para un proyecto de caballero a --size 128, 0.033 × 40 ≈ 1.3; 37 con los arbustos e imágenes de esta página, aún por encima de 1). A 64 px son unos 24, menos de un píxel por píxel de fuente, y las letras se deshacen.

Opción	Qué hace
--font NAME|FILE	pixor-11, pixor-5 o un archivo de fuente propio: el formato propio de Pixor o un .bdf.
--align left|middle|right	Dónde está cada línea.
--wrap PIXELS	Ajusta las líneas a este ancho. Una palabra demasiado larga se deja entera: una palabra partida es más difícil de leer que una línea que sobresale.
--letter-spacing N, --line-spacing N	Píxeles enteros extra.
--text-colour, --text-outline, --text-shadow	Tinta, un contorno de un píxel, una sombra de píxel.
--text-scale N	Cada píxel pasa a ser N por N. Solo pasos enteros.
--facing sprite, --picture-pixels N	En el espacio del sprite, N píxeles del sprite por píxel de la fuente, en cada cámara.

La maquetación es solo con enteros en todas partes: los avances y las alturas de línea son píxeles enteros, no hay shaping ni posicionamiento de subpíxel, así que una cadena da los mismos píxeles en cualquier máquina. Un carácter que la fuente no tiene es un hueco en lugar de un recuadro, porque un recuadro en un sprite es peor que un hueco.

Las palabras son una etiqueta por defecto: no deciden cómo se encuadra la toma. En el espacio del sprite son exactas desde cada lado, sin inclinación ni ajuste de tamaño a una cámara: --facing sprite.

Texto como geometría

Una forma de letras escribe sus palabras y extruye cada píxel de la fuente en un bloque, así que las letras reciben iluminación, bandas, contornos y la paleta como cualquier otra geometría: un letrero, un estandarte, una lápida:

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, la palabra queda libre del casco del caballero; como cualquier forma, necesita un píxel de sprite o más por cada píxel de la fuente para leerse, lo que da el caballero a --size 128.

Solo se construyen las caras que ningún vecino oculta, así que una palabra son unos pocos cientos de triángulos, y las letras se apoyan sobre su tinta y no sobre el espacio vacío que necesita un trazo descendente.

Fuentes

Pixor trae dos fuentes, ambas dibujadas para él: pixor-11, la fuente con la que se dibuja la interfaz, y pixor-5, de cinco píxeles por mayúscula y tres en la mayoría de las letras, para números sobre un sprite, etiquetas y un HUD, donde la más grande pesaría más que lo que nombra. Una forma letters elige entre ellas con Fuente en su Inspector. Una fuente propia es un archivo de texto con la misma forma, que es tan sencillo como parece:

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

Una línea == C nombra el carácter (o == U+00E9 para uno que no puedes escribir), y después sus filas: # es tinta, . está vacío. Es legible, admite diff y no necesita ninguna biblioteca de fuentes.

Un archivo BDF funciona tal cual: es el formato en el que se comparten la mayoría de las fuentes pixeladas. Sus glifos se asientan sobre una celda con el ascendente y el descendente de la fuente, y cada uno tiene el ancho de avance que indica la fuente, así que se conserva el espaciado que eligió su diseñador y Pixor no añade ninguno.

Una paleta a partir de una imagen

Un archivo de paleta puede ser una imagen: una imagen de referencia, una captura de un juego cuyo aspecto quieres o una tira de muestras de color.

pxr render hero.glb --palette reference.png

Una imagen con dieciséis colores o menos da exactamente esos, en un orden estable; una con más da hasta dieciséis de los más representativos (los colores demasiado parecidos para distinguirlos se funden en uno). La misma imagen da la misma paleta en cualquier máquina.