Как сделать интерактивную карту мира для текстовой игры?
Привет.В прошлый раз обещал показать как создаётся одна локация изнутри. Выполняю - беру сердце игры: карту острова. Сегодня чистая техника: какими сервисами делал, как сделал картинку кликабельной, как устроены подменю. Для многих это не ново, но для кого-то окажется полезным.
Зачем карта, если игра текстовая?
Коротко - можно дать список локаций ссылками, и это работает. Но карта даёт то, чего список не может: ощущение цельного мира. Игрок не выбирает из меню, а тыкает в точку на острове. «Визуальная свобода» перемещения вместо списка вариантов.
Один практический вывод, который я держал в голове: не перегружать. Исследования игрового пространства показывают, что навязчивые маркеры на карте наоборот снижают желание исследовать - игрок гонится за значками вместо осмотра мира. Вот ссылка на выдержку из исследования («Game Level Design to Evoke Spatial Exploration: The Influence of a Secondary Task» (CHI PLAY 2024)) на эту тему:
Поэтому карта у меня простая: точки локаций и больше ничего лишнего.
Теперь к технике.
Сервис №1 - генератор карты (Watabou / Procgen Arcana)
Рисовать от руки я не умею, поэтому карту острова сгенерировал в Procgen Arcana - это набор бесплатных процедурных генераторов карт от разработчика Олега Доли (ник Watabou).
Конкретно острова и побережья делает генератор Perilous Shores.
Что важно знать про этот инструмент:
- Полностью бесплатный, карты генерируются процедурно. Жмёшь - получаешь новый остров. Не нравится - жмёшь ещё раз.
- Каждой карте соответствует seed (зерно) - его можно вписать в URL и получить ту же карту снова. Удобно: нашёл нужный остров - сохранил ссылку, не потеряешь.
- Экспорт в PNG и SVG. Я брал PNG.
- Можно переименовывать места, двигать метки, менять детали перед сохранением.
- По лицензии - сгенерированные карты можно использовать как угодно, в том числе в коммерческих проектах, атрибуция приветствуется, но не обязательна. (Автор только просит не перепродавать сами карты - это понятно.)
Генераторы Watabou - это, без преувеличения, золотой стандарт в настольных RPG. Мастера D&D массово делают на них карты городов, деревень, подземелий для своих кампаний. Его же One Page Dungeon Generator вообще растащили на основу для браузерных мини-игр. Так что инструмент проверенный сообществом.
Я накликал десятки вариантов, пока не нашёл нужную форму: остров вытянутый к северу. Это под сюжет - на севере мыс, ключевая точка развязки. Юг обжитой, север пустой. Сохранил PNG.
Сервис №2 - кликабельные зоны (image-map.net)
Дальше картинку надо сделать интерактивной - чтобы клик по месту на острове вёл в локацию. Это делается через стандартный HTML: тег с областями . Но вручную вычислять координаты каждой точки - мучение. Поэтому есть визуальный редактор.
Как работает:
- Загружаешь свою картинку
- Мышкой рисуешь поверх неё зоны (круги, прямоугольники, многоугольники)
- Сервис выдаёт готовый HTML-код с координатами
Копируешь - вставляешь. Всё.
Как это выглядит в коде.
Вот реальный кусок из моей карты:
Разбор одной зоны:
- shape="circle" - форма области (круг)
- coords="406,79,28" - X-центр, Y-центр, радиус в пикселях
- data-passage="Severny_Mys" - в какой пассаж Twine ведёт клик
- title="Северный мыс" - всплывающая подсказка при наведении
Картинка подключается через usemap="#image-map", который ссылается на . Каждая — отдельная горячая зона поверх изображения.
Нюанс для SugarCube: я использую data-passage - это встроенный атрибут, который превращает любой элемент в ссылку на пассаж. Клик по зоне = переход. Без него пришлось бы вешать обработчик вручную.
Подменю над картой.
Карта - ещё и хаб управления. Над изображением закреплён тулбар:
[[📔 Дневник детектива|Dnevnik]] ⚖ [[Вынести вердикт →|Final_check]]
Три функции:
- Дневник - все найденные улики и опрошенные, сгруппированы по локациям. Отдельный пассаж в Twine Dnevnik, куда стекаются данные через переменные.
- Вердикт - доступен всегда. Можно обвинить кого угодно в любой момент, но без улик финал будет соответствующий.
- Помощь полицейского - отдельная локация-подсказка для тех, кто застрял.
CSS: коротко про оформление.
Оформление карты держу максимально сдержанным: тёмный фон, лёгкая подсветка зоны при наведении, простой тултип. Единственный активный элемент - таймер в углу, и то намеренно, для напряжения (это игровая механика, про неё думаю рассказать в отдельном посте).
Логика простая: карта должна задавать настроение (холодный нуарный остров), а не отвлекать анимациями. Чем тише интерфейс, тем глубже игрок в расследовании.
Итого - рецепт интерактивной карты:
- Генерируешь карту в Procgen Arcana (Perilous Shores для острова), сохраняешь PNG
- Размечаешь зоны в image-map.net, копируешь HTML
- Вставляешь в пассаж, прописываешь data-passage на каждую зону
- Добавляешь тулбар с дневником и вердиктом
- Причёсываешь CSS - но без перегруза
Всё бесплатно. Для моего уровня этого пока достаточно для полноценной интерактивной карты.
Напиши в комментах, какими инструментами пользуешься в своих проектах? Думаю, будет полезно всем)