12th tide

Inspiration

Creating a 3D endless runner that you play with your own body has been on my mind since I was a kid playing endless runners like Temple Run and Subway Surfers, and jumping around my living room with the Xbox 1 Kinect. The Kinect showed me how fun it is when your body is the controller, but it needed special hardware. I wanted to bring that same feeling to any laptop with a webcam. So when I saw the beach theme for Howdy Hacks, I knew I had to build something bigger than just an endless runner. Instead of a player just trying to run as far as they can before hitting something, I wanted the ocean itself to become the obstacle.

What it does

The 12th Tide is a 3D endless runner that uses a webcam to track the player's movements. Using your body, you'll have to dodge obstacles as you run on land, surf on water, drive a jet ski, explore an underwater reef, fight off a Kraken and try to survive the 12th Tide. Along the way, Texas A&M's mascot Reveille runs right beside you.

How I built it

I created the 3D environments and characters using Three.js, TypeScript and Blender, along with several free 3D models I found online. I integrated Google's MediaPipe for real-time movement tracking and built my own custom gesture recognition on top of it. I implemented procedural course generation and collision detection, and also a dynamic weather and tide system.

Challenges I ran into

By far the biggest obstacle I ran into was translating real-world movements into gameplay that felt natural. Sometimes subtle gestures were ignored, and other times accidental movements would trigger an action the player didn't intend. To fix this, I added a calibration step, gesture thresholds and filters to improve how well the game recognized the player's movements. Another challenge was bringing all of the Blender models into one cohesive game. Models I made and models I found online all came in with different sizes and art styles, so I had to restyle them to match the same low-poly look. I also had to make sure each obstacle's hitbox matched what the player actually sees. Finally, making sure every procedurally generated course was always possible to complete was a big challenge on its own.

Accomplishments that I'm proud of

There's a lot about The 12th Tide that I'm proud of. First, I developed three different ways to play the game with a webcam: body, head and hand. Second, I brought all three together into one cohesive experience where players seamlessly transition between running on land, surfing, driving a jet ski and exploring underwater. Third, I'm really happy I got to bring Reveille and the Aggie spirit into the game. It added another layer of fun and pride to building it.

What I learned

There were three main lessons I took away from this project. First, recognizing human movement is a completely different task from turning that movement into a responsive game controller. Second, I got hands-on with a lot of new technologies, including computer vision, 3D graphics and procedural generation, and I learned how to balance packing in features with keeping the game actually playable. Third, I learned how much the small things matter. Details like the game slowing down when you flip off a wave, the sky darkening and rain rolling in as the tide rises, and the wave that washes across the screen when a run starts don't change the gameplay much, but they're what make the game feel polished. Those little touches ended up making a bigger difference than I expected.

What's next for The 12th Tide

My goal is to make gaming more accessible and more active. Next, I want to add eye-tracking support for players with limited mobility, so anyone can play no matter how much they're able to move. On the other side, I want to build out a fitness mode that tracks how much you've moved and how many calories you've burned during a run, turning The 12th Tide into an exercise game you can play with just a laptop.