threltemania.xyz
Threltemania is a racing game that defies physics.
Motivation
It is a bit of a tradition to celebrate new versions of Threlte with a small game that not only is superb promotional material, but also is used to test every aspect of all moving parts of the Threlte ecosystem.
Threlte 6 is a special release. Threlte is transitioning towards a clear separation of concerns: @threlte/core as a way to declaratively use Three.js and other packages such as @threlte/extras with useful abstractions and @threlte/rapier to easily integrate the exceptional Rapier physics engine.
The next version is called "Threlte v6" and what better way is there to celebrate that than with a V6? – I'll see myself out.
Features
- 👑 Campaign: Official tracks to race against the clock and win medals.
- 👤 User Tracks: Race on tracks built by other players.
- 🛠️ Track Editor: Build and share your own tracks and compete against your friends.
"Technical" Features
- Options allow for a customized game experience
- Keyboard navigation to navigate the whole game via keyboard
- Game UI implemented in Svelte
- Game mechanics implemented in Threlte v6
Technical Outline
Threltemania holds many different interesting aspects, technically challenging topics and goodies. Here's a rough outline:
- Raycast Vehicle Controller: As opposed to a vehicle controller that is based on many "rigid bodies" that are connected via "joints", this arcade-style vehicle controller is implemented with an approach that lends concepts from this implementation overview and this excellent talk, however it's a mix of the over-simplification of the latter and the close-to-simulation approach of the former. The implementation details can be found here. Aktivate the debug mode to see how the physics are modelled.
- Keyboard navigation: As it is with many games, the game Threltemania can be controlled with only the keyboard. This makes it feel more like a game and less like a regular website.
- URL Statemanagement: When a game is started, it typically starts from the very beginning. The web as a platform provides a very powerful statemanagement tool: The URL. SvelteKit's routing is used to determine the current app state. This means that reloading the page will get you where you left off.
- The perfect tool for the job: Svelte components make managing Three.js objects a breeze. Slot props – one of my favorite features – allow truely magical component compositions. The component lifecycle is used to never miss the disposal of an object.
- DOM UI and Three.js objects side by side: In game development, the management of UI is always a bit of a pain because UI normally cannot be co-located with actual gameplay elements. The web provides the ultimate UI-engine: the DOM. Using Svelte portals, the UI can be placed next to actual Three.js objects and allows for ultra-transparent game and UI state references.
This outline does not contain the work that has gone into Threlte v6. If you want to learn more about the upcoming version of Threlte, visit the Documentation or join our Discord community.
Demo Video
Screenshots
- Main Menu
- Track Selection
- On-Track Intro
- Track Editor
- Track Element Transformation
- Track Editor Info
- Track validation
Known Issues
- The physics are arguably the hardest part to get right. Rapier allows for deterministic physics, but the vehicle controller is not ready for that yet. This means that no two runs are the same (even if the inputs are) and the tracks should not be too fast paced.
- Responsiveness. This game is best played on a decently-sized screen.
- Safari sometimes (rarely) hangs on loading without any clear reason.
Roadmap
- Deterministic physics
- Responsive UI
- UI transitions
- Back-porting the vehicle controller to a Svelte component available at
@threlte/rapier - Creation of more owned assets
- Multiplayer
- Some game-related mechanics: Auto-reset after falling off, …
- More campaign tracks
- A track-making challenge for the release of Threlte v6
- Maybe add a little bit of storytelling to it