This is the first game project I've started after taking a break from making games for several years.

For a while now, I had this idea of a cartoon giraffe flying a comically tiny airplane stuck in my head. At last, I sat down and drew a character design:

I like how "vertical" the design of this character is. It's an unusual silhouette for anything airborne. I liked the character, so I proceeded to create a 3D model based on it:

Now that I have the 3D model, I want to try and make a game with it!

(Very rough) Game Concept

• I'm thinking of a game where you fly down a linear level, similar to Starfox/Lylat Wars.
• I'm imagining the game as a twin-stick action game: You control the airplane with one stick and the roll of the plane with the other. Basically, you can do barrel rolls freely and orient the plane the way you want.
• I'm not sure whether the player themselves can shoot, it might be interesting for the game to be about avoiding obstacles instead, flying through obstacle courses where you need to position and orient yourself correctly to make sure you don't crash into anything.
• I want to try and make this game a browser based game. I think it would be interesting to see what's possible on that platform.

Let's see how far I'll get with this. Wish me luck!

I’ve been busy to become reaquainted with the animation and rigging system of Blender and have managed to create a working rig for my giraffe pilot!

With this, I’m now able to create poses and animations that I can use in my game code. So, I can already move around in my game interactively, which is pretty neat:

But not only that, as mentioned in my first post, I want rotating the character to be an important part of the movement. And that already works, too:

I’m especially happy with the little dynamic animations I can already create in the game. I really like the wobble the head of the giraffe does when they stop moving or rotating. It’s a small detail, but it adds a lot in my opinion.

As you can see, there isn’t much else happening in the game yet, but I’m working on that! :-)

Okay, I’m bit for bit adding the parts that are going to make this a game.

For testing purposes, I’m generating random red boxes that the player flys towards. Not very spectacular, but it alread gives the player a reason to move in order to evade the obstacles.

Then, I’ve added the cannon-es library for collision detection. I’m not using any of the physics simulations right now, I only want to know if the giraffe is hitting any obstacles.

And last but not least, I’m using three-nebula to display particles. Currently, they create the star particles when the player is hitting anything.

The green wireframe boxes are the collision shapes, I’m rendering them for debug purposes.

It’s very much a work in progress, but it’s making progress!

I’m developing the game to run in browsers, to make sure it’s quick and easy to access it. Another step to make sure it reaches a broad audience is to implement control schemes for different platforms.

I expect mouse and keyboard to be the most common control scheme for playing the game. You use the keyboard to control the airplane, while the mouse is used to let our giraffe pilot to roll into the desired direction. I’m using the browser’s pointer lock feature to capture the mouse and then to simulate behaviour similar to an analog stick.

I myself like to sit on my couch and play on my iPad, so it just makes sense to also implement touch controls. I’ve implemented on-screen analog sticks which already work quite nicely. The analog sticks appear wherever the player touches the respective half of the screen, which makes it more comfortable to play the game, since it adjusts to your preferred finger placement.

Having touch controls on a tablet means that technically, you can play the game on a phone, as well. I’ll be honest though, I don’t know if I’ll be able to design the game in a way that works well on small screens…

I was delighted to learn that you can use game pads in browsers! I’ll be honest, I didn’t know that all modern browsers support game pad input, but I’m very happy they do. This means that you’ll have the option of using a game pad when playing the game on your PC.

I’ve added some basic, but important features, making this feel much more like a game already: A health bar!

Currently, the health bar is split between Sam’s health and the state of repair of the plane.

If Sam himself gets hurt, then the player loses one (or more?) hearts.

The plane’s health is further divided into segments. If Sam hits an obstacle with the edge of his plane, like the tip of the wings or one of the wheels, then he only loses one segment.

However, if Sam crashes his plane into anything dead center, then the equivalent of a full wrench is taken off.

If Sam’s plane is in poor shape, it starts to leave a trail of smoke:

And, of course, if Sam runs out of health, then the player sees a game over screen (which I am going to make prettier, I promise)

My next step would be to implement collectable items that will replenish Sam’s health :-)

So far, it was only possible to avoid obstacles, now there is also something to fly towards! I’ve implemented items! Another basic, but important building block for the gameplay.

The player can now collect coins, increasing their score:

They can collect wrench items to repair their airplane:

And they can collect heart items to regain health points:

Most basic gameplay elements are here, the next steps will be to build actual levels with the elements that are there already.

I’ve added a small quality of life feature to the game. I found that the character model is often obscuring items that you are about to collect, making it tricky not to miss them.

To prevent this very basic gameplay element from being frustrating, I’ve added an x-ray shader for these elements. So, whenever the the character is in front of any of these items, a colored silhouette is rendered. This is done for hearts:

for wrenches:

and for coins:

I think the shader works pretty well already, and it fulfills it’s purpose. Maybe a bit too thoroughly, though. In some cases, the character is full of colored shapes. Often from objects that are still quite far away and not really relevant yet.

I’ll try and optimize this. Maybe I can try and fade the effect in when the item gets closer to the player?

Everything is rings now!

I wasn’t too happy with using the x-ray effect for pretty much every item that you can collect in the game. It looked visually cluttered and could make the game a bit confusing if you constantly hat colorful shapes superimposed on your character.

After some pretty good feedback over at the Newgrounds forums, I decided to change the collectable items to be ring shaped.

I was a bit hesitant at first, since I feel that “flying through rings” is a bit of a flying game cliché, but I suppose there is a good reason why they are used so often.

With the new item design, I can turn off the x-ray shader and still have the player see where the item is, even if the character is flying in front of it.

So, coins and wrench items are now golden hula hoops and turning cogs, respectively.

And the hearts are now heart silhouettes:

I was also able to solve some of the environment rendering issues mentioned in the last post, though I am still working on that part of the game.