гексагональное поле для настольной игры

Гексагональное поле для настольной игры

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Разделение игрового поля на шестиугольники предполагает специальную подготовку карты к игре. Это усложняет процесс адаптации игры к конкретной задаче (новому человеку сложнее организовать сценарий и партию «на коленке»), но отказ от чёткой «географии» боевого взаимодействия кажется неприемлемым. Исходя из этого, я пока вижу четыре способа создать для игры материальную карту.

1. В графическом редакторе наложить гексагональный слой с прозрачным фоном на готовую карту местности, по которой предполагается играть. Затем распечатать: можно в цвете, можно в серых тонах, можно сразу на лист необходимого размера, можно с цифровой «порезкой» на A4, которые затем будут склеены. Чёрно-белую распечатку можно расцветить карандашами или фломастерами, в эстетических ли целях или для выделения значимых в игровой модели элементов ландшафта.

Здесь вложены:
— использованный мной исходный файл с гексагональной сеткой на прозрачном фоне (hexes.png),
— пример готовой чужой карты A2, подходящей для сценария: Рохан конца Третьй Эпохи (original.jpg),
— файл GIMP, где осветлённый ч/б-вариант этой карты совмещён со слоем гексагональной сетки, полученной из hexes.png самоналожением и истончением (rohan_hex.xcf) — в этом файле можно легко заменить слой «подложки», поставив другую интересующую карту, и сдвинуть гексы для наилучшего покрытия,
— фотография карты, распечатанной на 4 листа A4, склеенной и раскрашенной.

Плюсы:
+ если сценарий способен заинтересовать игроков, то готовые карты местности наверняка уже существуют; при наличии готового инструмента (файла GIMP со слоем гексов) карта-для-партии создаётся очень легко и быстро,
+ готовые карты бывают красивы и часто радуют узнаваемостью.

Минусы:
— к чужой карте сетку гексов обычно нельзя подогнать идеально, т.к. границы ладшафтов будут проходить посередине того или иного гекса, реки и дороги — по их рёбрам и т.д.; это может потребовать дополнительных усилий для чёткой маркировки игротехнически важных элементов карты на распечатке, что требует времени,
— на цветной карте ручная маркировка затруднена, а машинная может оказаться дольше,
— тогда как ч/б-карта, маркированная от руки, теряет глянец; впрочем, взамен игра обретает очарование самостоятельности, объединения игроков совместным творчеством,
— готовые чужие карты зачастую защищены авторским правом, что препятствует широкому распространению сценариев, чьи материалы реализованы таким образом.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

2. Распечатать гексагональную сетку на лист прозрачного пластика A3 или A2. Класть поверх готовой карты, не предназначавшейся для игры, закреплять по краям чем-то тяжёлым — и вперёд! При необходимости размечать элементы ландшафта фломастерами, после партии — смывать.

ПОКА НЕ РЕАЛИЗОВАН.

Ожидаемые плюсы:
+ упрощает проведение партии «на коленке», сокращая этап подготовки карты,
+ готовые карты бывают красивы и часто радуют узнаваемостью.

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

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

3. Распечатать гексагональную сетку на белый бумажный лист A3 или A2 — и заламинировать! Для проведения игры размечать ВСЕ картографические элементы фломастерами, после партии — смывать.

ПОКА НЕ РЕАЛИЗОВАН.

Ожидаемые плюсы:
+ ещё более упрощает проведение партии «на коленке», избавляя от необходимости добывать карту,
+ даёт огромные возможности для фантазии и совместного творчества игроков,
+ позволяет легко вносить коррективы в карту по мере развития сценария,
+ проблемы с авторским правом сведены к предельно возможному минимуму.

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

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

4. Подготовить карту в одной из специальных программ, предназначенных для генерации или составления гексагональных карт — например, в редакторах пользовательских карт для «Panzer General» или «Битвы за Веснот», или в программе RPG Manager. Затем сохранить исходник и экспортировать графическим файлом. Распечатать.

Приложен чуточку недоделанный аналог карты Рохана из верхних записей, сделанный в редакторе «Битвы за Веснот» (Rohan_32x24.txt), а также скриншот с этой картой, куда от руки, тупо в графическом редакторе, добавлены реки.

ТЕСТИРУЕТСЯ, ПОКА НЕ ВПОЛНЕ РЕАЛИЗОВАН.

Ожидаемые плюсы:
+ идеальное соответствие замыслу: все ландшафтные и декоративные элементы будут соответствовать гексагональной структуре и легко узнаваться игроками,
+ неудобные особенности базовой географии используемого сюжета легко подогнать под задуманные сценарные задачи,
+ можно придумывать собственные сценарии, насколько достанет фантазии,
+ цифровой эталон карты легко изменять, внося коррективы по мере развития сценария; впрочем, распечатки всё равно устаревают,
+ идеально подходит для распространения сценариев,
+ карты будут выглядеть единообразно и по-своему стильно,
+ узнавание знакомой географии в «игрушечной» карте радует некоторых игроков,
+ при использовании конструктора карт со свободно лицензированной графикой проблемы с авторским правом сводятся к достижимому минимуму.

Ожидаемые минусы:
— карты станут в чём-то похожи друг на друга, своеобразие каждой в отдельности уменьшится,
— возможности ограничены используемым инструментом. Так, в RPG Manager не удаётся задать размер карты, в целом неудобно работать и некрасивая графика (хотя последнее, кажется, можно исправить), в «Битве за Веснот» нет рек и дорог, проходящих линиями сквозь гексы иных ландшафтов (на картинке снизу реки дорисованы в GIMP’е), редакторы пользовательских карт для Panzer General пока не найдены (хотя наверняка существуют), графика в них почти наверняка несвободная, а «волшебных» или архаичных элементов (даже замков) в ней нет вовсе.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Другие перспективные инструменты для отрисовки карт на компьютере.
FreeCiv Editor — возможно, с набором тайлов Amplio2Hexbig:
http://civland.org/forum/viewtopic.php?f=33&t=389
http://freeciv.wikia.com/wiki/Utilities

. Неясно, не является ли графика lgeneral тупо передранной из Panzer General.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Кисти для фотошопа. Специально для рисования карт. https://yadi.sk/d/Xwj_S982qGWmr

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

UPD: Для Gimp тоже наверное сделаю.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Первая сыгранная партия (13 марта 2016) послужила неплохим альфа-тестированием правил, материального воплощения игры и использованного сценария.

Карта, склеенная из четырёх листов A4, оказывается неровной: она топорщится и вспучивается в разных местах, что делает положение фишек неустойчивым. Не фатально, однако неудобно. Возможно, проблему способны решить
— фишки с более тяжёлым основанием,
— выравнивание такой карты с помощью пресса, проглаживания утюгом или иных средств,
— печать карты на один лист необходимого размера.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

1 мм. Стыкуется либо в A2 (19-20 гексов на 16), либо в «полосу» (32 гекса на 9-10).

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

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

. и два наиболее любопытных, кажется, из его подразделов:

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Отрисовал карту Белерианда в редакторе «Битвы за Веснот». Целевым сценарием является оборона Рубежа Майдроса в Битве Пламени, поэтому требовалось включить Нан-Дунгортеб и земли Амрода и Амраса — что задало примерную область отображения. Как можно видеть на приложенном файле East_Beleriand_Source_with_20x32_hex_ref.png, где на Восточный Белерианд накинута сеть гексов 20×32, подобная карта оказывается слишком вытянута с запада на восток; этого можно избежать, либо включая совсем уж лишние области на юге и севере, либо сокращая протяжённость маловажных в сюжете областей (тем самым меняя пропорции). Здесь сильном у сокращению подверглись Дориат с Дортонионом, и слабому — Таргелион с Лотланном.

В файле *.xcf — исходник GIMP, где гексагональная сетка находится в отдельном слое.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Далее, печать полученной «растянутой» карты на лист A4 показала, что взятое изначально соотношение сетки в 20×32 было неверным: на лист стандартного размера можно запихнуть ещё 2 столбца гексов, т.е. правильно было делать карту 20×34. Один «столбец» я добавил к Нан-Дунгортеб, чтобы исключить пересечение его конницей за один ход, другой — к Химладу, который в начале получился неоправданно узким. Связана эта узость, вероятно, со сложностью адекватной трансляции карты с обилием рек в «Веснот» как он есть — рисовать реки приходится отдельными гексами.

И вот что получилось (файл *.map — исходный текстовый файл с картой в формате «Веснота» версии 1.8 и выше, *.png — результирующие рисунки, с явным отображением сетки гексов и без). Ряд элементов карты включён в основном для красоты, маркировки регионов и локаций или для информации, и не может нести технической нагрузки в нынешних правилах (например, разный вид лесов в разных местах). Думаю, это не создаст проблем, а только поможет вролингу.

Двергский город Как-Бы-Белегост изображён на месте горы Долмед. Думаю, такая условность тоже простительна. Направление торгового пути двергов в Дориат за Сарн Атрад нарисовано произвольно, методом «пол-палец-потолок». Северная дорога (к Химрингу) и мост через Эсгалдуин упоминаются и частично отрисованы в XI-м томе «Истории Среднеземья» — «Война Самоцветов».

Печатать такую карту рекомендуется на лист A1, чтобы гексы имели ребро длиной 17 мм.

Распечатал в copy.spb.ru на лист A1, матовую бумагу 180 гр/м^2 (обошлось в

690 RUR). Среди требований там были разрешение 720 dpi и общий размер на 2 мм больше целевого размера (то есть больше A1) по каждой из четырёх сторон. Основное увеличение произвёл в GIMP’е плагином Resynthesizer с сохранением пропорций — так, чтобы ни длина, ни ширина не превышали целевых значений. После этого потребовалась «доводка» до точного размера 23953×16951 пикселей с [незначительным] нарушением пропорций — обычными механизмами Scale Image. Результирующая картинка PNG весила что-то между 200 и 300 Мб.

Источник

Киборги и Чародеи

Мы не даём гарантий и не принимаем претензий. Но мы выслушаем критику и примем помощь.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Гексы на картах или введение в гекскраул

Гекс – это правильный шестиугольник (у которого равны все стороны и все углы).

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

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

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

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

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

За счет наличия осевой асимметрии – гексагон можно выложить в гексагональную сетку двумя способами – использовав поворот гекса.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игрыВертикальная гексагональная сетка

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

Базовые размеры гексов

При этом – по оси oY – h, oX — w

t = 1.1547 r

R = 1.1547 r

S = 3.4641 r2

P = 6t = 6.9282 r

Ширина – 1w = 2 R = 3.3194 r

h = 2R =2.3094 r

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

При этом – по оси oY – h,

t = 1.1547 r

R = 1.1547 r

S = 3.4641 r2

Названия гексов идут от двойной высоты – радиуса вписанной окружности и расстояния между противоположными гранями.

Таким образом, для шестимильного гекса 2h = 2r = 6

r = 3 => R =3.4641 а 2w = 2R = 6.9282

Площадь шестимильного гексагона равна S = 31,1769 кв. м.

Соотношение сторон для карт с размерностью в пикселях : Для карт в пикселях: 40 | 46,19

РазмерностьРадиус, мШирина, мильДлина, мильПлощадь, кв. миль
10,51,154710,8660
213,319423,4641
31,53,464137,7942
424,61884
52,55,77355
636,92826
10511,547010
12613,856412
201020
241227,712824
482448
12060120
14472144

Использование подкарт и субгексов

Один из вариантов создания карт меньшего масштаба с использованием гексагональной сетки это использовать соотнешние 1 к 5.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры5 субгексов в 1 гексе

Используя один и тот же масштаб можно как подняться до масштаба 1 гекс = 125 миль, так и спуститься вниз до масштаба 1 субгекс = 0, 2 мили вплоть до 42.24 фута в одном субгексе.

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

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игрыПостроение гекса по вершинам

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игрыПостроение гекса по центрам гексов

Расстояние между гексами

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игрыОпределение расстояния в прямоугольной сетке и гексагональной

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

Не панацея

Как показано на рис. 22

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Прочие Виды Гексов

Также в разных приключениях используются 5 мильные гексы, 10 мильные гексы, 12 мильные гексы и 24 мильные гексы.

Руководство Мастера 5ой редакции выделяет три основных уровня на которых рисуется и используется гексагональная карта

УровеньГексСубгекс
Провинция61
Королевство606
Континент60

Масштабы гексов согласно Руководства Ведущего

Первый это уровень провинции – гекс размером 6 миль разбит на субгексы размером 1 миля.
С учетом размеров листа – эту карту в обычном темпе группа пересечет за два игровых дня (48 миль).
На этом масштабе на 1 листе карты согласно рекомендация Руководства Мастера будет 1 город с населением около 4000 и 10 деревень с населением каждой около 500 человек.

Второй это уровень королевства – гекс 60 миль разбит на субгексы по 6 миль.
Королевство пересекать гораздо дольше — в 6 раз, т.е. 12 дней.
Руководство Мастера говорит про 10 больших городов на карте королевства, и учитывая что в королевство при таком масштабе войдет около 30 провинций, очевидно, что не все крупные города показанные на картах провинций, отображаются на карте королевства.
Третий уровень – континент состоящий из 60 мильных гексов.

Бланк карты на уровне королевства (44х48 субгексов 6 миль и 4х4 гекса 60 миль)

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Континент бы группе пришлось пересекаь несколько месяцев – на общей карте фактически бы было отображено 3000 провинций.

Фактически на континентальной карте представлено 30 млн населения, что фактически соответствует Европе в 650 Р.Х.

Скачать шаблоны можно ниже

Шестимильный гекс

Навигация.

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

Посмотрите на диаграмму ниюе.

гексагональное поле для настольной игры. Смотреть фото гексагональное поле для настольной игры. Смотреть картинку гексагональное поле для настольной игры. Картинка про гексагональное поле для настольной игры. Фото гексагональное поле для настольной игры

Шесть миль от грани к грани, 7 миль от вершины к вершине. 3 мили от центра до любой грани (половина от шести), 3,5 мили от центра до любой вершины.

С точки зрения навигации почти любой маршрут через гекс покрыт. Войти из вершины и выйти через грань? Такое очень легко апроксимировать.

Пятимильный гекс не так хорош в этом. Если делать это на 6 мильных гексах, будет вам счастье.

Горизонт и видимость

Средний человек на ровной местности без препятствий (например море в штиль) может видеть на расстояние до трёх миль. Это расстояние до горизонта при самых лучших исходных данных. Так что группа, путешествующая через 6 мильный гекс не будет видеть за его пределами никак. Если только не залезут на дерево, или не найдут высокое место с хорошим видом. Идея в том, что 6 мильный гекс с разнообразным рельефом полностью покрывает расстояния, которые видит группа. Практика к этому выводу показывает, что партии, которая исследует территорию, нужно будет потратить усилия, чтобы узнать, что там в соседних гексах. Ответка может состоять в заключении, что горы видно издалека. Но хитрость гор в том, что вы не можете сказать, насколько они далеко, пока не окажитесь в нескольких гексах от них. Так — получение хорошей точки наблюденя, например вершины горы или холма, может стать само по себе приключением, а осознание окружающего ландшафта, — само по себе наградой.

Одно и двух мильные гексы

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

Также еще используются 24 мильные гексы – соответствующие приблизительно одному дню путешествия, 12 мильные гексы – половине дня путешествия, и 72 мильные гексы на уровне континента соответствующие 3 днем путешествия.

Альтернатива гексам

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

Базовые единицы измерения

1 унция – 1/15 пинты

1 куб.фут — 0,0283 куб.м

1 кв.ярд – 0,8361 кв.м

1 миля – 1760 ярдов = 5280 футов = 1609,34 м = 1,60934 км

1 кв.миля – 2589975,2356 кв.м = 2,59 кв.км = 259 гектар

Источник

Гексы и пиксели: советы по рисованию

Как правильно рисовать шестиугольники для тактических видеоигр и пошаговых стратегий.

Привет! На связи Саша Тюпин. Последние несколько лет я разрабатываю пошаговые стратегиями на гексагональных картах.

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

Речь пойдет прежде всего про 2D и пиксель-арт в частности. Если вы любите 3D и/или текстуры высокого разрешения, то стоит обратить пристальное внимание на туториалы Catlike Coding, там все очень подробно и с кодом объясняется.

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

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

Как обычно рисуется прямоугольный тайл? Создаем спрайт, ставим tiled mode по обеим сторонам и смотрим, чтобы он был красивый и бесшовный. А с гексом что делать?

Здесь есть несколько решений и пара из них даже хорошие.

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

Ну тут уж совсем все просто. Рисуется красивая карта, а слой с гексами натягивается поверх нее. Опционально можно раскидать какие-нибудь препятствия. Такое мы видели в Panzer General и в Героях.

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

А может все-таки можно как-то заморочиться и нарисовать бесшовные гексы? Ладно, варианты есть, но все они так себе.

Нарисовал, сохранил, посмотрел в игре. И так сто раз по кругу. Для настоящих самураев. Если игра очень быстро собирается или способна обновлять ресурсы в рантайме (так кроме веба вообще умеет кто-то?), то, в принципе, терпимо.

Для Aseprite, кажется, ничего нет, но можно написать скрипт. Правда, придется кнопку жать все время, но хоть что-то. Когда-то я даже делал на Node.js скрипт, который следит за файлом и показывает в браузере превью.

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

А что если нарисовать прямоугольный тайл, а потом как-то хитро его повернуть, нарезать и превратить в гексагональный? Пара вариантов есть — они описаны в гайде для Battle for Wesnoth, так что повторять их не буду.

Существует еще несколько вариантов натянуть прямоугольную текстуру на гексагональную сетку, например вот эти:

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

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

Берем бесшовную текстуру побольше и обрезаем ее в шейдере по маске гекса. Решение современное, красивое и удобное. Требует знания шейдеров на уровне «сложить и перемножить числа».

Делается достаточно просто, выглядит прекрасно. На мой вкус — лучший вариант.

Ок, с бесшовностью вроде разобрались.

Так, а вот это уже намного сложнее. Биомы-то у нас есть, но они все еще выглядят как из настолки. Нужны красивые переходы между ними.

Посмотрим, что мы тут можем сделать.

Ну да, это мы уже проходили. Ничего не делай и ничего не будет.

Есть одна текстура, есть другая, давайте мы их сблендим и будем красиво. Основной способ стыковки игр с 3D окружением и/или текстурами высокого разрешения. Может выглядеть очень пристойно, особенно если блендинг нелинейный и дополнен геометрией.

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

Решение это, конечно, хорошее, но для пиксель-арта подходит слабо. Скорее всего получится шумная каша. Я с трудом смог найти пример такого подхода в единственной игре — Emperor of the Fading Suns, где это немного сглажено видимой границей гекса и CRT-монитором.

При этом переходы к воде здесь все еще сделаны нормально.

В наше время такое делать уже, конечно, стыдно.

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

На мой вгляд, этот подход состоит целиком из недостатков:

В общем, не рекомендую.

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

Тут читатель может сказать — ты вообще считать умеешь? Здесь же 64 варианта, до пенсии рисовать можно! А ты еще говорил, что 30 это много. А стыковать все добро как?

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

Поясню как это все работает. Возьмем вот такой кусок местности:

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

Биом с самым низким приоритетом, воду, пропускаем.

От земли делаем переходы ко всем биомам с более низким приоритетом, в данном случае к воде.

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

Теперь повторяем все то же самое с травой.

Вот и все. Как можно заметить, переходы к воде смотрятся, мягко говоря, не очень. Ну да, чтобы выглядело хорошо, нужно для воды специальные рисовать. Этот подход применяется в небезызвестной Battle for Wesnoth. Когда-то и там были стремные переходы к воде:

А потом ничего, нарисовали красивые (правда не для всех биомов):

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

Во-первых переходы к воде теперь выглядят по-человечески:

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

Теоретически возможна, практических реализаций я не встречал. Однако, это не значит, что шейдеры бесполезны — с их помощью можно усилить эффектность перехода, например сделать волны и прибой:

Теперь давайте разберемся как вообще рисовать все это добро. Я делаю это скриптом на JS (не входит в комплект), как и всю подготовку ассетов, но можно и прямо в игре все собирать, просто спрайтов будет больше в несколько раз.

Каждый гекс может примыкать к другому биому любой комбинацией из своих 6 граней. Я помечу каждую из них номером от 0 до 5, начиная с северо-восточной.

Каждая грань находится в одном из двух состояний — примыкает или нет. Таким образом, каждый шаблон можно обозначить числом от 000000 до 111111 в двоичном формате или от 0 до 63 в десятичном. То есть нам нужно сгенерировать 64 шаблона чтобы покрыть все возможные комбинации.

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

Теперь надо придумать как бы все это разбить на кусочки, повращать и сложить обратно. К счастью, эта работа уже проделана мной.

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

Это важное наблюдение, которое позволит нам разбить грани на 4 группы:

Нарисуем для каждой группы грани 0, 1 и 2. Остальные зеркалим. Можно только 0 и 1, но я считаю, что если уж что-то зеркалить, то нужно делать это по обеим осям сразу, иначе очень заметны повторения. Кроме того, при такой разбивке отзеркаленные грани никогда не буду примыкать друг к другу.

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

Теперь собираем шаблоны. Алгоритм простой — берём числа от 0 до 63, переводим в бинарный формат и пробегаемся по всем граням. Для каждой из них смотрим на соседей и выбираем группу, а потом и номер грани. Для 3, 4 и 5 зеркалим по обоим осям 0, 1 и 2 соотвественно. Иногда двигаем кусочек шаблона куда надо.

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

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

Теперь огонь! Можно пользоваться.

Такие вот мысли про гексы. Статья не претендует на какой-то ультимативный гайд по теме, скорее на точку отсчета для своих мыслей. Про то как рисовать обычные тайлы материала миллионы, а вот про гексы совсем нет. Пусть будет.

Этой статьи не было бы, если я не разрабатывал свою пошаговую 4x-стратегию на гексагональной карте. Она называется «Луна» и почитать про нее можно в обзорной статье. Девлог я веду в Телеграме и Твитере.

Будьте клевыми, играйте в стратегии! До встречи.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *