How to make a Unity Editor Window — part 2
Let’s build a simple quest editing layout to get started with GUILayout and EditorGUILayout elements.
On the previous article, we learned how to create a basic Unity Editor Window. It’s simple, and it’s fast to do it.
Now we’re going to take a look at adding fields and buttons, by creating a layout for editing a Quest. For this, we’ll learn how to add different field types and a button to save.
So let’s get started, and first thing we’ll do is to revisit what we learned in the previous article, and that is the barebones script to create a Unity Editor Window.
As a reminder, this script needs to be inside a folder called “Editor”. It doesn’t matter where it is, as long as it is somewhere inside Assets, for example Assets/Editor, Assets/Scripts/Editor, and so on — this makes it possible to also publish assets with their own editors nicely packed up inside their own asset folders.
A quest editor
To make it a practical example, we’ll build a simple quest editor. For this article, we’ll focus only on adding a few fields to start playing around with the tools we have available for displaying integer fields, text fields, buttons.
Before we create the layout for the Quest, let’s first create a very simple Quest class, which over time will have more fields as we progress. But keeping it simple, we can do something like this:
We do need more fields, such as objectives, requirements and so on, but we’ll get there.
Now, to create a layout that allows for editing this, first we need to create an instance of the class Quest, so we can change its values. We create that instance in MyQuestEditorWindow. Later on, the instance being edited can be changed by, for example, clicking on an item in a list of quests, as you can see in my videos.
Notice that the editor window class name has changed from the previous article, to be more appropriately named MyQuestEditorWindow.
Then, we create an instance we will be editing:
private Quest _quest = new Quest();
In the OnGUI method, we call another method to layout the quest editing section. In the quest editing part, it’s a series of calls to show and return the values of the fields.
For example:
quest.Id = EditorGUILayout.IntField(“Id”, quest.Id);
What this does is create a GUI element that accepts only numbers. This is good to enforce specific types of values, like a numeric id, integer amounts, and so on.
For the title, we use a TextField:
quest.Title = EditorGUILayout.TextField(“Title”, quest.Title);
But you can also pass options to change the layout and the look of it, like we do with the description:
quest.Description = EditorGUILayout.TextField(“Description”, quest.Description, GUI.skin.textArea, GUILayout.Height(100));
The GUI.skin.textArea makes the TextField behave like a textArea, and will word wrap. The GUILayout.Height let’s you set a height of 100, to give you some writing space.
And finally, a button to save the changes:
if (GUILayout.Button(“Save”))
The GUILayout.Button method returns true if the button was pressed, false otherwise.
So far, it’s simple, and you can start editing the fields, and as a result the instance _quest is being updated.
This is of course not enough, and on the next part, we’ll create a list of quests, and add the ability to edit different quests.
Update: I have created a Patreon page, where you can support my work. You can check it out at https://www.patreon.com/rv_gamedev
If you liked this article, please consider supporting me by clapping, I would appreciate it. You can also follow me on YouTube, I’ll see you there! :-)
