Редактор гексагональных карт
Чтобы создать интересное приключение недостаточно просто подготовить набор несвязных локаций, городов и пещер. Гейм мастера создают целые миры, в которых существуют их игроки. Создавать карты событий и локаций мы уже научились, при помощи редактора РПГ карт, но что поможет в создании игрового мира, где располагаются все эти локации и живут драконы?
У нас как раз есть приложение, которое поможет в этом — редактор гексагональных карт. При помощи этой утилиты вы сможете создавать фентезийные миры или миры будущего. Все что угодно — все, до чего доведет вас фантазия. Как и с редактором РПГ карт, мы придерживались следующих принципов:
- Масштабируемость
- наши карты должны иметь возможность увеличиваться в размерах, без потери качества изображения, никаких размазанных картинок, все должно быть четко.
- Возможность кастомизации
- пользователь должен обладать возможностью подстроить элементы управления таким образом, чтобы ему было удобно пользоваться редактором.
- Создание иконок
- важно, чтобы гейм мастер мог сам создать недостающие иконки, при этом процесс не должен быть очень сложным. Разобравшись с редактором РПГ иконок, буквально через 40 минут, любой человек сможет делать иконки, которые можно использовать, где угодно, не только в РПГ картах
- Несколько уровней
- нам всегда нравились карты в играх HOMM3, там, где есть подземные уровни и в нашей карте тоже хотелось бы сделать такие подземные уровни, но мы решили пойти дальше, за облака.
- Простой и понятный интерфейс
- программа должна быть проста в освоении и понятна, в тоже время должна быть богата по функционалу. Мы используем единые подходы в наших интерфейсах, чтобы все было стандартизовано.
- Разные уровни мастерства
- используя наш продукт, любой пользователь сможет нарисовать карту прямо сразу, но изучив возможности гексагонального редактора РПГ карт или другим программ из нашей экосистемы человек сможет создавать карты на совершенно ином уровне.
- Должно быть ощущение высоты
- мы всегда хотели каким-то образом передать эффект высоты на гексагональных картах, и как нам кажется у нас получилось в некотором смысле.
- Гексагональная карта
- мы любим гексы, это очень удобная фигура и мы хотим использовать её для построения карт.
Обзор интерфейса
Проектируя интерфейс редактора, мы старались сделать все таким образом, чтобы он был максимально прост. Интерфейс можно разделить на основные области: основное окно, правая панель, панель подпрограмм, центральная панель.
Основное окно — это самый базовый объект нашей программы, здесь вы взаимодействуете с картой. В режиме нанесения текстур, иконок или кривых вы при помощи мышки закрашиваете области. В режиме работы с текстом, в этой области будут появляться манипуляторы, которые управляют поведением кривой, вдоль которой будет отображаться текст. Стоит отметить, что у холста есть горизонтальная и вертикальная полосы прокрутки, которые появляются в тот момент, когда карта не умещается на экране (полосы появляются в автоматическом режиме), так что вы можете пользоваться всем привычным функционалом связанного со скроллингом как на мышке, так и на трекпаде ноутбука.
Панель подпрограмм — на данной панели представлены ссылки на приложения по генерации контента для гексагональных карт, такие как:
- Редактор текста
- создание стилей для текста
- Редактор дорог
- создание стилей дорог, которые вы сможете применять на гексагональной карте
- Редактор текстур
- создание своих текстур или загрузка существующих на сервер
- Редактор переходов
- система для создания шаблонов переходов одной текстуры в другую
- Редактор иконок
- программа по созданию РПГ иконок для ваших карт
- Настройки приложения
- ссылка на раздел с настройками редактора гексагональных карт в приложении настроек РПГИнферно
- Кнопка сокрытия правой панели
- иногда требуется временно скрыть правую панель
Центральная панель — многофункциональная панель, находящаяся над холстом, в ней могут располагаться различные элементы управления, в нашем случае это:
- Слайдер масштабирования
- при помощи этого функционала можно уменьшить карту, чтобы посмотреть, на результат работы целиком.
- Переключатель уровней
- с его помощью вы сможете создать подземный уровень или воздушный.
- Ссылка на наш дискорд сервер
- на тот случай, если вам захочется пообщаться и обсудить наш редактор карт в дискорде.
Правая панель — это сердце редактора, сосредоточение всех функций редактора. Панель поделена на 5 основных сегментов:
- Закладки — здесь отражено логическое разделение на типы ассетов, которые могут использовать на карте: Поверхности, Иконки, Кривые и Текст. Для каждого из разделов может существовать свой особый функционал.
- Панель инструментов — на этой панели располагаются основные элементы управления, связанные с кисточками или другими параметрами коррекции карты. В зависимости от раздела наполнение данной области может меняться, но есть набор элементов, которые всегда доступны чаще остальных:
- Многофункциональная кисть
- данная кнопка переключает режимы между закраской и ластиком.
- Размер кисти
- в выпадающем списке можно выбрать один из четырех вариантов кисточки.
- Включение/выключение сетки
- сетка полезна при редактировании вашей гексагональной РПГ карты, но время от времени требуется взглянуть на карту без сетки, чтобы понять, как она будет выглядеть в финальной форме.
- Цвет сетки
- специальная утилита для выбора цвета сетки, которая накладывается поверх карты, на тот случай если вы нарисовали Нео-Токио и вам обязательно нужна фиолетовая сетка поверх карты, а может она должна быть еще и полупрозрачной?
- Иконка помощи
- если у редактора есть какая-то подсказка про не очевидные вещи, то при наведении на данную иконку будет выведена краткая справка, например, по горячим клавишам.
- Другие элементы
- элементы, которые будут появляться в рамках специфических разделов. Они будут описаны в соответствующих разделах данного мануала.
- Панель переходов — это особая горизонтальная область, где появляются схемы перехода одной текстуры в другую, в отличии от редактора РПГ карт, в гексагональном редакторе эта панель используется только для переходов.
- Панель основного контента — под панелью вариаций находится основной контент выбранного раздела: использованные текстуры, список иконок, добавленные дороги, озера и созданный текст.
- Дополнительная правая панель — данный элемент управления возникает в тех случаях, когда надо выбрать схему цветового оформления выбранного элемента, будь то: цветовая схема иконки/дороги, текстура реки/озера, текстовый шаблон или же текстура.
Рассмотрим подробнее каждый из четырех разделов подробнее.
Редактирование поверхности
Для перехода в этот режим необходимо нажать на закладку «Поверхность». Текстуры создаются при помощи приложения создания РПГ текстур. Для работы с текстурами разработаны разнообразные решения, которые позволяют добиваться очень интересных и красивых результатов. В некоторых редакторах бывает забавная ситуация из-за позиционирования текстур воды, когда вода «натекает» на поверхность, а не поверхность уходит под воду, нас такие вещи не устраивают.
Выбрав переход, вам требуется выбрать слой, на котором вы будете рисовать, слои находятся в панели основного контента. При активации слоя заголовок выделяется цветом и в правом углу появляется кисточка. Стоит отметить, что в рамках слоя текстуры уникальны, нельзя нарисовать 2 одинаковые травы, в таком случае все одинаковые текстуры будут склеены в одну запись.
Обратите внимание, что на подземных картах есть особый слой — потолок, который имеет самую большую высоту стенки.
В рамках одно слоя текстуры можно пересортировывать, таким образом вы можете настроить наслоение текстур друг на друга. Помните, что вода всегда находится под сушей, так что наш редактор карт не позволит смешивать твердь и воду в произвольных комбинациях.
Вы можете переносить существующие текстуры между слоями, при попадании на новый слой, если такая текстура уже существует данные будут объединены, так что учитывайте этот момент.
При наведении на текстуру в списке слоев, на основном холсте данная текстура будет подсвечена, это нужно для того, чтобы было понятно какие именно области вашей карты закрашены данной текстурой на выбранном слое.
При нажатии на текстуру в списке слоев, вы автоматически будете красить этой текстурой и на том слое, где она присутствует.
При наведении на текстуру в списке слоев, вы увидите дополнительные элементы управления текстурой:
- Заливка
- при двойном нажатии на данную кнопку, вы зальете указанную текстуру той, что выбрана в палитре текстур.
- Удаление
- при двойном нажатии вы удалите текстуру с указанного соля.
После выбора слоя, в дополнительной панели появится палитра доступных текстур,которые сгруппированы стандартным образом — сообщество/подписки/ваши.Также у каждой текстуры есть иконка, которая указывает на её принадлежность к одному из типов: вода, суша и воздух.
Редактирование иконок
Для перехода в этот режим необходимо нажать на закладку «Иконки». Иконки создаются в специализированном редакторе РПГ иконок. Стоит отметить, что иконки могут занимать до семи гексов, это создано для того, чтобы была возможность создавать большие площади покрытые урбанистикой или составными объектами, может быть долина с особым прудиком, где плавает магический лебедь?
При активации режима «Иконок» на панели инструментов появляется дополнительный селектор слоев, к которому будет принадлежать иконка. Это требуется для того, чтобы можно было размещать иконки как под кривыми, так и над ними. К примеру, иконки травы должны перекрывать водной гладью реки, а вот изображение кораблей должны находиться над рекой или озером.
Панель основного контента наполняется списком иконок, которые разделены по категориям: иконки сообщества, ваши иконки и иконки, на которые вы подписаны. Каждую из категорий можно скрыть, а некоторые можно вовсе убрать при помощи раздела настроек, также можно настроить какие разделы раскрыты по умолчанию. Больше информации на странице приложения настроек.
При выборе иконки будет открыта дополнительная панель с цветовыми пресетами для конкретной иконки. Пресеты сгруппированы тем же образом что и иконки. Помните, что вы можете добавлять свои собственные цветовые схемы иконок, которые будут видны только вам, в том случае если иконка вам не принадлежит.
Редактирование кривых
Для редактирования кривых надо активировать закладку «Кривые». После активации данного режима вы заметите что панель инструментов будет содержать только три кнопки: река, озеро и дорога.
Это приложение работает на базе системы редактирования кривых, но в отличии от редактора РПГ карт, в данном случае кривые являются составными, то есть кривые могут быть состоять из неограниченного количества частей, в этой связи будут доступны дополнительные функции.
После нажатия на любую из кнопок, система переходит в режим добавления соответствующего объекта, после этого достаточно перенести мышку на холст и поставить объект в необходимое место и затем продолжить коррекцию
При коррекциях есть набор общих элементов управления — кнопки прямого выделения, кнопка добавления точек, кнопка удаления кривой, кнопка связи кривых, поле ввода названия.
- Прямое выделение
- в этом режиме вы можете выбирать точки кривых, а также линии кривых. Для выбора точки — просто нажмите на одну из квадратных точек, а для выбора кривой — наведите на кривую, и вы увидите линию-помощник, на которую можно нажать.
- Добавление точек
- для добавления точек вы можете просто кликнуть по холсту, в этом случае точка будет добавлена в конец кривой. Или же вы можете навести курсор на конкретный сегмент кривой, в таком случае точка будет добавлена на указанную кривой и будет встроена таким образом, чтобы форма кривой не изменилась.
- Удаление кривых
- после выбора этого режима, вам необходимо навести на кривую и нажать, после этого сегмент кривой будет удален.
- Ввод названия
- вы можете указать название дороги, реки или озера для того, чтобы различать их в интерфейсе управления.
- Связь кривых
- после выбора конкретной точки, которая связывает две части кривой, вы увидите цепочку, когда она активна точки управления, связанные с этой точкой, будут взаимосвязаны, таким образом вы сможете делать плавные переходы одной кривой в другую.
- Смена типа кривой
- представлено в виде 3х кнопок, по нажатию на которые вы сможете выбрать вдоль какой линии будет отрисована кривая:прямая, квадратичная кривая, кубическая кривая
- Ширина дороги
- этот слайдер доступен тогда, когда вы редактируете дорогу.
- Ширина сегмента реки
- при выборе точки кривой, вы сможете редактировать ширину реки в этом месте.
В области основного контента представлен список всех дорог, реки или озер, которые есть на карте.В области основного контента представлен список всех дорог, реки или озер, которые есть на карте.
При двойном нажатии на крестик вы удалите кривую запись (безвозвратно).
Когда активирован режим редактирования конкретной кривой, в дополнительной панели представлен список всех доступных цветовых схем для дорог или список текстур жидкости для рек и озер,которые разделены на группытакже отмечена текущая схема или текстура, которая применяется для кривой.
Во время редактирования кривой, на основном холсте карты, вокруг текста есть специальная рамка, при помощи этого элемента управления вы можете переносить кривую по холсту, просто зажмите рамку и тащите её, при отпускании мышки, новая позиция кривой будет сохранена.
Кривая обладает двумя типами манипуляторов:
- Манипулятор точки
- выглядит в виде квадрата, если у квадрата есть диагональные линии, это означает что точка является либо началом кривой, либо её концом. Для изменения позиции точек, просто зажмите и перетаскивайте манипулятор. Стоит отметить, что если соединить начало и конец кривой, то вы её закольцуете, это актуально для дорог и рек. Если выбрана река, то при активации точки, вы сможете редактировать ширину реки, которая должна быть в этой точке, таким образом можно менять толщину рек в разных частях реки.
- Манипулятор искривления
- если вы выбрали режим квадратичной или кубической кривой, то появятся дополнительные круглые манипуляторы, которые будут связаны лучами с манипуляторами точек, которые являются родительскими по отношению к ним. Передвигая точки искривления, вы будете менять касательные линии кривых Безье и таким образом будет модифицироваться изгиб кривых.
Редактирование текста
Для перехода в этот режим необходимо нажать на закладку «Текст». Это приложение работает на базе специальной подсистемы управления кривыми и текстом, в этой связи органы управления в этом разделе свои и не похожи на 3 предыдущих раздела.
Первое что вы заметите при переходе в этот режим, в панели инструментов остается только 2 кнопки: прямое выделение и добавление текста.
- Прямое выделение
- режим нужен для управления манипуляторами текста. Данный вопрос будет раскрыт ниже.
- Добавление текста
- при нажатии на данную кнопку, вам следует переместить курсор мыши на холст, где вы увидите предварительный шаблон «text», который будет добавлен на карту, при нажатии на левую кнопку мышки. После добавления вы сразу же перейдете в режим редактирования выбранного текста.
- Добавление точек
- для добавления точек вы можете просто кликнуть по холсту, в этом случае точка будет добавлена в конец кривой. Или же вы можете навести курсор на конкретный сегмент кривой, в таком случае точка будет добавлена на указанную кривой и будет встроена таким образом, чтобы форма кривой не изменилась.
- Удаление кривых
- после выбора этого режима, вам необходимо навести на кривую и нажать, после этого сегмент кривой будет удален.
В режиме редактировании текста, автоматически будет включена функция «прямого выделения», но для добавления нового текста вы всегда можете нажать на «Добавить текст». Также вы заметите появление новых элементов управления в панели инструментов:
- Связь кривых
- после выбора конкретной точки, которая связывает две части кривой, вы увидите цепочку, когда она активна точки управления, связанные с этой точкой, будут взаимосвязаны, таким образом вы сможете делать плавные переходы одной кривой в другую.
- Смена типа кривой
- представлено в виде 3х кнопок, по нажатию на которые вы сможете выбрать вдоль какой линии будет отрисована кривая:прямая, квадратичная кривая, кубическая кривая
- Центровка текста
- при помощи трех кнопок вы можете выбрать как будет произведена отцентровка текста:слева, по центру, справа.Помните — если вы перевернете кривую, текст тоже перевернется.
- Декарирование текста
- доступно 4 модификатора текста:жирный, курсив, подчеркнутый,
зачеркнутыйВсе 4 модификатора можно применить одновременно.
- Размер шрифта
- выбор размера из списка размеров шрифта. Если необходимо добавить новый размер, напишите нам в дискорд и мы рассмотрим ваше предложение.
- Стиль шрифта
- список шрифтов, которые вы можете применить к тексту, добавление дополнительных стилей происходит по запросу пользователей посредством дискорда.
- Поле редактирование текста
- вводя текст в данное поле, вы сразу же меняете текст как на холсте, так и в базе данных, нажатие никаких дополнительных кнопок «сохранить» не потребуется.
Это все основные моменты, которые нужно знать для управления картой, далее мы рассмотрим специфику работы нашей системы слоев и подробно рассмотрим список доступных объектов, которые вы можете применять при создании РПГ карты.
Система слоев
В отличии от редактора РПГ карты, в текущем приложении слоев не так много — всего 12. Но это не означает, что редактор перестал обладать феноменальной гибкостью. Мы особо гордимся тем, как реализован метод отрисовки высоты — когда вы переносите текстуру с одного слоя на другой, то вы тем самым даете понять, что часть текстур должна располагаться выше остальных. К примеру, вы нарисовали песчаный пляж на слое под номером ноль, но не так далеко от этого пляжа есть существенное возвышение с обрывом, надо ли говорить, что мутные личности любят скидывать неугодных в воду с этого обрыва? Так вот, вам достаточно просто нарисовать текстуру на слое с номером один и у вас будет элегантный обрыв, для темных дел. Стоит отметить, что слой ноль является самым нижним, это что-то вроде «уровня моря», но не забывайте про специальный слой для подземных карт, «потолок» — это самый высокий слой для подземных миров.
Система обрисовки иконок обладает всего двумя слоями, которые идут над текстурами и между этими слоями проходит слой с кривыми, где вы рисуете кривые: дороги, реки и озера. Ну и последний слой, поверх всех остальных — слой с текстом.
Как и в редакторе РПГ подземелий, далее вы сможете визуально ознакомиться с устройством слоев.
Выше облаков и глубже ада
Когда мы только задумывали этот редактор, уже тогда хотелось реализовать воздушные острова. Что может быть круче? Вы создали свой мир, где одни фракции воюют с другими, игроки участвуют в различных интригах и ничего не подозревают, а потом партия забредает в старый маяк и прямо как в игре Биошок Инфинити: дирижабль, катапульта, портал или воздушный шар отправляет партию в небо и их взору предстает мир выше облаков. Кто там будет жить, какие секреты хранят эти острова или континенты в небе? На все эти вопросы вашим игрокам еще предстоит ответить!
Другой сценарий, партию отправили изучить озеро, где пропал какой-то важный персонаж, вот только был и уже нет. Партия отважно отправляется изучать дно озера, конечно, предварительно надо выпить соответствующие зелья или экипироваться снаряжением для глубинных работ. И неожиданно, сначала одного приключенца, а следом и всю партию захватывает подводным течением и уносит в какие-то глубинные каналы и через несколько минут паники выбрасывает на берегу подземного озера, где партию ожидает сбитый с толку персонаж, которого им было поручено найти. Таким образом приключение переносится в подземные глубины, прямо как в Героях Меча и Магии 3. Контрабандисты, а может древняя империя каких-то некромантов поджидает в глубинах или же вы найдете туннели давно вымерших гномов, которые по обыкновению копнули «глубже чем надо»?
Реки, озера и дороги
Гексы это, конечно, хорошо, но, когда вы хотите нарисовать тонкую речушку, при помощи гексов такие вещи решить сложно. В некоторых редакторах дороги и реки представлены в виде особых тайлов, которые могут размещаться на карте. В нашем понимании это не самый удобный вариант.
Для решения проблемы рек, дорог и озер — мы создали особый подход, при котором реки аккуратно впадают в моря и проистекают из озер, до тех порка вы используете идентичные текстуры для рек и озер с морями. При добавлении рек вы заметите как в земле автоматически «продавливаются» каналы, а на береговых линиях реки плавна впадают в моря. Озера в свою очередь, живут по тем же правилам что и реки, только имеют замкнутый контур.
Отдельно хотелось бы остановится на дорогах. Не забывайте, что стили дорог, вы можете создавать при помощи редактора дорог, так вот — особым вызовом являются мосты. Нам показалось, что мосты в виде спрайтов не самое удобное решение, мы ведь хотим делать карты быстро. Зачастую мост может иметь причудливый изгиб и никакими спрайтами вы не сможете учесть все варианты. «О, может использовать редактор РПГ иконок? Просто нарисовать нужный мост?» — это тоже не самый разумный вариант с точки зрения времени, каждый раз придется подгонять иконку под особенности текущей карты, делать копии иконки и так далее. Учитывая все это мы поступили просто — пускай система сама рисует мост ровно под дорогой и только над водой и реками. Не спрашивайте, как — «Оно просто работает» как говаривал один классик игровой индустрии. К слову, редактор стилей для дорог тоже работает весьма недурно и позволяет создавать цветовые схемы, которые вам требуются.
Заключение
Описание редактора гексагональных карт подходит к концу, мы надеемся, что у вы сможете реализовать свои задумки при помощи нашей программы. Не забывайте, что для генерации недостающих текстур можно использовать специальный редактор, если вас не устраивают цветовые схемы текста — создайте. Переходы текстур можно создавать в специальном редакторе переходов, ну и конечно — не забывайте делиться с нами своими идеями в дискорде нашего проекта!