Interactive Notes & Diaries in Godot 4 (Step-By-Step Tutorial)

Introduction

In this tutorial, you will learn how to create interactive notes and diaries in Godot 4, ideal for developing immersive horror FPS games. This guide is perfect for beginners and indie developers looking to implement engaging note mechanics similar to those found in games like Amnesia or Slenderman.

Step 1: Designing the Note in an Image Editor

• Open an image editing software (e.g., GIMP, Photoshop).
• Create a new document with appropriate dimensions for your note (e.g., 512x512 pixels).
• Design the note background:
  • Use textures that evoke a horror atmosphere (e.g., old paper).
  • Optionally, add some handwritten text or graphics.
• Save the image in a compatible format (PNG is recommended).

Step 2: Import Notes into Godot

• Open your Godot project.
• Navigate to the FileSystem panel.
• Drag and drop the note image into the desired folder within your project.
• Ensure the image is imported correctly by checking its properties.

Step 3: Create Note Objects

• In the Scene panel, create a new Node and name it "Note."
• Add a Sprite node as a child of the Note node.
• Assign the imported note image to the Sprite.
• Adjust the Sprite size and position as needed.

Step 4: Pickup Note Functionality

• Add a CollisionShape2D node to your Note node.
• Define the collision shape to match the note's size.
• Create a script for the Note node to handle pickups:
  • Use the _on_body_entered function to detect when the player interacts with the note.
  • Implement logic to display the note content on pickup.

Step 5: Advanced Note Setup

• Create a SubViewport to address note clipping issues when displaying.
• Add a ViewportContainer to your scene and place the SubViewport inside it.
• In the SubViewport, set the size and ensure it matches your note dimensions.

Step 6: Integrate Note into Player's Hand

• Create a node hierarchy for the player's hand.
• Add a script to the player that allows the note to be positioned in the player's hand upon pickup.
• Use the following code snippet to set the note's position:

  note_node.position = player_hand.position
  

Step 7: Remove Note from Player's Hand

• Implement logic to allow the player to drop the note.
• Use an input event to trigger the removal of the note from the hand.
• Ensure that the note is re-added to the game world when dropped.

Step 8: Note Tilt and Sway Effects

• To create a realistic look while holding the note, add tilt and sway effects.
• Implement a script that modifies the note's rotation and position using sine and cosine functions for oscillation.

Step 9: Note Content GUI Overlay

• Create a GUI overlay to display the content of the note.
• Use a Control node for the overlay and add a Label to show the note text.
• Ensure the overlay appears when the note is picked up.

Conclusion

In this tutorial, you learned how to design, import, and implement interactive notes in Godot 4, complete with pickup mechanics and content display. To further enhance your game, consider exploring additional features such as animations and sound effects. For more resources, don't forget to check the GitHub page linked above for sample projects and scripts. Happy developing!