Unemployed Backrooms

Navigate AI-generated backrooms, solve programming puzzles validated by AI, and escape the nightmare of tech unemployment in this unique 3D horror-comedy game

Comment

Inspiration

"Unemployed Backrooms" was sparked by the shared (and often absurd) experiences of navigating the modern tech job market – the endless LinkedIn scrolls, the ghosting, the quirky interview questions, and the ever-present shadow of layoffs. We saw a potent blend of anxiety and dark humor in this collective ordeal. The "Backrooms" internet phenomenon, with its unsettling liminal spaces, provided the perfect canvas. Our goal was to create a game that transformed this professional existential dread into a playable, somewhat nightmarish, yet darkly comedic first-person adventure, peppered with software engineering memes and relatable tech industry struggles. The game's unsettling atmosphere and sense of disorientation are inspired by the "Backrooms" creepypasta, while the specific lore, puzzles, and thematic elements are original to "Unemployed Backrooms."

What it does

"Unemployed Backrooms" is a 3D single-player, first-person game where the player must escape a series of surreal, office-themed "backroom" levels. The core gameplay loop involves:

  1. Exploration: Navigating maze-like environments that evoke the feeling of being trapped in a monotonous, endless office complex.
  2. Puzzle Solving: Interacting with computer terminals to solve programming puzzles. These puzzles are often themed around tech job search tropes or ironic corporate scenarios.
  3. AI-Powered Dynamics:
    • In "Fresher Nightmare Mode," both the level layouts and the programming puzzles are dynamically generated by Google's Gemini AI, ensuring high replayability and unique challenges each time.
    • Player-submitted JavaScript solutions to these puzzles are also validated by the Gemini AI, which determines correctness and can provide thematic feedback or hints.
    • AI-Generated Visual Assets: Many of the in-game visual assets, such as thematic textures (e.g., stained carpets, cubicle walls), corporate art pieces, and ironic motivational posters, were created using AI image generation tools. This allowed us to rapidly develop a unique visual style tailored to the game's specific "unemployment horror-comedy" aesthetic.
  4. Thematic Immersion: The game incorporates elements like the aforementioned AI-generated assets, sad office plants (also designed with AI assistance), and humorous "HR email" modals to reinforce its unique theme.
  5. Progression: Players advance through levels by solving the main puzzle(s) and finding the exit, with a timer tracking their "escape" speed for a 'Hall of Almost Hired' scoreboard.

Essentially, it's an escape room concept meets programming challenges, all wrapped in a meme-ified, AI-enhanced package.

How we built it

"Unemployed Backrooms" is built on a modern web stack, designed to be accessible in the browser:

  • Core Framework: Next.js (v15+) utilizing React (v19+) for building the user interface and game logic.
  • 3D Rendering: React Three Fiber (R3F) and Drei were used to integrate and manage the Three.js 3D library within the React component structure. This allowed us to create the first-person perspective, level geometry (walls, floors, ceilings), player controls, and interactive 3D elements.
  • AI & Machine Learning:
    • Google Gemini Pro API: Accessed via the @google/generative-ai SDK for:
      • Level Generation: Creating maze layouts for "Fresher Nightmare Mode," including start/exit points, puzzle markers, and placements for decorative assets.
      • Puzzle Generation: Developing thematic JavaScript coding puzzles (description, function signature, AI validation criteria).
      • Solution Validation: Evaluating user's JavaScript code submissions against puzzle requirements.
    • AI Image Generation (for Assets): Utilized various AI image generation tools/models to create a significant portion of visual assets, including environmental textures, in-game posters, art, and UI elements. This approach enabled rapid visual prototyping and the creation of a distinct aesthetic.
  • State Management: Zustand was implemented for global client-side state management, handling game progress, player position, UI states, and the scoreboard.
  • Styling: Tailwind CSS was used for styling the 2D UI elements.
  • Language: The entire project is written in TypeScript.
  • Version Control: Git and GitHub.
  • (Prospective) Deployment: Vercel / GCP Cloud Run.

Challenges we ran into

  1. AI Prompt Engineering (Multi-Modal): Consistently achieving desired outputs from AI—whether for solvable maze layouts with all critical elements, thematically appropriate and easy puzzles, reliable code validation, or stylistically consistent visual assets—required extensive prompt iteration, refinement, and sometimes combining outputs.
  2. Real-time 3D Performance in WebGL: Ensuring smooth framerates with dynamically generated levels, AI-generated textures, lighting, and collision detection within a browser environment was an ongoing optimization effort (e.g., conditional logging, memoization).
  3. AI Code Validation Nuances: Relying on an LLM for code validation, even for simple tasks, highlighted the need for very precise prompting and the understanding that it's more of a heuristic evaluation than a deterministic test suite.
  4. Integrating AI-Generated Assets: While AI speeds up asset creation, ensuring visual consistency and appropriate integration into the 3D environment (e.g., textures tiling correctly, poster aspect ratios) required an iterative workflow.
  5. Parser Logic for Complex AI Layouts: Developing the parser to correctly interpret AI-generated layout strings (for 'S', 'E', multi-character 'Pn' puzzle markers, and single-character decorative elements) and translate them into game objects took several iterations.

Accomplishments that we're proud of

  1. Comprehensive AI Integration: We successfully leveraged AI across multiple facets of game development: procedural level generation, dynamic puzzle creation, AI-driven puzzle solution validation, and the generation of core visual assets.
  2. Unique Thematic Execution with AI: Creating a cohesive and humorous "tech unemployment horror-comedy" experience where the AI-generated content (from levels to art) directly contributes to the theme.
  3. Full 3D Game in Next.js/React: Building a functional first-person 3D game environment entirely with web technologies (React Three Fiber within Next.js), augmented significantly by AI.
  4. End-to-End AI-Driven Gameplay Loop: From AI-generated levels and puzzles to AI-validated solutions, we implemented a complete gameplay cycle showcasing the potential of generative AI.
  5. Rapid Development of Unique Assets: Using AI for image generation allowed us to quickly create a diverse set of thematic visual assets that would have been time-consuming to produce traditionally in a hackathon setting.

What we learned

  1. The Iterative Nature of AI Development: Working with generative AI (for code, text, or images) is a highly iterative process. Prompt engineering, output evaluation, and refinement are key to achieving desired results.
  2. AI as a Creative Multiplier: AI can be a powerful tool not just for automation but for augmenting creative processes, from designing game mechanics and narratives to generating visual styles.
  3. Synergy between LLMs and Image Generation: We explored how textual prompts for LLMs (like Gemini for game logic) and prompts for image AIs can work in concert to build a more complete, AI-assisted product.
  4. Managing AI Output Variability: Understanding and designing for the inherent variability in AI outputs is crucial for building robust applications. Validation and fallback strategies are important.
  5. React Three Fiber for Complex Web Experiences: Confirmed its suitability for creating engaging 3D applications directly in the browser, with a manageable learning curve for React developers.

What's next for Unemployed Backrooms

While "Unemployed Backrooms" was conceived for this hackathon, its AI-driven foundation opens up many exciting possibilities:

  1. More Sophisticated AI Behaviors: Introducing simple AI-controlled "NPCs" (e.g., a "Micromanaging Manager" entity, a "Confused HR Bot") whose behaviors or dialogues are influenced by LLMs.
  2. AI-Driven Narrative Elements: Using AI to generate varied environmental storytelling snippets, found documents, or even dynamic "HR email" updates that react to player progress or failures.
  3. Advanced Puzzle Variation: Tasking the AI with generating a wider array of puzzle types beyond coding challenges, perhaps logic puzzles or environmental interaction puzzles described by the AI.
  4. User-Influenced Generation: Allowing players to input certain "themes" or "keywords" that influence the AI's generation of the next level or puzzle, adding a layer of personalization.
  5. Enhanced Visuals with AI Refinement: Exploring AI tools for 3D model generation or texture upscaling/refinement to further improve visual fidelity.
  6. Community Sharing of AI Seeds: If level/puzzle generation can be tied to a seed, allowing players to share seeds for particularly interesting or challenging AI-generated experiences.

Built With

Share this project:

Updates