Bilder und Text

Zwei Arten von Inhalt kommen nicht aus einem 3D-Modell: Bilder, die du schon hast, und Text. Beide kommen am Anfang in die Pipeline, als Teile der Szene, nicht als Übermalung am Ende – so wirken Linien, Konturen, Verdeckung, Schatten und die Palette auf sie, ohne einen einzigen neuen Durchgang.

Ein Bild in der Szene

Im Schritt Szene legt das Menü + der Gliederung, Ein Bild › Aus einer Bilddatei…, das Bild auf eine Ebene: Billboard-Laub, ein ferner Baum, ein Schild, ein beleuchtetes Fenster, ein gemalter Hintergrund. Es ist ein Teil wie jedes andere, mit einer Zeile in der Gliederung, einem Transform-Block und eigenen Einstellungen im Inspektor, und es ist eine Bild-Node des Szenen-Graphen: Die Zeile und die Node sind ein und dasselbe, seine Einstellungen stehen auch an der Node, und eine Zeile oder ein Kranz danach wiederholt es.

Einstellung	Was sie tut
Ausrichtung	Aufrecht, Flach auf dem Boden, Sprite (im Sprite-Raum) oder Decal (beide unten).
Gespiegelt	Von links nach rechts gespiegelt. Es kostet nichts und braucht keine zweite Datei.
Neigung	Nach hinten geneigt, in Grad.
Vierteldrehungen	Um die senkrechte Achse gedreht. Nur Vierteldrehungen: Alles dazwischen bräuchte Filterung, und Filterung macht Pixel-Art unscharf.
Meter pro Pixel	Wie viel von der Welt ein Bildpixel abdeckt.
Licht der Szene übernehmen	Standardmäßig aus: Ein Bild ist meist schon von dem schattiert, der es gezeichnet hat, und erneutes Schattieren gibt ihm zwei Lichtrichtungen.
Linien darum	Wie um jedes andere Teil.
Ausschneiden unter	Pixel, die so transparent sind, sind Löcher, sodass freigestelltes Laub funktioniert.
Zählt für Bildausschnitt	Aus für eine Beschriftung: Ein „GAME OVER“-Banner über einem Ritter sollte den Ritter nicht schrumpfen lassen.
Parallaxe-Ebene	Zu welcher Ebene es gehört, von hinten gezählt, sodass gezeichnete Grafik und 3D einen Ebenenstapel teilen.

Zwei Schaltflächen machen es scharf, und beide nutzen die gezeigte Kamera:

• Ganze Pixel wählt die Größe so, dass ein Bildpixel eine ganze Zahl von Sprite-Pixeln abdeckt. Alles andere tastet neu ab.
• Zur Kamera drehen neigt sie um die Neigung dieser Kamera. Eine Kamera, die nach unten schaut, verkürzt eine aufrechte Karte, was Zeilen verschluckt und Buchstaben zu Brei macht.

Über die Kommandozeile:

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

Im Sprite-Raum ist ein Bild überhaupt keine Karte. Nachdem die Szene gezeichnet ist, wird sein Bild auf die eigenen Pixel des Sprites gesetzt, wo seine Position landet: So schaut es zu jeder Kamera – ein Billboard, derselbe Busch von jeder Seite des Sheets –, und jedes Bildpixel ist eine ganze Zahl von Sprite-Pixeln (Sprite-Pixel, standardmäßig 1), egal welche Kamera, was exakte Buchstaben brauchen. Es behält die Tiefe seiner Position, sodass das, was davor steht, es weiterhin verdeckt, und es ist ein Teil wie eine Karte, sodass Linien, Bereinigung und Palette es als eines behandeln. Es steht auf seiner Position, der Mitte seiner Unterkante, wie eine aufrechte Karte; seine Position zählt für den Bildausschnitt, wenn Zählt für Bildausschnitt an ist.

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

Ein Decal wird auf die Flächen gemalt, die dort liegen, wo eine aufrechte Karte stünde, innerhalb der Reichweite ihrer Ebene (in Metern, auf beiden Seiten): ein Schild an einer Wand, ein Riss, eine Brandspur; um eine Vierteldrehung nach hinten gekippt eine Pfütze oder ein Teppich am Boden. Es hat keine Geometrie und kein eigenes Teil: Wo eine im Frame gezeichnete Fläche in seine Box fällt, nimmt die Fläche dort die Farbe des Bildes an und behält ihr eigenes Licht, ihre Linien und ihre Kontur, sodass ein Schild an einer Wand so schattiert wird wie die Wand.

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

Auf der Palette. Ein Bild wird beim Import auf die Palette des Projekts gebracht, wenn das Projekt eine feste hat, und der Render sagt, wie viele seiner Pixel sich verändert haben:

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

--keep-colours lässt sie, wie sie sind. Ein Projekt mit automatischer Palette hat noch keine, auf die eingerastet werden kann – seine Palette wird aus dem gebaut, was in der Szene ist, Karten eingeschlossen –, also erledigt die Pipeline das weiter hinten.

PNG oder JPEG: Ein Freisteller will die Transparenz eines PNG, ein Foto als Hintergrund ist meistens ein JPEG.

Ein Bild aus mehreren Frames. Ein Bild aus nebeneinanderliegenden Frames – eine Fackel, die in vier flackert, eine Fahne, die in sechs weht – ist ein Bild mit gesetzten Frames (--picture-frames 4). Die Karte ist einen Frame breit und zeigt den ersten; ein in Pixor gemachter Clip setzt Keys dafür, welchen sie zeigt (picture:NAME, frame), sodass ein gemaltes Flackern im Sheet abläuft wie alles andere. Gespiegelt spiegelt jeden Frame an seinem Platz und behält ihre Reihenfolge.

Die Frames können eigene Dateien statt eines Streifens sein – Eine Datei pro Frame, --picture-sequence: Die genannte Datei ist die erste, flame_0001.png, und die Nummern danach folgen, gleich aufgefüllt; jeder Frame hat die Größe des ersten. Und sie können von selbst laufen – Spielt von selbst, --picture-plays: einer pro Frame, immer im Kreis, unter allem, was das Sheet zeigt, außer ein Clip keyt, welcher gezeigt wird. Bewegt sich sonst nichts, sind sie die Animation, eine Schleife namens 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

Ein Himmel

Ein Himmel liegt hinter allem, in den Pixeln, auf die nichts gezeichnet wurde — das Modell behält also die Kontur, die es ohne ihn hat. Er besteht aus Bändern, einer oberen und einer unteren Farbe und einer ganzen Zahl von Stufen dazwischen, nie einem Verlauf; oder aus einem gemalten Bild, oben am Frame verankert und zentriert, eine ganze Zahl Sprite-Pixel pro Bildpixel, mit seinen Rändern über die Seiten hinaus fortgesetzt. Seine Farben sind exakt in der Palette, die Bänder sind also die Farben, die du verlangt hast. Er ist Teil der Welt: das +-Menü der Gliederung, Die Welt › Himmel, oder pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4' (oder --sky dusk.png:2) und --no-sky.

Wörter in der Szene

Eine Textkarte ist eine Karte, deren Bild gezeichnet statt gelesen wird; so bekommen Wörter die Ausrichtung, Drehung, den Maßstab, den Ausschnitt und die Linien einer Karte geschenkt. In der App setzt das +-Menü der Gliederung, Ein Bild › Text, eine über das Modell — eine Text-Node des Szenen-Graph —, ein Pixel der Schrift pro Pixel des Sprites; ihr Inspektor enthält den Text, die Schrift, den Textmaßstab, die Tusche und eine Kontur, darunter die eigenen Einstellungen der Karte. Wörter sind eine Beschriftung, in der App wie per Skript: Sie bestimmen nicht den Bildausschnitt, also setzt die App sie knapp unter den oberen Rand des Frames; schalte Zählt für Bildausschnitt ein, um stattdessen um sie herum einzupassen. Per Skript:

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 ist Meter pro Schriftpixel, sodass die Wörter lesbar sind, wenn das einem Sprite-Pixel oder mehr entspricht: Der Render gibt die Sheet-Pixel pro Meter aus (etwa 40 für ein Ritterprojekt bei --size 128, 0.033 × 40 ≈ 1.3; 37 mit den Büschen und Bildern dieser Seite, immer noch über 1). Bei 64 px sind es etwa 24, unter einem Pixel pro Schriftpixel, und die Buchstaben zerfallen.

Option	Was sie tut
--font NAME|FILE	pixor-11, pixor-5 oder eine eigene Schriftdatei: Pixors eigenes Format oder eine .bdf.
--align left|middle|right	Wo jede Linie sitzt.
--wrap PIXELS	Bei dieser Breite umbrechen. Ein zu langes Wort bleibt ganz: Ein getrenntes Wort ist schwerer zu lesen als eine Zeile, die übersteht.
--letter-spacing N, --line-spacing N	Zusätzliche ganze Pixel.
--text-colour, --text-outline, --text-shadow	Tusche, eine Ein-Pixel-Kontur, ein Pixelschatten.
--text-scale N	Jedes Pixel wird N mal N. Nur ganze Stufen.
--facing sprite, --picture-pixels N	Im Sprite-Raum, N Sprite-Pixel pro Schriftpixel, auf jeder Kamera.

Das Layout ist überall ganzzahlig: Vorschubbreiten und Zeilenhöhen sind ganze Pixel, es gibt kein Shaping und keine Subpixel-Positionierung, sodass ein Text auf jedem Rechner dieselben Pixel ergibt. Ein Zeichen, das die Schrift nicht hat, ist eine Lücke statt eines Kästchens, denn ein Kästchen in einem Sprite ist schlimmer als eine Lücke.

Text ist standardmäßig ein Label: Er bestimmt nicht, wie das Bild gerahmt wird. Im Sprite-Raum ist er von jeder Seite exakt, ohne Neigung und ohne Größenanpassung an eine Kamera: --facing sprite.

Wörter als Geometrie

Eine Buchstaben-Form schreibt ihre Wörter und extrudiert jedes Pixel der Schrift zu einem Block; so nehmen die Buchstaben Beleuchtung, Stufen, Konturen und die Palette an wie jede andere Geometrie — ein Schild, ein Banner, ein Grabstein:

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

In 3 m Höhe steht das Wort frei über dem Helm des Ritters; wie jede Form braucht es ein Sprite-Pixel oder mehr pro Schriftpixel, um lesbar zu sein, was der Ritter bei --size 128 bietet.

Nur die Flächen, die kein Nachbar verdeckt, werden gebaut, sodass ein Wort ein paar hundert Dreiecke hat, und die Buchstaben stehen auf ihrer Tinte statt auf dem Leerraum, den eine Unterlänge braucht.

Schriften

Pixor bringt zwei Schriften mit, beide eigens dafür gezeichnet: pixor-11, die Schrift, in der die Oberfläche gezeichnet ist, und pixor-5, fünf Pixel pro Großbuchstabe und drei für die meisten Buchstaben, für Zahlen über einem Sprite, Beschriftungen und ein HUD, wo die größere das Benannte überwiegen würde. Eine letters-Form wählt zwischen ihnen mit Schrift in ihrem Inspektor. Eine eigene Schrift ist eine Textdatei derselben Form, und die ist so einfach, wie sie aussieht:

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

Eine Zeile == C nennt das Zeichen (oder == U+00E9 für eines, das du nicht tippen kannst), dann seine Zeilen: # ist Tusche, . ist leer. Es ist lesbar, lässt sich diffen und braucht keine Schriftbibliothek.

Eine BDF-Datei funktioniert, wie sie ist: In diesem Format werden die meisten Pixelschriften geteilt. Ihre Glyphen sitzen auf einer Zelle aus Ober- und Unterlänge der Schrift, und jede ist so breit, wie die Schrift ihren Vorschub angibt; so bleiben die Abstände erhalten, die ihr Designer gewählt hat, und Pixor fügt keine hinzu.

Eine Palette aus einem Bild

Eine Palettendatei kann ein Bild sein: ein Referenzbild, ein Screenshot eines Spiels, dessen Look du willst, oder ein Streifen Farbfelder.

pxr render hero.glb --palette reference.png

Ein Bild mit sechzehn Farben oder weniger liefert genau diese, in stabiler Reihenfolge; eines mit mehr liefert bis zu sechzehn seiner repräsentativsten (Farben, die zu nah beieinander liegen, um sie zu unterscheiden, werden zu einer). Dasselbe Bild liefert auf jedem Rechner dieselbe Palette.