How to Make a Plugin in Godot 4 – Complete Guide (original) (raw)
You can access the full course here: DALL-E AI IMAGE GENERATION IN GODOT 4
Ready to level up your game development? Discover the secrets to creating your own custom Godot plugin that will transform your projects and elevate your skills!
Godot, an open-source game engine, offers the flexibility to create custom plugins that can be used to enhance your game development process. A common example of such an upgrade could be a texture generator tool integrated into the Godot editor itself. This tutorial will walk you through how to develop your own custom Godot plugin for smoother and quicker game development – so you don’t have to spend hours getting your project up and running.
For this tutorial, basic familiarity with Godot and GDScript is expected. You will learn how to create a new Godot plugin project, construct a dock scene, and add UI elements to the scene – so UI familiarity will be ideal. If you do get stuck, though, you can also review our full course, DALL-E AI Image Generation in Godot 4 which covers these concepts more in-depth.
Now, let’s get going with building our Godot plugin!
Table of contents
Project Files
The code snippets and results of this tutorial, along with the necessary assets, are readily accessible via the link to make this learning process easier for you.
FREE COURSES AT ZENVA
LEARN GAME DEVELOPMENT, PYTHON AND MORE
AVAILABLE FOR A LIMITED TIME ONLY
Creating the Godot Plugin
To begin, we will create a project and set up our custom Godot plugin for the editor.
Creating a New Project
Firstly, go to the project manager and click on the new project button. Create a project name, for example, “Texture Generator Plugin”. Choose a project path and create a new folder inside that path for your project. Then, create and edit to open up the editor.
The initial scene you create doesn’t matter much, as we’re not going to be interacting with the game scene that much. It’s really just going to be the Godot plugin itself.
Creating a Plugin in Godot
Godot is made up of a number of different docks, such as scene import, file system, inspector node history, etc. Creating a Godot plugin allows us to create our own custom dock where we can develop the UI and functionality.
To create a Godot plugin, go to Project > Project Settings > Plugins Tab.
Here, click on ‘Create New Plugin’. Fill out the Godot plugin name and leave the other fields as default.
This will create a new subfolder for your Godot plugin in the file system and a GDScript file for your Godot plugin.
Creating a Dock Scene
We need to create a new scene which is going to represent our dock. Create a user interface scene and name it ‘Texture Generator Dock’.
This will create a new scene and add it to the folder. The root of this scene will be the contents of our dock.
With our scene created, we can actually do some coding to get our Godot plugin to work. The GDScript file for the Godot plugin is mainly set up to load and unload the UI when we want to close the plugin. It’s sort of the launcher for the Godot plugin, but it won’t manage any of the actual Godot plugin code.
var dock func _enter_tree(): dock = preload("res://addons/texturegenerator/TextureGeneratorDock.tscn").instantiate() add_control_to_dock(DOCK_SLOT_LEFT_BL, dock) func _exit_tree(): remove_control_from_docks(dock) dock.free()
In the script above, we first declare a variable ‘dock’. Inside the _enter_tree() function, we make ‘dock’ equal to the preloaded scene file and add it to the dock. In the _exit_tree() function, we remove and delete the dock when we want to close the plugin.
At this point, you can successfully view your dock.
Adding UI Elements to the Dock Scene
To add UI elements to the dock, go back to the dock scene. Right click on the root node and add a child node.
For example, add a button and give it a text.
After adding the UI elements, save the scene. You will need to refresh the dock to see the new UI elements. To do this, go to Project > Project Settings > Plugins Tab and disable and re-enable the Godot plugin.
To make the UI elements resize based on the Godot plugin dimensions, you can use the anchoring tools in the top left corner of the editor.
This will make the width of the UI elements match that of the control nodes.
We’ve now learned how to create a project and set up a custom Godot plugin for the Godot editor. We also learned how to create a dock scene and add UI elements to it.
Godot Plugin Wrap-Up
We have reached the conclusion of this tutorial! You’ve learned the steps to create a project in Godot, set up a custom Godot plugin, and add UI components to your custom dock in the Godot engine. This knowledge empowers you to create custom Godot plugins to streamline any game development process.
What can plugins do? Well, just about anything. From texture generation to automating script actions for you – the sky is the limit in this case. However, these baseline foundations will help you unlock Godot plugins for whatever you have in mind and is the first step to speeding up your game development workflow.
As you enhance your game development journey with Zenva, our various online courses regarding Godot engine, gaming techniques can be of great assistance. If you’re specifically looking to expand with this Godot plugin topic, our DALL-E AI Image Generation in Godot 4 course is a great source where we use DALL-E to integrate automatic texture generation.
Good luck with your Godot games, and happy learning!
Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it!
Transcript – Creating the Godot Plugin
Hey everyone and welcome. In this lesson, we are going to be creating an ADO project. We are then going to be looking at how we can actually set up our own custom editor plugin for the engine. So to begin, we’re going to go to the project manager here and click on the new project button. We’re then going to create a project name. So I’m just going to call this one our texture generator plugin.
We can then choose a project path and then click on the create folder button to create a new folder inside that path, and then finally create an edit to open up the editor.
Now inside of the editor here, whatever scene we create initially doesn’t really matter because if you have an existing game that you want to implement this plugin in, you can follow along just fine. But if you have just a blank project where you want to create the plugin, then we can create a two D or a three D scene as it doesn’t really matter because we’re not going to be interacting with the game scene that much. It’s really just going to be the editor plugin.
So I’m just going to create a two D scene here, calling it Node Maine. We’re going to save that as Maine tcn, and that’s pretty much all we’re going to do for this scene. Now how do we go about actually creating a plugin and what is a plugin in Godot? Well, first of all, Godot is made up of a number of different docks. You see we have scene import, we have file system, we have inspector node history. These are all known as docks.
Creating a plugin allows us to essentially create our own custom dock here where we can then develop the UI and functionality that we need. In our case, we’re creating a texture generator using AI slotted inside of our UI on the editor here. It allows us to create textures and save them to our project files while developing our game. So how do we do this?
First of all, we want to go up to project, then project settings, and then inside of the project settings window, we want to go to the top and navigate to the plugins tab. Now, inside the plugins tab, we then want to create a new plugin and there’s a bunch of information we can fill out here.
But really we just want to fill out the plugin name, which will be our texture generator plugin. We can call it Texture Generator. It will automatically create a new subfolder for us, but you can create your own custom path here, if you wish. You can add a description and offer a version language you probably want to keep at GD script. We can leave script name empty as well and click create.
What this action does is, it creates a new folder called add-ons in the file system. Inside of that, it creates a texture generator folder for our plugin, and inside of that it will create a texture generator GD script. Now this script here is not going to control the functionality of our plugin. The script is mainly set up to load and unload the UI when we want to close the plugin. This could be considered our launcher.
We’re not going to do anything in here just yet. Rather, what we’re going to do is we are going to create ourselves a brand new scene, which is going to represent our dock. So let’s hop over into two D mode here. I’m going to right-click on the texture generator folder that was created for us and then create a new scene.
We’re going to create a user interface scene. So that’s going to create a control node for the root and the same name. We can call this one our texture generator doc. Click okay and that is going to create our new scene here. It’s going to add it to the folder. If it’s not in the folder, then you can simply just drag it in.
On the doc, if you select it, you should see an orange box. It’s going to be the content of our doc. Now we can, of course, resize and change the aspect ratio as we wish, but we’re going to set it up so that it’s going to support any sort of aspect ratio and resolution.
So it doesn’t really matter what the initial layout or the initial aspect ratio of this is. Even though this is not what it’s going to look like in our dock, it will look more something like this. But, it doesn’t matter. We can just save it.
Then what we want to do is we want to go to our script again. In the enter tree function, we want to create a variable called dock and then inside of the enter tree function, we’re going to make dock equal to preload. Then we want to go and find our texture generated doc tcn and select that, then dot instantiate.
But we can’t just spawn the scene and leave it there. We have to attach it to the editor. To do that, we’re going to add control to doc function here. First of all, what we want to do is that we want to first of all give it a position that we want to attach this doc in. Let’s say we want to be it on the left-hand side. We can call a control doc function and name it doc underscore slot. Then we can type doc, which is going to attach the dock to the left-hand side of the editor here.
Now after that, we need to create exit tree function, which is going to be called when we want to close the plugin. So we’re going to do is we’re just going to call the remove control from docs sending over the doc. And then finally we want to delete the doc because this here does not delete it.
With this update saved script, we can go to the project settings and refresh the dock and you’ll see that we have our dock appearing. We can move it around just like any other. We can click and drag on it to attach it to any other sort of dock group. We can even attach it back to the scene view here, or we could even click on these little three dots on the top right corner and click make floating to make it a floating dock window.
Right now, the contents of our dock is empty. So how do we make stuff appear? To do that, let’s go back to our dock scene here, select our texture generator doc node here, and right click to add a child node. And let’s just create a button to see what it looks like.
I’ll make it a bit bigger by clicking and dragging on these orange dots and give it a text, let’s say test button for now. With the button set up and ready to go, next on to how do we make the elements of the button dynamic. Anytime you make a change to the scene, you need to refresh the dock.
Then we have the test button and now it resizes with our screen, which is pretty cool. Okay, now that, that is our test button, all set up and ready to go. Although we’re probably not going to be using this one in the next lesson, we’re going to look at how we can actually start setting up our UI and connecting it to a script. So thanks for watching, and I’ll see you all then in the next lesson.
Ready to take the next step? Unlock unlimited access to over 300 courses, guided learning pathways, monthly new additions, and much more with our all-access plan!