📖 Context: "A Game Within a Game"
In GTA V server development, interfaces (NUI) are often limited to basic DOM (HTML/CSS). For PakeTekos, I wanted to go further: integrating smooth, responsive, and visually rich mini-games (copper theft, lockpicking, drug management).
Instead of coding each mini-game in an isolated and disorganized way, I developed tk-engine. It's a full game engine that implements the ECS (Entity-Component-System) pattern on a WebGL (PixiJS v8) rendering layer. It transforms a simple web page into a rendering engine capable of handling hundreds of animated objects with realistic physics.
🧰 Practical Case: tk-coppertheft
To validate the engine's power, I developed tk-coppertheft, a copper cable theft mini-game. Thanks to the engine's SpringSystem and ShakeSystem, interaction becomes tactile and stressful, offering much greater immersion than a simple "click" button.
🎯 My Role: Engine Architect
I designed the entire TypeScript structure of the engine, focusing on Developer Experience (DX) so that adding a new mini-game only takes a few hours instead of several days.
1. "Pure" ECS Architecture
I enforced a strict separation between data (Components) and logic (Systems). Entities are simple ID containers, allowing $O(1)$ lookups by component type. This structure ensures full scalability and avoids the complex mutation bugs found in traditional object-oriented architectures.
2. Deferred Updates
To avoid crashes when modifying the world in the middle of a calculation loop, I implemented a deferred addition/removal system: entities are queued and processed only at the start of the next frame.
🧠 Under the Hood: Physics & Precision
One of the biggest challenges of a web game engine is managing smoothness, regardless of the player's framerate.
⚙️ Framerate-Independent Physics
Most beginner developers multiply velocity by a fixed factor (e.g., velocity *= 0.98). On a 144Hz screen, the object slows down much faster than on a 60Hz screen.
For tk-engine, I implemented friction based on exponential decay:
$$frictionFactor = (1 - friction)^{\Delta}$$
This ensures that physical behavior remains identical, whether the player is running at 30 or 165 FPS.
🛠️ Integrated Systems
The engine natively embeds advanced logic:
| System | Applied Physics |
|---|---|
| SpringSystem | Uses Hooke's Law ($torque = -k \times (\theta - \theta_)$) to simulate dial needles or elastic cables. |
| ShakeSystem | Manages consistent shakes by entity group to simulate explosions or tool vibrations. |
| RenderSystem | Synchronizes ECS logical coordinates with the PixiJS WebGL rendering engine. |
🔭 Vision and Future
tk-engine is not a standalone FiveM resource; it's a TypeScript library consumed by my tk-ui build system.
Future development plans include:
- Adding a native particle system for visual effects (sparks, smoke).
- A simplified 2D Pathfinding system for strategy mini-games.
- Optimizing Spatial Audio to link mini-game sounds to the position of entities on the screen.
Technical Expertise: TypeScript, ECS Architecture, PixiJS v8, WebGL, Physics Mathematics (Euler Integration, Hooke's Law).