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

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

Автор: <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.behance.net%2Fduncanbellsa&postId=1243832" rel="nofollow noreferrer noopener" target="_blank">Duncan Bell</a>
Автор: Duncan Bell

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

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

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

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

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

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

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

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

Примеры проекций, используемых в играх. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.reddit.com%2Fr%2Fgamedev%2Fcomments%2Femex5%2Ftil_the_difference_between_isometric_view_and%2F&postId=1243832" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Примеры проекций, используемых в играх. Источник

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

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

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

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

Примеры первых изометрических игр — это Zaxxon от Sega (1982), Treasure Island (1981), Q*bert (1982).

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

Стильная ролевая игра Disco Elysium — отличный пример современной игровой изометрии. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fstore.steampowered.com%2Fapp%2F632470%2FDisco_Elysium__The_Final_Cut%2F%3Fl%3Drussian&postId=1243832" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Стильная ролевая игра Disco Elysium — отличный пример современной игровой изометрии. Источник
Художественный стиль Shadowrun Returns описывают как совмещающий 2D и 3D. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.gog.com%2Fgame%2Fshadowrun_returns&postId=1243832" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Художественный стиль Shadowrun Returns описывают как совмещающий 2D и 3D. Источник

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

Mobile Legends: Bang Bang — одна из популярнейших MOBA-игр в мире. <a href="https://api.dtf.ru/v2.8/redirect?to=http%3A%2F%2Fntnews.ru%2Fpredstavleny-osobennosti-obnovleniya-next-dlya-mobile-legends-bang-bang%2F&postId=1243832" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Mobile Legends: Bang Bang — одна из популярнейших MOBA-игр в мире. Источник

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

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

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

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

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

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

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

Кадр из <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DKvSjJ-kdGio&postId=1243832" rel="nofollow noreferrer noopener" target="_blank">видео</a>
Кадр из видео

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Отсутствие внутреннего построения. Это происходит, когда художник берется за детали, прежде чем построить объекты примитивами. В мелочах легко запутаться и можно выбиться из изометрической сетки. Помните: сначала строим простые формы, проверяем их на соответствие сетке, а потом переходим к подробной проработке.
  2. Неправильное построение кривых форм. Кривые в изометрии строить несколько сложнее, чем прямые линии. Внимательно следите за правильным построением эллипсов на сетке, за расположением относительно центральной оси.
  3. Несоответствие объектов одной изометрической сетке. Все нарисованные объекты должны быть ориентированы одинаково. Нельзя в проекте для одних спрайтов применять одну сетку, а для других — другую.
  4. Разный уровень детализации. Следите, чтобы количество деталей у всех объектов было примерно одинаковым.
  5. Разница масштабов. Когда художник перестает соотносить объекты рисунка между собой, может получиться, что персонаж станет крупнее домика и не сможет с ним взаимодействовать (пройти в дверь, заглянуть в окно и т.п.) Важно сравнивать размеры персонажей с окружением.

Текст написала Стефания Косюг, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

254254
18 комментариев

Ох уж эта изометрия) Помню в 2013 делал своим худам быструю памятку для обучения. Мало ли кому тоже пригодиться

32
Ответить

Комментарий недоступен

2
Ответить

Мать моя женщина, хорошая, ёмкая статья! Спасибо!

4
Ответить

Рады стараться 🥰

1
Ответить

А вот как делают изометрические спрайты для гарденскейпс-клона
Моделят 3d-объект, рендерят в изометрической проекции, обмазывают фактурами в фотошопе.

https://retrostylegames.com/portfolio/isometric-interior-3d-sprites-millionaire-mansion-builder/

3
Ответить

Лайк, подписка, колокольчик :3

1
Ответить

Рады вам <3

Ответить