Designing our root growing game: colors, UI and other design decisions

I would like to tell you a few things about the design process of the game we created. Mostly about the design decisions I had to make, as I was responsible for the visual design, including the UI, logo, the main screen, backgrounds etc. while my friend @kazrath was doing the coding part.

After learning about the theme, the first step of our development was sitting down with pen and paper and simply generating ideas. There are some common settings a game can have built on this theme: diving deep into the ocean, digging deep into the ground, build a simple dungeon crawler, travel deep into deep space, or travel deeper and deeper in someone's mind. After thinking really deep together for a while, we decided to create a game about a plant that is growing roots into the ground.

Why? Because @kazrath wanted to practice his Unity coding skills by implementing the root's pathfinding algorithm, while I saw a challenge in creating an underground environment in Inkscape, that can tell a story with very limited assets.

Our game is called "The Last Spores" and you can play it here: https://ldjam.com/users/pestodesign/games

itch-header.png

First the game mechanics and the story: we knew we wanted a game about growing roots, but to give it a background story, we decided to put the game in a post apocalyptic world. This immediately gave a nice goal to the game, and helped me with the visual design too! To win the game the player has to keep the last creature on Earth - a little fungus- growing and surviving. When you have a story and core mechanics, they are all guiding your upcoming decisions about visual design.

A small colorful plant growing in a dead, burned out world - this is the contrast of the story. So I decided to keep the colors in strong contrast too. The roots are representing life, and they are the moving part of the game - the "hero" if you will - so I wanted them to stand out with a neon pink color. Then I set the ground different shades of dark purple, gradually getting darker as the player is reaching deeper and deeper into the ground.

The main screen is containing the title of the game, and a human skull and the pink mushroom in front of a gray sky. I created another contrast while drawing the shape of the skull: the fungus and the roots are organic and playful, as opposing the blocky geometric shapes of the skull. I used the same principle when I created the obstacles in the ground for our root to grow around. This is an important part of design I think: make a rule for yourself and stick to that.

So I created some blocky stones and some pieces of junk, so the developer can scatter them around in the game level. These I colored to a unified gray, so the player can easily distinguish them from the pink root and the dark background. It is important to show that these are obstacles and not part of the background image. I created a repeated pattern of small stones and sandlike particles over the background color to make the ground more interesting. Now this layer I colored much closer to the purples of the background to make them blend in more. These are not obstacles, they are only setting the mood.

post-objects.png

With the logo and the UI of the game we wanted to keep things simple. As the roots are the main element of the game, they has to be shown in the logo as well. I also chose a font that is reminding me a bit of roots and branches, plus it has a dirty, post apocalyptic feeling.

The main UI elements are the health-bar and score in the top left corner. I wanted to show the roots there too, in a way that it is not obstructing the view, and it is not covering up the active roots. We don't want to confuse the player, we want to give clear information. Color wise I used the light blue for the health bar - same color as the energy orbs the player has to collect- and a pink number for the number of the collected spores. Then I matched the color of this small HUD to the ground colors, because it has to be visible at any depth.

One design task was to show the player which nodes are active and reachable by the root. We gave the nodes a highlight of course, but that was not enough, I wanted to add a "view cone" of sorts also, because the roots are only allowed to grow downwards in a 120° angle. First I just used a semi transparent blue arch, but then I had a better idea! Instead of a flat triangle I traced an image of an actual mushrooms spore print. This is the image you get when you put a cap of a mushroom face down on a paper, and let the spores fall from between the gills. It creates a very interesting image, and a great addition to my GUI!

post-mushroom.png

When you start the game, the first thing you see is a short comic about the background story. This page just happened in the last day of the jam, while Balint was resolving bugs like a madman, I had a bit of time after I was preparing the headers and texts for game submission. We were talking about the story during development between the two of us, and a comic is a great tool to pull the people into our world. I used the same image as in the main menu to show an empty world of ruins, while I guide the player close to the starting point of our story about the roots.

The game starts with a comic, then comes the main page with the skull. But when the player dies I wanted to show that the world has died as well (no pressure), so I am using a different background image. the colors are more washed out gray and the happy color of the fungi is gone. But I created a happy ending as well, picturing a different world. This is a great thing about working in vector: you can easily reuse, reshape and recolor elements you created earlier. Here are 2 of my main screen versions ( If you want to see the third version you have to win the game though! ;) )

post-mainscreens.png

Thank you for reading this long post! What I wanted to show you is that Inkscape is a really capable vector tool for game art design, and that design is mostly making your own decisions and stick to them :)

If you want to play the game you can do it here: https://ldjam.com/users/pestodesign/games And if you did, please let me know what you think of it!