Backgrounds and Parallax

Today I set out to create some background images for my game. I was unsure about what exactly should be in the background, as I have very little thought out so far, about where the game takes place and what is happening in the grand scheme of things. one thing I am sure of is that the environments, especially the backgrounds, should be entirely in grayscale, and then maybe be colored when the character picks a color to transform the world into. 

The question arises how exactly one realizes a background. I could make a gigantic image which lays behind the level and the character 'moves along it'. i would have to create the levels, then create an Image the size and shape of the level and design it to specifically match that level. That would be an incredibly time consuming process and also I would have to actually put something worth while there. As im still not entirely sure about the setting of the game, I choose not to go for this approach. 

Another possible approach is to have a image that always tracks your camera 1:1, in other words, the background would not 'move' in relation to your character at all. it would be a static image that never changes. This is of course the easiest option as I would just draw one big image and always set it as the background, but it feels weird and out of place, moving your character and the background not moving the slightest bit.

Probably the most elegant solution to all these problems is to realize a parallax scrolling effect. It is an optical effect that occurs when for example observing a scenery and moving parallel along it. Close objects will move quickly along with you while far away objects will move barely or not at all. So how does one implement this effect in a 2D game? I do not have real objects in a 3 dimensional space behind the player so we have to create the illusion ourselves. I split my background image into several parts, and make the parts further in the back move more slowly along with my camera, while the parts nearer to the camera are moving faster. How fast is dictated by a variable I set myself, so I can tweak and improve it to look the best. Now all that's left to do is to repeat the image when I reach "the end" of the background image, so that it doesn't abruptly end, but instead flows into itself. So how does this look? First a little behind the scenes look on what the effect is like in the engine when I manually move the camera around: (I'm currently only using two background layers, one for the background image and one for the clouds, I will most likely add something like mountains at a later date)

Parallax effect when moving the camera

Now this is only for horizontal movement, as my character also moves vertically, I implemented a similar effect for the vertical axis as well. As the character moves along the vertical axis, the background will factor in the characters movement again by a smaller amount, somewhat moving along but not a lot, and again I set the speed of this movement differently for the different layers of the background. All together it comes out something like this:

(Should you be interested in the code, here is the script attached to each background image. )

Finished Background in the game.