EditorInspector in Godot – Complete Guide

Navigating through the tools of Godot 4, one might wonder about the intricate workings of the EditorInspector, a staple in the Godot engine’s architectural wardrobe. This powerhouse lies at the heart of property editing, providing a structured and intuitive interface for developers to tweak and tune their game elements to perfection. It is an essential piece of the puzzle for any aspiring game developer looking to wield the full potential of Godot 4. By exploring the capabilities of the EditorInspector, you’re opening the door to a world of customization and efficiency, ensuring your game stands out in a sea of creativity.

What Is the EditorInspector?

The EditorInspector is a Godot engine class that operates as a sophisticated control for editing object properties within the editor. Think of it as a command center where all the adjustable elements of your game objects—like colors, sizes and scripts—come together, waiting for your directive to fine-tune and modify.

Why Should I Learn About the EditorInspector?

Understanding EditorInspector is vital because it streamlines the development process. It organizes properties neatly, follows a logical path, and creates nested sections for intricate properties, much like organizing books on a shelf. Grasping its utility can drastically reduce the time and effort spent on managing game assets, which can be otherwise overwhelming, especially in more complex projects.

What Can the EditorInspector Do for Me?

Imagine you have a vast array of configurable properties at your fingertips. The EditorInspector class helps you to:

– Access and edit object properties conveniently within the editor’s docks.
– Visualize property groupings and hierarchy, making it easier to navigate through complex objects.
– Elicit better organization for your game’s code and assets through visual sections and nested categories.

With the EditorInspector as your ally, you’re not just programming; you’re orchestrating a symphony of code and assets that come together to create immersive gaming experiences. Now, let’s roll up our sleeves and delve into how to wield this powerful tool effectively.

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

Exploring Basic Property Editing

Let’s start with the bread and butter of using the EditorInspector: editing basic properties. Here, we’ll examine how to modify a node’s transform, such as its position, rotation, and scale, directly within the EditorInspector.

Assuming we have a `Sprite` node selected, observe the Inspector and look for the “Transform” property:

Position: (X: 0, Y: 0)
Rotation Degrees: 0
Scale: (X: 1, Y: 1)

Now, let’s change the position to move the `Sprite` to the right:

Position: (X: 100, Y: 0)

This shift aligns the `Sprite` 100 pixels to the right on the X-axis. It’s as simple as clicking on the corresponding property and typing your desired value.

Adjusting Colors and Other Resources

Often you’ll want to change the colors of your sprites or UI elements via the EditorInspector. For a `ColorRect` node, the color property can be edited using a color picker:

Color: RGBA(255, 0, 0, 255) // This is a pure red color

You can click on the color preview in the Inspector to bring up a color picker and select a different color:

Color: RGBA(0, 128, 0, 255) // Changed to green

Besides raw values, the Inspector can also handle resources like textures and scripts. To change the `Texture` of a `Sprite` node:

Texture: [Load ]

You simply load a new texture via the Inspector’s load dialog, which automatically updates the `Sprite` with your selected image.

Editing Collections: Arrays and Dictionaries

The EditorInspector is also well equipped to handle editing complex collections such as arrays and dictionaries. For example, if an object has an array of positions, it can be edited as follows:

Array of Positions: [(X: 0, Y: 0), (X: 100, Y: 150)]

Each item in the array can be individually adjusted or new items can be added with ease. If you have a dictionary that maps string keys to values:

Dictionary:
    key1 -> Value
    key2 -> Another Value

By clicking on the dictionary items, you can change both keys and values directly from the Inspector.

Working with Signals and Scripts

Signals are a fantastic way to handle event-driven programming in Godot, and the EditorInspector conveniently allows you to manage them.

Connecting a signal from a button might look like this:

// In the Node tab next to the Inspector
signal pressed()

// Via Code Editor
func _on_Button_pressed():
    print("The button was pressed!")

Within the EditorInspector, under the Node tab, clicking “Connect…” on a signal will bring up a dialog to establish new connections to scripts.

Speaking of scripts, adding or modifying them is often done through the EditorInspector. To attach a script to a node:

Script: [Load ]

Or to create a new one:

Script: [New Script...]

This generates a template script that you can then edit in the built-in script editor. These simple examples set the stage for deeper functionality and custom property creation, which we will delve into in the following sections.

Customizing EditorInspector with Tool Scripts

Tool scripts in Godot are a versatile feature that allow scripts to run in the editor. They can be used to customize the behavior of the EditorInspector for specific nodes, enhancing the development workflow.

Here’s how you can enable a script to run in the editor:

tool
extends Node

Once equipped with a tool script, you might want to add custom properties that only show up in the Editor. For that, you can use the `export` keyword:

export var custom_speed = 20

This `custom_speed` property now appears in the EditorInspector, and you can adjust it as necessary while designing your game.

Utilizing Export Hints for Better Property Management

Export hints further refine how properties appear and behave in the EditorInspector:

export (int, range(1, 100)) var enemy_health = 100

The `enemy_health` property now has a slider in the Inspector, constrained between 1 and 100, ensuring that the game’s enemy health stays within the desired range, and providing a more user-friendly interface.

You can also export enums for cleaner code and editor interaction:

enum CharacterState { IDLE, RUNNING, JUMPING }
export (CharacterState) var state

This will present a dropdown in the Inspector, allowing you to select the character’s current state from the predefined options.

Advanced Property Customization with `_get_property_list`

To gain more detailed control over how properties behave in the EditorInspector, you can override the `_get_property_list` method. This allows for dynamic property lists, or properties with non-standard behavior.

Here’s an example that creates a property that cannot be edited by typing, but instead uses a button in the Inspector:

func _get_property_list() -> Array:
    return [
        {
            "name": "reset_level_button",
            "type": TYPE_NIL,
            "hint": PROPERTY_HINT_NONE,
            "usage": PROPERTY_USAGE_EDITOR,
        }
    ]

func _set(property: String, value) -> bool:
    if property == "reset_level_button":
        reset_level()
        return true
    return false

func reset_level() -> void:
    print("Level reset!")

With this code, clicking the “Reset Level” button within the EditorInspector doesn’t change a value—instead, it triggers the `reset_level()` method.

Script Variables with `_get` and `_set` Methods

The `_get` and `_set` methods can be used to create virtual properties that appear in the Inspector, but actually manipulate data behind the scenes.

Here’s an example with a hidden vector that you edit via individual float properties:

var hidden_vector = Vector2()

func _get(property: String):
    match property:
        "hidden_vector_x":
            return hidden_vector.x
        "hidden_vector_y":
            return hidden_vector.y
    return null

func _set(property: String, value) -> bool:
    match property:
        "hidden_vector_x":
            hidden_vector.x = value
            return true
        "hidden_vector_y":
            hidden_vector.y = value
            return true
    return false

func _get_property_list() -> Array:
    return [
        {
            "name": "hidden_vector_x",
            "type": TYPE_REAL,
        },
        {
            "name": "hidden_vector_y",
            "type": TYPE_REAL,
        }
    ]

This segment creates two separate properties in the Inspector for `x` and `y` components of `hidden_vector`, making it more convenient to modify them without exposing the vector directly.

Taking Control of Editor Properties with `setget`

The `setget` keyword in GDScript creates setter and getter functions for a property, providing a hook that’s called whenever the property is accessed or changed. Here’s how it’s used:

var my_visible_property = 0 setget my_visible_property_set, my_visible_property_get

func my_visible_property_set(value):
    my_visible_property = value
    # Additional code to run when the property is changed.

func my_visible_property_get():
    # Additional code to run when the property is accessed.
    return my_visible_property

Using `setget`, you can update the game’s logic or other properties whenever `my_visible_property` is modified in the Inspector, guaranteeing that your game reacts dynamically to property changes even during design time.

Delving into the intricacies of Godot’s EditorInspector can significantly empower your creative process, offering an array of tools to not only make game development more intuitive but also to organize and manage game components with striking efficiency. With these examples, you’ve just scratched the surface of what’s possible when you harness the potential of this powerful class.The EditorInspector’s capabilities extend to customizing the way that properties appear and behave. For example, you can create editor properties that only appear under certain conditions, which can be incredibly useful for properties that depend on the state or type of the object.

Imagine you have a script with a variable that should only appear when another boolean variable is true. Here’s how to selectively display a property in the EditorInspector:

var show_extra_options = false
var extra_option = 10

func _get_property_list() -> Array:
    var properties = []
    if show_extra_options:
        properties.append({
            "name": "extra_option",
            "type": TYPE_INT,
            "usage": PROPERTY_USAGE_EDITOR | PROPERTY_USAGE_STORAGE,
        })
    return properties

In this example, `extra_option` only appears in the Inspector if `show_extra_options` is set to true.

Creating Properties with Dynamic Ranges

When creating properties for scripts, it’s often important to restrict the input range to prevent invalid values. With export hints, you can specify a range, but sometimes you may want this range to be dynamic based on other properties. Below is an example that uses `_get_property_list` to create such a property:

export var min_value = 1
export var max_value = 100
export var dynamic_range_value = 50

func _get_property_list() -> Array:
    return [
        {
            "name": "dynamic_range_value",
            "type": TYPE_INT,
            "hint": PROPERTY_HINT_RANGE,
            "hint_string": str(min_value) + "," + str(max_value)
        }
    ]

This setup uses the `min_value` and `max_value` to dynamically generate a range for `dynamic_range_value` in the Inspector.

Using Inspectors with Custom Resource Types

In Godot, you can define custom resource types via scripts, which you can then use properties for in the Inspector. For instance, creating a `CharacterProfile` as a custom resource might look like this:

extends Resource
export(String) var character_name = "Unnamed"
export(int) var character_age = 30
export(Texture) var character_portrait

Once defined, you can use this custom type in other scripts as an exportable property:

export(CharacterProfile) var main_character

This lets you edit `main_character`’s profile directly from the Inspector, using the custom fields such as `character_name`, `character_age`, and `character_portrait`.

Advanced Tool Scripts for Editor Functionality

Tool scripts unlock the potential for all sorts of custom editor functionality. Here’s an example where a tool script modifies a property whenever another property changes:

tool
extends Sprite

export(float, 0, 1) var sprite_opacity = 1.0 setget set_opacity

func set_opacity(new_opacity):
    sprite_opacity = clamp(new_opacity, 0, 1)
    self.modulate.a = sprite_opacity

Now, when you slide the `sprite_opacity` property in the Inspector, the sprite’s opacity will change in real time.

Updating the Inspector from the Code

Sometimes, you need to update the Inspector when the properties change from code (not just from user input). You can notify the engine to update the Inspector like this:

tool
extends Node

var secret_number = 42

func _ready():
    # Simulate some processing that changes the secret_number
    secret_number *= 2
    # Notify the engine to update the inspector
    property_list_changed_notify()

Handling Complex Data Types

You may also encounter situations where you want to work with more complex data types directly in the Inspector. Here’s how you might start working with an array of `Vector2` points:

export(Array, Vector2) var points = []

func _draw():
    for point in points:
        draw_circle(point, 5, Color(1, 0, 0))

In this case, the `points` array can be edited in the Inspector, allowing you to add, remove or edit individual `Vector2` objects. The `_draw` method then takes each of these points and draws them as part of the node.

These examples highlight just a sliver of the flexibility and control the Godot EditorInspector provides. Whether it’s through simple property modifications, dynamic ranges, custom resources, or advanced tool scripting, there’s triumph in knowing that the power to tailor the editor to the user’s needs rests solidly in their hands.

Continue Your Game Development Journey

Embarking on the path of understanding and mastering Godot 4 is an exciting endeavor that opens a universe of possibilities for game development. The EditorInspector is just a fragment of the vast landscape that Godot 4 offers. If you’re fuelled by a passion for creating amazing game experiences and are eager to expand your knowledge, we invite you to explore further with our Godot Game Development Mini-Degree. This comprehensive series of courses will guide you through building cross-platform games, covering fundamental concepts to advanced techniques.

Whether you are just beginning your journey or looking to polish your skills, our curriculum tailors to all levels of expertise. You’ll delve into using assets, scripting with GDScript, crafting gameplay mechanics, handling UI systems, and much more. As you advance through the six levels of the mini-degree, you’re not just learning—you’re doing. Each course is designed to be interactive and hands-on, supporting you in building a robust portfolio of real-world projects.

Excited to explore the expanse of Godot further? Dive into our wider range of Godot courses, where you can refine specific skills or branch into new areas. We’re here to support your growth every step of the way—from your very first line of code to the final polish on your dream game. Let Zenva be the launchpad for your game development ambitions, where learning becomes an adventure as thrilling as the games you will create.

Conclusion

As we draw the curtain on our exploration of Godot 4’s EditorInspector, remember that this is just the opening act to the upstanding performances you’re capable of delivering in your game development endeavors. Mastering the EditorInspector equips you with the finesse to command and customize your projects down to the smallest detail, catapulting your games from great ideas to polished realities. But why stop there when you can unlock the full potential of your creative powers with our Godot Game Development Mini-Degree?

Your journey does not end here—it’s a continuous ascent to greatness. With every line of code, every pixel moment you create, you’re not just making games; you’re crafting experiences, forging memories, and igniting imaginations. So, take this step confidently—join us at Zenva, where your passion blazes a trail in the gaming universe, and where each lesson learned is a stepping stone to the next gaming masterpiece.

FREE COURSES
Python Blog Image

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