Tile Editor for Unity: Part I

NEW IMAGE & NEW WEBSITE

Before starting to talk about today’s topic, I would like to announce we have a new image: new logo, appeareance and website. This new website includes released games, current projects and prototypes that will hopefully become released projects soon. Hope you like it!

TILE EDITOR

So, today’s post consists of the first of a series of short posts about how the tile editor for Unity was created and explain the basic functionality of it.

For those who only want to use it and are not really interested about how it was built, as soon as the Asset is available in the Unity Asset Store, you will be able to download it for free and use it.

This is only the beginning of this tool, I would like to keep improving it along with the development of the game I’m currently creating.

The whole explanation is divided in the following parts:

1. Editor Window Creation
2. Saving Status
3. Menus
4. Game Objects Actions: Create, Delete, Edit
5. Layers
6. Grid
7. Snapping
8. Transformations
9. Snapping: Extended

For this post we will cover only the first two parts, the rest of the explanation will be covered in the upcoming weeks.

EDITOR WINDOW CREATION

The first thing we need to do is to create a folder called “Editor” in our Project manager, this is a special folder designed to extend the functionality of the basic Editor.

As you can see, I added the folder inside a folder called “FSLevelEditor”, you can really put this folder wherever you want and you can also create multiple folders in different locations, if they are named “Editor”, that should be enough for it to work well.

After creating this folder, inside of it, we want to create a new class which will be the main class for our extension. In this particular case, I called the main class “LevelCreatorEditor”, you can customize this name as you like.

using UnityEditor;
using UnityEngine;
public class LevelCreatorEditor : EditorWindow
{
   // Add menu named "My Window" to the Window menu
   [MenuItem("Window/Level Editor")]
   static void Init()
   {
      //Get existing open window or if none, make a new one:
      LevelCreatorEditor window;
      window = (LevelCreatorEditor)EditorWindow.GetWindow(typeof(LevelCreatorEditor));
      window.Show();
   }
}

This new class should inherit from “EditorWindow” which is the base class for new extensions in Unity. You can see more details about this class in the manual. The class EditorWindow belongs to the UnityEditor library so we need to import it as well.

In this class a new static method called “Init” has to be added to show the new window and assign a name for it in the menu. In line 6 in the code above you can see that I set the path of the new menu to “Window/Level Editor”, the location “Window” represents the Window menu in the Unity editor, you can choose whichever menu you prefer to have your new extension. You can also customize the name of the new item in the menu by changing the “Level Editor” for whatever you like.

int gridSize;
float gridX;
float gridY;
Color gridColor = Color.white * 0.8f;
Color cursorColor = Color.red;
Color selectColor = Color.blue;
bool showGrid = true;
void OnGUI()
{
   //Header
   BuildMenuHeader();
}
void BuildMenuHeader()
{
   GUILayout.Label("GRID SETTINGS", EditorStyles.boldLabel);
   gridSize = EditorGUILayout.IntField("Grid Size (px)", gridSize);
   gridX = gridSize / 100f;
   gridY = gridSize / 100f;
   gridColor = EditorGUILayout.ColorField("Grid Color", gridColor);
   cursorColor = EditorGUILayout.ColorField("Cursor Color", cursorColor);
   selectColor = EditorGUILayout.ColorField("Select Color", selectColor);
   showGrid = EditorGUILayout.Toggle("Show Grid",showGrid);
}

The “OnGUI” function is the one that renders all the elements you want inside your new window. In this particular case, I’m adding general properties for the grid just to illustrate how it works. You can directly put the GUI code inside this function but I’m getting the exact code I made for the tile editor, that’s why I added the “BuildMenuHeader” function.

The “BuildMenuHeader” basically includes all the elements that affect the grid and change the variable values according to whatever the user chooses.

We can see in line 16 a short example about how the variables are modified in real time, “EditorGUILayout.ColorField” takes a couple of parameters, the label for that element and also the current value, this function returns the modified value in real time, that’s why we use and modify the “gridSize” variable in the same line.

SAVING THE STATUS

The previous section was about creating a very basic window with few elements that make our variables change in real time. The other important step for this post is about how to take those values we change and keep using them after we close the window. If we don’t do this, everytime that we close and re-open our new extension’s window, all the parameters will be initiallized again.

bool loaded;
void OnEnable()
{
   LoadData();
}

void OnDisable()
{
   SaveData();
}

void OnDestroy()
{
   SaveData();
}

///
/// Saves the current editor's status
///
public void SaveData()
{
   string id;

   id = PlayerSettings.productName;
   EditorPrefs.SetInt(id + "-GridSize", gridSize);
   EditorPrefs.SetString(id + "-CursorColor", FromColorToString(cursorColor));
   EditorPrefs.SetString(id + "-GridColor", FromColorToString(gridColor));
   EditorPrefs.SetString(id + "-SelectColor", FromColorToString(selectColor));
   EditorPrefs.SetBool(id + "-ShowGrid", showGrid);
}

///
/// Convert an object from class Color into a serialized string
///
public string FromColorToString(Color color)
{
   return color.r + "," + color.g + "," + color.b + "," + color.a;
}

///
/// Convert a string into an object from Color
///
public Color FromStringToColor(string color)
{
   string[] desColor;
   desColor = color.Split(',');

   return new Color(float.Parse(desColor[0]), float.Parse(desColor[1]), float.Parse(desColor[2]), float.Parse(desColor[3]));
}

///
/// Restore the editor's status
///
public void LoadData()
{
   string id;

   id = PlayerSettings.productName;

   if (EditorPrefs.HasKey(id + "-GridSize"))
      gridSize = EditorPrefs.GetInt(id + "-GridSize");

   if (EditorPrefs.HasKey(id + "-ShowGrid"))
      showGrid = EditorPrefs.GetBool(id + "-ShowGrid");

   if (EditorPrefs.HasKey(id + "-CursorColor"))
      cursorColor = FromStringToColor(EditorPrefs.GetString(id + "-CursorColor"));

   if (EditorPrefs.HasKey(id + "-GridColor"))
      gridColor = FromStringToColor(EditorPrefs.GetString(id + "-GridColor"));

   if (EditorPrefs.HasKey(id + "-SelectColor"))
      selectColor = FromStringToColor(EditorPrefs.GetString(id + "-SelectColor"));

   loaded = true;
}

We have the “OnEnable” function that is executed every time the window is enabled; the “OnDisable” function that runs everytime the window is disabled and finally the “OnDestroy” function that runs when the window is closed. In these functions the status of the editor is saved and restored.

There are a couple of helpers in this part that make easier to save and restore objects from the Color class. “FromStringToColor” and “FromColorToString” are functions that transform the data to make the saving and restoring process easier.

The “SaveData” function basically stores all the important values in an internal storage (Editor Preferences). Depending on the type of data we want to save, we use different functions.

One important thing that has to be highlighted here is this: EditorPrefs.SetInt(id + “-variable id”, variable), the reason why we are using the “id” variable (this represents the name of the project) in the variable’s name is that this internal storage does not distinguish between projects, it means that if we do not add a project identifier, those values will be replaced if you try to use the editor again and we don’t want that.

The “LoadData” function just restores the data in the same way that the we save it but using the appropriate functions.

SUMMARY

In this first post of a series on how to create a tile editor extension for Unity, we covered two basic steps: how to create a new window and how to store the data we modify using that window.

With these basic concepts you can create whatever you want, add more elements to the menu, include a different functionality or develop a completely different extension, I recommend testing all the elements you can add to a menu and play with it to understand better how it works, that’s what I did.

Upcoming posts will have details about the rest of the code and I will let you know as soon as the full extension is approved in the Unity Asset Store so you can download it and use it for your projects.

---