How to create a camera system for 2D games in Godot

A well-designed camera system can appeal to players and give them a better perspective. Creating a camera system in Godot  is simple but effective. Here are detailed instructions.

How to create a camera system for 2D games in Godot Picture 1How to create a camera system for 2D games in Godot Picture 1

Create a simple game

Before you begin, you need to create a 2D game world and a character in the Godot Game Engine that the camera can track.

Create a new 2D scene and add a CharacterBody2D node . It will act as the player character. Inside the CharacterBody2D , add a CollisionShape2D and set its shape to RectangleShape2D to provide the player's physical presence in this world.

Also, inside CharacterBody2D, add a Sprite2D node and attach the player character image to it. Create a new script attached to the CharacterBody2D node and add the following code:

extends CharacterBody2D var speed = 200 func _physics_process(delta): var velocity = Vector2() if Input.is_action_pressed('ui_right'): velocity.x += 1 if Input.is_action_pressed('ui_left'): velocity.x -= 1 if Input.is_action_pressed('ui_down'): velocity.y += 1 if Input.is_action_pressed('ui_up'): velocity.y -= 1 velocity = velocity.normalized() * speed move_and_collide(velocity * delta)

 

With this code, the player character can now move in all 4 directions and will collide with platforms.

How to create a camera system for 2D games in Godot Picture 2How to create a camera system for 2D games in Godot Picture 2

Deployment of surveillance camera system

The next step is to create a camera that tracks the player's movements. Add the Camera2D node as a child of the CharacterBody2D node . This ensures the camera will always keep an eye on the player. To make the motion smoother, enable the position smoothing property of the Camera2D node .

$Camera2D.enabled = true $Camera2D.position_smoothing_enabled = true

Deploy the range and limit the camera

It is often important to limit the player's view of the game area. However, if this is not handled properly, the camera can open up areas that are beyond the scope of the game. These may include gaps or unfinished areas.

Godot provides an easy way to set camera limits and restrict its movement within the play area.

In the Camera2D node property , you have four variables: limit_left , limit_top , limit_right , and limit_bottom . They determine the boundaries of the camera. You can set these values ​​according to the game world size.

$Camera2D.limit_left = 0 $Camera2D.limit_top = 0 $Camera2D.limit_right = your_game_area_width $Camera2D.limit_bottom = your_game_area_height

Replace y our_game_area_width and your_game_area_height with the width & height of the game world. This script effectively confines the camera to the desired area, providing clear and focused gameplay.

 

Handling camera scale and zoom

The zoom in and out feature can be instrumental in creating dramatic moments in the game. For example, you might want to zoom in on the player character during a powerful action or zoom out to show large enemies or view the entire game world.

How to create a camera system for 2D games in Godot Picture 3How to create a camera system for 2D games in Godot Picture 3

Godot makes zooming and zooming easy with the Camera2D node's zoom property . This property is Vector2, default zoom level is (1,1). Higher values ​​will shrink, making viewed objects appear smaller, and lower values ​​will zoom in, making objects appear larger.

To zoom in, use:

$Camera2D.zoom = Vector2(0.7, 0.7)

To reset the zoom mode, use:

$Camera2D.zoom = Vector2(1, 1)

The value you pass to Vector2() determines the zoom level on the X and Y axes. A zoom value (0.7, 0.7) means the camera will zoom in, and (1.5, 1.5) means the camera will zoom out.

How to create a camera system for 2D games in Godot Picture 4How to create a camera system for 2D games in Godot Picture 4

You should keep the same value for both axes to maintain aspect ratio, but you can experiment with other values ​​to achieve unique effects.

Hope the article is useful to you!

4 ★ | 2 Vote