Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Savanna Sam - Flying Giraffe!

A topic by Max Did It created Feb 05, 2024 Views: 1,462 Replies: 32
Viewing posts 1 to 28
(1 edit) (+3)

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:

Going at a breakneck pace!

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!

Savanna Sam character rig inside Blender

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!

(3 edits)

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.

Controlling Savanna Sam with mouse and keyboard

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.

Controlling Savanna Sam on tablet via touch screen

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.

Controlling Savanna Sam on a smart phone via touch screen

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…

Controlling Savanna Sam via game pad

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.

(2 edits) (+1)

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

The health bar(s) in Savanna Sam

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.

Sam bumping his head

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.

Sam scrapes his plane

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

Frontal collision

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

Should it be doing that?

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)

Going down!

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

(+1)

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:

Savanna Sam collecting coins

They can collect wrench items to repair their airplane:

Savanna Sam collecting wrench items

And they can collect heart items to regain health points:

Savanna Sam collecting heart items

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

(1 edit) (+1)

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:

x-ray shader for heart items

for wrenches:

x-ray shader for wrench items

and for coins:

x-ray shader 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?

(+1)

this has been a fun read. Looking forward to your work!

Thank you so much! I think it will still take me a little bit of time before I can release a version that is playable in any meaningful way. But until then, I will post any updates here :-)

(1 edit) (+1)

So, I’m in the middle of implementing actual levels.

I’m currently trying to figure out how to best manage and display level geometry and objects appearing in the levels like buildings and obstacles.

I think some of my basic approaches already work quite well, like creating a file format that combines 3D geometry that is needed for the current level with placeholders that tell the game where the geometry needs to be rendered.

However, I have a good amount of work still ahead of me. At this step, some of the challenges of the perspective the game is rendered in become apparent:

  • Rendering parts of the landscape from far away requires that the landscape geometry extends quite far to the sides, otherwise the landscape ends too early on the left and the right when rendered at a distance.
  • When approaching the landscape, the parts on the left and right will vanish outside the screen quite early, so it’s important not to put too much detail into these parts.
  • I will probably need some kind of LOD system for landscape geometry and larger objects in the game. It doesn’t make sense to render an object at full detail if it is too far away and too affected by fog.
  • I will probably need different viewing distances for small and large objects. It doesn’t make sense to render a coin or an item when it is basically only a pixel large, but I don’t want large objects to pop into existence in the last second either.

There is already some early version of the level system visible in the game. Some of the problems are quite visible, but should be fixed relatively easily:

Some cosmetic problems with the early level system in Savanna Sam

When flying a little higher, the problems with the viewing distance become very apparent:

The viewing distance in Savanna Sam is too damn low!

I hope I will make some progress on this in the coming days and weeks.

(+1)

I assumed you were using Unity.

Having to write your own rendering engine for your game is pretty impresive.

Happy to see progress from you.

(+1)

Yeah, I decided to not use engines like Unity or Godot that can export to HTML because I feel that these engines bring a lot of overhead with them. Even when exporting an empty scene with nothing happening, the resulting HTML files will still have a considerable file size.

I am not writing my own rendering engine from scratch though, I am using three.js, which covers a lot of the basics, which helps a lot. :-)

But, more complex features like level of detail functionality you still have to do yourself.

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. The new item designs in Savanna Sam

And the hearts are now heart silhouettes: The new heart item design in Savanna Sam

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.

(3 edits)

I hadn’t posted an update over the easter holidays, but I have been busy nonetheless! The game is slowly starting to look more and more like a game.

Rendering the landscape has improved considerably:

  • rendering distance works better now
  • transitions between chunks of the landscape are more seamless now
  • no more “gaps” left, right and behind the landscape anymore

Also, the world we are flying through now has 3D clouds, which I think is quite important ;-)

Clouds in Savanna Sam

To make sure rendering the environment isn’t using up too much performance, I have implemented a simple level-of-detail-system. Most level objects will have two versions of themselves, one with fewer details and one more detailed version. The game will render the low detail version if the camera is further away, and switch to the high detail version once the camera comes closer.

LOD system in Savanna Sam

This should keep the number of polygons rendered low, which will hopefully make the game run more smoothly especially on mobile devices.

(+1)

I’m currently building levels for the game, placing obstacles and items to create hopefully interesting courses.

Not using Unity or Godot to create this game means that I don’t have a tool to create 3D levels for the game. Instead, I’m using Blender to place objects and making sure the distances and the timing of obstacles is correct.

Using Blender as level editor for Savanna Sam

Since I’m already using Blender to create the characters and items appearing in the game, using it to create the levels seems logical to me.

Any geometry that I need specifically for a level, like buildings or bits of environment, is modeled and stored directly in the level Blender file. If the object needs to appear more than once, then I will create instances, which generates additional positions for the object but prevent the geometry and texture coordinates to be duplicated.

By using instances, I can see within Blender how the object fits into the level at each position. Later, the game will be able to recognize, which geometry data the respective instances are using and render the correct 3D objects at each position.

For general objects like items, I’m simply using placeholders in Blender. By using a specific naming convention, the game will know which object to use for each placeholder.

(+1)

Dude this project is coming really together. You're blogs have been really fun read so far.
Keep up the amazing work!~

Thank you so much! Currently, I’m busy implementing an intro animation for the game, so maybe there is going to be another neat update by tomorrow :-)

(1 edit)

Hi everybody!

Savanna Sam waving to the audience on the title screen of the game

When creating games, sometimes seemingly mundane things can create the most work. Like giving your game a neat little intro and title screen. Doesn’t sound very spectacular on its own, but it requires a couple of things you don’t think about very much when playing games.

Suddenly, your game needs a logo, for example. I quickly put one together in Inkscape and exported it to Blender so I can animate it in the intro sequence.

Then, I want the player to be greeted by the official Savanna Sam title theme when starting the game! Which, of course, requires me to write and record said theme. So, I dusted off my midi-keyboard and fired up LMMS, and after more than a weekend, I now have the first of hopefully several catchy tunes to set the mood for the game.

LMMS showing the song editor for the Savanna Sam theme song

I then could load the song file into Blender and animate the intro sequence so that it matches the beats of the song. The intro sequence really isn’t very long, and yet, even animating such a relatively small scene takes a lot of effort! That salad of lines below is the visualization of part of the animation from the intro sequence.

The curve editor in blender showing part of the animation for the Savanna Sam intro sequence

All that effort, just so that the player is gets a neat little introduction to the main character of the game:

Short clip from Savanna Sam intro

(+1)

There is now a miniature version of Sam!

Mini Sam Turntable

I have modeled this smaller version of Sam for the overworld map, of which I implemented a first version recently:

Savanna Sam Overworld Map

As you can see, the map is very much still a work in progress.

While I will continue to implement functionality into the map, I plan to create the actual visual design for it pretty late in the game, when I know which levels there are and in which order the player is going to encounter them.

For now, you can already travel on the map and select the level you want to play:

Savanna Sam Map Travelling

Another step for this project towards feeling like a real game! :-)

(+1)

I have switched out the old placeholder environment graphics in my first level for the actual graphics!

Before, I was just repeating a quickly modelled river object that I slapped an earth/sand texture on. It fulfilled it’s job as a stand-in so that the level would have a ground and it let me implement the level-of-detail-mechanics for environment graphics.

The old placeholder level graphics

But, they weren’t very pretty. The brown colors even look a little bit post-apocalyptic, I think. So, it was time to start and create the actual level graphics.

Since the first levels are supposed to take place in the eponymous savanna, I needed to find a way to somewhat convincingly depict fields of grass. I don’t want to render actual thousands of blades of grass, and I also want something that fits the cartoon style of the character.

I tried several approaches and I found a way to depict this kind of landscape in a way I’m happy with.

New level graphics

This looks much friendlier already. Also, the grass creates a nice parallax effect in motion (It does not translate well to animated GIFs, unfortunately!)

I have also added the hills at the side as an added detail. It’s fun to create little worlds like this.

I’m not quite done, however, I still want to add trees, bushes and rocks to complete the environment.

(1 edit)

I have added the second character to the game! It’s an elephant NPC who is first appearing at the waterhole that you fly over in the first level.

First, I visualized the variants of the character I want to show up:

Beach elephant concept art

Then, I modelled, textured and rigged the elephant in 3D. Short, chubby characters like this guy can be tricky to animate, especially if you use such a small amount of polygons. At some points, you just need to cheat for certain animations by subtly scaling bones, for example.

Beach elephant 3D models

And here they are, having a great time at the old waterhole:

Beach elephant in-game appearence

They even react if you fly close to them with your airplane:

Elephants reacting to your plane

(+2)

And another character has arrived to populate the levels in Savanna Sam. This vervet monkey inhabits the baobab trees you will now find in the game:

Vervet monkey in Savanna Sam yawning

As you can see, she is having a slow day… until a certain giraffe is almost crashing his biplane into her living room:

Savanna Sam barely evading an obstacle

(+1)

This is becoming a very cute game! Good Job!

Thank you so much! :-D

(1 edit)

I’m still adding more features to the game. One of the more recent additions is the first story cutscene that I created and that now plays when you first start a new game of Savanna Sam.

I’ll admit the cutscenes in the game will not be full motion videos, but 2D comics that you can interactively click through. But I think they still integrate well into the look of the game and are posing a reasonable amount of effort I need to invest into them ;-)

Savanna Sam Opening Cutscene

(2 edits)

I’m currently busy adding missing details to the game. I want to finish a complete vertical slice before I continue with creating the next playable level.

One of the details I finally have come around to integrating is something I can’t believe took me this long to add: Sam’s plane finally has a propeller!

Savanna Sam’s plane’s propeller

It’s one of those details that don’t really have any impact on the gameplay, but visually, it makes quite a difference, of course.

I also had some of my friends play the game and found that they got stuck due to missing information about the controls of the game. So, it was time to add tutorial/hint screens, so that players don’t need to find out which buttons to press by themselves via trial and error.

A tutorial screen in Savanna Sam

What makes creating these a little tedious is that there are basically three control methods the player might use: keyboard, gamepad and touchscreen. The tutorial screens need to be able to display informations for all three of these. Currently, the tutorial screens will highlight the controls for the method the player used last, with the other two being shown at the side to hint at the other ways you can play the game as well.

I have also added a number of sound effects to the game, which is a little tricky to show here ;-)

Let Sam give you some positive vibes! You can do the thing!

Savanna Sam giving the thumbs up gesture

This is a new reaction animation Sam will now perform when you collect an item. This gives the game more personality! I am currently adding more reaction animations for other situations, like receiving damage.

Another thing I have been working on recently is the “level finished” screen. Among other things, I have added a display showing how many lives you still have (Yes, there are lives now!).

Also, there is now an animated UI showing how many (and which!) gold rings you have collected in the level:

The current version of the level finished screen in Savanna Sam

Currently, I’m working on the second level for Savanna Sam. For this level, I’ve painted a more elaborate background compared to the first level. The background image uses a panorama effect, similar to panorama photos that most smartphones can make, where several photos looking into different directions are stitched together.

In my case, the panorama is arranged vertically. So, the upper portion of the image represents the view that you would see if you look straight at the horizon, and it blends into the view where you would look straight down at the ground.

This is what it looks like in it’s entirety:

Savanna Sam panorama background

So, what do I need a vertical panorama background for? At one point in the second level, Sam flies over the edge of a cliff and continues to fly downward along the wall of the cliff. I need the background for the moment where Sam transitions from flying straight at the horizon to flying along the comically tall stone wall:

Savanna Sam flies over the edge

I think the effect is pretty neat, considering how relatively low-tech it is.

And I added another comic-style cutscene to the game, introducing a new character. The plot thickens!

Savanna Sam Encounter Cutscene

(1 edit)

Right now, I’m working on a new level for Savanna Sam. I’m creating an industrial themed set of graphics for this level. The reason for this is that Sam, at this point in the game, has left the Savanna and is flying through a diamond mine.

I’m still early in the process, but you can already see some early environmental graphics and the changed color palette due to the different time of day:

A diamond mine in Savanna Sam

As you can see, this time Sam isn’t flying over an open space, but through a huge trench created by the mining operations. During the level, the trench is supposed to take turns that Sam needs to follow with his plane.

There is a bunch of objects and characters that I’m creating for this level, the first of which is a classic mine cart:

A mine cart appearing in Savanna Sam

In the level, the mine carts will move along tracks, creating more obstacles for Sam to avoid.

A mine cart just standing around isn’t very interesting. So, I modeled some tracks for it to go around on. Here it is in action!

A mine cart driving around in Savanna Sam

Later in the game, the mine carts are going to be used both as part of the background scenery as well as moving obstacles for the player to evade.

And another vehicle I’ve modeled for the mining level in Savanna Sam: The haul truck!

The wireframe of the haul truck in Savanna Sam

The textured haul truck

I hope I’ll be able to finish all the assets I would like to use in the mining level this week. Let’s see…

(1 edit)

I spent a good portion of the last week to create a new background character for the mining level in Savanna Sam. The mine in the game is operated by a company run by meerkats. So, I needed a meerkat miner that would populate the level while Sam is traveling through it.

I used this opportunity to try and document even more of my process. This time, I recorded a timelapse of me sketching the meerkat miner:

Timelapse of the creation of the concept artwork for the meerkat miner in Savanna Sam

This is the resulting artwork:

Concept artwork of the meerkat miner in Savanna Sam, including t-pose

I then used this as a reference to model and texture the 3D model of the character:

3D model of the meerkat miner in Savanna Sam

Of course, the model needs to be rigged and animated as well!

Animation of the meerkat miner using the pickaxe to dig in the dirt

And now, I can place these little guys all over the level:

The meerkat miners appearing in the game, performing multiple actions

I’m quite happy with the outcome, and I have once more learned a couple of things, especially in regards to rigging and animating. :-)