Technical Documentation

The technical foundation of Echoed Shadows is designed to leverage modern tools and technologies to deliver a polished, engaging, and scalable game experience. Here's a detailed overview of the tech stack, including its role in game development.

---

Frontend

The frontend is responsible for rendering graphics, managing player interactions, and handling the user interface. The following tools were used:

• Vite + React

  • Vite ensures fast builds during development and optimized performance in production.

  • React provides a modular component-based framework to manage the game's UI elements such as menus, buttons, lobbies, and overlays.

• Phaser

  • A powerful 2D game engine used for rendering the haunted house, creating animations, and managing game mechanics like:

    • Player movement.

    • Lighting and limited visibility effects.

    • Object interaction (e.g., hiding in closets, activating secret passages).

• Electron

  • Ensures that the game runs as a standalone desktop application across platforms like Windows, macOS, and Linux.

  • Provides a seamless bridge between the game logic and the desktop environment.

---

Backend

The backend manages real-time gameplay, synchronization, and multiplayer functionality:

• Node.js

  • Serves as the backbone for the game's server-side operations.

  • Manages game state, player data, and logic for in-game events.

• Socket.IO

  • Enables real-time communication between players and the server.

  • Facilitates instant updates for actions such as hiding, movement, and haunting events.

  • Ensures game state consistency across clients.

---

Networking

Networking enables the multiplayer functionality of Echoed Shadows, allowing players to connect and compete in 1v1 matches.

• Lobby System

  • Players can create or join lobbies to organize matches.

  • Lobbies allow players to set game parameters and start sessions once all participants are ready.

• Host Options

  • Self-Hosting: Players can host a game on their local device, allowing others to connect over a local network or via direct IP.

  • Remote Hosting: Players can join matches hosted by others online.

• Room-based Sessions

  • Matches are isolated into separate rooms, ensuring that each game operates independently.

  • This approach supports multiple concurrent games and enhances overall performance.

• Real-Time Synchronization

  • All game events (e.g., player movements, hiding interactions, and timer synchronization) are updated in real time to ensure a smooth multiplayer experience.

---

Assets

Creating assets that perfectly fit the game's dark, atmospheric tone was essential to the visual identity of Echoed Shadows:

• Aseprite

  • Used to design pixel art assets such as character sprites, haunted house objects, and environmental elements.

  • Its animation tools were utilized for smooth transitions and interactive feedback.

• IbisPaint

  • Leveraged for conceptualizing designs and refining textures.

  • Provided additional detail and polish to assets, complementing the pixel art style with a refined aesthetic.