You & Your friend become the level in this 2D platformer!
Twist, turn, contort your way to victory as our CV model tracks your body positions, turning them into useful platforms.
We've always loved the idea of accessible games where nothing else is needed, and so Shape Up! was the natural next step in the projects we felt empassioned to create.
What it does
Shape Up! Is a 2D platformer turns you and your friend into part of the level. Using Computer Vision for pose estimation, the game tracks your body & limbs, turning them into crucial platforms to get you two to your goals. Strike a pose!
How we built it
We use Vite.js + React for our frontend frameworks, with ShadCN for UI components, as well as free sprites on itch.io. The game logic itself is written in typescript, integrating Matter.js for accurate physics handling.
Challenges we ran into
Given the nature of a web app game, many ready-made javascript game engines did not support slopes/inclines/declines in the game logic, due to the added difficulty of hitbox management, physics and game state management. As such, we had to build around a physics engine instead, Matter.js, which completely fit our bill after some tweaking.
Additionally, the added overhead of running a local CV model and the game on the same machine created latency problems that resulted in huge impacts to the player experience. Platforms not generating as expected, poses detection disappearing, et cetera. We optimised the workflow to use smaller models and ensured the project was as lightweight as possible, which really helped remove the extra bulk.
Accomplishments that we're proud of
- Getting javascript physics working, which was a massive hassle
- Getting Good pose estimation, and integrating the model output with game logic
What we learned
Slopes are an absolute pain when creating a web-based game
Good game design is smoke and mirrors, plus lots of math
Log in or sign up for Devpost to join the conversation.