Old Map #1: Создаю онлайн игру с нуля

Всем привет, я начинаю новый проект и хочу поделиться с вами своим путём.

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

Изометрическая ММО. Фармим, ходим на боссов, улучшаем гильдию.

Должно получится что-то такое.

проект magic.ru 
проект magic.ru 

Стек

Я создал много играл на Unity, но моя основная работа - веб разработка, я хорошо знаю JS и PHP, всякие Node и Mysql, по этому, в выбор пал на Phaser 3 + Socket IO + Express + Mysql

В качестве хостинга для сервера я использую reg ru cloud

Актуальная версия игры доступна на сайте chat2you.ru

Начало

Я буду использовать бесплатные изометрические ассеты с сайта kenney.nl, там же для начала возьмём UI, но для начала хватит и графики из примера phaser.

Пример карты с изометрией я возьму прямо с сайте phaser, у них десятки примеров, в том числе изометрия с правильной сортировкой

Карта

Я никогда не создавал онлайн игры, но вот что я придумал
Мы будем хранить на клиенте ресурсы, а карты получать в момент входа на локацию, в виде 2d массива.

Можно будет в любой момент изменять карту, удалять или добавлять боссов. Скрывать или открывать пещеры по времени.

Если взять демо проект и оставить только нужное нам, то получится примерно так

Old Map #1: Создаю онлайн игру с нуля

Берём из примера лучшее, оставляем только карту и одного скелета:

Я нашёл на гитхабе проект, в котором уже есть изометрия и поиск пути, его и возьмём за основу.

Кто-то уже создал игру, нужно переделать по себя и развивать онлайн
Кто-то уже создал игру, нужно переделать по себя и развивать онлайн

Сервер

Тогда пришло время создавать сервер

В первой версии цели простые - передать карту клиенту при запуске и вывести количество игроков онлайн.

Сама по себе отдача JSON крайне лёгкая, просто переносим карту из проекта на сервер и по требованию отдаём

Отдаём карту из проекта, в самой карте ничего пока менял
Отдаём карту из проекта, в самой карте ничего пока менял

Конечно, далее карты мы будем редактировать в админке и отдавать клиенту через базу.

Давайте сразу подключим базу, я использую reg.ru как хостинг удалённой базы данных и клиента (фронта), на node подключаюсь через mysql2

Вход

Для входа нужно авторизоваться, я сделал базовую форму, формальную

Old Map #1: Создаю онлайн игру с нуля

SOCKET IO

Самое главное в онлайн игре то сообщать игрокам о других игроках.

Socket IO очень простая вещь, встраиваем как обычно, в Express

Old Map #1: Создаю онлайн игру с нуля

А дальше всё просто, получаем нового игрока и сообщаем ему онлайн и положение (в будущем) остальных игроков, а текущим игрокам спавним на клиенте ещё одного игрока

Old Map #1: Создаю онлайн игру с нуля

Перемещение

Тут всё просто, продолжаем ту же концепцию.

Игрок ходит и посылает серверу новые координаты, путь считается на клиенте. Сервер отправляет команду всем остальным игрокам, о новых координатах игрока и каждый игрок считает ему путь и отрисовывает перемещение .

То есть, в условиях плохо сервера - пути считаются на клиенте и если будет большой онлайн в одной локации - клиент может и не выдержать, но эта проблема решается слоями, условно по 10 человек.

По поводу того, куда можно, а куда нельзя - проверок нет. Планируются проверки только доступа, к локациям и тд.

Размещение игры и сервера на хостинге

Оказалось задача довольно сложная

Если с фронтом всё понятно, я просто вебпаком всё собираю и получаю пару файлов статичных

Old Map #1: Создаю онлайн игру с нуля

То с сервером всё намного сложнее и вот почему:

Я всегда использовал regru как хостинг, там есть поддержка LAMP из коробки, я просто заливаю скрипты php/js на сайт и всё работает

А сервер у нас на node, для таких целей у меня есть regru cloud, облако где я ставлю скрипты node, допустим для постоянного парсинга игры, например для проекта games-stats.ru.
Я думал так прокатит и дальше, НО оказалось что во-первых нужен домен, во вторых поставить SSL.

Задача довольно сложная, для первого раза, домен я купил за 130р, back-server, а вот установка SSL, заняла у меня 4 часа, методом экспериментов я в итоге всё установил и всё хорошо, но было сложно)
Будут вопросы по настройке сервера пишите )

v0.01 is ready

Спасибо гифка за работу...
Спасибо гифка за работу...

Версия 0.01 моей изометрической онлайн ММО готова)

Вы только посмотрите, за 10 часов работы у меня есть что-то работающее.

Конечно тут мало игры, но мы это исправим)

Играть в онлайн ММО бесплатно и без регистрации

уже можно!

С гордостью представляю вам игру OldMap

Спасибо что дочитали, спасибо если зашли по ссылке!

Сервер может упасть, пишите!
Пожалуйста не взламывайте хостинг и базу данных <3

Будущее

Буду ооочень рад фитбеку и предложениям.

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

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

Подписывайтесь на канал. Хорошего дня :3

99
8 комментариев

Решил не брать серверный движок а пилить свой - уважаемо.

1

Ну это же проект не коммерческий, хочется и подучиться чуть-чуть )

2

Были похожие идеи с картой, но хотелось добавить управление не target based, а по стрелочкам и не придумал как на сетке делать в таком случае диагональное перемещение, чтобы оно не было быстрее горизонтального.

А у вас таргентное движение, т.е. игрок кликает на нужную клетку и перемещается только по 4 соседним клеткам?

И что насчет зданий, построек, стен, они всегда выровнены по клеткам? Стена всегда одна клетка?

На текущий момент карта просто 2d array, то есть 0 условно - вода, а 1 - земля, для зданий тоже самое, 3 - условно домик 1х1, а если поставить допустим 33 и 34 это будет начало и конец домика)
Дальность хода не ограничена, поиск идёт через плагин EasyStar.js, я просто отдаю карту и точки, он возвращает путь массивами точек

1

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

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

Я всегда использовал regru как хостинг, там есть поддержка LAMP из коробки, я просто заливаю скрипты php/js на сайт и всё работает

ничем серьезным, получается, пока не занимался еще