Work in progress

The content of this page was not yet updated for Godot 4.0 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Making main screen plugins

What this tutorial covers

Main screen plugins allow you to create new UIs in the central part of the editor, which appear next to the "2D", "3D", "Script", and "AssetLib" buttons. Such editor plugins are referred as "Main screen plugins".

This tutorial leads you through the creation of a basic main screen plugin. For the sake of simplicity, our main screen plugin will contain a single button that prints text to the console.

Initializing the plugin

First create a new plugin from the Plugins menu. For this tutorial, we'll put it in a folder called main_screen, but you can use any name you'd like.

The plugin script will come with _enter_tree() and _exit_tree() methods, but for a main screen plugin we need to add a few extra methods. Add five extra methods such that the script looks like this:

GDScriptC#

@tool
extends EditorPlugin


func _enter_tree():
    pass


func _exit_tree():
    pass


func _has_main_screen():
    return true


func _make_visible(visible):
    pass


func _get_plugin_name():
    return "Main Screen Plugin"


func _get_plugin_icon():
    return get_editor_interface().get_base_control().get_theme_icon("Node", "EditorIcons")

The important part in this script is the _has_main_screen() function, which is overloaded so it returns true. This function is automatically called by the editor on plugin activation, to tell it that this plugin adds a new center view to the editor. For now, we'll leave this script as-is and we'll come back to it later.

Main screen scene

Create a new scene with a root node derived from Control (for this example plugin, we'll make the root node a CenterContainer). Select this root node, and in the viewport, click the Layout menu and select Full Rect. You also need to enable the Expand vertical size flag in the inspector. The panel now uses all the space available in the main viewport.

Next, let's add a button to our example main screen plugin. Add a Button node, and set the text to "Print Hello" or similar. Add a script to the button like this:

GDScriptC#

@tool
extends Button


func _on_print_hello_pressed():
    print("Hello from the main screen plugin!")

Then connect the "pressed" signal to itself. If you need help with signals, see the Using signals article.

We are done with the main screen panel. Save the scene as main_panel.tscn.

Update the plugin script

We need to update the main_screen_plugin.gd script so the plugin instances our main panel scene and places it where it needs to be. Here is the full plugin script:

GDScriptC#

@tool
extends EditorPlugin


const MainPanel = preload("res://addons/main_screen/main_panel.tscn")

var main_panel_instance


func _enter_tree():
    main_panel_instance = MainPanel.instantiate()
    # Add the main panel to the editor's main viewport.
    get_editor_interface().get_editor_main_screen().add_child(main_panel_instance)
    # Hide the main panel. Very much required.
    _make_visible(false)


func _exit_tree():
    if main_panel_instance:
        main_panel_instance.queue_free()


func _has_main_screen():
    return true


func _make_visible(visible):
    if main_panel_instance:
        main_panel_instance.visible = visible


func _get_plugin_name():
    return "Main Screen Plugin"


func _get_plugin_icon():
    # Must return some kind of Texture for the icon.
    return get_editor_interface().get_base_control().get_theme_icon("Node", "EditorIcons")