@givemoneybiatch
Немного веб, немного гейм

С помощью каких технологий лучше всего делать интерактивные географические карты для веб-игр?

Нужно сделать интерактивную игровую карту. Базовый функционал: игрок может перемещаться, менять масштаб, получать информацию по клику на города (синие кружочки).
Первое что приходит в голову - это карту сделать на d3.js. Координаты городов получать с апи и отображать их в соответствующих местах, а при перемещении игрока по карте отправлять новые координаты на бекенд. Единственное, что похоже на d3.js нельзя будет раскрасить карту в цвета ландшафта как на скриншоте. Это реализуемо?
И еще непонятно как лучше реализовать непроходимые места на карте?

Screenshot-151.png

Похожих примеров сделанных на JS не нашел, но если подкинете - буду благодарен
  • Вопрос задан
  • 739 просмотров
Пригласить эксперта
Ответы на вопрос 5
Moskus
@Moskus
Ландшафт можно сгенерировать так, например https://www.playfuljs.com/realistic-terrain-in-130...
А для карт есть фреймворк leaflet.js

Но я бы карты всё же генерировал заранее в каком-либо трехмерном редакторе, там больше возможностей. https://www.blendernation.com/2019/04/01/generatin...

А потом - резал на тайлы и показывал бы через Leaflet.
Ответ написан
dollar
@dollar
uBlock, Ghostery, WOT, TosterComfort, RKN Alert
Поиск пути и обход препятствий - алгоритм A* (AStar) и его модификации. При этом мир предполагается разбить на зоны.

Что касается карты, то однозначно ответить нельзя.

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

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

В общем, я бы на вашем месте не искал готовое решение, а делал своё, и составлял бы функционал игры из более мелких кирпичиков - отдельно алгоритм генерации (плюс свои хотелки типа генерации координат городов), отдельно сделать зум карты (свой или нагуглить), отдельно сами города и т.д. Генерация карты, соответственно, тоже составляется чисто под вашу игру из еще более мелких кирпичиков. Алгоритмов генерации множество, с их поиском у вас не будет проблем.
Ответ написан
@givemoneybiatch Автор вопроса
Немного веб, немного гейм
Нашел две интересные статьи на тему
И хоть для моего случая оказалось достаточно простой карты-картинки, думаю это может быть кому-то полезным
https://blog.patricktriest.com/game-of-thrones-map...
https://blog.patricktriest.com/game-of-thrones-lea...
Ответ написан
@Interface
Ну в простейшем случае, может быть достаточно просто взять растровую картинку карты и использовать ее как бэкграунд. Соотвественно, остается научиться ее скролить и масштабировать (+ возможно вращать).

Судя по всему вам этот очевидный подход почему-то не подошел. Раскройте свои требования:
1) какой минимальный и максимальный зум?
2) предполагаемый размер карты?
3) может быть она должна быть анимированной?
4) 2д или 3д карта?
5) насколько она должна быть интерактивной? можно ли по ней перемещаться (аля Fallout)
и т. д.

Все это поможет подобрать решение.
Ответ написан
riky
@riky
Symfony / Laravel
для вывода карты leaflet. непроходимые места можно сделать отдельным слоем, как битовая маска. причем достаточно сделать ее с низким разрешением просто (проверять цвет пикселя).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы