Fitzels

Landing Page: Try out our single or multiplayer game modes!
Yeet the trash into the correct bin by doing a squat
Game Over Screen... just try it again!
Leaderboard: How do you compare against your friends?
Try it out! https://fitzels-trashgame.web.app/ (looks best on desktop)

Inspiration

In our project, we aim to solve two different challenges members of our team have faced lately. When we cooked together, we had a lively discussion about where to dispose of eggshells. This inspired further discussion about various similar topics, such as "Where do we throw away fish bones?" or even "What about socks?". We quickly noticed that there are many more items where not all of us know how to dispose of them appropriately.

Another problem that we had was not finding the motivation to do workouts at home, especially during quarantine. In a brainstorming session, we found out that our biggest motivator was doing sports in groups and having fun while working out. Unfortunately, because of the pandemic, it is not easily possible to do sports in a group setting, and doing home-workouts alone isn't always motivating and fun.

We wanted to tackle these problems by creating a fun AR exercising game, where people can learn more about correctly waste separation while having fun and exercising their bodies.

What it does

The main idea of the project is to provide the needed exercise for the body in a fun and interactive way, especially during quarantine and in particular for people spending most of their day in a chair. To make it even more fun and valuable, we also decided to teach the users where to throw away different types of waste. For the game, we mainly focused on the "squat" exercise.

Single Player Mode: The main idea is for different household-waste-types to fall from the top of the computer screen. The user then has to move around between three different sections (biowaste, plastic, residual waste) and squat in the correct one for the current waste falling down to get points. If the user squats at a wrong section or misses a type, they use one of three lives in total. The user can play the game in a single-player mode or with a friend (currently, the game supports only two people simultaneously).
Multiplayer Mode: For the multiplayer mode, the user can generate a private room code and send it over to a friend. As soon as the friend opens the room code on the website, both of them will be redirected to a private room where they can play the game against each other. Both can see waste falling down for each of them in a respective color. Apart from that, they can see each other as a "stick figure". If you throw the waste into the correct bin, it will re-spawn for the other player, making it harder for them. You have to keep a calm mind in this game!

How we built it

Our game consists of four vital aspects: front-end, single-player mode, multiplayer mode, and the game engine. Since our team consists of 4 people, we were able to divide the tasks equally and fairly: One person worked on the front-end, two on the engine and single-player mode, and one person worked on the multiplayer mode. For the front-end, we used React Native to visualize the landing page, scoring page, and game page. We hosted the website on Firebase and used a MySQL database to store our data, such as usernames and high scores for the scoreboard. For the game, we implemented our own game engine from scratch with TypeScript and used the HandsFree.js library for the pose estimation of the player. For the multiplayer mode, we had to host a server on Heroku and implement a web-socket communication using socket.io between clients and the server.

Challenges we ran into

We ran into several challenges during the approximately two days of HackaTUM, here are some of them:

Ideation We wanted to be sure to find the best idea to work on. Therefore, we were having a tough time during brainstorming and ideation. The whole process of ideation started right after the info sessions of the companies at around 8 pm and continued until 6 in the morning. We mostly talked about sustainability, green housing, and the topics the city of Munich offered and tried to tackle each of the problems in depth, considering not only the idea itself but also the value proposition, unique selling proposition, usability and impact. Additionally, we talked about different user groups, their areas of interest and their willingness to use our potential app. We tried to narrow down big problems to the best user groups to get the best project and product that would actually have sense. This is why ideation was so involved and took a lot of time. We wanted to find the best solution until we all agreed on the project we submitted with this form :)
Requirement of a good game engine There are a lot of existing and well-functioning game engines, we didn't find any suitable engine that was flexible enough to fit our needs of an in-browser game with pose detection integration. We needed to build a complete game engine from scratch, which was a very fun exercise and a valuable learning experience.
Multiplayer Mode: The third challenge was to design a multiplayer mode, which is entertaining and engaging. Since one of our main ideas is to have fun with other people while exercising, we worked on this challenge a lot. Creating live game rooms, where players can join others in real time

Accomplishments that we're proud of

That we managed to finish our game and it is actually playable and fun!

Our own working game engine
Front-end design
Multiplayer mode and fun aspect

What we learned

That egg shells are organic waste :D

How to develop game engines from scratch with JS and TS.
Learned a lot about ideation and the brainstorming process.
Equal division of tasks

What's next for Fitzels

Enable the game rooms for groups of more than 2 people (like jackbox) for more collaborative and social interaction
Add more different games focusing on different exercises (like sit-ups, jogging, push-ups, stretching) and combine them with environmental topics
Add more modes to the current game, to get even more fun and knowledge out of it (e.g. one could learn the bavarian dance "schuhbladln" together with friends and guided by our posture correction.).