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.


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
Background Mountain Layers
Background Fog Layers
Background Clouds
Background Ground

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

Background 1 Background 2 Background 3 Background 4

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.


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.

Parallax 1 Parallax 2 Parallax 3 Parallax 4

And here a simple usage demo.


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