Parallax Background and Level Bounds - Platformer Tutorial Part 6 - Godot

This is the sixth part of the tutorial creating platformer game on Godot Engine. In this tutorial I will explain using parallax background node and make level bounds.

1. Part 1 : Preparation
2. Part 2 : Player Creation
3. Part 3 : Player Creation 2
4. Part 4 : Tilemap and Camera
5. Part 5 : Player Animation
6. Part 6 : Parallax Background and Level Bounds
7. Part 7 : Character Controller and Enemy

Parallax Background

Godot provides Parallax Background node, we don’t need to code our background because what we need is already in Parallax Background node. Create a new Parallax Background node inside our root node. Inside ParallaxBackground node, create a new ParallaxLayer node and inside ParallaxLayer node, create a new Sprite node. So this is how it looks like.

Setup Sprite

This time, our sprite configuration is a little bit different. Load our texture as we used to be. After that, disable the Centered option, this makes our sprite start from top left, this is IMPORTANT for making parallax. Next activate the Region and set the Region Rect into (0, 176, 160, 128). As you can see, we using Region Rect instead of VFrames and HFrames. Region Rect cut our sprite directly from a specific point.

Setup Parallax Layer

Select the ParallaxLayer node and setup the Motion. Set the Scale value to (0.5, 0.2), you can play this value. Set the Mirroring to (160,0).

Our Parallax Background ready! Just give it a try..

Level Bounds

Level bounds have 4 points, left, top, right, bottom. The function is creating bounds for the level. The camera will only render inside the bounds. Also, player can’t move outside of the level bounds.

Restrict Camera Render Only Inside Level Bounds

Create Node2D inside the root node, rename it as “Bounds”. Change the Bounds scale according to how large our level world.

Create a script level_bounds.gd and attach it into Bounds. Then write the code

1
2
3
4
5
6
7
8
9
10
11
12
13

extends Node2D
func get_left():
	return get_pos().x - get_scale().x * 32
func get_right():
	return get_pos().x + get_scale().x * 32
func get_top():
	return get_pos().y - get_scale().y * 32
func get_bottom():
	return get_pos().y + get_scale().y * 32

The script only contains method to get each edge position. Next, open camera.gd and add this code

1
2
3
4
5
6
7
8
9
10

#other code
func _ready():
	OS.set_window_size(OS.get_window_size() * 4)
	set_limit(0, bounds.get_left())
	set_limit(1, bounds.get_top())
	set_limit(2, bounds.get_right())
	set_limit(3, bounds.get_bottom())
	#other code

The script will restrict the camera movement to only render inside the level bounds. So make sure your level bounds is bigger than camera render area.

Restrict Player Movement

Now, restrict the player movement, but we only using left, right, and top. Basically, when player falling down will die right? so we don’t need to restrict the bottom side. Open the level_bounds.gd and add this variable

1
2
3
4
5
6
7

extends Node2D
export var left_stop = true
export var right_stop = true
export var top_stop = true
#other code

True means stopping the player movement, and false means let the player passing. Next, modify our player.gd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#other code
func _fixed_process(delta):
	#other code
	# set the velocity = movement
	velocity = movement
	if get_center_pos().x - get_node("CollisionShape2D").get_shape().get_extents().x + velocity.x < bounds.get_left() and bounds.left_stop:
		velocity.x = bounds.get_left()-get_center_pos().x + get_node("CollisionShape2D").get_shape().get_extents().x
	elif get_center_pos().x + get_node("CollisionShape2D").get_shape().get_extents().x + velocity.x > bounds.get_right() and bounds.right_stop:
		velocity.x = bounds.get_right()-get_center_pos().x - get_node("CollisionShape2D").get_shape().get_extents().x
	if get_center_pos().y - get_node("CollisionShape2D").get_shape().get_extents().y + velocity.y < bounds.get_top() and bounds.top_stop:
		velocity.y = bounds.get_top() - get_center_pos().y+ get_node("CollisionShape2D").get_shape().get_extents().x
	# apply the movement by calling move(velocity) and store the remaining movement
	var remaining_movement = move(velocity)
	#other code

The result will be like this

Next tutorial will be about enemy, so there will be explanation about Character Controller and Enemy

Download Project Here