In this graveyard of stars, Death grants all a bleak choice:
- Linger in an ossuary for the restless, eternally locked in combat—where ambition and despair intertwine, and where the fallen fuel the ascent of those hungrier to covet hope.
- Devour the essence of unwitting tributes that challenge your claim—their fading hopes now yours to wield, crystallizing within your form. Weave the harvested bones into the tapestry of your destiny, forging a being from the echoes of those who dared to dream and ascended to scale the jagged peaks anchoring the souls to this stygian ark.
- Introduction
- Movement and Camera Controls
- Weapons and Combat
- Game Mechanics
- Custom Model Creation
- Technical Details
- Early Development
- Epilogue
Eidolon IV is a sci-fi fantasy & cosmic horror-themed 3D action combat game built with React Three Fiber (R3F), Three.js, and TypeScript. Drawing inspiration from classic hack-and-slash RPGs and roguelikes, it combines fast-paced combat with character progression and ability unlocks on level completion.
- Genre: Action RPG / Hack-and-Slash / Roguelike
- Perspective: Third-person, top-down camera
- Combat Style: Real-time combat with 3 distinct weapon classes
- Weapon System: Each weapon has unique base attacks and special abilities
- Progression: Gain power through enemy defeats and level-up choices
- Combat Mechanics:
- Tactical positioning, dodging, and timing
- Weapon-specific combo systems
- Resource management with orb charges and cooldowns
| Action | Input |
|---|---|
| Movement | W-A-S-D |
| Camera | Right-click (hold) |
| Auto-Attack | Right-click (hold) |
| Zoom | Scroll Wheel |
-
A mouse is highly recommended for optimal gameplay.
-
Holding the
Right-ClickWHILE moving withW-A-S-Dkeys will allow smooth movement with camera control. This will also allow you to quickly switch targets, reposition, and efficiently aim at targets in front of you. -
Holding the
Left-Clickwill also perform an auto-attack that is the same as the weapon’s ‘Q’ ability, or regular attack swing. All combat ability buttons {Q,E,R,1,2} can be held down as well; they will cast automatically within their cooldown frame. -
The
Akey to move backwards will come in very handy when you want to evade attacks while also dealing damage to enemies that are encroaching on you. However, walking backwards will incur a movement speed penalty. -
W-A-S-Dcan be held in combinations such as holdingWandAtogether to go Northwest,S-Dto go Southeast, etc.
- (‘Q’) is the default attack of the weapon that can also be triggered by the Left-Click:
| Weapon | Range | Cooldown | Damage | Swing Arc |
|---|---|---|---|---|
| Scythe | 4.5 ft | 0.8s | 23 | Medium |
| Sword | 6.0 ft | 1.0s | 31 | Wide |
| Sabres | 4.0 ft | 0.6s | 17x2 | Narrow |
- ('E') is the weapon’s core special ability:
| Weapon | Ability | Orb Cost | Cooldown | Damage | Type | Notes |
|---|---|---|---|---|---|---|
| Scythe | Entropic Bolt | 1 | 0.7s | 53 | Single Target | - |
| Sword | Divine Smite | 0 | 4.0s | (31+17)+41 | Area of Effect | Smite damage requires successful sword hit |
| Sabres | Etherbow | 0 | 0.33s | 13 + (charge bonus) | Pierces in a Line | Fully charged shots (1.5s) are guaranteed critical hits |
- ('R' - '1' - '2') hotkeys are for the 3 ability choices that are available for each weapon to unlock at the completion of a level. The designations ‘Active' or ‘Passive’ determine whether or not an ability’s hotkey needs to be pressed to trigger its effect.
- All weapons have 8 orb charges, each with an 8 second cooldown. Only the Scythe consumes these orbs with its ‘E’ ability at the beginning of Level 1. Note that abilities that have an orb cost may still possess separate cooldowns.
- Each enemy kill grants 1 point of maximum health (the kill counter is the right circle next to the experience bar), which also effectively heals for 1 HP (+1 Current HP /+1 Maximum HP).
- There is no passive health regeneration; however, the Scythe and Greatsword have option(s) for healing that they may choose to unlock.
- By default is 11%, dealing double damage.
- When an enemy begins its attack animation, there is a 1-second delay before any damage can be registered, allowing a short window to reposition and evade the attack. ALL attacks outrange enemy attacks, but vary in degree based on weapon choice.
No external models/imports/assets used. First time I've ever done anything like this, so stuck with a 'bone' theme that seemed easier to work with, given their versatility.
- Built unit and weapon models by combining primitive geometries like cylinders, spheres
- Created unique shapes using Three.js
Shapeclass to create 2D shapes using mathematical functions that are then extruded into 3D. - Glowing effects using emissive materials and point lights
- Particle effects using instanced meshes and shader materials
- Models are React components using React Three Fiber (R3F)
- Position tracking via
useRefand Three.jsGroupcomponents - Health and state management through React's
useState - Collision detection using raycasting and distance calculations
-
Weapon swing animations using
useFramewith pivot and rotation in 3 dimensions -
Ability particle systems using instanced meshes
-
Effect lifecycle management with unique IDs
-
Projectile tracking and collision detection
-
Shader Programming
- Shader-based visual effects for abilities, terrain, and environment details
- GLSL (WebGL Shading Language)
- Custom fragment shader and vertex shaders
-
Vector3 Operations
- Position tracking in 3D space (x, y, z)
- Velocity and direction calculations (projectile trajectories)
- Distance and collision checks (enemy detection)
- Normalized direction vectors for character movement
-
Quaternion Rotations
- Smooth weapon rotation animations
- Character orientation
- Camera angle calculations
- Preventing gimbal lock in 3D rotations*
-
Interpolation Systems
- Linear interpolation (Lerp) for smooth transitions
- Spherical interpolation (Slerp) for rotations
- Easing functions for natural movement
- Special effects and animation curve calculations
- React hooks:
useState,useEffect,useRef,useFrame(R3F) to manage game states, including:- Health and damage tracking
- Ability cooldowns and unlocks
- Kill count and progression
- Dynamic enemy spawning system
- Environment generation with procedural elements
- Level progression and state tracking
- Resource cleanup between scenes
- Automatic disposal of Three.js resources
- Enemy unit memoization
- Batched updates for state changes
- Memory management and cache clearing
- Object pooling for particles and effects*
- Enemy spawning + level-up + experience bar logic
- Logic for expending orbs to cast abilities.
- Introduced charged bow shot as Sabre's 'E' ability.
- Initial character model with bone wings + ribcage.
- Introduced Smite as Sword's 'E' ability.
- Melee swing animations for Scythe, Sword, and Sabres with hit registration.
- Implemented instant weapon swapping via 1-2-3 hotkeys.
- Island drifting in space, encased in mountains - basic aesthetic
- Sword, Scythe, and Sabres initial model creation.
- Initial game logic setup with weapon systems.
- Earliest video I could find (11/20/24) with basic movement and camera rotation. Was definitely procrastinating here..
Didn't think I'd be able to do this with React, but I've always wanted to make a game - and what started off as procrastination turned into an amazing learning experience. There are a million things I'd like to add to this game, as well as what I would do differently from the ground up should i choose to create another one (particularly with component reuse and better optimization of hooks & how to potentially avoid hours of refactoring down the line - OR just not making a game with React next time) BUT this has already gone well past 200 hours of work - glad i got my exp. Considering this my self-assigned 'capstone project' for Rutgers CS '25.