BlahajBubbleBurst

Bump 'Em All with the Bubbly Blahaj 🦈

Comment

Inspiration 💡

BlahajBubbleBurst is a single-player TPF (Third person View) survival game, where the crux of the matter is to keep Blahaj alive. This game is aimed at tackling health issues many developers face in their daily lives. Spondylitis is a health condition that causes inflammation in one’s spinal bones. We aim to help prevent this from happening by creating a game where players can control our dear friend Blahaj on the screen using just their head movements. Blahaj is stranded in the middle of the ocean, starving for food. Leveraging motion tracking, players can control Blahaj and guide him to healthy food like fish, while helping Blahaj avoid eating garbage in the ocean that will inevitably cross his way.

P.S. : Blahaj is our favourite Shark 🦈

What it does 🤔

Leveraging the cutting-edge power of Machine Learning, combined with arcade-style gaming, we built a game that represents our attempts at making a commentary on the detrimental effects of human garbage in the oceans on marine life. We tried to gamify the experience via which we are tryna prevent spondylitis that has a sedentary job in front of computers and other corporate environments. A user uses head motion to guide Blahaj to his food so that he can stay alive.

How we built it ⚙️

The game is built using vanilla JavaScript, HTML, CSS & motion tracking is powered by Tensorflow.js & Blazepose-API.

For the Motion detection part, the process is described below :-

demo.gif

Well, that's not something tiny in respect to 48 hours ;)

Research 📚

Links :-

♣ Datasets :- Recompiled from several sources.

CREDITS

  • Design Resources : Freepik
  • Icons : Icons8

Takeaways

Challenges we ran into 😤

Understanding game mechanics is really difficult. Initially, we started building the game with open-source Game Frameworks like Phaser, but later we shifted to implement the game via basic vanilla JavaScript. The transition cost us a lot of time. Adding to that, most of us are from different time-zones, which introduced communication complexities for all of us. We were also facing some issues while training the model on our system, including underfitting errors as we had to reduce the parameters to optimize it so that it can run seamlessly on low-end devices.

Accomplishments that we're proud of ✨

We are very proud that we were able to ship the project in time. Although, the video didn't come up as expected. Hence, we recommend watching it at 1.3x speed.

What we learned 🙌

75% of us are first-timers, hence we got to learn a lot of things, both summed up in technical & non-technical sides. For the technical side, we got to learn so much while building game engines. We also gave our level best to make the UI/UX look good which helped us learn more about different design-centric approaches!

What's next for BlahajBubbleBurst 🚀

Finish the unfinished ones, which include adding more scenarios to the playground followed by improvements in the custom model so that the same can be run on low-spec systems. The code might be refactored for adding responsiveness & support for mobile devices. Apart from fine-tuning the project, we're also planning to add multiplayer support to the same so that people can join in rooms to compete with each other. Overall, we hope that one day this project can be widely used globally to redefine the existing & remove the backlogs.

Note — Use Chromium-based browsers for a better experience. Make sure that your system has at least 8gb's of RAM & standard VGA memory. The game performs better when run on single-threaded video-stream input.

Built With

Share this project:

Updates