Sep - Dec 2024

Technologies: Three.js, WebGL, Socket.io, MediaPipe HandPose, Python (Flask), TensorFlow.js, HTML/CSS/JS

📜 Overview

Glyphmaster is a 3D action RPG where players become wizards, drawing magical glyphs with mouse or hand gestures to cast spells. Battle monsters across 8 fantasy worlds (40 levels + infinite procedurally generated level), collect pets, and duel other players in real-time multiplayer. All core mechanics were implemented from scratch using Three.js.

⚙️ 1. Basic Game Mechanisms (Built from Scratch with Three.js)

• Player movement - first-person controls with WASD keys, collision detection with scene objects.
• Health & XP system - real-time health bars, XP gain from defeating enemies, and automatic level-up with attribute allocation.
• Enemy AI - enemies track the player, have health bars, and follow a finite state machine (see section 7).
• Bullets handling - projectile system with trajectory, collision, and different behaviours per glyph type.
• UI - text-based tutorial on the left and a permanent guide panel on the bottom right.

🗺️ 2. Single Player Levels & Scenes

• 40 hand-crafted levels - each world has a distinct visual theme (forest, volcano, ice, etc.) using WebGL and online 3D models.
• Infinite level generation - after completing all 40 levels, players enter an endless mode that generates new levels with random monster combinations and increasing difficulty.

🔮 3. Magic Glyph Identification Algorithm (Core Innovation)

Unlike traditional gesture recognition, our algorithm evaluates drawn glyphs without fixed templates, allowing for size variation, rotation, and natural drawing inaccuracy.

1. Drawing capture: Player draws on an off-screen canvas via mouse drag or hand-pose tracking (MediaPipe).
2. Bounding box & normalization: Compute bounding box to obtain radius r and center (cx, cy) of the drawn shape.
3. Binary downsampling: Convert the canvas to a small binary image (e.g., 64×64) to reduce computation.
4. Distance to glyph primitives: For each of the 7 glyph definitions (combinations of straight lines, circles, arcs), we compute the distance from every binary pixel to the closest primitive.
   • Width tolerance = 0.1 × radius - pixel is “inside” if distance < tolerance.
   • This function is also used to draw the translucent hint overlay in the centre of the screen.
5. Dilation with inside/outside logic:
   • Original drawing is only 1-pixel wide; we dilate it to 0.1 × radius width, but not standard dilation:
   • If original pixel is inside the glyph → only dilated pixels inside the glyph are drawn.
   • If original pixel is outside the glyph → only dilated pixels outside are drawn.
   • This preserves shape boundaries and prevents over-scoring.
6. Accuracy calculation:
   accuracy = (% of drawn pixels inside) - (% of drawn pixels outside)
   This subtractive formula prevents a simple circle from achieving high accuracy for all glyphs.
7. Selection: Repeat steps 4-6 for all 7 glyphs, pick the one with the highest accuracy.

✨ 4. Magic Spell Effects & Visuals

• Plain (circle): Fast projectile, low damage.
• Grass (plant): Slows enemy movement & rotation by 50%.
• Water (drop): Area-of-effect splash that damages multiple enemies.
• Earth (mountain): Three stone spikes in a fan shape, high close-range damage.
• Fire (candle): Fireball that deals initial damage + 10% burn per second for 3s.
• Lightning: Bolt that stuns enemy (unable to move/rotate/shoot) for 2 seconds.
• Summon (star): Summons a pet (previously generated or owned).

All particle effects (trails, explosions) are implemented with a custom Particle class using Three.js points.

👾 5. Monsters Finite State Machine

• Chase: Actively pursues player when within alert range.
• Draw/Shoot: Begins drawing a spell when player enters attack distance; shoots after drawing completes.
• Wander: If no enemies in sight, moves randomly.
• Stun state: Added when hit by lightning glyph - disables movement/actions for 2 seconds.

🐾 6. Pet Finite State Machine

• Follow owner: Default state; pet stays near player.
• Chase & attack: When enemy detected, pet pursues and attacks independently.
• Return: If enemy disappears or is defeated, pet returns to owner.

🌐 7. Multi-player Real-Time Battle Synchronization

• Server: Node.js + Express + Socket.io handles matchmaking and broadcasts.
• Message bag design: Each update contains:
  • Player position & rotation
  • Health, speed, bullet cooldown status
  • Glyph being cast (to replicate spell effect on opponent's screen)
• Latency mitigation: Client-side prediction and interpolation smooth out movement; glyph cast events are time-stamped and processed in order.
• Synchronisation challenge: The large message size increases latency - optimised by delta compression and prioritising movement over non-critical data.

🖐️ Hand-Pose Drawing Integration

MediaPipe HandPose model is loaded once; fingertip positions are smoothed over three frames to reduce jitter. A fist gesture triggers “pen up”.