EditorInspectorPlugin in Godot – Complete Guide

Are you looking to extend the functionality of the Godot Editor to fit your game development needs? Well, adding custom property editors to the Inspector panel just became a bit easier. In this tutorial, we’ll explore the powerful features of the EditorInspectorPlugin class in Godot 4 and how you can leverage it to enhance your game development workflow. Get ready to dive into customizing the Godot Editor in ways that can suit specific needs for your game’s properties.

What is EditorInspectorPlugin?

Godot’s EditorInspectorPlugin is a class that developers can use to create custom property editors in the Godot Editor’s Inspector panel. This feature becomes incredibly handy when you want to provide a more intuitive and streamlined experience for editing specific properties of your game’s objects.

What is it for?

The Inspector panel is where you’d adjust properties like position, scale, scripts, and many others for different nodes in your game. However, there may be times when the default property editors do not align with the custom data types or the specific functionality you’re implementing. Here’s where EditorInspectorPlugin steps in, allowing you to build a custom UI for property editing aimed at enhancing productivity.

Why Should I Learn It?

Understanding how to use EditorInspectorPlugin can greatly impact your game development process. It allows for:

  • Customization: Tailor the editor’s interface to your project’s unique needs.
  • User-Friendly: Create more user-friendly editors for custom types you’ve designed in your game.
  • Efficiency: Streamline the editing process, making it more efficient for yourself and your team.
  • Control: Gain additional control and oversight over how properties are set and displayed.

Whether you’re a beginner expanding your toolkit or an experienced developer looking to optimize your workflow, understanding this plugin can be a significant asset.

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

Registering EditorInspectorPlugin in Godot 4

Before we dive into examples, the first step to using an EditorInspectorPlugin is registering it with the editor. You need to create a plugin script within your project’s ‘addons/’ directory, where Godot can recognize and handle it. Here’s how you can start your script with the basic registration:

tool
extends EditorPlugin

var inspector_plugin = preload("res://addons/your_addon/your_inspector_plugin.gd")

func _enter_tree():
    add_inspector_plugin(inspector_plugin.new())

func _exit_tree():
    remove_inspector_plugin(inspector_plugin)

Replace 'your_addon' and 'your_inspector_plugin.gd' with your addon’s directory and plugin script names, respectively.

Creating a Custom Inspector Plugin

Now, let’s create the custom inspector plugin script that will define how our properties look and behave within the Inspector. Ensure this script extends EditorInspectorPlugin to harness its functionality.

extends EditorInspectorPlugin

func can_handle(object):
    return object is YourCustomNode

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "your_custom_property":
        # Add custom control here
        pass

In the can_handle function, you check if the object is the type you want the custom editor for, and within parse_property, you identify and add controls for specific property paths.

Adding Custom Controls

Let’s add a custom control to our property. For illustration, assume that your_custom_property is a Color. We want to use a custom ColorPicker control for this:

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

This effectively replaces the default editor for your_custom_property with our custom ColorPicker control. The add_property_editor function adds the control to the Inspector.

Custom Editors for Specific Data Types

If you defined a custom data type, such as a Vector or a Resource that is exclusive to your game, you might want to provide special handling for it. Below is an example of handling a custom resource type:

func parse_property(object, type, path, hint, hint_text, usage):
    if type == TYPE_OBJECT and object.get_script() and object.get_script().get_path() == "res://path_to_your_custom_resource.gd":
        var editor = preload("res://addons/your_addon/CustomResourceEditor.gd").new()
        editor.set_object(object)
        add_property_editor(path, editor)
        return true
    return false

In this snippet, we check if the property is an object with the script path of our custom resource. If so, we load a custom editor script designed for this resource type and set the object accordingly.

This code contributes to a richer user experience by allowing developers to interact with custom data types in a more intuitive and efficient way. By leveraging the EditorInspectorPlugin, we’re setting a foundation for a more robust and customizable development environment in Godot 4.

These examples should provide a clear starting point for integrating EditorInspectorPlugin into your project. In our next section, we’ll delve deeper into refining the functionality of our custom inspectors and ensuring smooth user interactions.

Enhancing the functionality of our custom property editors is vital for a seamless and powerful user experience. Let’s proceed with examples that showcase how to handle changes to the properties and update the custom UI elements accordingly.

For instance, if you want to update a custom property when the ColorPicker changes, you would connect a signal to capture the color change:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "your_custom_property":
        var color_picker = ColorPicker.new()
        color_picker.connect("color_changed", self, "_on_ColorPicker_color_changed", [object, path])
        add_property_editor(path, color_picker)
        return true
    return false

func _on_ColorPicker_color_changed(new_color, object, path):
    object.set(path, new_color)
    update_property(path)

In this example, when the user selects a new color in the ColorPicker, the _on_ColorPicker_color_changed function updates the associated property on the object and calls update_property to refresh the Inspector.

It is also possible that your custom inspector will need to provide a wider range of controls, such as sliders, text inputs, or even buttons. Below is a snippet demonstrating how you might add a slider:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "your_custom_numeric_property":
        var slider = HSlider.new()
        slider.min_value = 0
        slider.max_value = 100
        slider.step = 0.1
        slider.connect("value_changed", self, "_on_HSlider_value_changed", [object, path])
        add_property_editor(path, slider)
        return true
    return false

func _on_HSlider_value_changed(value, object, path):
    object.set(path, value)
    update_property(path)

This code adds an HSlider to the Inspector, useful for numeric values where users can move a handle to change the number within a certain range. The value_changed signal ensures that any movement of the slider immediately updates the property.

Custom UI elements can also act upon button presses. The following sample shows how to embed a button within your property editor and handle its pressed event:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "your_custom_trigger":
        var button = Button.new()
        button.text = "Click me!"
        button.connect("pressed", self, "_on_Button_pressed", [object, path])
        add_property_editor(path, button)
        return true
    return false

func _on_Button_pressed(object, path):
    # Implement custom logic that should trigger when the button is pressed
    handle_button_logic()
    # You may want to update the entire editor if several properties are affected:
    update_inspector()

When the button is pressed, some custom logic is executed by calling the handle_button_logic() function. In cases where the button press affects multiple properties, update_inspector() can be called to refresh the entire Inspector.

If your property is a complex type, such as an array or a dictionary, a custom editor can be immensely helpful in visualizing and editing the content:

func parse_property(object, type, path, hint, hint_text, usage):
    if type == TYPE_ARRAY or type == TYPE_DICTIONARY:
        var custom_editor = CustomComplexTypeEditor.new()
        custom_editor.setup_editor(object, path)
        add_property_editor(path, custom_editor)
        return true
    return false

This code example demonstrates how to check for complex types and then instantiate a custom editor designed to handle them.

Lastly, sometimes you might need to validate input from a text field to ensure it matches a pattern, such as a file path or an email address. Below is how to add a LineEdit control with validation logic:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "your_custom_text_property":
        var line_edit = LineEdit.new()
        line_edit.connect("text_changed", self, "_on_LineEdit_text_changed", [object, path])
        add_property_editor(path, line_edit)
        return true
    return false

func _on_LineEdit_text_changed(new_text, object, path):
    if validate_text(new_text):
        object.set(path, new_text)
        update_property(path)
    else:
        # Handle invalid input
        line_edit.text = object.get(path) # Reset to the last valid state

func validate_text(text):
    # Implement custom validation logic here
    return true # for valid, false for invalid

This script hosts a LineEdit input which, upon change of text, validates the input before setting the property on the object. If the input is invalid, this example resets the field to the last known valid state.

Through these varied examples, we get a glimpse of how customizable and dynamic the Godot Editor can be when utilizing the EditorInspectorPlugin. Whether you’re manipulating colors, handling complex data types, or validating text input, custom property editors can substantially enrich the development experience.

We at Zenva are committed to helping you become adept at creating the tools that make your game development journey smoother and more efficient. Harnessing the full potential of Godot 4’s EditorInspectorPlugin is one more step in that direction, and we are excited to see what you create with these skills.

Great! Now that we’ve covered the basics of creating custom property editors with EditorInspectorPlugin, let’s delve a bit deeper with more code examples to illustrate advanced usage and help you fully leverage this powerful feature in Godot 4.

Suppose you’re dealing with an enum property in your game, and you want to use a dropdown list for a clearer representation of the choices. We can use OptionButton to create a selector:

func parse_property(object, type, path, hint, hint_text, usage):
    if hint == PROPERTY_HINT_ENUM and path == "your_enum_property":
        var option_button = OptionButton.new()
        for value in hint_text.split(","):
            option_button.add_item(value.strip())
        option_button.select(int(object.get(path)))
        option_button.connect("item_selected", self, "_on_OptionButton_item_selected", [object, path])
        add_property_editor(path, option_button)
        return true
    return false

func _on_OptionButton_item_selected(selected_idx, object, path):
    object.set(path, selected_idx)
    update_property(path)

Here, the PROPERTY_HINT_ENUM is used to check if the property is an enumeration type, and the hint_text is parsed to populate the OptionButton with the appropriate choices.

Next, imagine you want a property to only be editable in a certain state, perhaps because it only makes sense when another property is set to a particular value. We can utilize the InspectorPlugin’s ability to dynamically show or hide properties:

func parse_begin(object):
    if object.is_of_type(YourCustomNode):
        if object.other_property == SOME_CONDITION:
            hide_property("property_to_hide")

func parse_end():
    pass

By overriding the parse_begin function, we can conditionally hide specific properties based on the state of another property before the parsing of the properties begins.

Manipulating visibility of array elements can also be very useful. For example, you might want to provide a custom editor only for certain elements within an array:

func parse_property(object, type, path, hint, hint_text, usage):
    if type == TYPE_ARRAY and "certain_element" in path:
        var element_editor = CustomArrayElementEditor.new()
        add_property_editor(path, element_editor)
        return true  # Handled by the custom editor
    return false  # Default editor will be used

This code sets up a situation where only array elements matching “certain_element” in their path will be handled by the custom CustomArrayElementEditor.

It’s not uncommon to want quick access to executing a method on an object directly from the Inspector. Adding a method call button is quite simple and very effective:

func parse_property(object, type, path, hint, hint_text, usage):
    if path == "execute_method_property":
        var method_call_button = Button.new()
        method_call_button.text = "Execute Method"
        method_call_button.connect("pressed", self, "_on_MethodCallButton_pressed", [object])
        add_property_editor(path, method_call_button)
        return true
    return false

func _on_MethodCallButton_pressed(object):
    object.execute_some_method()

This script creates a button that, when pressed, will call execute_some_method on the target object, allowing for immediate testing or execution of functionality right within the editor.

Additionally, you might want to incorporate a live preview or some interactive form of feedback for a property editor. Let’s say you have a custom resource for particle effects, and you want to preview it inside the editor:

func parse_property(object, type, path, hint, hint_text, usage):
    if object.get(path) is YourParticleResource:
        var preview_button = Button.new()
        preview_button.text = "Preview"
        preview_button.connect("pressed", self, "_on_PreviewButton_pressed", [object, path])
        add_property_editor(path, preview_button)
        return true
    return false

func _on_PreviewButton_pressed(object, path):
    var particle_resource = object.get(path) as YourParticleResource
    particle_resource.preview_in_editor()

With this code snippet, whenever you press the “Preview” button in the custom property editor, the particle effect resource is previewed in the editor, giving instant visual feedback.

Lastly, consider a case where you want to allow in-editor animation of a property. Imagine a color property that you want to be able to animate within a certain range:

func parse_property(object, type, path, hint, hint_text, usage):
    if hint == PROPERTY_HINT_COLOR_NO_ALPHA and path == "your_color_property":
        var animation_player = preload("res://addons/your_addon/ColorAnimationPlayer.tscn").instance()
        animation_player.connect("color_changed", self, "_on_ColorAnimationPlayer_color_changed", [object, path])
        add_property_editor(path, animation_player)
        return true
    return false

func _on_ColorAnimationPlayer_color_changed(new_color, object, path):
    object.set(path, new_color)
    update_property(path)

In this implementation, a custom ColorAnimationPlayer is used to animate the color property, and changes are immediately reflected on the object.

These code examples illustrate the versatility of the EditorInspectorPlugin. Whether you need to customize the editor for better property manipulation, add dynamic visibility conditions, or provide inline method execution, Godot 4 gives you the tools to make the editor your own. At Zenva, we’re thrilled to empower you with the knowledge to create personalized and powerful tools, making your game development process smoother and more enjoyable. We look forward to seeing the innovative ways you employ these techniques in your projects!

Continue Your Game Development Journey With Zenva

Embarking on the journey of game development is an exhilarating experience that constantly evolves. As you’ve delved into the customization of the Godot editor with EditorInspectorPlugin, you’ve unlocked new possibilities to enhance your game development workflow. To continue nurturing your skills and diving deeper into the world of game creation, we encourage you to explore the Godot Game Development Mini-Degree offered by Zenva Academy.

With a curriculum crafted to guide you through the different facets of building cross-platform games using the flexible and node-based Godot 4 engine, this Mini-Degree is tailored for both beginners and more advanced game developers alike. You will have the opportunity to craft a portfolio of real projects while gaining hands-on experience in creating engaging 2D and 3D environments, mastering gameplay control flows, and developing intricate game mechanics.

If you’re eager to explore a wider array of topics and expand your game development arsenal even further, take a look at our broader collection of Godot courses. Zenva provides a variety of learning resources designed to help you transform your passion for game development into tangible skills that can open up new doors in the industry. With our self-paced courses, each step you take is another toward mastering the craft and building the games you envision. Keep learning, keep creating, and see where your game development path takes you with Zenva.

Conclusion

Pushing the boundaries of what you can achieve with Godot 4 is just the beginning. As you’ve seen, utilizing EditorInspectorPlugin not only revolutionizes the way you interact with the Godot editor but also streamlines your entire game development process. Mastering this powerful class equips you with the capability to tailor the Godot experience to fit your project’s unique needs, making your workflow as intuitive and effective as possible.

Remember, every great game starts with the tools that shape it, and with our Godot Game Development Mini-Degree, you’re well on your way to creating something truly special. Keep exploring, enhance your skills, and join us at Zenva – where game developers turn their dreams into reality. Continue your journey, keep learning, and may your passion for game development be the guide to extraordinary gaming experiences!

FREE COURSES
Python Blog Image

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