Hi!
In this entry I will write about the development of the background for our game Beelonging.
In our game you control a swarm of bees flying back to save the beehive from a hungry bear. It takes place in a forrest, so for our background we wanted to include trees, stones, bushes etc. Since our game is a side scroller, we wanted to have a parallax background, which means that you divide the background into several layers (background, player, foreground) and make them scroll in different speed. The closest layer is moving the fastest and the furthest layer is moving the slowest. This is made to create an illusion of 3D effects in a 2D game, the parallax will create depth in the game.
In order to create a scrollable background you need to make sure that the right side of the image match with the left side. This can be done in photoshop, where you go to filter/other/offset and then you adjust the horizontal value. Then you just correct the edges to make them fit.
Parallax for our game
I started to divide the background into 5 different layers, shown above. It includes a layer for the clouds, layer for trees 1, layer for trees 2, layer for player avatar and a layer for the foreground bushes. My first plan was to create and finish one layer at the time, but I started to make them all at the same time. I wanted to do this instead to get a better overview of the background. I did some sketches of how I wanted it to look and used reference images to get an idea for colors, sizes and shapes. I also made a few sketches (showed below) of the background assets to get a sense of the art style we wanted.
Beelonging is a colourful, high saturated game, but the background needs to distinguish from the characters and other things you can interact with in the game to avoid confusion for the player. I chose to work with less saturated colors, but still tried to make it colourful. To make it clear for the player, the background assets do not have black outlines, which the characters have.
Below you can see some progress pictures of the background.
So far I have spent around 20 hours on the background and it is still not finished. I think the background takes a lot of time for me to make because I’m not used to draw environments and sceneries, I’m more used to draw characters. I guess I will need another 6-8 hours to complete the background. I need to add lights and shadings, but also add more details and finish the trees in the back.
Wish me luck….
// Petra
Gameblog 
Good luck with the rest of the background!
I really like how concise you’ve kept this blogpost. I feel like you managed to get every step of the progress communicated very easily. Although sometimes I felt like it was a bit too rushed. For example when you wrote about the process of offsetting the background and correcting the edge I felt a little lost. I didn’t realize until now that it’s because you want to be able to loop the same image as the background. So adding something about that would be nice.
I think it was a great idea to exclude black outlines from the background. I think you could even go harder than that and really have a colour that doesn’t allow the object to pop. Maybe just a little darker than the local colour. This way it could be even clearer for the player that s/he can’t interact with it.
Other than that I have nothing more. Good luck once again. I know it’s really tough to make backgrounds, but you got dis!
LikeLiked by 1 person
Good morning Petra,
Thank you very much for the insights into parallax design from a art point of view.
Your reasoning regarding player understanding of what is and is not an interactable object was very clear and kept to the point. I would join in on Johan’s suggestion though as to the saturation/hue; as it currently stands, the colours for background items and interactable objects are too similar to instantly differentiate between the two.
Removing the black outline definitely helped and was a first step into the right direction, and a slight saturation tweak would bring it to the next level in my opinion.
Having read your blog post, there was only one question I had left unanswered by the end of it; namely, how has the parallax effect been implemented in game? Is it an animation that has been imported and plays at the same speed as the camera scrolls to the right? Or is it bound to player speed/movement?
If you could provide some more details in that area, it would help readers plan the overall implementation cost of such a feature (art, code, design, play-tuning).
All it all great post,
Thanks!
Tim
LikeLiked by 1 person