Building a 2D Platformer Game with Godot. Part 3
Tags: godot, 2d, game, platform
Published: 2023-10-24 04:08:43

---
title: Building a 2D Platformer Game with Godot. Part 3
published: true
date: 2023-10-09 12:44:54 UTC
tags: #godot #2d #game #platform
canonical_url: https://carlosmv.hashnode.dev/building-a-2d-platformer-game-with-godot-part-3
---

Previously, in [part 1](https://dev.to/carlosm27/building-a-2d-platformer-game-with-godot-part-1-pe2) of this series, we learned how to create a Godot project and add scenes and nodes. In [part 2](https://dev.to/carlosm27/building-a-2d-platformer-game-with-godot-part-2-171j) of this series, we learned how to add animation to the player node.

In this article, we will add a background to our game.

This is going to be a very short article, just focusing on adding background to our game.

First, create a new scene, and name it "Background".

We create a node, and select "ParallaxBackground".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689305091560/7a179ad0-22df-4608-8cf2-7f7891f90b30.png)

As the [documentation](https://docs.godotengine.org/en/stable/classes/class_parallaxbackground.html) says, `ParallaxBackground` uses one or more `ParallaxLayer` child nodes to create a parallax effect. Each ParallaxLayer can move at a different speed using `ParallaxLayer.motion_offset`. This creates an illusion of depth in a 2D game. If not used with a Camera2D, you must manually calculate the scroll\_offset.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689305162654/babba151-ae07-4062-bb22-2cda91617859.png)

Then, we create a "ParallaxLayer" as a child node of "ParallaxBackaground".

According to the [documentation](https://docs.godotengine.org/en/stable/classes/class_parallaxlayer.html#class-parallaxlayer), each ParallaxLayer can be set to move at different speeds relative to the camera movement or the `ParallaxBackground.scroll_offset` value.

Next, we look in the "environment" folder in the assets folder and drag to the editor the sprite we want as a background.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689305378430/ca326bc4-115a-4951-96d7-a0ffb92120bb.png)

Now, we add another `ParallaxLayer` node and select "middle.png" from the environment folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696547879457/6d77f581-f3b1-48d7-9df6-f8f77fb57863.png)

Next, we copy the "middle.png" file and place them next to each other.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696547968883/595a8706-73eb-42c9-8956-cb65e88d19a9.png)

After we add the background assets. We use a feature called "mirroring".

As the documentation says, mirroring is useful for creating an infinite scrolling background. If an axis is set to `0` the Texture will not be mirrored. Default value: `(0, 0)`.

We select the first `ParallaxLayer` and go to the Motion panel on the right.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696548314894/5c40a370-5dfb-4c9c-8b01-0965e1acdf95.png)

In the "X" axis we have to input the number of the pixel where the image ends.

In this case, is 576, because the image is set in (0,0)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696548401409/b15eb1ea-d466-451d-a812-57bf1bd38672.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696548526581/29aebda2-00c2-48a0-9d9e-26effa1736e5.png)

And we do the same with the other `ParallaxLayer` node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696548596990/06bdeb42-02e6-4e58-b516-745aedebc0ad.png)

Now, we go to the "World" scene and drag and drop the `background.tscn` file to the "World" scene to add it as a child node of the "World" node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696548820710/a922e370-5356-460c-8ced-d3918873257b.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696548941028/979eab36-9243-4831-a060-ae4514496435.png)

### Conclusion

In this article, we learn how to add background assets and apply mirroring to extend them, to create an effect of infinite sidescrolling.

I want to shout out to [Ansimuz](https://ansimuz.itch.io/) for allowing us to use its assets for free. [Coding Quest](https://www.youtube.com/@CodingQuests), [HeartBeast](https://www.youtube.com/@uheartbeast) and [BornCG](https://www.youtube.com/@BornCG) for creating very good content about Godot, their content motivated me to create this tutorial. Their videos were a great help for me to learn Godot and Game development.

Thank you for taking the time to read this article.

If you have any recommendations about other packages, architectures, how to improve my code, my English, or anything; please leave a comment or contact me through [**Twitter**](https://twitter.com/Carlos_marcv), or [**LinkedIn**](https://www.linkedin.com/in/carlos-marcano-a2135a134/).

### Resources

[https://www.youtube.com/watch?v=H06isAs1GxI](https://www.youtube.com/watch?v=H06isAs1GxI)

[ParallaxBackground documentation](https://docs.godotengine.org/en/stable/classes/class_parallaxbackground.html)

[ParallaxLayer documentation](https://docs.godotengine.org/en/stable/classes/class_parallaxlayer.html#class-parallaxlayer)