Feather Flight

Login form
Achievements
Leaderboard

Inspiration

There are many wonderful 2D games made with MeDo. I love them, but I always believed MeDo had the potential to create 3D games too, and I wanted to prove it.

I have a particular love for beautiful skies, so I set out to make a game where players could enjoy flying while watching the sky shift over time.

I started by looking for 3D models I could use for the hackathon, and discovered that the official Three.js examples included animated 3D bird models that were perfect for what I had in mind.

As a test, I handed MeDo the URL for the Three.js bird examples and asked it to build a viewer that could display those models with Three.js. It nailed it on the very first try.

From there, I fed it small prompts day after day, and little by little the viewer grew into a full game.

What it does

Players can choose between two game modes and three types of birds.

Game Modes

Flight Challenge

In this mode, players compete to fly as far as they can within three minutes. Rings appear above the terrain, and flying through them adds bonus distance. Some rings also boost the bird's speed.

Free Flight

A mode for flying through the sky at your own pace, made for soaking in the changing sky. The bird also flies more slowly here than in Flight Challenge.

Controls

Up / W: Ascend (speed gradually decreases)
Down / S: Descend (speed increases)
Left / Right / A / D: Turn left or right

At low altitudes, ascending costs you relatively little speed. At higher altitudes, though, your speed drops off much faster.

This creates a tradeoff: staying low makes it easier to rack up a high score, but it also brings you closer to crashing into the ground.

Playable Characters

Parrot: Easier to control precisely, but with a lower top speed.
Flamingo: Harder to handle, but with a higher top speed.
Stork: Has a higher minimum speed, making it easier to hold a steady pace.

Horse: It soars through the sky, just like the birds.

Leaderboard

Flight Challenge features a global leaderboard where players compete on the distances they fly. It's powered by MeDo's MySQL database backend.

By creating an account with a user ID and password and logging in, players can register their scores on the leaderboard. Even after clearing their browser cache, they can log back in to return to their account.

Achievements

There are 13 achievements, unlocked by pulling off tougher gameplay challenges. Achievements are managed through the MySQL database as well, so anything you unlock after logging in is saved.

How we built it

My very first instruction was:

Since the official Three.js samples (https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf) include Parrot, Flamingo, and Stork, please create a viewer that can play each of them. Simple functionality is sufficient.

Then I gave this one:

I also want some ground. I'd like to generate random mountains and valleys using Perlin. a bird model flying over them.

From just those two instructions, MeDo built a 3D bird-model viewer in Three.js and React, complete with 3D terrain and three switchable, animated bird models flying above it.

Once that was working, I only had to add the remaining pieces one step at a time:

A skydome to display the sky
The sun and lens flare, the moon, and stars
Keyboard controls
Lakes and rivers

After that came the game systems. At first, the game was simply about competing for the longest flight distance in three minutes. Then I asked MeDo:

Add one new game mode that you find interesting.

It came back with a mode built around flying through rings, and I loved it. So I kept my original idea of competing for distance within three minutes, but reworked the system so that passing through rings adds bonus distance.

More features added:

Golden rings worth triple the usual bonus
Boost rings that increase your speed
Water-splash effects when skimming just above the surface
Sound effects and background music

The sound effects and music are all copyright-free CC0 assets.

Finally, I added a global leaderboard, a personal leaderboard, and the achievement system.

This part was surprisingly easy. I just asked MeDo to manage everything with the MySQL database, and it built almost the whole thing perfectly. After that, it only took a few follow-up requests to fine-tune the system and add more achievements.

Challenges we ran into

The toughest challenge was hiding distant terrain.

When the bird flies at a high altitude, the game has to render terrain far into the distance, which causes a major performance hit.

So I needed to hide that faraway terrain with fog. But simply rendering semi-transparent fog didn't conceal the terrain well, and the fog itself dragged down performance too.

The solution I landed on was to render distant terrain in the same color as the sky.

It worked beautifully. The faraway terrain blended naturally into the sky, letting the game hide any terrain that wasn't needed for gameplay.

Accomplishments that we're proud of

What I'm most proud of is pulling off both a beautiful sky and genuinely fun gameplay. That was my goal from the start.

I also managed to include every feature I'd planned for this version: sound effects and music, leaderboards, achievements, and a hidden playable character.

I believe this isn't just a demo, but a complete release with gameplay that's truly fun to play.

What we learned

The integration between MeDo's backend and AI was excellent. With nothing more than simple instructions, it built surprisingly complete systems.

Three.js, too, proved incredibly powerful for 3D expression. I've never written a single line of Three.js code, not before this hackathon and not during it.

I gave MeDo my instructions almost entirely in plain language, yet it seemed to grasp the API specs in detail. In most cases, it implemented exactly what I had pictured.