EditorInspectorPlugin in Godot – Complete Guide

Customizing the Godot editor’s inspector panel can open a whole new world of possibilities for developers looking to streamline their workflows or add unique functionality to their development process. In this article, we’re diving into the powerful world of the EditorInspectorPlugin in Godot 4, an integral feature for those who wish to personalize their property editors within the inspector.

What is an EditorInspectorPlugin?

The EditorInspectorPlugin is a class in Godot 4 specifically designed for developers to add custom property editors to the Godot Inspector. This powerful tool extends the functionality of the Godot editor and allows unique customization to suit individual project needs.

What is it For?

It is invaluable for creating a tailored development environment. Whether you’re looking to add property-specific constraints, tweaking the presentation of existing properties, or even injecting completely new types of data into the inspector, EditorInspectorPlugin offers a streamlined path to achieving these objectives. With this, you can ensure that the inspector meets the specific needs of your project or plugin.

Why Should I Learn It?

Understanding and utilizing EditorInspectorPlugin can significantly enhance the efficiency and clarity of your game development process. It allows for fine-tuned control over the editor property entries, making it an essential skill for professionals looking to develop plugins or customize their workflows in Godot. Moreover, it’s an excellent demonstration of Godot’s extensibility, showcasing how flexible and developer-friendly the engine is.

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

Creating a Custom Inspector Plugin

Let’s begin by setting up a basic structure for our EditorInspectorPlugin. We first need to create a new script that extends EditorInspectorPlugin:

extends EditorInspectorPlugin

Inside this script, we override the can_handle method to tell Godot which object types our plugin should be active for:

func can_handle(object):
    return object is MyCustomNode

Now, let’s define the parse_property method, which allows us to customize how properties are represented in the inspector:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "custom_property":
        # Create and add your custom control for 'custom_property' here
        var control = MyCustomControl.new()
        add_property_editor(path, control)
        return true
    return false

The above method checks if the property being parsed is the “custom_property” we want to customize, and if so, it creates an instance of MyCustomControl, which you would define according to your project’s needs.

Handling Property Updates

It is essential to manage updates to your property, so let’s look at how to feedback any changes to the property’s value:

class MyCustomControl extends Control:
    var object
    var property_path

    func _init(_object, _property_path):
        object = _object
        property_path = _property_path

    func _on_my_custom_control_changed(value):
        object.set(property_path, value)

This custom control has a specified change method _on_my_custom_control_changed that sets the new value of the property using the Godot set method.

Displaying Custom Controls

Once we have defined our custom control and how it interacts with the property, we need to add it to the inspector:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "custom_property":
        var control = MyCustomControl.new(object, path)
        add_property_editor(path, control)
        return true
    return false

In this snippet, we instantiate our custom control and add it using add_property_editor whenever the “custom_property” is encountered.

Updating the Inspector in Real-Time

Real-time updates are crucial for an intuitive UX. Godot’s inspector has a method called update_property which we can call to refresh the value of a property in the inspector:

func _on_my_custom_control_changed(value):
    object.set(property_path, value)
    update_property(property_path)

By calling update_property with the property path, we ensure that the inspector immediately reflects changes made by the user.

Moreover, It’s often useful to refresh the entire inspector:

func _refresh_editor():
    update_inspector()

This could be connected to a signal emitted when broader changes that affect multiple properties have been made.

With these foundations in place, you’re now equipped to create a more engaging and user-friendly editor experience by exposing custom controls for your properties in the Godot Inspector. Continue experimenting with different types of controls and ways to handle and update properties to match your unique needs!

Expanding upon the foundations we’ve set, let’s explore more aspects of customizing the inspector by using additional code examples.

Adding Tooltips and Metadata

Godot allows you to not only customize visual elements but also add helpful context. Let’s say you want editors to understand what a property does at a glance:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "custom_property":
        var control = MyCustomControl.new(object, path)
        control.set_tooltip("This is a custom property. Adjust it carefully!")
        add_property_editor(path, control)
        set_property_tooltip(path, "Custom property tooltip")
        return true
    return false

In this example, set_tooltip sets a tooltip for our custom control, while the method set_property_tooltip is used to associate a tooltip directly with the property within the inspector, providing additional information on hover.

Using Checkboxes

For boolean values, checkboxes are a more intuitive control than dropdowns or other elements:

func _create_checkbox_property_editor(object, property_path):
    var checkbox = CheckBox.new()
    checkbox.text = "Enabled"
    checkbox.pressed = object.get(property_path)
    checkbox.connect("toggled", self, "_on_checkbox_toggled", [object, property_path])
    add_property_editor(property_path, checkbox)

func _on_checkbox_toggled(value, object, property_path):
    object.set(property_path, value)
    update_property(property_path)

Here, CheckBox.new() is used to create a new CheckBox control, which is then initialized with the current property value and connected to a method that updates the property when toggled.

Using SpinBoxes for Numerical Data

To handle numerical input more precisely, a SpinBox widget is very useful:

func _create_spinbox_property_editor(object, property_path):
    var spinbox = SpinBox.new()
    var range = object.get(property_path + "_range")
    spinbox.set_min(range[0])
    spinbox.set_max(range[1])
    spinbox.set_step(range[2])
    spinbox.value = object.get(property_path)
    spinbox.connect("value_changed", self, "_on_spinbox_value_changed", [object, property_path])
    add_property_editor(property_path, spinbox)

func _on_spinbox_value_changed(value, object, property_path):
    object.set(property_path, value)
    update_property(property_path)

The SpinBox widget is customized with min, max, and step values, and responds to value changes by updating the property it is associated with.

Adding Custom Buttons for Actions

Sometimes a property is best manipulated through an action rather than direct input. Adding a custom button might be the best approach:

func _create_button_property_editor(object, property_path, button_text):
    var button = Button.new()
    button.text = button_text
    button.connect("pressed", self, "_on_custom_button_pressed", [object, property_path])
    add_property_editor(property_path, button)

func _on_custom_button_pressed(object, property_path):
    # Perform some action relevant to the custom property

Creating a button is straightforward with the Button.new() method. The button is then connected to a custom method that can handle whatever action should occur when pressed.

Godot’s EditorInspectorPlugin class opens up possibilities for creating an interface tailored to your specific needs. It’s a strong example of Godot’s commitment to both usability and customization, allowing developers to mold the tools to their workflow rather than the other way around. By leveraging these capabilities, you can create a much more intuitive and efficient environment for game development.

Remember to experiment with the different controls and properties Godot offers; the best way to learn is often by doing. Create custom inspectors that cater to your specific needs and streamline your productivity in the Godot engine.

Moving further into the versatility of the EditorInspectorPlugin, let’s explore how we can add more complex interactions and properties.

Implementing Enumerations with OptionButtons

When you have a property that can take on a specific range of values, OptionButtons provide a neat way to present those choices:

func _create_option_button_property_editor(object, property_path, options):
    var option_button = OptionButton.new()
    for i in range(options.size()):
        option_button.add_item(options[i], i)
    option_button.selected = object.get(property_path)
    option_button.connect("item_selected", self, "_on_option_selected", [object, property_path])
    add_property_editor(property_path, option_button)

func _on_option_selected(value, object, property_path):
    object.set(property_path, value)
    update_property(property_path)

Here, the add_item method populates the OptionButton with all possible values, the initial selection is set to the current property value, and it’s ensured that changes get reflected properly in the object and inspector.

Custom Control for Vectors

For properties that are vector types, like Vector2 or Vector3, creating a control that allows for precise input of each component is key:

func _create_vector_input_property_editor(object, property_path, vector_size):
    var hbox = HBoxContainer.new()
    for i in range(vector_size):
        var spinbox = SpinBox.new()
        spinbox.value = object.get(property_path)[i]
        spinbox.connect("value_changed", self, "_on_vector_component_changed", [object, property_path, i])
        hbox.add_child(spinbox)
    add_property_editor(property_path, hbox)

func _on_vector_component_changed(value, object, property_path, component_index):
    var vector = object.get(property_path)
    vector[component_index] = value
    object.set(property_path, vector)
    update_property(property_path)

This code snippet creates a horizontal box container, HBoxContainer, filled with SpinBoxes corresponding to each component of the vector, allowing for granular control over the vector’s dimensions.

Slider for Range Properties

A slider can be an intuitive way for users to adjust a numerical value within a range:

func _create_slider_property_editor(object, property_path, min_value, max_value, step):
    var slider = HSlider.new()
    slider.min_value = min_value
    slider.max_value = max_value
    slider.step = step
    slider.value = object.get(property_path)
    slider.connect("value_changed", self, "_on_slider_value_changed", [object, property_path])
    add_property_editor(property_path, slider)

func _on_slider_value_changed(value, object, property_path):
    object.set(property_path, value)
    update_property(property_path)

The HSlider control is set up with minimum and maximum values, together with a step to define how granularly the value can be changed. It emits a signal whenever the value changes, keeping the property in sync.

Adding a ColorPicker for Color Properties

When dealing with color properties, a visual interface like a ColorPicker can immensely improve user experience:

func _create_color_picker_property_editor(object, property_path):
    var color_picker = ColorPicker.new()
    color_picker.color = object.get(property_path)
    color_picker.connect("color_changed", self, "_on_color_changed", [object, property_path])
    add_property_editor(property_path, color_picker)

func _on_color_changed(color, object, property_path):
    object.set(property_path, color)
    update_property(property_path)

This example makes use of Godot’s ColorPicker widget to present a full-featured color-editing interface that can adjust a Color-typed property with immediacy and precision.

This assortment of code examples illustrates just how customizable Godot’s EditorInspectorPlugin can be. It’s these sort of adaptive tools that enable you to bend the editor to the unique requirements of your project, leading to efficiency gains that can be considerable over time. The ability to transform raw data properties into rich, user-friendly interfaces not only speeds up development but can also help reduce errors and improve collaboration among team members.

Remember that while Godot provides a huge range of preset controls, there is nothing stopping you from creating completely custom UI widgets and incorporating those into your inspector plugins. The sky is the limit with Godot’s extensible architecture, and mastery of these tools will certainly mark you as a power user of this potent game engine.

Continue Your Game Development Journey with Zenva

Your exploration of customizing the Godot Editor’s inspector panel is just the beginning. It’s an exciting time to take your skills further and delve deeper into the world of game development, and there’s no better place to continue your journey than with our Godot Game Development Mini-Degree.

This comprehensive course sequence is designed to take you from the foundations of Godot 4 to building your own cross-platform games. Whether you’re interested in creating intricate RPGs, dynamic RTS games, captivating platformers, or immersive survival games, our Mini-Degree has you covered. We ensure that you can learn at your own pace and develop the expertise needed to start making professional-quality games.

With over 250 supported courses, Zenva Academy brings the power of learning to your fingertips, whether you’re a beginner or looking to expand your existing skill set. For a broader collection of tutorials and courses, take a look at our Godot courses. Each step of the way, you’ll be building a strong portfolio and acquiring the practical experience needed to thrive in the game development industry. So why wait? Dive into our curriculum and start creating the games you’ve always dreamed of!

Conclusion

Mastering the EditorInspectorPlugin in Godot 4 is a game-changer, empowering you to tailor the Godot Inspector to your unique development needs. As you enhance your proficiency in game development with custom plugins and tools, you’re paving your way towards creating more polished, efficient, and personalized games. Embrace these skills, and you’ll find that with every line of code, your dream game is coming closer to reality.

At Zenva, we’re passionate about supporting your learning path every step of the way. Don’t hesitate to refine your game development prowess with our in-depth Godot Game Development Mini-Degree, and become part of a community that’s producing industry-leading content. Start your next chapter in game development and let Zenva be your guide to a future where you’re not just playing games, but creating them.

FREE COURSES
Python Blog Image

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