Immersive Soccer Experience with Pose Estimation: Unleash the Game Changer

🥅⚽ Unleash Your Inner Goalkeeper with Gool: Penalty Hero! Get Ready to Dive into the Ultimate Sports Pose Detection Adventure! ⚡🕺

🌟 Are you craving an electrifying experience that blends cutting-edge technology with heart-pounding sports action? Look no further! Introducing "Gool: Penalty Hero", a groundbreaking game that thrusts you into the heart of soccer excitement with a twist of pose detection magic. 🎮⚡

🏆 Discover the Perfect Fusion of Sports and Technology: Prepare to be amazed as Gool: Penalty Hero brings the exhilarating world of sports and the power of pose detection together in a symphony of athleticism and innovation. With its precise ability to track every nuanced movement of your body, this game takes your gaming journey to uncharted heights! 🤸‍♂️🔥

🤔 The Journey to Sporting Brilliance: Behind every great idea lies a journey of inspiration and discovery. For us, the path to Gool was filled with moments of camaraderie, challenges, and that eureka moment that changed everything. Picture this: a day of kicking a ball around in the yard, and then that spark of brilliance – "What if the computer kicked the ball and I saved it?" And thus, the magic of Gool was born. 🌄🌈

🌠 Unleashing Pose Estimation Magic: Get ready to be wowed by the seamless integration of pose estimation using TensorFlow. As you immerse yourself in the game, each kick, each save, is a testament to the power of cutting-edge technology. The meticulously crafted model follows your movements, putting you in control of the most exhilarating penalty kicks you've ever experienced! 🤖🎯

📱 Taking the Thrill Mobile: But wait, there's more! The excitement doesn't stop at the web. Gool: Penalty Hero is gearing up for a mobile revolution. With Flutter at the helm, brace yourself for a cross-platform, native mobile application that puts the power of penalty kicks in the palm of your hand! 📲🚀

⚽ Precision Meets Strategy – Your Shot at Glory: Feel the adrenaline as the ball is kicked into motion, following a calculated trajectory. As it races toward the goal, your mission is clear – save the penalty and secure your spot as a legendary goalkeeper. The blend of pose detection and 2D immersive graphics makes each save a heart-stopping moment of triumph! 🥅🔥

🥇 Master the Art of Saving – Play Now and Win Big: Embark on a journey of athletic glory as you step into the shoes of a goalkeeper extraordinaire. With precision pose detection, dynamic graphics, and the thrill of saving penalties, Gool: Penalty Hero invites you to experience sports gaming like never before. Get ready to immerse yourself in the challenge, the excitement, and the glory! ⚽🏆

🔥 Ready to Save? Dive into Gool: Penalty Hero Now! 🔥 Experience the fusion of athleticism and technology that's redefining sports gaming. Put your skills to the test, embrace the magic of pose detection, and rewrite penalty kick history. Play now and let the games begin! 🕺⚽🔝

Making-of

This website should offer an experience with pose detection. Sports seems to fits well with this kind of model because this can track the movement of the parts of the body. I had to figure out what sport to use for this development. After thinking ideas while playing some games in the yard, several days passed, funny moments happened playing with neighbors and also lonely, and finally arrived the aha moment. I was practicing penalty kicks with no goalkeeper and I wanted to practice saving penalties but there was no one to kick the ball. At that moment I thought: What if the computer kicks the ball and I save it?. Oh yes, this sounds great! I can harness pose estimation with tensorflow for this, the model was already circulating in my mind.

Steps to develop a game with Flutter Web and TensorFlow.js Pose Detection Model:

1. Choose a game engine. In this case, Flame is used.
2. Create the sprites. Use Inkscape to create the sprites and export them to the PNG format.
3. Create a class for each object of the game. For example, create a class for the goalie and a class for the ball.
4. Adjust the TensorFlow.js Pose Detection model to the needs of the project. This may involve:
   • Selecting the appropriate model for the desired body parts to be tracked.
   • Setting the appropriate confidence threshold.
   • Modifying the output of the model to match the format used by the game engine.
   • The model code used for this game is available at https://github.com/tensorflow/tfjs-models/tree/master/pose-detection/demos/live_video
5. Implement the event listener that waits for the landmarks detected by TensorFlow. When an event arrives, update the goalie's body parts positions.
6. Implement the algorithm for kicking the ball. Make the ball start at a specific point, follow a trajectory, and reduce its size to make the illusion of moving away.
7. Implement the collision detection algorithm. When the ball enters the goal, check if there is a collision with the goalie. If there is a collision, the player wins.
8. Deploy the game to Flutter Web.
9. Enjoy the game and have fun saving penalties!

Tools

• Flutter
• Flame
• TensorFlow

Innards of the application

You are enjoying the experience on the web, but there is a plan to also release this application for mobile devices. And Flutter seems to be the response to build cross platform and native compiled mobile applications. I don't want to do all the work from the ground, then I take advantage of a game engine available for this environment, searching a little I found Flame and I got started with this watching some videos on YouTube and then in the official documentation of the Flame game engine. I created the sprites with Inkscape, and exported it to the PNG format supported by the game engine. A class was created for representing each object of the game. The goalie is composed from basic shapes provided by the game engine. There is an event listener that waits for the landmarks detected by tensorflow, this Pose Detection model is available at https://github.com/tensorflow/tfjs-models/tree/master/pose-detection. When an event arrives the goalie's body parts positions are updated. The ball is kicked multiple times repeatedly, it starts at a specific point, follows a trajectory and reduces its size to make the illusion of moving away. When the journey of the ball finalize the goalkeeper has to enter in contact with the ball to save it. An algorithm is used for collision detection between the goalie and the ball, if a collision is detected inside the goal you win and you had saved the penalty. You are cordially invited to play the game and have fun, good luck saving penalties folks!

Source code

The source code of the game is available at: https://github.com/realismagical/gool

The game project is completely free and open source under the MIT license.

2023-08-26