xlsft`s pixelbattle

xlsft`s pixelbattle — это небольшая реалтайм-игра в формате пиксель-баттла, реализованная на стеке Go и Nuxt. Серверная часть отвечает за хранение состояния полотна и синхронизацию клиентов, фронтенд отрисовывает канвас и обрабатывает взаимодействие пользователя, а обмен данными происходит через WebSocket. Проект задумывался как эксперимент и демонстрация инженерного подхода, но в процессе разработки превратился в полноценную оптимизационную задачу, где ключевую роль сыграло bit-пакетирование.

Основная проблема проявилась при росте полотна: инициализационный пакет с текущим состоянием всех пикселей начал разрастаться до десятков мегабайт, а отправка каждого обновления в виде JSON приводила к перегрузке сокета и лишним накладным расходам на сериализацию. Классическое текстовое представление координат и цвета оказалось слишком «тяжёлым», поэтому было принято решение отказаться от строковой модели в пользу плотного бинарного формата.

Bit-пакетирование позволило упаковать координаты и индекс цвета в фиксированный 24-битный блок. Для этого каждому параметру был задан строгий диапазон: координаты x и y в пределах 0–1023 укладываются в 10 бит каждая, а цвет из палитры до 16 значений — в 4 бита. Вместо передачи трёх отдельных чисел или текстовой структуры значения объединяются в одно 24-битное число с помощью побитовых сдвигов, после чего последовательно записываются в Uint8Array. Таким образом один пиксель занимает ровно 3 байта без каких-либо лишних символов, кавычек и разделителей.

Передача осуществляется бинарным WebSocket-фреймом, что позволяет отправлять «сырые» байты. На клиенте данные распаковываются обратными побитовыми сдвигами и масками, восстанавливая исходные x, y и индекс цвета. Такой подход радикально уменьшил размер init-пакета и снизил нагрузку на сервер: вместо десятков мегабайт текстового JSON передаётся компактный бинарный буфер, а время подготовки данных сократилось с десятков секунд до миллисекунд.

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

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