Tag Archives: generative

Space background generator

Lately I have been spending time on my Meteor Loop concept game. A big part of what I have been doing is the procedurally generated backgrounds. I really like what I have come up with, and some of the screenshots look great.

The actual game is in no state to show at the moment, but I really wanted to show how the background is coming along. So I decided to split it out into a stand alone project, so you can see it. Take a look here:


Click the “Generate new” button in the upper left settings panel to generate a new background with a new random seed. Have a go at changing the colour to see what it looks like.

Meteor Loop procedurally generated backgrounds

Meteor Loop is an Asteroids style space game that I am working on in my spare time. I know, doesn’t sound very original. It seems like everyone has to make an Asteroids clone at some stage. Personally I have made at least 4 different versions now. I always use Asteroids as a project to really try out a new language or library.

But this post is not really about Meteor Loop. I will do that post later. This is just an update to specifically show the dynamically generated backgrounds that I will use in the game.

Every level will have a different randomly generated background. Here are just a few screenshots of my favorites:

The game is being built using Flash, with ActionScript 3. I am using Away3d for the planets, and perlin noise for the cloud background and star distribution.

To generate the background, I start with a random seed. I use the seed to grab a random colour from a selection of predefined colours. Then I randomly choose the size, number of subdivisions, position, and rotation speed of the planet. I create the sphere using Away3d 3.6, with just a colour material. I also duplicate the sphere, but with a wireframe material, and scale it up a little, so it creates sort of an atmosphere.

For the clouds and star I create some perlin noise data using the BitmapData’s perlinNoise function, and tint it with the same colour as before. I create a second perlinNoise bitmap with a smaller numOctaves and use it to calculate where the stars should be. I simply did “the higher red channel value a pixel has, the higher chance I draw a star there”.

To add a bit more variation and interest, I then created a gradient overlay with its blend mode set to OVERLAY. This gives the background clouds a nice range of punchy colour, and some nice empty black areas for the stars to shine through a bit more.

I spent quite some time tweaking numbers of the algorithms, and I think I could easy find some more numbers to play with. Let me know what you think of these screenshots so far.

UPDATE: Check out the live version of my Space background generator.