What I learned creating a scalable online drawing experience that doesn't break the bank
The Challenge
Creating an online drawing game that handles multiple players drawing simultaneously while maintaining smooth real-time sync is trickier than you'd think.
The main problems I had to solve were keeping everything in sync across different devices, making the networking efficient enough that it wouldn't lag, integrating AI without going broke, and building something that could actually scale.
The Architecture Decision That Changed Everything
Here's the thing that made all the difference. Instead of building some complex separate AI service, I just made the AI another player in the room.
Seriously, that's it. The AI joins the game session like any other player, watches the drawing updates, and chats back with commentary. This meant I could use all the existing multiplayer infrastructure I'd already built.
The benefits were mental. Real time communication just worked, audio streaming was already there, and if anything crashes it can just rejoin like any player would.
Network Optimization!!!!
Multiplayer drawing games generate massive amounts of data, so I had to get clever with the networking.
The breakthrough was switching from JSON to binary protocols for the drawing data. Instead of sending verbose text descriptions of every line, I pack everything into tiny binary messages. This cut bandwidth usage by 90%.
I also normalized all coordinates so the game works the same whether you're on a massive desktop or squinting at your phone. Everything's stored as 0-1 values that get scaled on each device.
Making AI Affordable (lol)
My first prototype cost about 15p per game, which would have been financial suicide. I managed to get it down to about 2p through some serious optimization.
The game changer was intelligent caching. Most drawing updates don't actually change what the AI sees, so I hash the content and cache results. If someone draws something identical to what's been seen before, no API call needed.
I also only trigger AI analysis when something meaningful changes, not on every brush stroke. Batch up small changes and only analyze when there's been enough of a shift to potentially change the guess.
Game State That Actually Works
Keeping everyone in sync across multiple clients is one of the trickiest bits. The solution was designating one authoritative source (the AI participant) for game state and broadcasting all updates from there.
This prevents conflicts between clients and means everyone sees the same thing at the same time. Plus if someone disconnects, they can rejoin and catch up seamlessly.
The Results
After all the optimization work, the system handles 12 concurrent players per room, maintains sub-100ms latency for drawing sync, and costs under 3p per game to run. Not bad for something cobbled together in spare time.
Key Takeaways
Choose managed infrastructure over custom solutions. Focus on your game logic, not networking complexity.
Binary protocols can save you a fortune. JSON isn't always the answer for high-frequency data.
Cache aggressively when dealing with expensive APIs. Most of the time you're processing stuff you've already seen.
Design for mobile from day one. Touch interfaces and varied screen sizes will bite you if you don't plan ahead.
Plan for failure. Everything will break eventually, so build recovery into the system.
What's Next
The possibilities for real-time multiplayer games have never been better. Modern WebRTC infrastructure handles the networking complexity, AI APIs provide sophisticated analysis capabilities, and the costs are finally reasonable for indie developers.
Give it a go if you're thinking about building something similar. The tools are all there now.
Try It Live
Want to see how it all works in practice? The game's live at artbitrator.10kv.games - no signups or downloads needed, just jump in and start drawing!
Tags: #multiplayer #realtime #webdev #gamedev #ai #drawing #online-games #webrtc #javascript
Top comments (0)