Godot 4 Interaction System for Object Interaction

steps

1. Create a folder structure: Add an interaction folder to your project, and inside it add an interaction_area subfolder.
2. Make the interaction area scene: In the interaction_area folder, create a new scene with an Area2D as its root node.
3. Configure collision settings: In the Inspector, expand the Collision section for your Area2D. Set the collision layer to nothing and the collision mask to player.
4. Match the player collision layer: Ensure your player scene's collision layer matches the collision mask set for the interaction area.

steps

1. Add a script to your interaction area scene. Use class_name to name it InteractionArea:

   Copy

   # interaction_area.gd
   extends Area2D
   class_name InteractionArea
   
   @export var action_name: String = "interact"
   var interact: Callable = func(): pass

2. Action name property: The exported action_name property will show as the prompt (for example, "talk", "toggle") above the object when the player is in range.

3. Callable interact method: The interact variable will hold the function to call for the object's interaction. Each object can assign its own custom method to this at runtime.

steps

1. Create the manager scene: Build a new scene with a Node2D as the root and name it InteractionManager.

2. Add a Label for the prompt: Add a Label as a child of the root node. Adjust its text to something like "E to interact" (the actual text will be set in code).

3. Position and style the label: Set the label's horizontal and vertical alignment to Center. Use an anchor preset of Center Top. Assign a font in the team overrides section, and set a high Z index (like 20) so it draws above the game world.

4. Create the manager script: Attach a script to the InteractionManager node to track the player, prompt text, active areas, and to handle sorting and displaying the prompt. Below is an example based directly on the walkthrough:

   Copy

   # interaction_manager.gd
   extends Node2D
   
   @onready var player = get_tree().get_first_node_in_group("player")
   @onready var label = $Label
   
   const BASE_TEXT = "E to "
   var active_areas: Array = []
   var can_interact: bool = true
   
   func register_area(area: InteractionArea):
       active_areas.push_back(area)
   
   func unregister_area(area: InteractionArea):
       var index := active_areas.find(area)
       if index != -1:
           active_areas.remove_at(index)
   
   func _process(_delta):
       if active_areas.size() > 0 and can_interact:
           active_areas.sort_custom(sort_by_distance_to_player)
           label.text = BASE_TEXT + active_areas[0].action_name
           label.global_position = active_areas[0].global_position
           label.global_position.y -= 36
           label.global_position.x -= label.size.x / 2
           label.show()
       else:
           label.hide()
   
   func sort_by_distance_to_player(a, b):
       var d1 = player.global_position.distance_to(a.global_position)
       var d2 = player.global_position.distance_to(b.global_position)
       return d1 < d2
   
   func _input(event):
       if event.is_action_pressed("interact") and can_interact:
           if active_areas.size() > 0:
               can_interact = false
               label.hide()
               await active_areas[0].interact.call()
               can_interact = true

steps

1. Open the Node tab for your InteractionArea node.

2. Connect signals for body_entered and body_exited.

3. Handle the signals in your script to inform the manager when the player enters or leaves the area:

   Copy

   # interaction_area.gd additions
   func _on_body_entered(body):
       if body.is_in_group("player"):
           InteractionManager.register_area(self)
   
   func _on_body_exited(body):
       if body.is_in_group("player"):
           InteractionManager.unregister_area(self)

   Make sure your player is in the "player" group so the check works.

4. Only remove present areas: Unregister an area only if it is actually present in the list (the unregister function checks for this).

steps

1. Add an input action: Open Project Settings and go to the Input Map tab. Create an action named interact and assign your preferred key (like E).
2. Autoload the interaction manager: In the project settings, add your InteractionManager scene to Autoload so it is available as a singleton.
3. Keep the manager global: With autoload, every scene and object can access the InteractionManager for registration and interaction control.

steps

1. Add the interaction area to your object: Attach the interaction area scene as a child to a game object such as an NPC or lamp.

2. Customize the action name: In the Inspector, set the action name to match the object's action (e.g., "talk" or "toggle").

3. Add a CollisionShape2D: Provide a collision shape to the interaction area to enable all collision and interaction logic and prevent warning icons in the editor.

4. Assign a callable for object behavior: In your NPC or interactable object's script, assign the interact variable of your InteractionArea to a callable that points to the method containing the object's specific interaction logic.

   For example, to start dialogue on an NPC:

   Copy

   # In NPC.gd script
   @onready var interaction_area = $InteractionArea
   
   func _ready():
       interaction_area.interact = Callable(self, "on_interact")
   
   async func on_interact():
       await $DialogManager.start_dialog()

   For a lamp that toggles on and off:

   Copy

   # In Lamp.gd script
   @onready var interaction_area = $InteractionArea
   
   func _ready():
       interaction_area.interact = Callable(self, "toggle_lamp")
   
   func toggle_lamp():
       # Toggle on/off logic
       $Sprite.visible = not $Sprite.visible