Изометрический пиксель-арт

Что это такое

Изометрические игры показывают мир сверху и сбоку, по диагонали, без перспективы: параллельные линии остаются параллельными, а далекие предметы не уменьшаются. Полы становятся ромбами, а стены уходят под двумя одинаковыми наклонами.

В истинной изометрической проекции эти наклоны составляют 30° от горизонтали. В пиксель-арте почти всегда используют чуть более пологий наклон, где каждая линия идет на два пикселя вбок и на один вверх. Этот наклон — около 26.6°, и его обычно называют изометрией 2:1 (строго говоря, это диметрическая проекция).

Почему 2:1

На пиксельной сетке линия выглядит чистой, только если ее ступени повторяются равномерно. Линия 2:1 — идеальная лесенка: два пикселя, ступенька, два пикселя, ступенька. У линии в 30° такого простого узора нет, и она выходит неровными отрезками по одному и два пикселя, что выглядит зубчато.

2:1 к тому же упрощает тайлы. Тайл пола — ромб вдвое шире своей высоты, например 32×16 или 64×32, и тайлы стыкуются без зазоров.

Ракурсы камеры

Если вы рендерите из 3D, камера должна быть ортографической (без перспективы), повернутой на 45° вокруг модели, чтобы смотреть по диагонали, и наклоненной вниз на 30°. При таком наклоне квадратный тайл пола проецируется в ромб, ровно вдвое более широкий, чем высокий, так что края пола ложатся на чистые линии 2:1. Более крутой или пологий наклон дает другие соотношения, которые выстраиваются не так аккуратно.

Частые ошибки

• Удвоенные пиксели на линиях. Линия 2:1 должна давать ровно два пикселя на ступень. Серии по три или пиксели, наложенные друг на друга на ступени, делают края толстыми.
• Смешение углов. Одно здание под 2:1, а другое с более крутым наклоном ломают сетку.
• Забытая высота. Вертикальные края остаются вертикальными. Высота на сетке 2:1 измеряется целыми пикселями; выберите, сколько пикселей в высоту составляет метр, и придерживайтесь этого.
• Перспективные камеры. При рендере с перспективой линии сходятся, и тайлы перестают стыковаться.

Как нарисовать вручную

1. Рисуйте ромб тайла по линиям 2:1, например 32×16.
2. Стройте объекты как параллелепипеды на этой сетке: ромбовидный верх, вертикальные стороны.
3. Затените две видимые стороны по-разному: одну освещенной, другую в тени.
4. Держите каждый наклонный край на лесенке 2:1.
5. Сначала нарисуйте персонажей в четырех диагональных направлениях; остальные четыре добавьте при необходимости.

Как это делает Pixor

В Pixor каждая сторона — это камера. Изометрический вид использует настройку 2:1, но можно выбрать и вид сбоку, три четверти или сверху либо задать любой наклон. Кольца из 4, 8 или 16 камер дают каждое направление. С единым фиксированным Пикс./м на камерах здания, реквизит и персонажи рендерятся пропорционально на одной сетке.

Похожее

• Размеры спрайтов: тайлы и персонажи
• Обводки
• Направления и руководство по сцене