The Merge World – Building a Web3 Strategy Game Platform

Associated Link :

https://themerge.world

January 1, 2023 (2y ago)

Introduction

The Merge World is an interactive MMO economic strategy game built on the L2 blockchain, developed in partnership with Posers NFT. As the lead developer for this project, I was tasked with creating a comprehensive web platform that would not only showcase the game's unique features but also provide functional tools for users to manage their in-game assets, view interactive maps, and engage with the broader community. This technical case study outlines the architecture, implementation challenges, and solutions developed for this complex Web3 application.

The Merge World platform needed to effectively communicate the game's concept—a strategy game where players mine resources, build empires, trade, and negotiate with other players to expand their influence. The website serves as both a marketing tool and a functional interface for players to interact with their blockchain assets (lands, buildings, and resources) while preparing for the full game launch.

Project Background and Requirements

The Merge World is built as part of the Posers NFT ecosystem, an established collectible project with a dedicated community. The platform needed to bridge the gap between NFT ownership and actual gameplay utility, supporting a vibrant player economy where land ownership, resource management, and building placement are core mechanics.

Key Requirements:

Technical Architecture

Frontend Technologies

The frontend of The Merge World platform was built using a cutting-edge technology stack designed to deliver both performance and visual fidelity. At its core, we implemented Next.js 13 with the new App Router architecture, providing efficient server-side rendering capabilities while maintaining the interactive nature required for Web3 applications.

TypeScript served as our primary development language, enabling type safety and better code organization across the large codebase. For styling, we leveraged the utility-first approach of TailwindCSS, which allowed us to maintain the pixel-perfect game aesthetic while ensuring responsive design across all device sizes.

The Web3 integration—a critical aspect of the platform—was implemented using RainbowKit paired with Wagmi. This combination provided a streamlined wallet connection experience while handling the complexities of blockchain interactions, smart contract calls, and transaction management.

For the interactive map system, we utilized Three.js to render thousands of hexagonal cells efficiently, applying custom shaders and optimization techniques to maintain smooth performance even when visualizing the entire game world. Radix UI provided the foundation for accessible interface components, ensuring that complex interactions remained intuitive while conforming to the game's distinctive visual style.

Backend & Infrastructure

The backend architecture was designed with scalability and reliability as primary concerns. We leveraged Next.js API routes as the foundation for our serverless backend, enabling seamless integration between frontend and backend code while maintaining performance.

For database management, we implemented PlanetScale, a serverless MySQL platform that provided the scalability needed for the growing user base while ensuring data integrity for critical game assets.

Where specialized functionality was required—particularly for blockchain-specific operations and real-time data processing—we deployed dedicated Express.js services. These microservices handled intensive tasks such as blockchain indexing, transaction verification, and data aggregation, communicating with the main application through secure API endpoints.

The entire infrastructure was containerized and deployed across multiple environments, ensuring consistent behavior from development through staging to production. This architecture provided the flexibility to scale individual components as needed while maintaining overall system reliability during usage spikes, such as during land minting events.

Interactive Map Implementation

One of the most technically challenging aspects of the project was developing the interactive world map. This feature needed to visualize the game world with different biomes, elevation levels, and ownership status, while maintaining performance even with thousands of hexagonal tiles.

The map was implemented using Three.js with a custom hexagonal grid system:

// Simplified example of the map implementation
const MapLayout = ({hexData}: any) => {
    // State management for map interactions
    const [selectedType, setSelectedType] = useState<'Height' | 'Heat' | 'Moisture'>('Height');
    const [selectedHex, setSelectedHex] = useState<HexProps | null>(null);
    const [colorMode, setColorMode] = useState<'blackAndWhite' | 'multicolour'>('blackAndWhite');
 
    // Convert hex grid coordinates to screen space
    function axialToScreen({q, r}: { q: number, r: number }, size: number): { x: number, y: number } {
        const x = size * (Math.sqrt(3) * q + Math.sqrt(3) / 2 * r);
        const y = size * (3 / 2 * r);
        return {x, y};
    }
 
    // Generate the SVG path for a hexagon
    function hexToSvgPath({x, y, z}: { x: number, y: number, z: number }, size: number): string {
        const hexCorner = (i: number) => {
            const angleDeg = 60 * i - 30;
            const angleRad = Math.PI / 180 * angleDeg;
            return [x + size * Math.cos(angleRad), y + size * Math.sin(angleRad)];
        };
 
        const points = Array.from({length: 6}, (_, i) => hexCorner(i));
        return `M${points.map(p => p.join(',')).join(' L')} Z`;
    }
 
    // Render using Three.js for performance with large number of cells
    return (
        <Canvas
            orthographic
            camera={{position: [0, 0, 50], zoom: 2, up: [0, 0, 1], near: 0.1, far: 1000}}
        >
            <MapControls minZoom={0.4} maxZoom={3} enableRotate={false}/>
            <Svg
                shapes={hexShapes}
                heights={heights}
                owners={owners}
                hexData={hexData}
            />
        </Canvas>
    );
};

This implementation allowed users to:

The map component communicates with our backend API to fetch the latest blockchain data, ensuring that ownership information and land status are always current.

Account Management and Asset Tracking

The account section was designed to give players a comprehensive view of their game assets:

  1. Land Management: Users can view all their owned land parcels, complete with metadata such as biome type, coordinates, and building capacity. Each land parcel is also linked to its blockchain record for verification.

  2. Building and Resource Management: The platform tracks "Blueprint Boxes" and "Resource Boxes" that players receive through airdrops or purchases. These assets are essential for gameplay, allowing players to construct buildings and gather resources.

  3. Web3 Authentication: Implemented using RainbowKit and Wagmi, the authentication system verifies wallet ownership securely while maintaining a smooth user experience.

Visual Design and User Experience

Maintaining the game's distinct pixel art aesthetic was crucial for brand consistency. I implemented custom UI components that honored this visual language while ensuring modern usability:

Technical Challenges and Solutions

Challenge 1: Efficient Blockchain Data Retrieval

The platform needed to efficiently fetch and display blockchain data for thousands of NFTs without overwhelming the frontend with excessive API calls or data processing.

Solution: I implemented a custom data fetching strategy with pagination and caching.

This approach significantly improved performance by only loading the data needed for the current page view, while providing smooth pagination controls for users to navigate through their complete collection.

Challenge 2: Three.js Performance with Large Datasets

The map visualization needed to handle thousands of interactive hexagonal cells without performance degradation.

Solution: I implemented a custom rendering optimization that only draws cells within the viewport and uses instanced geometry for similar elements.

This optimization, combined with Level-of-Detail adjustments based on zoom levels, maintained smooth performance even when visualizing the entire game world.

Conclusion

Developing The Merge World platform presented unique challenges at the intersection of Web3 technology, gaming mechanics, and user experience design. By leveraging modern web technologies and implementing custom solutions for blockchain integration, interactive visualization, and performance optimization, I was able to create a platform that not only serves as an effective marketing tool but also provides genuine utility to users.

The project demonstrates how blockchain technology can be integrated into web applications in a user-friendly way, abstracting the complexity while still providing the benefits of decentralized ownership and transactions. The Merge World continues to evolve as the game develops, with the web platform serving as the central hub for users to manage their in-game assets and engage with the broader ecosystem.

Key lessons from this project include:

As blockchain gaming continues to mature, platforms like The Merge World provide valuable examples of how to bridge the gap between traditional web experiences and decentralized technologies.

LinkedIn
🇬🇧