Background Generator

During arglan2 I started using particles to create special effects in order to improve feedback. This was a really nice improvement to the last game, allowing me to make art (or at least something better than my drawings) from code, which helped improve the game feel.

With that in mind I started thinking of other programs I could build to generate art for one of my next games. After some search I found this tutorial, from Thomas Brush, about drawing landscapes.

He has a really nice defined process, by seeing this I instantly started to think of ways to programmatically follow his process. Already with a nice vision of the needed implementation in my head I picked love2d and started to build a procedural landscape/background generator.

Implementation

The implementation was done mainly in an incremental way while following the process in the video. The steps to generate the background were:

• Background Gradient - The background gradient was done by picking two colors randomly and then transitioning between them from top to bottom of the screen while painting individual pixels.

• Montains Layers - The mountains are done in layers, making the mountains more transparent the more far away they are from the player. Each mountain is a mesh that starts at a specified height, then I select the number of peaks and just make a random variation from the height for each peak.

• Fog Layers - For the fog layers I used the same scheme of getting more transparent the more far away they are to give a notion of depth. In the fog itself I used the moonshine library, that allowed me to use some post-processing effects in shaders. They had a fog effect so I applied their fog effect to a mesh which was similar to the mountains. There is a bigger fog layer in the background and then there is a fog layer a bit bellow each mountain to look like mist of the mountain.

• Clouds - The clouds are meshes also with a little quantity of peaks, but to give them some relief, I made in each cloud two meshes. One black and other white, being the black mesh a bit bellow the white one.

• Ground - The ground is just a rectangle for the player.

With these parts implemented I was able to generate multiple different nice backgrounds.

Having this, I wanted to try to go the next level, doing a parallax effect. I started by implementing an export button to allow me to export all the layers as separated pngs.

After that I loaded all the layers ordered by depth and implemented a simple scrolling background by repeating each layer twice side by side and switching them once one goes of the screen. To make sure the backgrounds can be scrolled infinitely I made also sure the mountains start and end in the limits of the screen at the same height when generated.

With a scrolling background and depth associated to each of the layers I made the parallax effect by making the velocity grow up while getting to the higher layers, closer to the player, in an exponential way.

This made the effect really nice, but in order to improve the person sensation of depth I added a simple cube which represents the player in the ground and allowed it to jump. This made the parallax more apparent since the person now is focusing in the cube.

Result

I did this in two weekends and achieved a result that really pleased me, I will use this for sure in my next games. Here you can see multiple of the results obtained from the background generation.

And here a simple usage demo.

Repository

If you want to see the code or to try the tool check the repository.