EditorInspector in Godot – Complete Guide

Creating immersive worlds and intuitive gameplay mechanics in Godot 4 often comes down to how well you can manipulate the properties of various objects in your game. A pivotal tool at your disposal when tweaking these dials and switches is the “EditorInspector” class, which helps developers quickly edit object properties within the Editor’s interface.

What is EditorInspector?

Understanding the EditorInspector Class

The EditorInspector is a powerful UI element within Godot 4’s integrated development environment (IDE). As a direct descendant in the object hierarchy from ScrollContainer to Object, it functions as a highly customizable control for editing properties on any object in your game.

What is it for?

The primary role of EditorInspector is to facilitate the editing of object properties similarly to how one interacts with the Inspector panel in Godot. Whether dealing with project settings or tweaking variables for gameplay elements, the EditorInspector brings an organized and distinguishable interface to the table.

Why Should I Learn it?

By mastering the EditorInspector, you’ll gain deep insight into how Godot’s node properties work and improve the efficiency of your development workflow. Understanding the intricacies of property editing, grouping, and signal emission are crucial steps for any budding game developer looking to bring their visions to life with Godot.

Now, let’s get our hands dirty by diving into the practical use of the EditorInspector with some coding examples in the following sections.

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

Initializing the EditorInspector

Before diving into specific examples, let’s start by initializing and understanding how to add an EditorInspector to your custom tool or plugin. This step is foundational for any developer wanting to extend Godot’s Editor.

tool
extends EditorPlugin

var inspector : EditorInspector

func _enter_tree():
    inspector = EditorInspector.new()
    add_control_to_container(CONTAINER_PROPERTY_EDITOR_BOTTOM, inspector)
    inspector.connect("object_id_selected", self, "_on_object_id_selected")

This script snippet should be put inside a script for an EditorPlugin. During the plugin start-up process, a new instance of EditorInspector is created, and then it’s added to the Editor using the add_control_to_container() function.

Customizing Property Editing

Customizing how properties are edited in the EditorInspector can be essential for your development process. Below are examples of how to create a custom property editor that will be used instead of the default one when modifying a property.

func _edit(resource):
    inspector.edit(resource)

func _plugin_enabled(enable):
    if enable:
        EditorInspectorPlugin.add_custom_property_editor("MyPropertyType", self)
    else:
        EditorInspectorPlugin.remove_custom_property_editor("MyPropertyType", self)

func can_handle(object):
    return object is MyPropertyType

func parse_property(object, type, path, hint, hint_text, usage):
    # Custom parsing logic here
    pass

When a resource of type MyPropertyType is edited, this custom editor will be invoked. This allows you to define specific editors for specific types of properties, giving you a high level of control over the user interface and interaction within the Editor.

Adding Editor Property Hints

Property hints can be added to assist the user by providing additional context or constraints for a given property. Below, we are defining a range hint for a numeric property.

func _get_property_list():
    var properties = []
    properties.push_back({
        name = "MyProperty",
        type = TYPE_REAL,
        hint = PROPERTY_HINT_RANGE,
        hint_string = "0,100,0.01",
        usage = PROPERTY_USAGE_DEFAULT
    })
    return properties

By implementing the _get_property_list() method, we can specify that “MyProperty” is a floating-point number, whose value should be between 0 and 100, and should increment in steps of 0.01.

Reacting to Property Changes

When properties change within the EditorInspector, your tools or scripts may need to react accordingly. Signals can be used to handle these changes.

inspector.connect("property_edited", self, "_on_property_edited")

func _on_property_edited(property):
    print("Property edited: " + property)

Here, when any property is edited within our inspector instance, the _on_property_edited() method will print the name of the modified property. This can be useful, for instance, when you want to update other parts of your plugin or apply changes to the edited object in real time.

These examples have set a solid foundation for working with EditorInspector in Godot 4. In the following parts, we’ll continue to build on this knowledge, showing how to tailor the EditorInspector for more advanced scenarios, further enhancing your development process in Godot 4.Continuing our journey with the EditorInspector, below are additional examples demonstrating how to leverage this powerful tool. We will delve into more customized actions, tight control over the GUI elements, and how to bring interactivity into these editor properties.

Customizing Property Appearance

To influence how properties appear in the inspector, we can use a range of GUI controls (such as sliders, checks, and dropdowns) through scripting. Here are some code snippets illustrating various customization techniques:

Creating a Custom Category and Property

To make your inspector more organized, you might want to create a custom category for your class-specific properties.

func _get_property_list():
    var property_list = []
    
    property_list.push_back({
        name = "Custom Category/My String",
        type = TYPE_STRING,
        usage = PROPERTY_USAGE_DEFAULT,
        hint_string = ""
    })
    
    return property_list

This code creates a new category in the inspector named “Custom Category” with a property “My String”. When the user clicks on it, they’ll see a textbox where they can input a string value.

Using Sliders for Numeric Properties

func _get_property_info(name):
    if name == "My Range":
        return {
            hint: PROPERTY_HINT_RANGE,
            hint_string: "0,100,0.1",
            usage: PROPERTY_USAGE_DEFAULT
        }

For numeric properties such as floats or integers, sliders provide an easy and intuitive way to set values within a range. The above snippet ensures that a property named “My Range” displays as a slider controlling numbers from 0 to 100 with 0.1 steps.

Implementing Enums as Dropdown Menus

enum MyEnum {
    OptionA,
    OptionB,
    OptionC
}

func _get_property_list():
    var property_list = []
    
    property_list.push_back({
        name = "My Enum Property",
        type = TYPE_INT,
        hint = PROPERTY_HINT_ENUM,
        hint_string = "OptionA,OptionB,OptionC",
        usage = PROPERTY_USAGE_DEFAULT,
        default_value = MyEnum.OptionA
    })
    
    return property_list

When working with enumerable types, presenting them as dropdown menus in the inspector can make your tool more user-friendly. This code creates a dropdown list where users can choose between “OptionA”, “OptionB”, and “OptionC”.

Handling Property Edits Interactively

Sometimes, we want to provide immediate feedback or perform an action when a property is edited. The following examples show how to react to those changes interactively.

Responding to Color Changes

In this example, if there is a color property that, when changed, should update a model’s material in real-time:

inspector.connect("property_changed", self, "_on_property_changed")

func _on_property_changed(property, value):
    if property == "Model Material/Color":
        my_model.material_override.set_shader_param("albedo_color", value)

As soon as you pick a new color in the inspector, this script updates the “albedo_color” parameter of the model’s material.

Validating Property Changes

For validation purposes, properties can be monitored to ensure they fall within certain parameters before being committed.

inspector.connect("property_changed", self, "_on_property_changed")

func _on_property_changed(property, value):
    if property == "Physics/Mass" and value < 1.0:
        EditorInterface.get_singleton().show_warning("Mass cannot be less than 1.0", "Invalid Property")
        # Then revert the change or set a default value
        inspector.set_property(property, 1.0)

This snippet listens for changes to a “Mass” property. If a value below 1.0 is detected, it issues a warning and sets the mass back to 1.0, preventing the change.

With these examples, you’ve now witnessed the sheer adaptability of the EditorInspector. Leveraging these capabilities can transform the Godot Editor into a potent ally for precise, swift, and contextually aware tweaking of your game’s or engine’s internals. The strength of Godot lies not just in its user-friendly design but also in the powerful, scriptable interfaces such as EditorInspector that give you unparalleled control over your game’s editing environment.Expanding on the versatility of the EditorInspector, let’s explore how you can integrate additional interactivity into your custom editors and streamline the editing process for various property types.

Interactive Editor Enhancements

Providing instant feedback and convenient tools within your custom editor can elevate the development experience. Here’s how you can add such enhancements to the EditorInspector:

Creating Buttons for Actions

Sometimes, you may want to trigger an action directly from the inspector. Buttons are a great way to execute such commands.

func _get_property_list():
    var property_list = [{
        type = TYPE_NIL,
        name = "MyAction",
        usage = PROPERTY_USAGE_EDITOR | PROPERTY_USAGE_SCRIPT_VARIABLE
    }]
    return property_list

func _property_editor_create_for_type(type, hint_string):
    if type == TYPE_NIL and hint_string == "MyAction":
        var button = Button.new()
        button.text = "Perform Action"
        button.connect("pressed", self, "_on_my_action_pressed")
        return button

func _on_my_action_pressed():
    print("Action button was pressed in the inspector.")

Adding a button for “MyAction” allows developers to perform a specific action, like generating procedural content or validating settings, with a single click.

Editing Dictionary Properties

Dictating dictionaries in the inspector can be tedious, so setting up a custom editor helps you visualize and manage key-value pairs effectively.

func _get_property_list():
    var property_list = [{
        name = "My Dictionary",
        type = TYPE_DICTIONARY,
        usage = PROPERTY_USAGE_DEFAULT
    }]
    return property_list

Once you specify a property as a dictionary, you can manipulate it using Godot’s built-in dictionary editor, or even create your own for more nuanced interaction.

Integrating Checkboxes for Boolean Variables

To toggle boolean properties, checkboxes provide a clear and simple interface.

func _get_property_list():
    var property_list = [{
        name = "My Boolean",
        type = TYPE_BOOL,
        usage = PROPERTY_USAGE_DEFAULT
    }]
    return property_list

By declaring a property of type `TYPE_BOOL`, Godot’s inspector automatically provides a checkbox for it.

Linking Resource Selections

The process of assigning resources to script variables can be streamlined with a custom resource selector.

func _get_property_list():
    var property_list = [{
        name = "MyTexture",
        type = TYPE_OBJECT,
        hint = PROPERTY_HINT_RESOURCE_TYPE,
        hint_string = "Texture",
        usage = PROPERTY_USAGE_DEFAULT
    }]
    return property_list

For properties expecting a resource, specifying the resource type, such as “Texture” in the example, helps the inspector provide an appropriate resource picker dialog.

Adding Custom Tooltips

To provide additional information about a property, custom tooltips can be invaluable.

func _get_property_list():
    var property_list = [{
        name = "My Numeric Property",
        type = TYPE_INT,
        hint = PROPERTY_HINT_RANGE,
        hint_string = "0,100,1",
        usage = PROPERTY_USAGE_DEFAULT
    }]
    
    # We use `set_tooltip` for properties where we want a custom message
    inspector.set_tooltip("My Numeric Property", "This property controls the number of spawns.")
    return property_list

By specifying tooltips, you’re giving users extra guidance on what a property does or how it should be used within the context of the tool or game.

Implementing Custom Validators

To ensure that data entered into the inspector remains valid, we can implement custom validation.

inspector.connect("property_changed", self, "_validate_property")

func _validate_property(property, value):
    if property == "My Integer Property":
        if value  100:
            inspector.restore_property(property)
            push_error("Value must be between 0 and 100.")

In this snippet, if the value for the “My Integer Property” is outside of the 0 to 100 range, it will be reverted and an error will be displayed.

These examples further illustrate the flexibility and power of using EditorInspector to create responsive and tailored property editing experiences. Integrating and customizing controls not only makes the editor UI intuitive but also ensures consistent and valid data for your game or tool settings. Whether you’re building complex editing tools or just seeking a user-friendly way to tweak properties on the fly, learning these techniques will bring additional robustness to your development workflow within the Godot environment.

Continue Your Game Development Journey

Now that you’ve started to unlock the potential of Godot 4’s EditorInspector, you might be wondering where to go from here. The world of game development is vast and constantly evolving, so continuing to expand your knowledge and skills is a lifelong journey.

At Zenva, we believe in supporting that journey every step of the way. Our Godot Game Development Mini-Degree is a perfect next step to deepen your expertise in Godot 4. This series of comprehensive courses covers everything from 2D and 3D game creation to advanced gameplay mechanics, all designed to help you build a portfolio of impressive Godot projects. Whether you’re a beginner or looking to polish your skills, you’ll find valuable resources to further your game development career.

If you’re eager to explore more specialized or varied content, be sure to check out our broader collection of Godot courses. Each course is crafted to offer flexible and engaging learning experiences, helping you advance from fundamentals to professional game developer status. Dive in now and continue crafting the virtual worlds that await your creative touch!

Conclusion

The journey through the capabilities of the EditorInspector in Godot 4 might seem intricate at first, but mastering this tool is a gateway to unlocking a more efficient and powerful game development workflow. With the skills you’ve gained, the creation of custom tools and the refinement of your game’s usability can now be done with confidence and precision. Remember, Godot’s strength lies in its flexibility and user-centric design, making it your ideal partner in game creation.

Don’t stop here! Continue to build upon what you’ve learned and further your development with Zenva’s Godot Game Development Mini-Degree. Embrace the full breadth of possibilities as you venture further into the realms of game development, with Zenva by your side every step of the way. Ready to take your skills to the next level? Join us now, and let’s create amazing game experiences together!

FREE COURSES
Python Blog Image

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