EditorNode3DGizmoPlugin in Godot – Complete Guide

Welcome to the fascinating world of Godot 4, a world where your creativity is the limit for game development. If you’ve ever wanted to push your Godot skills further, customizing your 3D editor’s gizmos is an invaluable skill that can enhance your workflow and refine control over your game’s components. In this tutorial, we dive into the EditorNode3DGizmoPlugin class, a powerful feature in Godot 4 that allows you to create your own types of gizmos, enhancing your 3D scene editing capabilities. Whether you’re a budding game developer or a seasoned coder, understanding gizmos can significantly empower your design process.

What is EditorNode3DGizmoPlugin?

The EditorNode3DGizmoPlugin class is a toolkit within the Godot 4 engine that enables developers to define custom gizmos for 3D nodes in the editor. Gizmos are the interactive tools you see in the scene editor, like position arrows or rotation handles, that help you intuitively manipulate scene elements.

What is it used for?

This class is used to extend the default set of tools in Godot’s 3D editor by allowing for the creation of sophisticated custom gizmos. This means you can create user-friendly interfaces for editing complex node properties directly within the 3D viewport, which can save time and streamline the development process.

Why should I learn it?

Understanding how to utilize the EditorNode3DGizmoPlugin class can be a game changer in your developmental flow because:

– It allows for high levels of customization tailored to your specific game development needs.
– It enables more visual, intuitive interaction with your game’s objects and their properties.
– Learning to create custom gizmos can significantly reduce the time spent on repetitive tasks, allowing you to focus on the more creative aspects of game development.
– It helps to build a foundational knowledge that can be beneficial when tackling more complex tasks in engine customization and tool creation.

Equipped with this new skill, you’ll be able to bring your creative visions to life with greater efficiency and precision. So, let’s get underway and unlock the full potential of your game editing experience with EditorNode3DGizmoPlugin in Godot 4!

CTA Small Image
FREE COURSES AT ZENVA
LEARN GAME DEVELOPMENT, PYTHON AND MORE
ACCESS FOR FREE
AVAILABLE FOR A LIMITED TIME ONLY

Creating the EditorNode3DGizmoPlugin Class

To begin using custom gizmos in Godot 4, you need to start by creating a new class that extends `EditorNode3DGizmoPlugin`. This will serve as the foundation upon which you’ll build your gizmo functionality.

extends EditorNode3DGizmoPlugin

# Put custom class code here

In this class, you can override various methods that control the gizmo’s behavior. One of the first methods to override is the `has_gizmo(Node)` method, which checks whether a given Node should have the custom gizmo attached.

func has_gizmo(node: Node) -> bool:
    return node is YourCustomNode

Configuring the Gizmo

Next, you’ll want to configure your gizmo’s appearance using methods `configure_gizmo(Node)` and `redraw_gizmo(Node)`.

func configure_gizmo(node: Node):
    add_lines(my_lines, my_material)
    add_handles(my_handles, false)

func redraw_gizmo(node: Node):
    clear()
    configure_gizmo(node)

In `configure_gizmo`, you are able to specify lines and handles using arrays of Vector3s. `clear` is used in `redraw_gizmo` to reset the gizmo’s drawn elements before re-configuring.

Handling Gizmo Interaction

Interacting with your gizmo is managed by overriding methods such as `commit_handle(Node, int, Variant, Vector3, bool)`, which is called when the user releases a handle after dragging, allowing for properties of the Node to be updated.

func commit_handle(node: Node, index: int, restore: Variant, cancel: bool):
    if cancel:
        node.set_some_property(restore)
    else:
        node.set_some_property(get_handle_position(index))

The `restore` parameter permits the resetting of the Node’s property to its state before the drag, if the action is canceled.

Gizmo Interaction Feedback

Providing feedback during interaction can be done in the `is_handle_highlighted(Node, int)` method. This method helps to highlight the handle when selected or hovered.

func is_handle_highlighted(node: Node, index: int) -> bool:
    return index == get_selected_handle()

Stay tuned, as in the upcoming section, we will delve into setting up custom materials and handles in your gizmos, which will provide visually appealing and intuitive feedback to the developers working with them. Understanding these functions and methods is just the beginning of mastering custom gizmos in Godot 4, so be sure to practice and experiment with these examples to get a firm grasp on how to elevate your game development workflow.Continuing our deep dive into custom gizmos, we’ll explore how to further customize their appearance and behavior using materials and interaction logic.

Custom Materials and Visual Feedback

In Godot 4, you can create custom materials for your gizmos to provide visual feedback. This is crucial for differentiating between various states, such as when a handle is selected. The following example demonstrates how to create a simple unshaded material for use in your gizmo:

var unshaded_material = create_handle_material("MyUnshadedMaterial")
unshaded_material.albedo_color = Color(1, 0, 0) # Red color

This material can then be used to add custom lines or handles to your gizmo with the `add_lines` and `add_handles` methods:

func configure_gizmo(node: Node):
    var my_lines = PoolVector3Array([Vector3(0, 0, 0), Vector3(1, 0, 0)]) # Line from origin to x-axis
    add_lines(my_lines, unshaded_material)

Similarly, if you want your handles to change color when selected or hovered, you can create a highlight material:

var highlight_material = create_handle_material("MyHighlightMaterial")
highlight_material.albedo_color = Color(0, 1, 0) # Green color

And make use of it when checking if a handle is highlighted:

func is_handle_highlighted(node: Node, index: int) -> bool:
    if index == get_selected_handle():
        set_handle_material(index, highlight_material)
        return true
    else:
        set_handle_material(index, unshaded_material)
        return false

Interacting with Gizmo Handles

When you want to interact with handles, you need to implement the `get_handle_name(Node, int)` function to provide a name for each handle. This name can appear as a tooltip in the editor, helping users understand what part of the node they are manipulating:

func get_handle_name(node: Node, index: int) -> String:
    match index:
        0:
            return "Drag to adjust size"
        1:
            return "Drag to rotate"
        ...

For more intricate control over the drag behaviors, you can override `get_handle_value(Node, int)` to determine the initial value that `commit_handle` will restore to if the action is canceled:

func get_handle_value(node: Node, index: int) -> Variant:
    match index:
        0:
            return node.size
        1:
            return node.rotation_degrees
        ...

Advanced Gizmo Behavior

For more advanced gizmo behaviors, you might want to handle the input events directly. Override `forward_spatial_gui_input(Camera, InputEvent)` to implement custom input handling:

func forward_spatial_gui_input(camera: Camera, event: InputEvent) -> bool:
    if event is InputEventMouseButton and event.button_index == BUTTON_LEFT and event.pressed:
        # Handle click
        return true # Return true to consume the input event
    elif event is InputEventMouseMotion:
        # Handle mouse movement
    return false # Don't consume the input event

Using the `forward_spatial_gui_input` method allows you to flexibly respond to a wide range of input events, providing precise control over how users interact with your custom gizmos.

Keep in mind that the power of Godot’s EditorNode3DGizmoPlugin lies in its flexibility. With the ability to create virtually any kind of gizmo, your only limit is your imagination. Practice with the provided code examples, and start experimenting to enhance your Godot 4 editor with tailored tools that streamline your workflow and make the game development process feel even more intuitive.In the world of 3D editing, visual cues are paramount. Continuing from where we left off, let’s delve into how to create visual aids for your custom gizmos that improve the user’s spatial understanding and control over the game objects.

Custom gizmos can help indicate a node’s orientation, scale, and position within the 3D space using various visualization techniques such as drawing lines, circles, and shapes to represent different manipulations possible on the node.

Drawing Custom Shapes

For instance, to help visualize an object’s rotation point, you might draw a circle around it. You can achieve this with the `add_unscaled_billboard` method and by creating a cylindrical mesh for the representation:

func configure_gizmo(node: Node):
    var circle_mesh = CylinderMesh.new()
    circle_mesh.height = 0.02
    circle_mesh.top_radius = node.rotation_point
    circle_mesh.bottom_radius = node.rotation_point
    circle_mesh.radial_segments = 32
    add_unscaled_billboard(circle_mesh, 0.2, true)

In this example, the rotation point is visually represented by a flat cylinder (circle) placed at the object’s center of rotation. This can make it easier for developers to understand the rotational behavior at a glance.

Gizmo Handles for Transform Manipulation

When adding handles for transform manipulation, such as scaling or rotating an object, you might want to provide visual indicators representing each axis. Here is an example of how to create such handles with different colors for each axis:

func configure_gizmo(node: Node):
    var x_handle = MeshInstance.create()
    x_handle.mesh = some_arrow_mesh
    x_handle.material_override = create_handle_material("XHandleMaterial", Color(1, 0, 0))
    
    var y_handle = MeshInstance.create()
    y_handle.mesh = some_arrow_mesh
    y_handle.material_override = create_handle_material("YHandleMaterial", Color(0, 1, 0))
    
    var z_handle = MeshInstance.create()
    z_handle.mesh = some_arrow_mesh
    z_handle.material_override = create_handle_material("ZHandleMaterial", Color(0, 0, 1))
    
    add_handle(x_handle, TRANSFORM_GIZMO_VIEW_AXIS_X)
    add_handle(y_handle, TRANSFORM_GIZMO_VIEW_AXIS_Y)
    add_handle(z_handle, TRANSFORM_GIZMO_VIEW_AXIS_Z)

With each handle having its own color, users can easily identify which axis they are about to manipulate. This reduces the cognitive load and helps prevent mistakes during scene editing.

Customizing Handle Interaction Logic

Once you’ve added handles, it’s also important to define how each handle affects the node. This is done in the `commit_handle` method:

func commit_handle(node: Node, index: int, restore: Variant, cancel: bool):
    var handle_position = get_handle_position(index)
    if cancel:
        node.transform = restore
    else:
        match index:
            0: # X-axis handle
                node.transform.origin.x = handle_position.x
            1: # Y-axis handle
                node.transform.origin.y = handle_position.y
            2: # Z-axis handle
                node.transform.origin.z = handle_position.z

This code modifies only the relevant component of the transform when a specific handle is moved, allowing for precise control over translation along each axis.

Providing Real-time Feedback

Providing real-time feedback is crucial when editing 3D scenes. Implementing `update_gizmo_property` allows for on-the-fly updates to your custom properties directly in the viewport:

func update_gizmo_property(node: Node, index: int, value: Variant):
    match index:
        0: # Update size
            node.size = value
        1: # Update rotation
            node.rotation_degrees = value

Thanks to the dynamic nature of these methods, your gizmos will reflect changes instantly, making the editing process more interactive and responsive.

In creating custom gizmos for Godot 4, experimentation is key. The code snippets provided are a springboard for your ideas. Play around with different configurations and behaviors to find what fits your needs best. Personalizing your 3D editor not only enhances your workflow but can also lead to unique development experiences tailored to your project’s requirements.

Continuing Your Game Development Journey

Now that you’ve ventured into the realm of creating custom gizmos in Godot 4, you’re on a path to mastering one of the most versatile game engines available. To continue expanding your knowledge and to truly elevate your game development skills, we at Zenva encourage you to explore our Godot Game Development Mini-Degree. This program covers a wide range of topics that will solidify your foundation in game creation, from mastering the GDScript language to developing various game genres with both 2D and 3D assets.

The journey doesn’t stop there. For those eager to delve deeper into everything Godot has to offer, we provide a broad collection of Godot courses that you can find here. These courses are designed to accommodate your pace of learning and help you build a diverse portfolio of projects. By embracing this opportunity, you can leap towards becoming a versatile game developer, ready to turn visionary concepts into playable realities. Remember, with Godot’s thriving community and Zenva’s high-quality course content, you can go from beginner to professional, all at your own pace. Happy developing!

Conclusion

Diving into the creation of custom gizmos is just the beginning of unleashing the full potential of Godot 4 to personalize and streamline your game development workflow. The tools and skills you acquire through this process are invaluable, enabling you to tailor the game development experience to fit your unique creative vision. By leveraging the power of EditorNode3DGizmoPlugin, you’re preparing yourself to tackle even the most challenging projects with ease and confidence.

Whether you’re looking to refine your existing expertise or start building it from the ground up, our Godot Game Development Mini-Degree is the perfect next step on your path to becoming a top-tier game developer. Continue exploring, creating, and innovating with Godot, and let us at Zenva help guide you through every step of your game development journey. Remember, the only limit is your imagination. So keep pushing the boundaries, and we can’t wait to see what incredible games you’ll bring to life next!

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.