rustic-before System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the project "rustic-before," which aims to develop an original voxel sandbox game inspired by block-building games. The project will focus on creating a real-time playable 3D WebGL game using Three.js or Babylon.js, ensuring it is optimized for performance on iPhone browsers.

System Overview

The "rustic-before" project will deliver a prototype of a voxel sandbox game. This game will feature a small 3D voxel world composed of visible cube blocks, including grass, dirt, stone, wood, and leaves. The game will support both desktop and mobile controls, allowing players to interact with the environment through actions such as breaking and placing blocks. The prototype will include a first-person camera, a 5-slot hotbar, and local save and load functionalities.

Functional Requirements as Story Points

• As a Developer, I need to confirm whether the platform can create and run a real-time playable 3D WebGL game using Three.js or Babylon.js.
• As a Player, I want to explore a small 3D voxel world made from visible cube blocks.
• As a Player, I want to interact with blocks made of grass, dirt, stone, wood, and leaves.
• As a Player, I want to control the game using a first-person camera.
• As a Player, I want to use keyboard and mouse controls on desktop.
• As a Player, I want to use mobile joystick and touch camera controls.
• As a Player, I want to jump, experience gravity, and collide with blocks.
• As a Player, I want to break and place blocks within the game world.
• As a Player, I want to use a 5-slot hotbar to manage my blocks.
• As a Player, I want the game to have original simple voxel textures.
• As a Player, I want to save and load my game locally.
• As a Developer, I need to optimize the game for iPhone browser performance.
• As a Developer, I need to open a live playable preview after building the prototype.
• As a Developer, I need to verify movement, camera, jumping, breaking, and placing blocks.
• As a Developer, I need to provide the downloadable source code after verification.

User Personas

• Player: A user who interacts with the game world, exploring and manipulating blocks.
• Developer: A user responsible for building, testing, and optimizing the game prototype.

Core User Flows

• Player starts the game -> explores the voxel world -> uses controls to move and interact -> breaks and places blocks -> saves progress locally -> loads saved game.
• Developer builds the game prototype -> opens a live playable preview -> verifies game functionalities -> provides downloadable source code.

Visuals Colors and Theme

[Default — not specified by user]

• primary: #4CAF50 (green)
• primary_light: #81C784 (light green)
• secondary: #8D6E63 (brown)
• accent: #FFEB3B (yellow)
• highlight: #FFC107 (amber)
• bg: #F5F5F5 (light grey)
• surface: #FFFFFF (white)
• text: #212121 (dark grey)
• text_muted: #757575 (grey)
• border: #BDBDBD (light grey)

Signature Design Concept

The "rustic-before" game will feature an interactive voxel world where players can manipulate the environment in real-time. The home page will showcase a dynamic 3D scene of the voxel world using Three.js or Babylon.js. Players will be able to click and drag to explore the world, with blocks visibly changing as they interact. The design will include smooth transitions and animations to enhance the immersive experience.

Landing Hero Motion Brief

The landing page will feature a continuously moving 2D composition built with accessible DOM, inline SVG, CSS, and motion/react. The animation will depict a player interacting with the voxel world, showcasing the transformation of the environment as blocks are added and removed. The scene will loop every 10 seconds, highlighting the game's core mechanics and providing a clear visual story of player interaction and environmental change.

Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals, hover transitions, and spring physics on interactive elements, providing a polished and engaging user experience.

Non-Functional Requirements

• The game must be optimized for performance on iPhone browsers.
• The game must not include multiplayer, crafting, enemies, animals, caves, villages, or an infinite world in the first prototype.

Tech Stack

• Frontend: Three.js or Babylon.js for 3D rendering
• Backend: Not specified for the prototype
• Local Storage: Browser-based local storage for save/load functionality

Assumptions and Constraints

• The game will be a single-player experience in the first prototype.
• The game will not include any copyrighted assets or code from existing games like Minecraft.

Glossary

• Voxel: A volumetric pixel, representing a value on a grid in three-dimensional space.
• Hotbar: A quick-access toolbar for managing items or blocks in the game.
• WebGL: A JavaScript API for rendering interactive 3D graphics within web browsers.