Как рисовать изометрию: правила, советы, ошибки

Изометрия — один из самых популярных вариантов отображения игрового мира, особенно на рынке мобильного геймдева. Разбираемся, как с ней работать.

image34.png

Автор: Duncan Bell

Что такое изометрия и зачем она нужна

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

image19.jpg

Перспектива (а) и изометрия (б)

Существует несколько видов изометрии: прямоугольная, косоугольная фронтальная, косоугольная горизонтальная. Они различаются положением осей X и Y и углами между ними. От этих параметров зависит изображение предмета. Это хорошо видно на примере с кубиком:

image13.jpg

Прямоугольная (а), косоугольная фронтальная (б) и косоугольная горизонтальная (в) изометрические проекции

Чаще всего, говоря об изометрии, подразумевают прямоугольную изометрическую проекцию. В ней ось Z направлена вертикально, а оси XYZ образуют углы в 120°. Выглядит это так:

image30.png

Кроме изометрии и ее разновидностей, существуют похожие на нее диметрия и триметрия. В изометрии углы между осями XYZ одинаковые и равны 120°, в диметрии равны два из трех углов, в триметрии величина всех углов между осями разная. Все виды этих проекций нашли применение в геймдеве, их привычно называют одним словом — изометрия.

image36.png

Примеры проекций, используемых в играх. Источник

Например, в игре Invisible, Inc. используется изометрическая проекция с углами 120°:

image42.png

Источник

Игра Transistor — пример использования диметрии в игровой графике:

image7.png

Источник

В игре Simcity 4 используется триметрическая проекция:

image8.png

Источник

На заре становления изометрия позволяла создавать в играх имитацию объемного пространства с помощью плоских спрайтов. Так как объекты не меняют своих размеров в зависимости от расположения на игровом поле, компьютеру не нужно производить сложные вычисления и моделировать постоянно меняющееся окружение.
Примеры первых изометрических игр — это Zaxxon от Sega (1982), Treasure Island (1981), Q*bert (1982).

image14.pngimage5.gif

Первые изометрические игры: Zaxxon и Q*bert. ИсточникИсточник

Сегодня, когда компьютеры с легкостью справляются с воспроизведением сложной графики, изометрия по-прежнему остается актуальной. За последние несколько лет вышли такие изометрические игры как Invisible, Inc, Transistor, Disco Elysium и многие другие.

image15.png

Стильная ролевая игра Disco Elysium — отличный пример современной игровой изометрии. Источник

image41.png

Художественный стиль Shadowrun Returns описывают как совмещающий 2D и 3D. Источник

Изометрия остается популярной в RPG и стратегиях и повсеместно встречается в мобильных играх. Она оставляет разработчикам пространство для экспериментов и в создании визуала, и в разработке геймплея.

image16.png

Mobile Legends: Bang Bang — одна из популярнейших MOBA-игр в мире. Источник

Как рисовать изометрию

Строим изометрическую сетку

В рисовании изометрии главную роль играет сетка, относительно которой художник будет выстраивать все объекты. Это может быть как классическая изометрическая сетка с углами между осями 120°, так и эксклюзивная для определенного проекта — параметры сетки могут определяться техническим заданием или самим художником.

image48.png

Стандартная изометрическая сетка с углами 120°

Изометрия — отличный вариант для тех, кто не любит ломать голову над перспективными сокращениями. Нарисовав сетку один раз, вы ориентируете все горизонтали в рисунке к параллели с этой сеткой, а вертикали оставляете без изменений.

image6.jpg

Небольшая геометрическая композиция, выстроенная по изометрической сетке. Видно, что рёбра лежат параллельно линиям сетки.

Стандартный вариант игровой изометрической сетки — диметрия с соотношением сторон 2:1.

image35.jpg

Кадр из видео

Существует множество способов создания изометрической сетки. Можно отрисовать ее вручную, можно взять шаблон из интернета, можно настроить направляющие в Photoshop.

Один из простых и быстрых способов — строим сетку с углами 90°:

image44.png

Поворачиваем ее на 45°, нажимаем «применить»:

image25.png

Затем отключаем привязку высоты к ширине и меняем высоту со 100% на 50%. В итоге получится сетка с соотношением сторон 2:1, часто используемая в изометрических проектах:

image27.png

Процент высоты можно менять в зависимости от художественной задачи. В результате будет меняться раскрытие сетки

Важно отметить, что, чем больше сетка раскрыта, тем лучше будут видны объекты (одни не будут загораживать другие), но при этом мы можем показать меньше игрового поля. И наоборот, при небольшом раскрытии сетки видно больше игрового пространства, но объекты могут наползать друг на друга. Учитывайте этот нюанс при выборе угла сетки.

image20.jpg

Диметрическая сетка и сетка с меньшим углом раскрытия

Строим простые фигуры по сетке

Рисование начинается с построения базовых форм. Изометрия не исключение. Ориентируемся на сетку и строим примитивные фигуры.

image50.jpg

Если с квадратами, прямоугольниками треугольниками все понятно — их необходимо просто вписать в необходимое количество плиток, то как быть с кругом?

В случае с кругом нужно следить, чтобы крайние точки окружности с каждой стороны совпадали с углами квадратов как на картинке (отмечены точками):

image46.jpg

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

image2.jpg

Строим объемные фигуры по сетке

Переходим к объемным фигурам. На основе квадрата строим куб. Копируем квадрат в основе на две клетки вверх и соединяем углы вертикалями. С помощью оттенков можно показать объем.

image38.jpg

Подобным образом строим параллелепипед на основе прямоугольника.

image39.jpg

Пирамиду также довольно легко построить на основе квадрата или прямоугольника. Проводим вертикаль из центра основания на нужную высоту и от вершины проводим прямые к углам — ребра пирамиды.

image3.jpg

В основании цилиндра и конуса лежит круг. Копируем круг основания на нужную высоту и соединяем края вертикалями — получится цилиндр.

image31.jpg

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

image11.jpg

Освоившись с базой, можно переходить к более сложным формам.

Прежде чем приступать к непосредственно построению в изометрии, пробуйте сначала свободно поскетчить, не ограничивайте воображение. Когда найдете нужную форму — переходите к построению по сетке.

Домик в изометрии

Классический кейс казуальных игр — изометрический домик. Разбиваем концепт на простые формы и отстраиваем по сетке.

image23.jpg

Начинаем с болванки параллелепипеда — основания домика. Его довольно легко построить по изометрической сетке.

image22.jpg

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

image32.jpg

Относительно оси строим дверь и окно. На скате крыши также строим центральную ось, опираясь на нее рисуем слуховое окошко. Вертикали остаются вертикальными, горизонтали строим по сетке.

image26.jpg

Рисуем толщину стен в оконных проемах, добавляем детали.

image37.jpg

Отметим, что в данном примере относительно центральных осей в обе стороны отложено одинаковое расстояние частей домика. На начальных этапах обучения так проще ориентироваться в построении и деталях.

image4.jpg

Небольшое отступление: не всегда детали расположены симметрично относительно центральной оси, есть и примеры с асимметрией. Но чаще всего в геймдеве мы встречаем примеры симметричного построения объектов.

image24.pngimage10.png

Примеры симметричного и асимметричного построения относительно центра

Завершаем лайн, добавляя финальные штрихи и детали, говорящие о характере домика.

image18.jpg

Внутреннее убранство домика тоже можно построить примитивами по сетке, а затем дополнить мелочами.

image21.pngimage43.png

Элементы окружения в виде базовых форм и в конечном итоге. Автор: Sahil Trivedi

Бэкграунд и окружение играют важную роль в изометрических играх — пользователь видит все игровое пространство или бОльшую его часть. Уделите этому особое внимание.

Дерево в изометрии

Органические объекты (деревья, кусты, камни и т.п.) с одной стороны проще нарисовать в изометрии, так как это плавные формы и там почти нет таких строгих построений. Но с другой стороны, в их изображении проще запутаться.

В этом примере в основании ствола дерева — окружности разных размеров.

image40.jpg

Простраиваем ствол и ветки. Важно, чтобы дерево вписывалось в 3D-пространство, чтобы ветки и крона вокруг ствола была направлены во все части света почти сферически. Поэтому, чтобы сделать дерево более объемным, направляем ветви вдоль разных линий сетки.

image33.jpg

Простыми формами намечаем крону.

image17.jpg

Детализируем дерево, дополняем его листьями и корнями, также направляя их в разные стороны.

image12.jpg

image28.jpg

Завершаем рисунок деталями.

image1.jpg

Персонажи в изометрии

Изометрических персонажей тоже рисуют на основании примитивов. В данном случае в основании базовых частей персонажа лежат эллипсы разных размеров.

image51.jpg

image29.jpg

Важно, чтобы симметричные части фигуры (в данном случае, например, края прически, подол платья) находились на одном уровне. Проверяйте их линиями, параллельными сетке.

image45.jpg

image9.jpg

image47.jpg

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

image49.jpg

Ошибки в рисовании изометрии

Несколько типичных ошибок художников, начинающих работать с изометрией:

  1. Отсутствие внутреннего построения. Это происходит, когда художник берется за детали, прежде чем построить объекты примитивами. В мелочах легко запутаться и можно выбиться из изометрической сетки. Помните: сначала строим простые формы, проверяем их на соответствие сетке, а потом переходим к подробной проработке.
  2. Неправильное построение кривых форм. Кривые в изометрии строить несколько сложнее, чем прямые линии. Внимательно следите за правильным построением эллипсов на сетке, за расположением относительно центральной оси.
  3. Несоответствие объектов одной изометрической сетке. Все нарисованные объекты должны быть ориентированы одинаково. Нельзя в проекте для одних спрайтов применять одну сетку, а для других — другую.
  4. Разный уровень детализации. Следите, чтобы количество деталей у всех объектов было примерно одинаковым.
  5. Разница масштабов. Когда художник перестает соотносить объекты рисунка между собой, может получиться, что персонаж станет крупнее домика и не сможет с ним взаимодействовать (пройти в дверь, заглянуть в окно и т.п.) Важно сравнивать размеры персонажей с окружением.
532 0 850 6
1
2022-07-02
Благодарю ☀️
RENDER.RU