Our New Backgrounds

thumbnail.png

Welcome to the first development blog post for Star Escape: Ihp’s Adventure! The dev team will be posting to this blog every Monday with something interesting (hopefully!). The posts will range from detailed walk-throughs of how we get things done, to more broad explanations of design choices, mechanics, and solutions to problems. This first post will be about why and how our new backgrounds were made last week.

The first background the game ever had was the placeholder Ampersand Game Studios Background, its existence justified entirely by it being “better than nothing”.

Before we had planet art!

Before we had planet art!

After that we had a set of four backgrounds from an asset pack we had purchased. Whilst those backgrounds were not by any means poor quality, we came across two main issues that would prevent us from using them for the game.

The main issue was style. The asset backgrounds we thought were too photo-realistic, and noisy, for what we were looking for. They didn’t fit with the more cartoon aesthetic of the rest of the game we had established.

The second issue was number of backgrounds. We have plans for quite a few Star Systems, which we’d want to make stand out from one another with unique visuals. If we only have four backgrounds available, it would mean having to reuse some, if not all of them. The visuals would not only get boring over time, but each Star System would lose its own identity.

So we decided to make the space backgrounds ourselves, but then we were faced with a new problem - how? Like most problems we encounter, the solution came in the form of an online tutorial and paint.net.

We found this great tutorial by The Cyber Slice which gave us exactly what we were after. The tutorial explains how to create a space background from start to finish, using paint.net. Paint.net is an amazing free to use tool that we find to be absolutely essential. We use it for pretty much everything: a digital white board during meetings, concepts and mock-ups, and even actual artwork production (also sometimes memes).

The process we ended up with for making our backgrounds is very similar to the tutorial, but with a few of our own tweaks. The first thing we do is decide on a base colour to use, for example dark blue. We’ve found that the best Value to use, when adjusting HSV, for all colours, is between 10 and 20.

After that we add the stars. This is done by adding two new layers, and filling them both with white. Then noise is added to both layers, with the following settings: Intensity 64, Colour Saturation 0, and Coverage 3.00.

Next we want to remove a lot of the white on the Stars layers. To do this we use the Magic Wand tool, and by adjusting the Tolerance setting we can control how much of the white is removed, and therefore how many stars are left on the layer. We like to use a Tolerance setting of between 40% and 60%.

After deleting the white space on both Star layers, we’ll have two layers with very similar stars. To make the stars a little more interesting, and the reason why we use two layers, we zoom the second layer, and also rotate it a bit. This makes the stars on the second layer bigger, and rotating them makes them appear more round. We usually zoom by 2.5 and rotate by 60.

At this point we will have something like this:

Not bad, but we can make it a lot cooler.

The next thing we do is add distant nebula and spacey clouds. This is done by adding another layer, and using the effect Render Clouds. We tend to stick to a Scale of around 300, and a Roughness of 0.30, as this fits best with our cartoon aesthetic.

We then duplicate the Clouds 1 layer, to make Clouds 2, and using different blend modes is how we achieve the nebula look. Clouds 1 must use the Multiply blend mode, and Clouds 2 must use the Colour Dodge blend mode.

Now we have this, which looks a lot better:

At this point we have something acceptable, and in fact for about half of our backgrounds this is where it ends. For the other half, we add something extra to make it look even more awesome: the Turbulence effect.

Another layer is added called Turbulence, and is placed on top. We then add the Turbulence effect with Octaves set to the minimum, and Period and Size set to the maximum.



The last step is to change the blend mode of the Turbulence layer to Glow.

And we finally have a great space background!

What’s great is that there are so many variations that can be made by tweaking any and all of the values we set along the way. For example, just by changing the base colour we get this amazing new image:

We’re really happy with how the backgrounds for the game have turned out. The next step for us is looking into the possibility of dynamically generating these backgrounds during the game, so that they can react to player behaviour and game states - so stay tuned for an update on that.

Hopefully you’ve enjoyed this blog post, and if you decided to follow along and make your own backgrounds we’d love to see them!

Thanks for reading.