xlsft`s pixelbattle

xlsft`s pixelbattle is a small real-time pixel battle game implemented on the Go and Nuxt stack. The server part is responsible for storing the canvas state and synchronizing clients, the frontend draws the canvas and processes user interaction, and data exchange occurs via WebSocket. The project was conceived as an experiment and demonstration of an engineering approach, but during development it turned into a full-fledged optimization task, where bit packaging played a key role.

The main problem arose as the canvas grew: the initialization packet with the current state of all pixels began to grow to tens of megabytes, and sending each update as JSON led to socket overload and unnecessary overhead for serialization. The classic text representation of coordinates and colors proved to be too “heavy,” so it was decided to abandon the string model in favor of a dense binary format.

Bit packaging made it possible to pack coordinates and color index into a fixed 24-bit block. To achieve this, each parameter was assigned a strict range: x and y coordinates within 0–1023 fit into 10 bits each, and colors from a palette of up to 16 values fit into 4 bits. Instead of transmitting three separate numbers or a text structure, the values are combined into a single 24-bit number using bit shifts, after which they are sequentially written to Uint8Array. Thus, one pixel occupies exactly 3 bytes without any extra characters, quotes, or separators.

The transfer is carried out using a binary WebSocket frame, which allows raw bytes to be sent. On the client side, the data is unpacked using reverse bit shifts and masks, restoring the original x, y, and color index. This approach radically reduced the size of the init packet and reduced the load on the server: instead of tens of megabytes of text JSON, a compact binary buffer is transmitted, and the data preparation time has been reduced from tens of seconds to milliseconds.

Additionally, updates began to be buffered and sent in batches at fixed intervals, which eliminated spam from individual messages during mass drawing. As a result, each pixel went from dozens of bytes of text representation to a strictly fixed 24 bits, and the system itself became much more scalable and resilient to load.

The project became a vivid demonstration of how low-level bitwise operations and control over the data transfer format can provide a multiple increase in efficiency without the use of complex compression algorithms. Bit packaging here is not a theoretical technique, but a practical tool for optimizing a real network application.