Pixel Battles – Web3 Pixel Art Game

June 1, 2023 (2y ago)

Introduction

Pixel Battles is an interactive web application that combines collaborative pixel art with competitive gameplay mechanics. As the technical lead for this project, I designed and implemented a real-time platform where users connect their crypto wallets to join communities, claim territory on a shared canvas, and engage in strategic battles using NFT-based units. The game features a unique blend of artistic expression and competitive gameplay, allowing users to both create pixel art and compete for territorial control through an innovative battle system.

Project Scope and Initial Challenges

Project Scope: The Pixel Battles initiative had several key requirements from inception:

  • Develop a responsive, real-time web application allowing users to modify a shared pixel canvas
  • Create a battle system where communities compete for territory using NFT-based units
  • Implement secure wallet authentication and integration with blockchain technologies
  • Design a scalable backend capable of handling thousands of concurrent users
  • Develop a token economy ($POSER) with preseed and seed funding rounds
  • Complete the project with a polished user experience despite complex game mechanics

Technical Constraints: Building a collaborative pixel canvas with real-time updates presented significant technical challenges. The application needed to synchronize changes across all users immediately while preventing conflicts when multiple users attempted to modify the same pixel. Additionally, implementing the battle system required careful consideration of fairness, performance, and user experience. The battle mechanics needed to be both strategically interesting and technically feasible at scale.

The wallet integration added another layer of complexity, as the authentication system had to securely verify wallet ownership while providing a seamless user experience. Furthermore, the canvas rendering needed to be optimized for both performance and visual quality, with different viewing modes (art mode, community mode) and tools (brush, dropper, cursor).

Technology Stack and Architectural Decisions

To address these challenges, I designed and implemented a microservices architecture consisting of four primary components:

  1. pixel-wars-client: A Next.js frontend application utilizing TypeScript and React for the user interface. This client-side application handles the rendering of the pixel canvas, battle visualizations, and user interactions. It leverages React components with Tailwind CSS for responsive and customizable UI elements.

  2. pixel-wars-server: An Express.js server implementing WebSockets via Socket.IO for real-time communication. This server manages all real-time aspects of the game, including user connections, pixel updates, and battle state synchronization.

  3. pixel-api-server: A dedicated Express.js API server that handles game logic, battle simulations, and blockchain interactions. This server processes battle calculations, token operations, and other computationally intensive tasks.

  4. pixel-api-database: A PostgreSQL database that serves as the persistent storage layer for all game data, including users, pixels, teams, battles, and token transactions.

This distributed architecture provided several advantages:

  • Separation of concerns allowing for independent scaling of each component
  • Isolation of real-time functionality from computational-heavy processes
  • Resilience through service independence
  • Optimized performance for different types of operations

The client-server communication uses Socket.IO for real-time updates and RESTful APIs for standard requests. When a user places a pixel or initiates a battle, the change is broadcast to all connected users via WebSockets, creating a truly collaborative experience while maintaining a responsive interface.

For blockchain integration, I implemented Rainbow Kit and wagmi to connect with users' Ethereum wallets. This integration enables secure authentication without traditional username/password combinations, as users authenticate by proving ownership of their wallet address. The token system ($POSER) was implemented with smart contract integration, allowing users to participate in funding rounds and utilize tokens within the game economy.

Real-time Communication and Data Synchronization

One of the most critical components of Pixel Battles is the real-time communication system. The pixel-wars-server manages all WebSocket connections using Socket.IO, enabling instantaneous updates across thousands of concurrent users.

The server maintains several in-memory caches for optimal performance:

  • pixelsCache: Stores the current state of all pixels on the canvas
  • usersCache: Maintains user session data for connected users
  • battlesCache: Tracks ongoing and scheduled battles

When a user updates a pixel, the server processes the change, updates the database, and broadcasts the change to all connected clients.

To reduce bandwidth usage, I implemented data compression using zlib when transferring large datasets between services:

const data = {
    pixels: pixelsCache,
    battles: battlesCache,
};
const dataEncoded = zlib.deflateSync(JSON.stringify(data)).toString('base64');
callback({
    status: pixelsCache.length > 0 ? 200 : 500,
    dataEncoded
});

This approach significantly reduced payload sizes when transferring the entire canvas state to new users or after reconnection, enabling smoother user experiences even on slower connections.

Battle System Architecture

The battle system, one of the most technically complex features, was implemented as a discrete service within the pixel-api-server. I designed a sophisticated battle simulation engine that models unit attributes, positioning, and tactical interactions.

The battle system operates through several key classes:

  • Battle: Orchestrates the entire battle simulation process
  • Community: Represents a team of units from the same faction
  • Squad: The base class for all combat units
  • MeleeSquad and RangedSquad: Specialized unit classes with different combat behaviors

The battle logic follows a turn-based approach where each unit selects targets, moves, and performs actions based on their attributes and position. Actions are logged in detail for battle visualization:

attack(target: Squad, currentRound: number) {
    if (this.ammo > 0) {
        if (this.calculateDistance(target) !== 0) {
            super.rangedAttack(target, currentRound);
            return;
        }
    }
    if (target.lastAttacker === this) this.meleeCounterAttack = true;
    super.attack(target, currentRound);
}

The battle results are determined through simulation rather than random chance, creating a strategic depth that rewards thoughtful unit selection and community coordination.

To optimize performance, battles are processed asynchronously on the server, with updates broadcast to clients at key moments. The battle visualization on the client recreates the battle sequence based on the logged actions, providing an engaging playback without requiring continuous server communication.

Canvas Rendering and User Experience

The pixel canvas, the heart of the application, was implemented using Canvas elements with careful optimization to support a grid of thousands of pixels with real-time updates. The rendering logic implements three distinctive view modes:

  • Art Mode: Displays the actual colors of pixels for artistic visualization
  • Community Mode: Colors pixels based on the controlling community for territorial visualization
  • Border Mode: Highlights contested pixels that can be captured

The canvas implementation includes several specialized tools for user interaction:

  • Cursor: For selecting individual pixels
  • Brush: For faster painting of multiple pixels
  • Dropper: For sampling colors from existing pixels

To ensure smooth performance, I implemented several canvas optimizations:

  • Separate canvas layers for different rendering concerns (base pixels, hover effects, battle indicators)
  • GPU-accelerated rendering with appropriate pixel scaling
  • Throttled updates to prevent rendering overload during rapid changes

The pixel editing interface prioritizes both precision and ease of use, with thoughtful additions like color pickers, community territory visualization, and battle status indicators.

Token Economy and Smart Contract Integration

The $POSER token system integrates with Ethereum smart contracts to create a sustainable in-game economy. The token implementation supports:

  • Preseed Round: Early investment with preferential token prices
  • Seed Round: Second funding stage with adjusted token pricing
  • Vesting Schedule: Time-locked token distribution to encourage long-term participation

The smart contract integration was designed with careful consideration of gas costs and transaction times. The contract functions for token purchase and vesting are optimized for efficiency.

A dedicated vesting interface allows users to track their token allocation and claim available tokens according to the vesting schedule.

Performance Optimizations and Scaling

To ensure the application performs well at scale, I implemented various optimization strategies:

  1. Database Query Optimization:
  • Targeted indices on frequently queried fields
  • Stored procedures for complex operations
  • Connection pooling for efficient resource usage
  1. Memory Management:
  • Time-based cache expiration for user data
  • Battle simulation results caching
  • Compression for large data transfers
  1. Network Efficiency:
  • WebSocket message batching for frequent updates
  • Partial canvas updates instead of full refreshes
  • Progressive loading for battle visualizations
  1. Frontend Performance:
  • Canvas rendering optimizations
  • React component memoization
  • Code splitting for reduced initial load times

Through load testing, the system demonstrated the capability to handle over 10,000 concurrent users while maintaining responsive pixel updates and battle simulations.

Conclusion and Lessons Learned

Developing Pixel Battles presented unique technical challenges at the intersection of real-time collaboration, blockchain integration, and complex game mechanics. Several key insights emerged from this project:

  1. Microservices Architecture: Dividing the application into specialized services (client, WebSocket server, API server, and database) proved essential for scalability and maintainability. Each component could be optimized, scaled, and deployed independently.

  2. Real-time Synchronization: WebSockets provided the necessary foundation for collaborative pixel art, but required careful implementation to handle thousands of concurrent connections without performance degradation.

  3. Battle System Complexity: The battle simulation engine demonstrates how complex game mechanics can be implemented in a web environment while remaining performant, even when processing multiple simultaneous battles.

  4. Blockchain Integration: Integrating Web3 technologies like wallet authentication and token contracts added valuable functionality but required thoughtful user experience design to accommodate varying levels of blockchain familiarity.

  5. Database Optimization: PostgreSQL provided a robust foundation for storing game state, but required careful schema design and query optimization to handle the high volume of read and write operations.

Pixel Battles represents a successful fusion of pixel art, strategic gameplay, and blockchain technology. The distributed architecture, real-time capabilities, and battle simulation system together create a compelling and scalable platform that engages users through both artistic expression and competitive gameplay.