Изображения и слова

Два вида содержимого не берутся из 3D-модели: изображения, которые у вас уже есть, и слова. Оба входят в конвейер в самом начале, как части сцены, а не как прорисовка поверх в конце, — так что линии, обводка, затенение окружения, тени и палитра работают с ними без единого нового прохода.

Изображение в сцене

На шаге «Сцена» пункт Изображение › Из файла изображения… меню + панели «Структура» помещает изображение на плоскость: листва-билборд, далекое дерево, вывеска, освещенное окно, нарисованный задник. Это такая же часть, как любая другая, — со строкой на панели «Структура», блоком Transform и собственными параметрами в Инспекторе, и это узел Изображение графа сцены: строка и узел — одно и то же, его параметры тоже на узле, а ряд или кольцо после него его повторяют.

Параметр	Что делает
Ориентация	«Вертикально», «Плоский» на земле, «Спрайт» (в пространстве спрайта) или «Декаль» (оба ниже).
Отражено	Зеркальное отражение слева направо. Ничего не стоит и не требует второго файла.
Наклон	Наклон назад, в градусах.
Четверти оборота	Поворот вокруг вертикальной оси. Только на четверти: все промежуточное потребовало бы фильтрации, а фильтрация размывает пиксель-арт.
Метров на пиксель	Какую часть мира покрывает один пиксель изображения.
Брать свет сцены	По умолчанию выключено: изображение обычно уже затенено тем, кто его нарисовал, и повторное затенение дает ему два направления света.
Линии вокруг	Как и вокруг любой другой части.
Отсекать ниже	Пиксели с такой прозрачностью становятся дырами, поэтому вырезанная листва работает.
Учитывается при кадрировании	Выключено для надписи: баннер «GAME OVER» над рыцарем не должен уменьшать рыцаря.
Слой параллакса	К какому слою он относится, считая сзади, чтобы нарисованная графика и 3D делили одну стопку слоев.

Две кнопки делают его четким, и обе используют показанную камеру:

• «Целые пиксели» подбирает размер так, чтобы один пиксель изображения покрывал целое число пикселей спрайта. Все остальное пересэмплируется.
• Повернуть к камере наклоняет ее на наклон этой камеры. Камера, смотрящая вниз, укорачивает вертикальную карточку, из-за чего пропадают строки, а буквы превращаются в кашу.

Из командной строки:

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

В пространстве спрайта изображение — вовсе не карточка. После того как сцена нарисована, его картинка кладется на собственные пиксели спрайта там, куда попадает его место: так оно обращено к каждой камере — билборд, один и тот же куст со всех сторон листа, — и каждый пиксель изображения равен целому числу пикселей спрайта (Пиксели спрайта, по умолчанию 1) при любой камере, что и нужно для точных букв. Оно сохраняет глубину своего места, так что стоящее перед этим местом по-прежнему его закрывает, и является частью, как карточка, поэтому линии, очистка и палитра обращаются с ним как с одним целым. Оно стоит на своем месте — середине нижнего края, — как вертикальная карточка; его место учитывается при кадрировании, когда включено Учитывается при кадрировании.

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

Декаль рисуется на любых поверхностях там, где стояла бы вертикальная карточка, в пределах Охвата от ее плоскости (в метрах, по обе стороны): вывеска на стене, трещина, след ожога; наклоненная назад на четверть оборота — лужа или коврик на земле. У нее нет ни геометрии, ни своей части: там, где поверхность, нарисованная в кадре, попадает в ее объем, поверхность принимает цвет изображения и сохраняет собственные свет, линии и обводку, так что вывеска на стене затенена так же, как стена.

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

В палитре. Если у проекта фиксированная палитра, изображение при импорте переводится в нее, и рендер сообщает, сколько его пикселей изменилось:

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

--keep-colours оставляет их как есть. У проекта с автоматической палитрой пока не к чему привязываться — его палитра строится из того, что есть в сцене, включая карточки, — поэтому конвейер делает это дальше.

PNG или JPEG: вырезанному объекту нужна прозрачность PNG, а фотография для фона чаще всего бывает JPEG.

Изображение из нескольких кадров. Изображение с кадрами рядом — факел, мерцающий в четырех, флаг, развевающийся в шести, — это одно изображение с заданным параметром Кадры (--picture-frames 4). Карточка шириной в один кадр и показывает первый; клип, сделанный в Pixor, ставит ключи на то, какой кадр она показывает (picture:NAME, frame), так что нарисованное мерцание играет в листе, как все остальное. Отражено отражает каждый кадр на месте, сохраняя их порядок.

Кадры могут быть отдельными файлами вместо одной полосы — Файл на кадр, --picture-sequence: указанный файл — первый, flame_0001.png, а следующие за ним номера идут с тем же дополнением нулями; каждый кадр размером с первый. И они могут воспроизводиться сами — Воспроизводится само, --picture-plays: по одному на кадр, по кругу, под тем, что показывает лист, если только клип не задает ключами, какой показывать. Когда больше ничего не движется, они и есть анимация — цикл под названием 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

Небо

Небо находится позади всего, в пикселях, на которых ничего не нарисовано, — поэтому модель сохраняет свою обводку и без него. Это полосы — верхний цвет, нижний и целое число ступеней между ними, никогда не плавный переход, — или нарисованное изображение, привязанное к верху кадра и отцентрированное, по целому числу пикселей спрайта на пиксель изображения, с краями, продолженными за его стороны. Его цвета точно входят в палитру, поэтому полосы — именно те цвета, которые вы заказали. Оно часть мира: меню + Структуры, «Мир › Небо», или pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4' (или --sky dusk.png:2), и --no-sky.

Слова в сцене

Текстовая карточка — это карточка, изображение которой рисуется, а не читается из файла, поэтому слова бесплатно получают ориентацию, повороты, масштаб, вырезание и линии карточки. В приложении меню + Структуры, «Изображение › Текст», ставит ее над моделью — узел «Текст» графа сцены, — пиксель шрифта на пиксель спрайта; ее Инспектор содержит «Слова», «Шрифт», «Масштаб текста», «Чернила» и «Обводка», а под ними — собственные параметры карточки. Слова — это надпись, и в приложении, и из скрипта: они не определяют кадрирование снимка, поэтому приложение ставит их сразу под верхним краем кадра; включите «Учитывается при кадрировании», чтобы кадрировать с их учетом. Из скрипта:

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 — это метры на пиксель шрифта, так что слова читаются, когда на него приходится пиксель спрайта или больше: рендер выводит, сколько пикселей листа приходится на метр (около 40 для проекта с рыцарем при --size 128, 0.033 × 40 ≈ 1.3; 37 с кустами и изображениями с этой страницы, все еще больше 1). При 64 px это около 24 — меньше пикселя на пиксель шрифта, и буквы распадаются.

Вариант	Что делает
--font NAME|FILE	pixor-11, pixor-5 или собственный файл шрифта: в формате Pixor или .bdf.
--align left|middle|right	Где проходит каждая линия.
--wrap PIXELS	Переносить строки на этой ширине. Слишком длинное слово остается целым: разорванное слово читать труднее, чем выступающую строку.
--letter-spacing N, --line-spacing N	Дополнительные целые пиксели.
--text-colour, --text-outline, --text-shadow	Тушь, однопиксельная обводка, пиксельная тень.
--text-scale N	Каждый пиксель становится N на N. Только целые шаги.
--facing sprite, --picture-pixels N	В пространстве спрайта: N пикселей спрайта на пиксель шрифта, на каждой камере.

Раскладка везде только целочисленная: ширины символов и высоты строк — целые пиксели, нет шейпинга и субпиксельного позиционирования, поэтому строка дает одни и те же пиксели на любой машине. Символ, которого нет в шрифте, становится пробелом, а не квадратиком, потому что квадратик в спрайте хуже пробела.

Слова по умолчанию — подпись: они не влияют на кадрирование. В пространстве спрайта они точны с любой стороны, без наклона и без подгонки под камеру: --facing sprite.

Слова как геометрия

Фигура letters пишет свои слова и выдавливает каждый пиксель шрифта в блок, поэтому буквы получают освещение, полосы, обводку и палитру, как любая другая геометрия, — вывеска, транспарант, надгробие:

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

Стоя на высоте 3 м, слово не задевает шлем рыцаря; как и любой фигуре, ему нужен один пиксель спрайта или больше на каждый пиксель шрифта, чтобы читаться, что и дает рыцарь при --size 128.

Строятся только грани, не скрытые соседями, поэтому слово — это несколько сотен треугольников, а буквы стоят на своих штрихах, а не на пустом месте, нужном для нижних выносных элементов.

Шрифты

Pixor поставляется с двумя шрифтами, нарисованными специально для него: pixor-11 — шрифт интерфейса — и pixor-5 — пять пикселей на заглавную и три на большинство строчных — для чисел над спрайтом, подписей и HUD, где больший перевешивал бы то, что он обозначает. Фигура letters выбирает между ними параметром Шрифт в Инспекторе. Собственный шрифт — это текстовый файл того же вида, такой же простой, как кажется:

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

Строка == C называет символ (или == U+00E9 для того, что нельзя набрать), затем идут его строки: # — чернила, . — пусто. Это читается, сравнивается в диффе и не требует библиотеки шрифтов.

Файл BDF работает как есть: в этом формате распространяется большинство пиксельных шрифтов. Его глифы стоят в одной ячейке высотой от верхнего до нижнего выносного элемента шрифта, и каждый такой ширины, на какую шрифт сдвигает курсор, поэтому интервалы, выбранные дизайнером, сохраняются, а Pixor своих не добавляет.

Палитра из изображения

Файлом палитры может быть изображение: референс, скриншот игры, облик которой вам нужен, или полоса образцов цвета.

pxr render hero.glb --palette reference.png

Изображение с шестнадцатью цветами или меньше дает ровно их, в стабильном порядке; изображение с большим числом цветов дает до шестнадцати самых характерных (неразличимо близкие цвета сливаются в один). Одно и то же изображение на любом компьютере дает одну и ту же палитру.