Поэтапное создание изометрической пиксель-арт сцены
С участием гигантского мотылька.
Художник и пользователь Твиттера под ником Fabian опубликовал на своей странице несколько гифок, в которых поэтапно изобразил процесс рисования пиксель-арт сцен. Если у вас совершенно нет опыта рисования, и вы не представляете, как создаются такие сцены, то эти гифки помогут разобраться в вопросе. Вы не научитесь рисовать на таком же уровне, но поймёте последовательность действий.
Весь процесс создания сцены в одной gif-анимации
Сначала нужно наметить геометрию основных элементов сцены. Чтобы окружности выглядели корректно в изометрии, нужно вписать их в прямоугольники
Затем нужно разукрасить объекты окружения. Художник уже на этом этапе наметил зоны, отличающиеся освещённостью. Для этого он поделил цилиндры на сегменты с разным освещением. Но это только первые шаги — пока здесь нет даже тени от ступенек
Пора обозначить расположение мотылька. Вам нужно сделать это, учитывая особенности изометрии
Сперва может показаться, что отрисовка объекта в изометрической проекции — это сложная задача. Если это плоский объект, то это не очень трудно. Возьмите любой 2D-спрайт не в изометрической проекции
Затем вам нужно изменить спрайт при помощи стандартных инструментов трансформации rotation и skewing. Сделайте так, чтобы спрайт накладывался на заранее обозначенное место и подходил по размеру
Конечно, это работает преимущественно с плоскими объектами. Поэтому объёмные элементы придётся дорисовать
Когда основные элементы находятся на местах, можно разместить главных героев, чтобы выстроить нужную композицию
Пора переходить к детализации поверхностей. На прямоугольных поверхностях с этим нет проблем — достаточно расчертить параллельные линии. С окружностями и цилиндрами всё сложнее
Чтобы нарисовать концентрические круги в изометрической проекции, нужно взять прямоугольник, в который вписана окружность, и расчертить его как показано на изображении. Обратите внимание, что расстояние между параллельными линиями одинаковое
Точки пересечения линий с осями X и Y — это места, в которых должны проходить окружности. Вам нужно нарисовать окружности так, чтобы они пересекали эти точки
Когда концентрические круги готовы, нужно наметить линии, которые расходятся из центра. На самом деле это не так уж сложно — нужно нарисовать круг, чей диаметр равен ширине окружности в изометрии. Затем проведите линии от центра к границе круга
Нарисуйте кирпичи в изометрической проекции, используя полученную сетку
Теперь нужно нарисовать кирпичи на башне. Для этого наметьте линии — в изометрической проекции они выглядят одинаково. Вертикальные линии на башне будут параллельными друг другу
Используя полученную сетку, нарисуйте кирпичи
Затем отметьте зоны для теней
Сцена с тенями
Теперь можно добавлять разные объекты и мелкие детали
Потом можно добавить фон. Художник пропустил весь этап создания фона, так как основная цель оригинальной гифки — показать основные этапа рисования сцены
Измените цвет отдельных элементов, чтобы они гармонично смотрелись друг с другом
Также художник прикрепил ещё три гифки, в которых показал этапы создания сцен.
Это из раздела "Как нарисовать сову".
Простому обывателю не совсем понятно, почему тут "квадратики", а там "кружочки" - хотя бы в двух словах.
Также как и метода прорисовки теней - загадка древней цивилизации Майа?
Шутки про сову давно уже не актуальны. Сегодня она рисуется без проблем:
Здесь был коммент в стиле "пост не читай, сразу отвечай"
Подход специфический, для твитера а не реальной продукции. Никаких тайлов и пропов, реалистичное освещение. Сойдет для адвенчуры с шестью такими екранами, для рпг запарится он, левелдизайнер и прогер. Есть вещи вроде тени на ступеньках от крыльев мотылька, что намекает на то что мотылек вварен в задник, неанимирован и нужно пилить затенение спрайта игрока при проходе в зоне теней и ставить эти зоны на всех уровнях. Если нужно поменять немного карту локации, ну че, перерисовывай свои тени с нуля.
Не понятно почему под лестницей тень идёт от светлого к темному, должно же быть наоборот
Комментарий недоступен