Game Dev

The GameDev section showcases our ongoing AI-driven RPG project. It is an offline, pixelated medieval RPG set in a 3D world. The game starts with minimal functionality, giving players a glimpse of the world and basic mechanics. Every week, the AI adds new features, content, or systems, gradually expanding the experience and making the world more complete.

This page highlights the evolution of the game over time, showing how automation can create, test, and improve complex gameplay without human intervention. Each update reflects the AI's growing understanding of the game world, demonstrating a continuous process of improvement and experimentation.

RPG Game Screenshot 1

Medieval 2.5D Game - Technical Documentation

Overview

This prototype implements a 2.5D medieval-themed web game using Three.js (r128) with an orthographic camera system. The game features WASD movement, camera-attached sword mechanics, and a parallax background system while maintaining all assets as 2D sprites that always face the camera.

Technical Implementation

Core Architecture

  • Engine: Three.js r128 (WebGL renderer)
  • Camera System: Orthographic camera (-10 to 10 horizontal, -7.5 to 7.5 vertical)
  • Rendering: WebGL with shadow mapping enabled (PCFSoftShadowMap)
  • Asset Loading: TextureLoader with nearest-neighbor filtering for pixel-perfect rendering

Asset Management

  • Primary Asset: Sword sprite from OpenGameArt
  • Fallback System: Gray placeholder rectangle if texture fails to load
  • Texture Filtering: NearestFilter for both magnification and minification to maintain pixelated aesthetic
  • Transparency: AlphaTest set to 0.1 for clean sprite edges

Movement & Camera System

// Camera acts as the player entity
cameraPosition = { x: 0, y: 2, z: 5 }
playerSpeed = 0.1 // Units per frame
  • WASD controls move the orthographic camera through 3D space
  • Camera Y position remains fixed at 2 units for consistent viewpoint
  • All movement updates trigger parallax recalculation and UI refresh

2.5D Implementation

All game objects are 2D planes that use lookAt() to face the camera:

  • Trees: Composed of trunk + crown PlaneGeometry
  • Sword: Single plane with texture mapping
  • Background elements: Layered planes with varying opacity

Parallax Background System

Three-layer parallax implementation:

  • Layer 0 (farthest): Z=-20, opacity=0.3, parallax factor=0.1
  • Layer 1 (middle): Z=-15, opacity=0.4, parallax factor=0.2
  • Layer 2 (nearest): Z=-10, opacity=0.5, parallax factor=0.3

Elements move at different rates based on camera position to create depth illusion.

Lighting System

  • Ambient Light: 0.6 intensity for general illumination
  • Directional Light: 0.8 intensity, positioned at (5,10,5)
  • Shadow Mapping: 1024x1024 resolution, PCF soft shadows

Performance Optimizations

  • Static tree generation (12 trees at fixed positions)
  • Minimal geometry (PlaneGeometry for all sprites)
  • Efficient sprite rotation using Three.js lookAt()
  • Delta time-based animation for consistent frame rates

Current Issues & Limitations

Technical Challenges

  • Asset Dependency: Single external texture creates potential failure point
  • No Collision Detection: Camera can move through trees and terrain
  • Limited Interactions: No gameplay mechanics beyond movement
  • Memory Management: No object pooling or cleanup systems
  • Mobile Support: No touch controls implemented

Visual Limitations

  • Basic Sprites: Trees are simple geometric shapes, not detailed sprites
  • Static Animation: Only subtle sword sway, no walking animations
  • Lighting Mismatch: 3D lighting on 2D sprites can look inconsistent
  • Resolution Scaling: Fixed orthographic bounds may not work on all screens

Performance Considerations

  • Overdraw: Multiple transparent planes can impact fill rate
  • Shadow Calculations: All trees cast shadows, increasing GPU load
  • Constant Lookups: Every frame updates all sprite rotations

Resources Used

External Libraries

  • Three.js r128: Core 3D engine

Assets

  • Sword Sprite: OpenGameArt sword texture (CC0/Public Domain)
  • Font: Courier New (system font for retro aesthetic)
  • Colors: Hardcoded hex values for medieval palette

Browser APIs

  • WebGL: Hardware-accelerated rendering
  • RequestAnimationFrame: Smooth 60fps game loop
  • KeyboardEvent: WASD input handling
  • ResizeObserver: Responsive canvas sizing

Implementation Choices

Orthographic vs Perspective

Chose orthographic camera to maintain true 2.5D aesthetic without perspective distortion. This keeps sprite sizes consistent regardless of Z-position.

Sprite Billboard Technique

Used Three.js lookAt() method to ensure all 2D elements face camera. Alternative approaches like shader-based billboarding would be more performant but increase complexity.

Immediate Mode Rendering

All objects render every frame rather than using scene culling or visibility optimization. Acceptable for prototype scale but would need optimization for larger worlds.

Component Architecture

Chose monolithic class structure over ECS (Entity-Component-System) for simplicity. Game class handles all systems directly.

RPG Game Screenshot 2