Bomberman Online — HTML5 мультиплеер онлайн игра от хабраюзеров. Тестируем нагрузку!

в 9:44, , рубрики: bomberman, fun, game development, GWT, html, html5 canvas, java, jetty, nodejs, online, websockets, метки: , , , , , , , ,

Bomberman Online — HTML5 мультиплеер онлайн игра от хабраюзеров. Тестируем нагрузку!Bombermine Online — результат последних двух недель тестирования и подготовки движка для большого кол-ва игроков онлайн.

Движок написан на Java + Jetty (бекэнд). Фронтэнд — HAProxy + Nginx + Node.js. Клиентсайд — GWT, который транслируется в HTML5/canvas + javascript + websockets. Хостится всё в облаке.

На данный момент рекорд — 50 игроков онлайн. Настроен весь необходимый софт для мониторинга нагрузки. После хабраэффекта обещаем выложить отчёт. Ждём гостей :-)

Видео геймплея

Предыстория создания движка

Недавно возникла мода переписывать старые игры под HTML5 — идея того, что игры детства можно портировать под браузер и, может даже, играть в них с друзьями вскружила мне голову.

Для больших карт используется метод, который я подглядел в Minecraft, когда писал свой мод Mine Upside Down: карта делится на квадратные чанки и пользователю отправляются диффы относящиеся к квадратам в его зоне видимости. При этом часть апдейта состояния игры клиент выполняет сам, а что не может — получает как дифф с сервера. Понятно, что в идеальном случае рассинхроны должны возникать только на границах видимости игрока и гасятся они за счёт избыточной информации в диффе.

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

Потом настало время писать отображение. При прорисовке тайловой карты возникла проблема: если тайлы размера 16х16, а экран 640х480, то надо нарисовать 1200 квадратов. При этом рисующийся тайл зависел ещё и от соседей. Получаемый FPS меня не радовал. Спасла штука, используемая в том же Minecraft — полученный с сервера чанк следовало нарисовать и запомнить до тех пор, пока он не изменится. При этом буфер для отображения чанков можно использовать периодический, размером немного больше экрана.

Теперь вместо 1200 изображений 16х16, номера которых зависели от соседних, надо рисовать всего-лишь 6 изображений 256х256, без всяких лишних вычислений. FPS сразу поднялся до заветных 60. В GWT DevMode на моём ноутбуке выходит 17 FPS — для отладки просто замечательно.

Сетевая часть оказалась совсем простой — WebSockets через Jetty.

клиентсайд: Лучше всего себя показывает Хром (держит 60 фпс даже на старом железе), потом Сафари, ФФ и Опера. Про ослика лучше не спрашивать :)

Bombermine Online Crew

Как вы наверное уже догадались, автор движка — это я. Веб и интерфейс — demark. Тюнинг и настройка сервера — stolen. Художники — d3emp и DaveDee (скоро на хабре).

Enjoy! Good Luck & Have Fun

Автор: Jedi_Knight


  1. Дмитрий:

    А можете сделать хотя бы на 4-х как на майл.ру была?Народу подтянется много…

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js