Где найти достоверный источник информации по теме создания игровых карт на JS?

Question

[iKreazy]

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

Красный: Элементы игрового интерфейса, html + css, это понятно.
Зеленый: Карта, главное игровое поле, состоит из одинаковых полигонов (пометил синим).
Есть возможность устанавливать целые объекты в несколько полигонов сразу. Масштабирование на колесо мыши.
Как все это реализовать посредством js? Какие библиотеки использовать и где найти как можно лучше документацию со всей нужной информацией. Желательно с описанием работы полигонов, как создавать эти самые объекты, соединять объекты дорогами, высчитывать расстояние между объектами и все в этом плане.

Сама игра: Armaldia(com) не реклама.

Comments

[Анатолий Куликов]

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

[twoone]

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

[iKreazy]

twoone, Те слова которых точно не хватало. Пища для размышления получена, здесь же нашел пост о создании изометрических миров. Буду искать и разбираться дальше, спасибо!

[twoone]

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

Answer 1

[aby125]

Кажется тяжело, но попробуй разбить на маленькие подзадачи и максимально упрости проект:
т.е. на скрине достаточно сложный проект, хотя многое будет однотипно.
Попробуй сделать такой вариант - есть карта с клетками(используй canvas), где надо раставлять элементы ландшафта, дороги и т.п. Так же можно дома, здания расставлять и т.п.
И сделай кнопку сохранения, если это редактор игровых карт. Т.е. чтобы сохранял эту карту. Все остальные элементы интерфейса к данной задаче мало относятся.
если кратко разобрать эту задачу, то будет примерно так - карта представляет из себя, например, массив, в массиве можешь указать число, которое будет соответствовать рисунку текстуры, например - 0 - трава, 1 - деревья, 2 - дорога и т.д.
попробуй разбить на маленькие подзадачи:
1) загрузить изображение
2) сделать несколько изображений
3) сделать в памяти массив, где будут храниться номер текстуры соответствующей клеточки
4) сделать визуал, который считает сохраненный массив с текстурами и расставить их по нужным координатам
5) сделать функцию с тремя параметрами, которая будет ставить текстуру клетки в нужное место(можно проверить в консоли)
6) сделать окошко, откуда будем вытягивать текстуры
7) разместить текстуры в окошке из пункта 6
8) реализовать перетягивание из окошка в поле и сохранение. этот пункт лучше разбить на подпункты:
8.1) сделать определение координат квадрата над которым находится мышка.
8.2) сделать определение текстуры в окошке из п.6 над которым находится мышка.
8.3) сделать перетягивание текстуры мышкой при клике и сохранение в нужном месте при отпускании
9) сделать сохранение результата
Это будет конечно не уровня senior, но хотя бы поймешь суть и что к чему, для себя думаю пойдет. Потом можно поискать библиотеки для разработки игр на js и т.п., если будет необходимо.
Посмотри несколько видео на ютубе по созданию простых игр на js, там весь нужный функционал разбирается. Т.е. как загружать изображение, события клавиатуры и мышки и т.д., но если не знаешь азов js, то будет тяжко

Answer 2

[Кирилл Петров]

https://boardgame.io/
Может от сюда что нить возьмёте.