A casual physics simulation on static and kinetic friction over inclined planes — the first SHIFT simulation to integrate the Havok physics engine and a Clean Architecture-inspired layered design.
- About the Game
- Key Features
- How to Play
- Tech Stack
- Installation and Setup
- Architecture and Technical Highlights
- License
- Author
Friction Skill is the fourth simulation of the SHIFT series, developed in June 2024. It challenges players to move a box from one inclined plane to another by controlling only the inclination angle of each plane. The game uses realistic simulations of static friction (μₛ), kinetic friction (μₖ), and the coefficient of restitution, all computed by the Havok physics engine.
The main challenge is to control the box as friction decreases and the coefficient of restitution increases at each successive plane, making the task progressively more difficult. Precision and timing are essential to advance without dropping the box.
This was the first simulation in the series to use a third-party rigid-body physics engine, marking an important shift from the manual physics modeling of the previous simulations.
- Realistic Friction Dynamics (via Havok):
- Realistic transition between maximum static friction and kinetic friction.
- Increasing coefficient of restitution at each plane, creating progressively harder challenges.
- Score System:
- Golden boxes collected: 10 points each.
- Medals based on total score:
- 🥈 Silver: 100 points.
- 🥉 Bronze: 300 points.
- 🥇 Gold: 600+ points.
- Real-Time Force Visualization: A vector representing the net force on the box is rendered on screen, computed from the change in linear velocity provided by the Havok engine.
- Minimalist Design: Clean scenery focused on the physics simulation.
- Cross-Platform: Optimized for browsers and mobile devices in portrait orientation.
Objective: Move the main box from one inclined plane to the next, collecting golden boxes for points.
💻 On PC: Arrow keys (◄ / ►) to adjust the inclination angle of the planes (counterclockwise / clockwise).
📱 On Mobile / Touch: Two on-screen buttons to adjust inclination in both directions.
Tips:
- Watch the friction transitions carefully — the static-to-kinetic transition is the key moment.
- Avoid letting the box fall before reaching the next plane.
| Tool | Version | Description |
|---|---|---|
| TypeScript | 5.7.2 | Core language, providing type safety and modular architecture. |
| Babylon.js | 7.5.0 | Graphics engine for 3D rendering, animations, and GUI system. |
| Havok | latest | Industry-grade physics engine for realistic rigid-body interactions. |
| Vite.js | 5.2.11 | Build tool for ES6 module compilation, tree-shaking, and optimization. |
| Node.js | 20+ | Development environment and runtime. |
Prerequisites: Node.js (v20+), npm (v10+).
npm install
npm run dev # development server
npm run build # production build (generates the dist folder)Friction Skill introduced two important changes to the SHIFT codebase: the integration of the Havok physics engine and an architectural shift inspired by Clean Architecture and Domain-Driven Design (DDD).
The project adopts a four-layer folder structure inspired by Eric Evans' DDD diagram:
src/
├── presentation/ — User interaction and GUI
├── application/ — High-level game logic and state coordination
├── domain/ — Physics modeling and game-specific entities
└── infrastructure/ — External tools (Havok, scene setup, optimizers)
- Presentation layer: GUI controllers, language detection, and input translation.
- Application layer:
GameControllercoordinates initialization, pause, and reset cycles, replacing the finite state machines used in earlier simulations. - Domain layer:
ObjectsControllermanages theBoxandPlankentities, computing the net force and adjusting μₛ and μₖ as the box advances. - Infrastructure layer:
HavokPhysicsEngineadapts the Havok library for use within Babylon.js; scene initializers and a physics debugger support development.
- Havok rigid-body simulation: The main box is a 2×2×2 dynamic cube with mass 10. Initial coefficients: μₛ = 0.7, μₖ = 0.65, restitution = 0.01.
- Progressive parameter modulation: As the box passes from plane to plane, the engine progressively decreases friction and increases restitution per plane index, simulating a transition from rough to slippery surfaces.
- Net force vector visualization: Computed every 10 frames from
body.getLinearVelocity()differences, scaled and rotated viaQuaternion.FromUnitVectorsToRefto display the resulting force vector in 3D.
The DDD organization was ultimately limited to folder structure. The conceptual machinery of DDD — bounded contexts, aggregates, domain events, and ubiquitous language — does not naturally map to a real-time physics simulation with no business rules. This insight motivated the abandonment of DDD in subsequent simulations, in favor of a lighter MVC pattern that proved more appropriate for this domain.
Despite the limited applicability of DDD, the modular separation between physics logic and infrastructure delivered a real benefit: the simulation was completed in only seven days (specific development cycle), while consolidating Havok integration as a reusable technical pattern for the rest of the SHIFT series.
The source code in this repository is licensed under the MIT License — see the LICENSE file.
3D models, textures, and original visual content created by the author are licensed under Creative Commons Attribution 4.0 International (CC BY 4.0).
Music and sound effects in this project are sourced from Pixabay under the Pixabay Content License, which permits free use including for commercial purposes.
- Babylon.js — Apache License 2.0
- Havok Physics — Per vendor terms (Babylon.js distribution)
- Vite.js — MIT License
Copyright © 2024 Rafael João Ribeiro.
Developed by: Prof. Dr. Rafael João Ribeiro Federal Institute of Paraná (IFPR) www.fisicagames.com.br