Inspiration
Chambara was inspired by Wii Sports Resort. We wanted to recreate its fun, interactive gameplay using a smartphone as the motion controller. Chambara is hosted completely over the web without the need to download any app. Literally anyone can pick it up anywhere to play with friends anytime.
What it does
Players pair their phones with their computers using a QR code. Tilting the phone moves the sword, swinging performs an attack, and holding the screen activates a directional block. Players win by knocking their opponent out of the arena. It is basically like doing a real sword fight!
How we built it
We used SpacetimeDB, React, TypeScript, Vite, and Babylon.js to build the browser-based 3D game. Phone orientation and acceleration control the sword, while custom inverse kinematics keep both character hands attached to it. SpacetimeDB synchronizes sword movement and combat between players.
Challenges
The biggest challenges were converting phone sensor data into natural sword movement, detecting intentional swings, keeping the character’s arms properly positioned, and synchronizing fast combat online.
What we learned
We learned how to work with mobile motion sensors, procedural animation, 3D collision detection, and real-time multiplayer networking. These are skills that we had absolutely zero idea going on. It was daunting in the beginning, but we knew it would have been a fun and exciting project regardless.
Built With
- babylon.js
- cloudflare-tunnel
- device-motion-api
- device-orientation-api
- qr
- react
- spacetimedb
- typescript
- vite
- websockets
Log in or sign up for Devpost to join the conversation.