CameraContainer2D

Created by Israel Ruiz on 14 Feb 2021




This custom node is a container for Camera2D. It enhances the Camera2Ds usability and makes it fully feature-complete for most 2D games. The Project files including the icon are here!

Introduction

The Godot Camera2D is great as is but it is missing some functionality most games require. But rather than throwing out the Camera2D, we’ll be extending its functionality with a custom class called CameraContainer2D. One of the major problems the Camera2D is that it needs to be underneath the node it’s following. There are several problems with this approach.

  1. If the player node is deleted the camera can't slowly fade to black. Instead, it goes to black immediately.
  2. Animating the camera on the fly is a huge pain.
  3. What if we want the Camera to switch to following a different character like in the Lego games?
  4. etc...


Another missing feature is the ability for multi target tracking like in SpeedRunners. And finally, the most important feature, camera shake. This is a lot to cover so let’s start with something simple by creating the CameraContainer2D node. We’ll be adding functionality as we go. Creating The CameraContainer2D Node Creating The CameraContainer2D Node



Creating Base Node

Like I stated previously if we set the camera as a child of the player bad things can happen and we lose flexibility. To solve this we’ll put the Camera2D underneath CameraContainer2D then set the CameraContainer2D’s position to that of the Player.
Add your player in the scene then add a Node2D and rename it to CameraContainer2D. Our Scene will look like this.

- MainScene
-- Player
-- CameraContainer2D

Don’t add the Camer2D just yet. Instead, just attach a script to the CameraContainer2D.

In Godot, Nodes are put into categories. These categories are called classes. There’s the Node2D class, the Spatial class and there is even a BaseButton class. We can add nodes that are in these different classes using the “Create New Node” Tab.

To make CameraContainer2D into a custom class add the class_name tag at the top of the script. I highly recommend giving the CameraContainer2D a custom icon. You can do that like this class_name CameraContainer2D, ‘res://CameraContainer2D.svg’ I’m using a vector file but you can also use a PNG. You can download and use this icon I made in Inkscape.

One last thing we need before we add all those awesome features. We know we’ll need a camera underneath the CameraContainer2D node. So how do we communicate this to the user? Do you know those warning triangles that appear next to nodes that need other nodes such as Area2D? We’ll add this by using the tool keyword and the _get_configuration_warning() function.

The tool keyword allows us to run code in the editor and the _get_configuration_warning() adds the triangle to the node. Inside _get_configuration_warning() if we return a string that contains text it adds that warning triangle to the node. If the string returns empty nothing happens.

extends Node2D
class_name CameraContainer2D, 'res://CameraContainer2D.svg'
tool

func _get_configuration_warning():
	if not self.has_node('Camera2D'):
		return 'Please add a Camera2D'
	return ''

Just a couple of things I need to point out. Firstly we see in update_configuration_warning() we check if we have a node named ‘Camera2D’. If it’s false that we have a node name that then we return a warning message. If we don’t then we return nothing.

Finally, there is a small bug in Godot that needs addressing. The custom icon won’t appear until you re-open the project. So save everything and re-open the project. Now everything should work swimmingly.

Following The Player

Ok now for the good stuff. We want to be able to set a target

Thanks for reading! If you enjoyed this tutorial and want to help me make more you can buy “Shadows’ Glitchy Adventure” on Itch.io or donate me a coffee. Thank you! Here’s to more tutorials! 🍻