Как сделать изометрическую карту

Обновлено: 05.07.2024

Художник и пользователь Твиттера под ником Fabian опубликовал на своей странице несколько гифок, в которых поэтапно изобразил процесс рисования пиксель-арт сцен. Если у вас совершенно нет опыта рисования, и вы не представляете, как создаются такие сцены, то эти гифки помогут разобраться в вопросе. Вы не научитесь рисовать на таком же уровне, но поймёте последовательность действий.

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

Затем нужно разукрасить объекты окружения. Художник уже на этом этапе наметил зоны, отличающиеся освещённостью. Для этого он поделил цилиндры на сегменты с разным освещением. Но это только первые шаги — пока здесь нет даже тени от ступенек

Сперва может показаться, что отрисовка объекта в изометрической проекции — это сложная задача. Если это плоский объект, то это не очень трудно. Возьмите любой 2D-спрайт не в изометрической проекции

Затем вам нужно изменить спрайт при помощи стандартных инструментов трансформации rotation и skewing. Сделайте так, чтобы спрайт накладывался на заранее обозначенное место и подходил по размеру

Конечно, это работает преимущественно с плоскими объектами. Поэтому объёмные элементы придётся дорисовать

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

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

Чтобы нарисовать концентрические круги в изометрической проекции, нужно взять прямоугольник, в который вписана окружность, и расчертить его как показано на изображении. Обратите внимание, что расстояние между параллельными линиями одинаковое

Точки пересечения линий с осями X и Y — это места, в которых должны проходить окружности. Вам нужно нарисовать окружности так, чтобы они пересекали эти точки

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

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

Потом можно добавить фон. Художник пропустил весь этап создания фона, так как основная цель оригинальной гифки — показать основные этапа рисования сцены

Также художник прикрепил ещё три гифки, в которых показал этапы создания сцен.

Это из раздела "Как нарисовать сову".

Простому обывателю не совсем понятно, почему тут "квадратики", а там "кружочки" - хотя бы в двух словах.

Также как и метода прорисовки теней - загадка древней цивилизации Майа?

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

Здесь был коммент в стиле "пост не читай, сразу отвечай"

Здесь был комментарий под постом, который имел одну GIF-ку. Можно глянуть время публикации коммента и время изменения статьи.

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

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

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

Это типа рефлекс от стороны лестницы, которая снизу. Чтобы картинка казалась более красочной. Абсолютно нефизично, так как внизу источников света не наблюдается. Но такой вариант всё равно может казаться красивше.

Абсолютно нефизично
Предлагаю понаблюдать как выглядят разные затененные углы в жизни. Рассеяный свет только так и работает и так всегда рисуется чтобы выглядеть относительно натурально и привычно. В углах всегда есть растянутое от угла затенение в одну сторону и растянутый отблеск в другую сторону. Это дает нужный контраст и результат ощущается абсолютно естественным.

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

Абсолютно нефизично, так как внизу источников света не наблюдается.
Ну как не наблюдается. Облака снизу же, еще и белые почти. К тому же их дохрена по площади, а значит на таком масштабе яркость практически не убывает с квадратом расстояния — свети не хочу. Да даже если б не облака были, а мать сыра земля, все равно был бы рефлекс. Отраженный свет — точно такой же свет, и никакой особой ухудшающей магии с ним не происходит в момент отражения, кроме изменения поляризации (ну и, понятно, окрашивания). Может быть, рефлекс чересчур яркий, но в каком-то виде он в любом случае должен быть, если только не космос под ногами, или не мостовая целиком из вантаблэка.

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

пункт 0 пропустил - сделайте лестницы в 3D

Да и про то что аксонометрия делается под 30 градусов тоже ни слова

Красивые, но жутко нелогичные с точки зрения органомики сцены.

Так же непонятно, как они будут вести себя в динамике. Как, например, должна вести себя с камера, если персонаж будет подниматься по лестнице, часть которой перекрывается башней?

ТТакие туторы я называю : Ловушка против конкурентов .
Выбран максимально нелогичный способ подхода к отрисовки картинки.
Хотя справедливости ради - совсем уж нелогичных ходов тут раз два и обчелся.

Спасибо, что указал, что именно нелогичего, и как делать лучше и проще.
Было очень полезно и интересно почитать.

Если нужно то я могу расписать :)
Доводилось мне и изометрию рисовать :)

Есть два вариант:
А:
1е начинаем с сетки - в виде растянутых ромбов.
2 каждый следующий уровень высот создается смешением на строго определенное количество пикселей.
3. Рендерим.

Б:
1.делаем все в 3д - потом рендерим сцену с угла 45градусов на обьекты с отключенными параметрами перспективы.
2. рендерим

Где пункт рисуем?

Wait, that's illegal

Есть показать что получилось?

Я не про нелогичность ходов создания сцен, я про нелогичность самих сцен.
Если это изображение ради изображения - то ок. Если это изображение сцены из игры (а подсайт gamedev намекает на это), то представленные локации жутко неудобные для игрока, и с логикой построения зданий в реальном мире не имеют ничего общего.

Зачем забираться по винтовой лестнице на крышу башни (башня же?), не имея парапетов и перил? Почему башня именно такой формы? Кто будет пользоваться таким фасадом, который выглядит как место поклонения?

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

А зачем ему подниматься по этой лестнице? Сделать тп на верх башни и все.

Чтобы создать Isometric Tilemap, перейдите в GameObject> 2D Object> Isometric Tilemap / Isometric Z as Y Tilemap. См. В Глоссарии дополнительные параметры, которые необходимо установить с помощью параметров Project и Grid для правильной визуализации Isometric Tilemap.

Как создать тайловую карту?

См. Глоссарий, выбрав GameObject> 2D Object> Tilemap. Если у вас нет этих параметров, пакет 2D Tilemap Editor может не быть установлен. Если это так, загрузите пакет редактора 2D-карты листов из диспетчера пакетов. Выберите Опция 'Tilemap' для создания прямоугольной карты листов по умолчанию.

Изометрические 2D или 3D?

Изометрический рисунок - это 3D-представление объекта, комнаты, здания или дизайна на 2D-поверхности. Одной из определяющих характеристик изометрического чертежа по сравнению с другими типами трехмерного представления является то, что конечное изображение не искажается. Это связано с тем, что ракурс осей одинаковый.

Как вы делаете Aseprite Tilemap?

Что такое Tilemap Unity?

Компонент Tilemap - это система, которая хранит и обрабатывает Tile Assets для создания 2D-уровней. Он передает необходимую информацию от размещенных на нем плиток в другие связанные компоненты, такие как средство визуализации мозаичных карт и коллайдер двухмерных мозаичных карт.

Что такое изометрический Z как Y?

Изометрический Z как Y

Создает Изометрическая карта листов, в которой значение оси Z плитки добавляется к ее значению по оси Y. Это приводит к визуальному смещению плитки вдоль оси Y на это значение, создавая иллюзию высоты при размещении плиток на карте листов. Изометрические карты листов используют любую диметрическую проекцию.

Как изменить карту листов в Unity?

К модифицировать и поместите плитки на Тайловая карта, откройте палитру плиток (меню: Окно> 2D> Палитра плиток). См. Документацию по палитре плитки и покраске. Тайловые карты для дополнительной информации. Скорость, с которой Единство воспроизводит анимацию плитки.

Сможете ли вы создавать 2D-игры в Unity?

Создавайте 2D-игры с Unity

Unity - самая популярная в мире платформа для создания 2D- и 3D-игр - 50% всех мобильных игр создаются с ее помощью! Новые пользователи могут скачать бесплатную версию Unity. Вы получите доступ к платформе для создания 2D-игр, а также множество бесплатных ресурсов от нас и нашего замечательного сообщества.

Более чем уверен, что используется PHP и jQuery/JavaScript.

Вопрос в следующем: как строится именно карта игрового мира? Была идея создавать массив со случайными цифрами, например 1 - земля, 2 - дерево и тд., но непонятно толком как все это разместить у клиента в браузере, да еще и сохранять все в базе данных.

P.S: Пока задавал вопрос, пришла мысль. Можно создать массив (как я предлагал выше), а потом повернуть камеру под определенный угол, и должна получиться графика какая-никакая. Но вот как сохранить все в БД..

1 ответ 1

Вам нужно начать изучение с базы, основ.

Что такое клиентский JavaScript код и как он взаимодействует с сервером, и как вообще браузер взаимодействует с сервером.

Как работает отображение игровой анимации в браузере, там есть разные варианты: Canvas, WebGL, SVG, . Понять что некоторые вещи лучше делать не самому а использовать готовые движки. Есть варианты браузерных движков.

Базы данных, их взаимодействие с серверным и клиентским кодом.

Математика и геометрия.

Я не говорю что вы это всё не знаете, но из вашего вопроса ясно что есть большие пробелы в знаниях основ веб программирования, с них и надо начать изучение.

Эту всю информацию невозможно написать в одном ответе, это долгая работа в изучении технологий.

По ходу изучения придётся решать много тестовых и обучающих задач.

Карты и механика движения в играх может быть реализована по-разному.

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

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

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

Конечно это не все варианты, и у каждого варианта есть много нюансов которые в рамках этого поста нету смысла описывать.

По роду деятельности столкнулся с вопросом: как сделать карту высот.
Чтоб было понятно: 1 - модель, -> 2 - карта высот, -> 3 - барельеф (то что получаем в материале).
Решение есть в виде Stereographic Suite и плагина для Blendera/Maxa, но: 1 - хочется получить результат в Realsoft "без посредников" , 2 - приходится увеличивать количество полигонов на порядки (т.е. дальнейшее редактирование становится невозможным).
Я уверен, что с помощью Post Image Effects это в один клик делается, но слабое знание VSL ставит меня тупик. Кроме рентгеновского изображения ничего не получается .
Кто знает помогите, плз. Очень надо.

Вложения