{"id":78290,"date":"2018-04-18T14:55:41","date_gmt":"2018-04-18T14:55:41","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=78290"},"modified":"2021-07-29T19:44:14","modified_gmt":"2021-07-29T19:44:14","slug":"extending-unity-editor-c","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/extending-unity-editor-c\/","title":{"rendered":"Extending the Unity Editor with C#"},"content":{"rendered":"

The series so far:<\/h4>\n
    \n
  1. Introduction to Game Development with Unity and C#<\/a><\/li>\n
  2. Using C# Functions in Your Animations<\/a><\/li>\n
  3. Procedural Generation with Unity and C#<\/a><\/li>\n
  4. Pathfinding with Unity and C#<\/a><\/li>\n
  5. Extending the Unity Editor with C#<\/a><\/li>\n
  6. Using Unity UI and C# to Create a Tic-Tac-Toe Game<\/a><\/li>\n<\/ol>\n\n

    Pretend for a moment that you’re working on your game, and you need to have monster characters placed throughout your scene. Now suppose that in another scene you need the same monster objects from the first scene, but they need different properties from the monsters in the previous scene. For example, they may need to be a different size than the previous monsters. Typically, you only have two methods of changing an object’s properties. One way to change an object is through scripting, but there’s a problem with that method; all objects that use the same script will apply those same properties. From one scene to the next, they’ll all be the same.<\/p>\n

    Another method is to alter the values of variables in the Inspector <\/em>window in Unity, but this would require going to each individual object and changing whatever values you would like changed. This can be very tedious and time consuming if you have a lot of objects to change at once. Surely there’s another way to do the same task. Fortunately, there is a third option available thanks to Unity extensions, and of course the process of creating your own extensions is made relatively simple. In this project you’ll create a simple Unity extension that will gather all objects of a certain tag and set both a random color to each individual object as well as allow you, the user, to change the size of the objects all at once in just a couple clicks.<\/p>\n

    Setting Up<\/h2>\n

    To begin, launch Unity and click the New <\/em>button to start a new project as shown in Figure 1.<\/p>\n

    Figure 1: Starting the new project<\/p>\n

    Next, name the project Extending Unity<\/em> and be sure to set it as a 2D<\/em> project. While this same concept can be used in 3D projects just as easily, this particular project will be using 2D objects to accomplish its goals. Figure 2 shows what your project setup window should look like before creating the Extending Unity <\/em>project by clicking the Create project<\/em> button.<\/p>\n

    Figure 2: Project creation screen<\/p>\n

    Once the project is created, the first task to complete is to create objects to be edited using an extension you’ll make yourself. Using the Create <\/em>menu in the Hierarchy <\/em>window, select 2D Object->Sprite <\/em>to create a new object called New Sprite<\/em>. Figure 3 shows where to find this option.<\/p>\n

    <\/p>\n

    Figure 3: Creating a new Sprite object using the Hierarchy’s Create menu<\/p>\n

    Of course, it’ll be hard to see the changes your extension makes to an object if you can’t see it. Assign a sprite to this object by selecting the button to the far right of the Sprite <\/em>field in the Inspector<\/em> window like in Figure 4.<\/p>\n

    <\/p>\n

    Figure 4: Selecting a new sprite image<\/p>\n

    Select UISprite <\/em>as the sprite you will use for this project’s objects like in Figure 5.<\/p>\n

    <\/p>\n

    Figure 5: The sprite this object will use<\/p>\n

    In order for your extension to change New Sprite <\/em>and all duplicated New Sprite <\/em>object properties simultaneously, you will need to create and assign a tag to the New Sprite<\/em> object. Tags help identify an object for scripting purposes. For example, using tags helps Unity decide if the player ran into an enemy or a wall and will perform whatever actions you assign it from there. To create a new tag, select the New Sprite <\/em>object and open the Tag <\/em>drop down menu found in the Inspector<\/em> window. Then select Add Tag <\/em>at the bottom of the menu. Figure 6 shows where to find these options.<\/p>\n

    <\/p>\n

    Figure 6: Opening the Tags menu<\/p>\n

    Once Add Tag <\/em>is selected, your Inspector <\/em>window should now look like the one in Figure 7.<\/p>\n

    <\/p>\n

    Figure 7: The Unity Tags and Layers window<\/p>\n

    To create a new tag, click the + <\/em>symbol in the Tags <\/em>menu. Name your new tag Sprite <\/em>and click the Save <\/em>button to finish creating your new tag. Figure 8 shows where to add tags.<\/p>\n

    <\/p>\n

    Figure 8: Creating a new tag<\/p>\n

    With the new tag created, select the New Sprite <\/em>object and set the Sprite <\/em>tag to New Sprite <\/em>by opening the Tag <\/em>menu again and this time selecting Sprite <\/em>like in Figure 9.<\/p>\n

    <\/p>\n

    Figure 9: Apply the Sprite tag to the New Sprite object<\/p>\n

    Finally, create eight duplicates of the New Sprite <\/em>object to bring you to a total of nine New Sprite <\/em>objects. To create a duplicate, select the New Sprite <\/em>object and press Ctrl + D. Then change the locations of the New Sprite<\/em> objects so they’re not all in the same place. Figure 10 shows an example of how the objects can be arranged within the Game<\/em> window, but you may arrange them in any way you wish. To move the Sprites, modify the X and Y Position<\/em> values in the Transform window. You can see them in the Game<\/em> or Scene<\/em> window.<\/p>\n

    <\/p>\n

    Figure 10: Example arrangement of the New Sprite objects<\/p>\n

    Now it’s time to create the extension, but there’s one thing you must do in order for the extension to work. You have to create a new folder called Editor <\/em>for Unity to store any extensions you make. The Editor <\/em>folder is where Unity searches for any sort of extensions, whether you make them yourself or if you acquire them from the Asset Store. <\/em>Create a new folder by right clicking in the Assets <\/em>window and choosing Create->Folder <\/em>to create the new folder. Figure 11 shows where to create the Editor <\/em>folder. Remember, the folder name must <\/em><\/strong>be Editor <\/em>for the extension to work.<\/p>\n

    <\/p>\n

    Figure 11: Creating a new folder<\/p>\n

    Within the newly created Editor <\/em>folder in the Assets <\/em>window, create a new script titled NewWindow<\/em> by selecting Create->C# Script<\/em>. Like in Figure 12, be sure this script is within the Editor <\/em>window.<\/p>\n

    <\/p>\n

    Figure 12: Adding a new script to the Editor folder<\/p>\n

    Once the NewWindow <\/em>script is created, double click it to open Visual Studio and begin creating your Unity extension.<\/p>\n

    Adding the Code<\/h2>\n

    Right away you’ll need to add a line underneath the line of code that says using UnityEngine;<\/strong>. To make this project work, enter the following code:<\/p>\n

    using UnityEditor;<\/pre>\n
    Next you should go to the class declaration and change MonoBehaviour<\/strong> to EditorWindow<\/strong> in order for our new window to appear within the Unity engine. With this change done your code should begin to look something like the code in Figure 13.<\/p>\n
    <\/p>\n
    Figure 13: The code that lets Unity know this is an extension<\/p>\n
    Now it’s time to move on to the code that will make this window perform the tasks it needs to do. To begin, delete or comment out the Start <\/em>and Update <\/em>functions as they will not be needed for the duration of this project. Once this is done, underneath the class definition add this code:<\/p>\n
      private GameObject[] sprites;\r\n  private bool changeColors = true;\r\n  private float spriteScale = 1f;\r\n  private string buttonString = \"Get New Colors!\";<\/pre>\n
    The first line creates an empty array that will be used to store those New Sprite <\/em>objects you created earlier. Later, you will use for<\/strong> loops to cycle through each New Sprite <\/em>object to change their size and give them random colors. After this array is declared, you then create a boolean that will control if you want to give new colors to the different New Sprite <\/em>objects followed by a float variable that will be used to change each object’s size. Finally, a string variable was created to be used with a button you will create shortly. Though its default value is “Get New Colors!” it can be changed to something else depending on the circumstances. At this point your NewWindow <\/em>script should begin to look like Figure 14.<\/p>\n
    <\/p>\n
    Figure 14: All variables declared<\/p>\n
    This is where the fun begins! First you must define where the user will find and open this window within Unity. Underneath the variable declarations, add the following line of code:<\/p>\n
    [MenuItem(\"Window\/New Window\")]<\/pre>\n
    You have now told Unity where to place the option to open your custom window, which will simply be called New Window<\/em>. Later on, after completing this script and returning to Unity, you will navigate to Window->New Window <\/em>to open your custom window. Of course, clicking that won’t actually show anything right now, which is where this next part comes in. A static void function will be needed to display the window to the user. Right under the previous line of code add the following function:<\/p>\n
      public static void ShowWindow()\r\n  {\r\n     EditorWindow.GetWindow(typeof(NewWindow));\r\n  }<\/pre>\n
    All that’s done here is to simply find an instance of the New Window<\/em> window. If one does not exist, Unity will create one. Figure 15 shows the code needed to display a new window simply title New Window<\/em>.<\/p>\n
    <\/p>\n
    Figure 15: Coding the ability to select and display New Window in Unity<\/p>\n
    It’s now time to create the mechanics of this custom window. After all, a blank window isn’t really going to help with development in any way. Start by creating the following function:<\/p>\n
      private void OnGUI()\r\n  {\r\n  }<\/pre>\n
    In short, this function will be the one that handles all input from you, the user, and applies whatever changes you ask to the New Sprite <\/em>objects. Begin by placing a label at the top of the extension window, which is done by adding this code to the OnGUI <\/em>function:<\/p>\n
    GUILayout.Label(\"Sprite Settings\", EditorStyles.boldLabel);<\/pre>\n
    Essentially, all you’ve done is place text at the top of the window that says \u2018Sprite Settings\u2019 and made it bold. The next line is a lot more important, as this line will collect all the New Sprite <\/em>objects created earlier and store them in the array you created at the beginning. This is where that Sprite <\/em>tag you created comes into play. You assigned the New Sprite <\/em>objects with the Sprite <\/em>tag in order to help the NewWindow <\/em>script identify which objects to store into the sprites<\/strong> array and ultimately help the NewWindow <\/em>extension you’re creating know which objects to change. With that in mind, add the following line to the OnGUI<\/em> function:<\/p>\n
    sprites = GameObject.FindGameObjectsWithTag(\"Sprite\");<\/pre>\n
    Now NewWindow <\/em>will be able to find all objects tagged with Sprite<\/em> and add them to the sprites <\/em>array for later editing. Next, go ahead and change the buttonString <\/em>text depending on the value of the changeColors <\/em>boolean variable:<\/p>\n
      if (changeColors)\r\n       buttonString = \"Get New Colors!\";\r\n  else\r\n       buttonString = \"Change Sprites to White!\";<\/pre>\n
    Like in video games, it’s nice to have your Unity extension react to certain things you do, in this case changing the value of a boolean. The button that will later be created that assigns new colors to the New Sprite <\/em>objects should have different text depending on if they’re all going to get different colors or if you want to set the color of all the objects to white. At this point, your OnGUI <\/em>function should look like the one seen in Figure 16.<\/p>\n
    <\/p>\n
    Figure 16: The beginnings of the OnGUI function<\/p>\n
    The next step is to create a toggle and a slider. You’ll be adjusting the value of the changeColors<\/strong> boolean by clicking on the toggle, which will then allow you to click another button and give each New Sprite <\/em>object random colors or to simply set all their colors to white. After that, the spriteScale<\/strong> value will be altered based on a slider, which will in turn affect the size of the New Sprite <\/em>objects. For the slider, the minimum value allowed will be one, while the maximum size of the New Sprite <\/em>objects will be ten. To accomplish this you must add this code:<\/p>\n
      changeColors = EditorGUILayout.Toggle(\"Randomly Change Sprite Colors?\", changeColors);\r\n  spriteScale = EditorGUILayout.Slider(\"Sprite Scale\", spriteScale, 1, 10);<\/pre>\n
    With the toggle and slider in place, create the code that will change the size of each object in your sprites<\/strong> array to whatever the value of the spriteScale<\/strong> variable is:<\/p>\n
      foreach (GameObject sprite in sprites)\r\n       sprite.transform.localScale = new Vector3(spriteScale, spriteScale, 0);<\/pre>\n
    This foreach<\/strong> loop may seem a little weird, so I\u2019ll break it down. Basically, the NewWindow <\/em>script will cycle through each object in the sprites<\/strong> array. For every object (sprite), a new Vector3<\/strong> variable will be created and set as the value of sprite<\/strong>‘s local scale, replacing the X <\/em>and Y <\/em>values in the Vector3<\/strong> variable to the value of spriteScale<\/strong>. Remember that the spriteScale<\/strong> value is being changed by the slider created earlier. You’re not necessarily getting the value of the slider itself. Now that this step is complete, the OnGUI<\/strong> function should look similar to the function in Figure 17.<\/p>\n
    <\/p>\n
    Figure 17: Creating a loop that changes the scale of all objects in the sprites array<\/p>\n
    There is now one final step in the OnGUI<\/strong> function creation process that must be done before this function, and by extension this script, is complete. First, create an if<\/strong> statement that checks to see if the user pressed a button, which will be drawn in the same statement. The code for this looks like the following:<\/p>\n
      if (GUI.Button(new Rect(position.width \/ 2, position.height \/ 2, 180, 100), buttonString))\r\n  {\r\n  }<\/pre>\n
    The button that the user can press is specified by using the code new Rect<\/strong> and then specifying the location and size of the button. After that, you give the code a string to place within the button. In this case, you’ll be using the buttonString<\/strong> variable created at the start. After that’s done, it’s time to specify to the script what to do when the button is pressed. To accomplish this, enter the following code inside the if<\/strong> block:<\/p>\n
      foreach(GameObject sprite in sprites)\r\n  {\r\n  \tif (changeColors)\r\n  \t{\r\n  \t\tfloat red, green, blue;\r\n  \t\tred = Random.Range(0.0f, 1.0f);\r\n  \t\tgreen = Random.Range(0.0f, 1.0f);\r\n  \t\tblue = Random.Range(0.0f, 1.0f);\r\n  \t\tsprite.GetComponent<SpriteRenderer>().color = new Color(red, green, blue, 1);\r\n  \t}\r\n  \telse\r\n  \t{\r\n  \t\tsprite.GetComponent<SpriteRenderer>().color = new Color(1, 1, 1, 1);\r\n  \t}\r\n  }<\/pre>\n
    Similar to the previous foreach<\/strong> loop where you adjusted the size of the objects in the sprites<\/strong> array, NewWindow<\/strong> will cycle through each New Sprite <\/em>object and change its color. If the changeColors<\/strong> boolean is true, it will create three float variables that will all get a random number between zero and one assigned to them. From there, the script gets the sprite <\/em>object’s SpriteRenderer <\/strong>component and then gets the color<\/strong> variable within that component. It sets it to a new color with the values or red<\/strong>, green<\/strong>, and blue <\/strong>and sets the alpha (the transparency) to 1. However, if the changeColors<\/strong> boolean is false, it will simply set all sprite<\/strong> objects to the color white, which is 1, 1, 1<\/strong> in code.<\/p>\n
    It’s important to specify in the Random.Range<\/strong> part of the code that the numbers available to randomly pick include decimal numbers, which is why you need to specify the .0f<\/strong> part of the number. Should you forget to do this, Unity will simply pick between zero and one, which will not work for assigning random colors as zero and one are the minimum and maximum values that Unity will read when it comes to colors. The if<\/strong> statement and foreach<\/strong> loop should look like the one seen in Figure 18.<\/p>\n
    <\/p>\n
    Figure 18: Completing the OnGUI function<\/p>\n
    With the code completed, you’ve not only created the OnGUI<\/strong> function but also the NewWindow <\/em>script. Now is the time to save your code and return to Unity to test out your new extension.<\/p>\n
    Testing the Extension<\/h2>\n
    Remember when you specified in the code where to open the New Window <\/em>window? You coded it so that it would appear under Window <\/em>in the menu and have the name New Window<\/em>. Figure 19 shows where to find your extension.<\/p>\n
    <\/p>\n
    Figure 19: Opening the New Window extension<\/p>\n
    Once opened, test out your new extension. Change the Sprite Scale <\/em>slider and watch as the New Sprite <\/em>objects change as you adjust the slider. Toggle the Randomly Change Sprite <\/em>checkbox to true and click the Get New Colors <\/em>button to change all New Sprite <\/em>colors. Set them back to the color white by setting the toggle to false and pressing the button again. Figure 20 shows an example Game <\/em>screen of the final project.<\/p>\n
    <\/p>\n
    Figure 20: The New Window extension in action<\/p>\n
    Reusing the Extension<\/h2>\n
    If you wish, you can also save the extension for later use in a different project in an object called a \u2018package\u2019. To do this, go to your Assets <\/em>window and right click the Editor <\/em>folder. Then, select Export Package <\/em>like in Figure 21.<\/p>\n
    <\/p>\n
    Figure 21: Exporting the package<\/p>\n
    A new window will appear showing what assets will be included inside the package you’re about to make. Be sure to have everything selected for exporting. Here, the only thing that will be exported is the folder Editor <\/em>as well as the NewWindow <\/em>script you created. When you’re ready, click the Export <\/em>button near the bottom of the window as shown in Figure 22.<\/p>\n
    <\/p>\n
    Figure 22: Exporting the extension<\/p>\n
    Save your Unity package to any location you desire on your computer and give it a name. In this example the package has been named extension package <\/em>but it can have whatever name you wish. Once you’ve saved it, create a new project in Unity. Then, with the project currently open, find the package on your computer (Figure 23) and double-click it.<\/p>\n
    <\/b><\/i><\/u><\/p>\n
    Figure 23: Selecting the package file to be imported into a new project<\/span><\/b><\/i><\/u><\/p>\n
    You’ll see a new window open appear in your new Unity project. In this window you can see the Editor <\/em>folder and NewWindow <\/em>script you created in the Extending Unity<\/em> project. It is here that you can also decide to omit certain scripts from the import but considering there’s only one script in this extension you don’t need to make such changes. Like in Figure 24, click the Import <\/em>button near the bottom of the window to bring these assets into your new project.<\/p>\n
    <\/p>\n
    Figure 24: Importing the extension<\/p>\n
    Once Unity has finished importing the package you’ll see in your Assets <\/em>window the very extension you made in the Extending Unity <\/em>project! In this case, to actually use the functionality, you will need to add some Sprites to the new project.<\/p>\n
    Conclusion<\/h2>\n
    It’s almost guaranteed that at some point when using any program, whether it be Unity, Photoshop, or Visual Studio, that extensions will be desired, perhaps even needed. In the case of Unity, you can easily create your own extensions that will be tailored specifically to your needs. There’s certainly no harm in browsing Unity’s Asset Store <\/em>for extensions. In fact, it is often worth checking to see if there’s anything that can help with whatever you’re developing. However, odds are they will not be the perfect fit for your project. Even the most general-purpose extensions you can find may not work with your project exactly<\/em> like you want it to.<\/p>\n
    Therein lies the beauty of creating your own extensions; you’re in control of how they function. You can have them do as much or as little as you need them to. They’ll be made specifically with your needs in mind. At the end of the day, nobody knows your needs as well as you do. The Unity engine arrives out of the box with a lot of tools and features, but, should you wish, you can easily add to Unity’s functionality using your own code.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The next step in learning how to create games in C# using Unity is to add extensions to get custom functionality. Lance Talbert shows you how to create an extension that changes the properties of many objects at once.…<\/p>\n","protected":false},"author":317499,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[95509],"coauthors":[52549],"class_list":["post-78290","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","tag-standardize"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/78290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/317499"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=78290"}],"version-history":[{"count":5,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/78290\/revisions"}],"predecessor-version":[{"id":78318,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/78290\/revisions\/78318"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=78290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=78290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=78290"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=78290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}