Как школьник веб игру делает #1⁠⁠

Успешно слив олимпиады, можно и проектом позаниматься

Привет!

Продолжаю рассказывать о своем школьном проекте по информатике - веб игре

Решил рассказать о том, как дошел до сегодняшнего момента.

Навыки

К началу создания игры у меня было общее представление о создании игр (делал простенький платформер), знание C++, SFML, поэтому хотелось найти похожие инструменты.

Изначально думал делать на unity, но погуглив о том, как другие люди делают так называемые .io игры, пришел к выводу, что на unity никто не делает .io-шки и следует писать на javascript

Структура

Тот же гугл рассказал мне, что для клиента обычно берут pixijs для графики и socket.io для общения с сервером.

Тогда я еще ничего не понимал и не знал, так что взял Node.js для сервера, так как "клиент на js - пусть и сервер на js", хотя можно было взять любой другой (что-нибудь на python, например, хотя я его тоже не знаю). Сейчас я понимаю, что есть web server, а есть игровой сервер, и последнее может быть написано на чем угодно, хоть на C++ с вводом-выводом в файлик, но тогда, по тому же принципу, я решил, что незачем городить огороды и писал все на Node

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

Главное правило (а так же ограничение и огромный груз) при создании онлайн игр - нельзя доверять клиенту, все вычисления должны быть выполнены на сервере.

Получается, что пользователь нажимает клавиши, клиент отправляет запросы "%token% нажал клавишу %key%", это записывается нужному игроку на сервере, при очередном тике сервера он обрабатывает правильно это нажатие (в том числе проверку на то, что мог ли человек нажать вообще сюда - например, нажатие за пределы экрана мышкой), обрабатывает весь мир, и отправляет нужную информацию каждому игроку (например, сторона вируса не должна знать о местонахождении игроков до тех пор, пока они не появятся в зоне экрана игрока).

Библиотеки

Спустя мгновение, я уже накачал себе библиотек js и на клиент, и на сервер:

На клиенте, кроме вышеупомянутых pixijs и socket.io, добавились utility библиотеки: js.cookie для кук, jquery и bootstrap для дизайна.

На сервере появились: express для запуска http сервера двумя строчками кода, jsonwebtoken для защиты (по сути, я использую токены для идентификации пользователя, для любого игрового действия клиент должен передать токен, и именно по нему я нахожу игровой объект на сервере, а не по socket.id), taffydb для онлайн базы пользователей, csv для парсинга таблицы с игровыми константами и sanitize-html для обработки корректности никнейма.

Графика

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

opengameart

game-icons

itch.io

GUI на сайте сделал мой одноклассник, большое ему за это спасибо.

Процесс

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

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

В итоге сделал эдакий клон террарии, в котором люди (мои одноклассники)... рисовали разные (чаще - неприличные) надписи

Ну, они хотя бы играли в нее, что уже неплохо.

Вот мы уже и почти пришли к тому, что есть сейчас. С момента первого нормального билда с игрой платформером добавилось не особо много "фич" (что не сказать о коде): комнаты, немного улучшений графики, шипы (пришлось почти переписать всю физику для того, чтобы сделать отбрасывание от них корректным), новый GUI

Но я бы не писал этот пост, если бы не залил новое обновление, которое уже чуть чуть приводит игру в нужный вид:

(ниже changelog, который я скинул своим одноклассникам)

Update 0.1.0

1) Сторона вируса:

вы - система блоков

можно перемещаться только так, чтобы в центре был блок вируса (wasd)

главный блок - ядро, начинаете только с него, при уничтожении - game over

можете ставить и ломать блоки только вокруг себя

2) Новый (вроде не лагающий) фон

3) Фикс зума - теперь игра должна быть одинакового размера везде (но это не точно)

4) Небольшая неуязвимость при получении урона за людей

5) В комнате 1 карта сохраняется между сессиями - все, что вы там наделали останется после перезапуска комнаты (в остальных как раньше - ресет)

6) Обновления GUI

Немного скриншотов:

Сторона вируса: (красным обведено ядро)

К сожалению, оказалось, что билд нестабильный, постоянно падает и лагает, и очень глючат лобби (игроки дублируются и не покидают сервер), с чем это связано я вообще не понимаю пока что.

Но потыкать-поиграть вы все равно можете, но сервер может (и будет) падать и лагать, все ошибки я отслеживаю и стараюсь исправлять, так же вы можете писать о них мне в комментариях.

Ссылка на игру: infection.tk