Recommended reading
- CSDN home page
- GitHub open source address
- Unity3D plug-in sharing
- Jane’s address book
- My personal blog
- QQ group: 1040082875
One, foreword
This is I see a more complete tutorial on custom Windows, custom components, very detailed everyone to learn it.
Second, the body
1, Unity Editor basics (1) : build-in Attribute
The Unity built-in properties can be found in the official documentation. This article only introduces some common built-in properties, as shown in the figure below:
AddComponentMenu
The AddComponentMenu property allows you to add a script to the Component menu. You can then create the script for a selected game object using Component -> (the name you set), as shown below:
RequireComponent
The RequireComponent() property will automatically add the required component, and if it already exists, it will not be added again and cannot be removed, as shown below:
Tip: After testing, I found that changing the script to add RequireComponent to an object doesn’t work if the script is already attached to the object, so be careful when using this property.
ContextMenu
The ContextMenu() property allows the ContextMenu() property to add a command to the component, which can be called by right-clicking or clicking on the Settings icon (usually used in functions), and executes the function when it is not running, as shown below:
HelpURL
HelpURL() provides a custom document link. Clicking the document icon on the component opens the link you specify, as shown below:
Tip: When filling in a link, be sure to write http:// or https://, otherwise nothing will happen.
Range(), Multiline(), header()
- Range () properties
Use to specify a value within a range and add a slider to it in the Inspector panel.
- Multiline () properties
Used to add multi-line input to string;
- The header () properties
The title used to add the property
The specific operations are as follows:
In line 9, we use [Header(“BaseInfo”)] to set the title (“BaseInfo”), as shown in the figure above.
2. On line 10, we add 5 lines of input to the name attribute using [Multiline(5)], as shown in the figure above.
3. In line 12, we use [Range(-2,2)] to specify a Range of (-2,2) for its age attribute and add a slider for it, as shown in the figure above.
Tooltip () and Space ()
The Tooptip () property is used to add a prompt in the Inspector when the mouse is over the property set to Tooptip (). Space () is used to add the specified distance between two properties in the Inspector, as shown below:
Unity Editor Basics: Customize the Inspector panel
The final result
The preparatory work
Using the same Unity project as in the previous article, create a new C# script in the Scripts folder, name it “Player”, double-click to open the script and add the following code to it:
The Player class records basic Player information such as ID, name, backstory, health, damage, and so on.
The following figure shows some basic knowledge and precautions for customizing the Inspector properties:
Portal: www.ceeger.com/Script/Edit…
Next we started making our own Inpector. For customizing the Inpector panel, see the API below:
Portal: www.ceeger.com/Script/Edit…
Custom Inspector interface layout properties
Now create a new C# script in the Editor folder, double-click to open the script, and add the following code to it:
Okey, let’s break it down one by one
1. Vertical-vertical layout
The default interface layout is vertical, but for the sake of the show, it’s better to put it there. To set the element to vertical, use these brothers:
EditorGUILayout.BeginVertical();
EditorGUILayout.EndVertical();
Copy the codeIn the brothers, the layout is arranged vertically.
As the figure above shows, the entire page is laid out vertically.
Horizontal – Horizontal layout
Setting an element to horizontal layout is declared using these brothers:
EditorGUILayout.BeginHorizontal();
EditorGUILayout.EndHorizontal();
Copy the codeThe layout in the brothers is arranged horizontally.
Since we have used Horizontal brothers in the circle above, the elements in this pair are all arranged horizontally.
3, Space – Space (blank line)
Use editorguilayout.space () to empty a line between two elements.
4. Draw various types of fields
The following methods are used to draw fields:
EditorGUILayout. LabelField () tag field EditorGUILayout. IntField () integer field EditorGUILayout. FloatField () floating point Numbers EditorGUILayout. TextField () text fields EditorGUILayout. Vector2Field () 2 d vector fields EditorGUILayout. Vector3Field () three dimensional vector field EditorGUILayout. Vector4Field () four dimensional vector fieldCopy the codeThe rule is that the method names end in Field, and you can choose the method based on the type of drawing.
The first is the name of the field to be drawn (type string), and the second is the value to be drawn, as follows:
1 indicates the label field. 2 indicates the integer field. 3 indicates the text field
5, slider, progress bar
Slider: Editorguilayout.slider ()
Editorguilayout.slider () is used to draw a Slider, as shown above:
The first argument is the name of the slider the second argument is the value of the slider to change and the third and fourth arguments are the range of the slider
The effect is shown in the figure below:
ProgressBar: editorgui.progressbar ()
Editorgui.progressbar () is used to draw a ProgressBar.
The first parameter sets the size of the progress bar, which is of type Rect. The second parameter sets the displayed value, and the third parameter sets the name of the progress bar
Tip: 1. As the first parameter, we use the GetRect () method of the guilayoututility.getRect () utility class to return a set box. In this case, we set a 50*50 box.
2. For the second parameter, we use player.health / 100.0f. That’s because the maximum value of the progress bar is 1, and if you don’t divide by 100, when the slider value is 1, the progress bar fills up, so we want to keep the value synchronized with the ratio of the progress bar, so let’s divide by 100.
Effect:
6. Help box
HelpBox: editorguilayout.helpbox ()
Editorguilayout.helpbox () is used to draw a box (also a rectangle) and display a prompt inside the box, as shown in the figure above:
The first parameter is the incoming prompt and the second parameter is the type of the prompt
Effect:
Wrong type
Normal type
Warning type
Basic (3) : Custom Windows
The final result
The preparatory work
In your previous project, go to the Editor folder, create a new C# script, name it “MyFirstWindow”, double-click to open the script and add the following code:
Common custom window properties
Portal: www.ceeger.com/Script/Edit…
Portal: www.ceeger.com/Script/GUIL…
These are the main classes we use in this case.
The code analysis
attribute
First, three variables are declared:
- 1. BugReporterName is used to store the name of the person recording the Bug
- 2. Description Describes the Bug information
- 3. BuggyGameObject is used to store Bug objects
Sets the name of the window
The constructor is used to set the name of the window, as shown in the code comment. The titleContent property and the GUIContent class are unfamiliar.
GUIContent Interface content class
The titleContent property constructor does something like this:
Sets the name of the window
Add menu bar option – Open window
This function is used to add a menu option to the menu bar to open the window. More unfamiliar are the [MenuItem()] property and the GetWindow () function.
Two things to note about the [MenuItem()] property (as indicated in the figure above) : 1. Must be a class in Assets/Editor and using UnityEditor 2. The function called must be static.
! [here write image description] (HTTP: / / https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18cb131d3c4249e797e1541252be6ba9~tplv-k3u1fbpfcp-zoom-1.imag e)Copy the codeThis function is used to return a window object (i.e. open a window).
Draw the window
Drawing the window elements needs to be designed inside the OnGUI() function, so let’s break them down.
There are no properties listed in the GUi.skin API, but you can right-click on the Assets menu and Create => GUI Skin, as shown below:
I want all the corresponding properties in there
3. Use guilayout.label () to draw the title
The whole code looks like this:
Draw text
Well, deja vu, so I won’t bore you with it, but here’s what it looks like:
Displays the scene currently being edited
In this code, the more strange is EditorSceneManager. GetActiveScen (). The name, let’s look at the following simple to understand:
Return the current Scene (that is, return the Scene parameter), and use the name attribute to get the name of the Scene. The effect is as follows:
Display current time
Guilayout.label () : guilayout.label () : guilayout.label () : guilayout.label () : guilayout.label () : guilayout.label ();
Msdn.microsoft.com/zh-cn/libra…
The renderings are as follows:
Draw object slot
Let’s look at the API first:
The first parameter is used to set the title name of the card slot. The second parameter is used to set the object 3 displayed in the field. The third parameter sets the type displayed 4. The fourth parameter sets whether objects in the scenario are allowed to be specified
The effect is as follows:
Draws the description text area
Draw button
It’s as simple as adding a button. In our code, we use an if statement to determine the event that will be triggered when we click the button (the return value of this function is a bolol type). We also note this in our code, so we can go straight to the effect:
#####SaveBug () function
What this function does is simply save some of the parameters we set to a text file (.txt file) and nothing more.
The steps are as follows: 1. In the first line, create Directory 2 using the Directory class. Create a write stream class (StreamWriter) 3. Then write the parameters to the file
If you are not familiar with C# file manipulation, it is time to go back and make up for it. The API link is as follows:
Msdn.microsoft.com/zh-cn/libra… Msdn.microsoft.com/zh-cn/libra…
The specific operations are as follows:
Then you should see something like this in the Assets folder:
Screenshot function of SaveBugWithScreenshot
What this function does is exactly the same thing as the one above, just a line of code, and that line of code is just a screenshot of the game, and that’s it. See the API below:
The specific operation is the same as above, but with one more picture, that’s all, as shown in the figure below:
Well, that’s the end of our article.
Unity Editor Basics (4) : Handles
The final result
The preparatory work
Due to too long not updated, the previous project did not know where to run. Let’s create a new project and name it “MyHandles”. Then create three folders, as shown below:
Next in the Scripts folder, create a C# script and name it “MyHandles”; Then create another C# script in the Editor folder and name it “HandlesInspector”. Then save the following small icon in the Img folder:
All right, we’re all set. We’re starting to code.
Code before the preview
In this tutorial, we’ll focus on Handles. Here’s a basic introduction to the Handles class. Kosen picks out a few common attributes and methods to create something simple.
API portal: www.ceeger.com/Script/Hand…
Draw the radius handle
First, open our myhandles.cs script and add a variable to it:
Then open the HandlesInspector. Cs script and add the following code:
Save both scripts, go back to Unity and create an empty object and add the myhandles.cs script to it:
When we look at the scene, nothing happens except “MyHandles” in the scene. Let’s adjust the Area Radius parameter and see what happens:
The code is very simple, the comments have been made for everyone, I believe everyone can understand it. If you don’t know much about the API, you can check it out:
What it does: it’s a little bit of a collider box. It’s used for AI to determine and specify UI influence areas.
Draws the zoom handle
Open the MyHandles. Cs script and add the following variables:
Then add the following code to the HandlesInspector. Cs script:
This code is not difficult to understand, but more parameters
PS: Because the Chinese version of the introduction is not complete, so make up an official API.
For example, Unity’s particle system uses many custom handles. For example, particle system’s Shape parameter uses the fifth parameter of the function to draw:
Draws a position handle
Open the MyHandles. Cs script and add the following variables:
Then add the following code to the HandlesInspector. Cs script:
Back in the scene, here’s the question:
Don’t worry, that’s because you didn’t set the nodePoints property, so the function accesses an empty array and therefore reports an old driver error. OK as shown below:
This code is simple, also two parameters, if still not clear friends can try more.
What it does: This can be applied to the AI, and then add a position handle for each AI.
Draws the rotation handle
Open the MyHandles. Cs script and add the following variables:
Then add the following code to the HandlesInspector. Cs script:
Again, the same error will occur, or even worse, the Scene view will go blank!! Use the same solution as shown below:
PS: The number of nodePointsRotation should be the same as or less than the number of nodePoints.
This code is also very simple, it is also two parameters, if still unclear friends can try more.
Let’s do an operation and see if you can understand what I’m saying:
Does it feel like it’s still, like it’s not moving? Let’s change the code:
At this time, you will see the following mistakes, do not panic, we only to the more mistakes, solve more, then the more mistakes are not a terrible thing:
The value of W cannot be 0, so we only need to set W to 1, as shown below:
This operation, mainly is to help you find some easy to miss mistakes during development process, there is another goal is to make with with the rotation axis rotation (because the second parameter is the position the operating direction of rotation of the handle, I put it in order to we set a good direction of rotation, so the location operation handle can rotate and follow our).
Connection handle
Add the following code to the HandlesInspector. Cs script:
Go back to the scene and see something like this:
Mathf.repeat () mathf.repeat () mathf.repeat ()
And the reason for that, as you all know, is to keep the subscript from crossing the line.
Open and close the handle
Open the MyHandles. Cs script and add the following variables:
Then add the following code to the HandlesInspector. Cs script:
When showNodeHandles are false, the if block is not executed. Therefore, the position handle and rotation handle cannot be drawn. The result is as follows:
Rendering scene GUI
Add the following code to the HandlesInspector. Cs script:
When you return to the scene, you will see the following interface:
And this code, it’s pretty simple, but it uses two pairs of functions.
The first pair is handle.begingui () and handle.endgui (). This is a pair of function table names that you want to draw under the Scene view.
For 2: GUILayout. BeginHorizontal () and GUILayout EndHorizontal (). This pair of functions tells you that you want to draw something horizontally. The second pair of functions are familiar to all of you. Remember they were introduced in Unity Editor Basics (3) : Editor Window.
The logic is simple, that is, I draw a button and when I click it, the value of myHandle. shoNodeHandles will be reversed (true, false).
Add: The operations in the first pair of functions are almost the same as those in the custom window, you can refer to the following API to try it out:
www.ceeger.com/Script/GUIL…This plugin uses some of the things we learned today:
All right, that’s about it
Unity Editor Basics (5) : Gizmos
The final result
The preparatory work
Create the following directory structure in the previous project or in the new project:
If it’s a new project, just create Scripts and Gizmos.
This article uses the following API:
Portal: www.ceeger.com/Script/Gizm…
Basic knowledge of
As you can see from the figure above, Gizmos are used for visual debugging or auxiliary Settings in the scene view.
Note that the drawing of Gizmos must be written in the OnDrawGizmos or OnDrawGizmosSelected script, so our first step is to add these two functions to the script.
A yard
Create a C# script in the Scripts folder and name it “MyGizmos”. Double-click to open the script and enter the following code:
Let’s put it to the test:
Gee, it doesn’t feel right, it doesn’t feel like every frame is calling! If you don’t make any errors in the Scene view, neither of these functions will be called. .
Anyway, so long as they know that’s what’s going on.
PS: Must be in the Scene view, does not work in the Game view.
Next add the following code for the “mygizmos.cs” script:
Ok, now go back to the scene view and do the following:
Oh clear, our wire frame sphere will come out, is not very simple ah.
Code analysis:
The first argument to this function is the center point position of the wireframed sphere, which is of type Vector3.
The second argument is the radius size of the wireframe sphere, which is of type Float.
Next add the following code to our script:
Ok, now go back to the scene view and do the following:
Oh clear, our line will come out, is not very simple ah.
Code analysis:
As the figure above explains very clearly, two parameters mean: draw a line from the starting point to the to position.
So the first argument is the starting position, and the second argument is the specified position.
The above code means that the current position expands in the positive direction of the z-axis according to the value of size.
Next add the following code for our script “mygizmos.cs” :
Ok, now go back to the scene view and do the following:
As shown in the figure above, we draw five solid spheres by calling Gizmos through the for loop.
Code analysis:
You can see from the figure above. The first parameter is the position of the center point to draw the sphere, and the second parameter is the radius of the sphere.
So in our code, we use the for loop to create multiple spheres based on the nodePoints parameter. In the above case, Kosen created five spheres and set their radius to 0.5 (you can also add a parameter to dynamically manipulate the radius value).
Since everything is painted in one color, you can add the following code:
Effect after adding:
Our spheres are blue, our lines are programmed red, and unset wireframe spheres are still the default white.
PS: gizmos.color = color.blue, if no subsequent resetting of the drawing color is specified, then the last set color is used.
Next add the following code for our script “mygizmos.cs” :
Go back to the scene and see what happens:
Ok, so you can see from the figure above what the code we added means. It’s just a matter of connecting these spheres together.
Embarrassed, found that the last thing to be exposed in front of the… This is something like this:
I’m sure you all know how to set this up, but for the sake of the integrity of this article, let’s do it again:
Okay, so this is manually set, so how do you set it in code?
Please add the following code:
Go back to the scene and see what happens.
Oh, nothing happened!!
Oh, I can’t find the picture resource. As you can see above, this is why the beginning of this article asks everyone to create a Gizmos folder. Now put one of your favorite ICONS in your Gizmos folder and name it “icon.jpg”.
PS: The name of the image must be the same as the name of the second parameter in the code.
Unity Editor Basics (6) : Property Drawers
The final result
The preparatory work
Create a new project or a project from the previous one, and then create two C# Scripts in the Scripts folder named “Persion. Cs” and “showpersioninfo.cs”, as shown below:
Then the Editor folder to create a script, called “PersionPropertiesDrawer. Cs” specific as shown in the figure below:
A yard
First, open our “Persion. Cs” script and add the following code to it:
This code need not explain, is a common class and enumeration. Next add the following code to our “showpersioninfo.cs” script:
Why is that? As you all know, in order to attach a script to a gameobject, the script must inherit from MonoBehaviour. You can attach “Persion. Cs” to the game object and it will look like this:
So “showpersioninfo. cs” is just a helper class that hooks our “Persion.
Ok, let’s create an empty gameobject and name it “Persion”, then add the script “showpersioninfo.cs” to it:
There’s nothing here!! We missed a piece of code, so let’s fill it in:
In order for a class’s properties to appear in the Inspector, you must serialize the class.
Ok, let’s go back to Unity and see what has changed.
Perfect! The properties of the Persion class are successfully displayed in the Inspector.
Ok, let’s take a quick look at what serialization is, as shown below:
When you serialize a class, you read the value from the attribute, save it in a certain format, and transfer it to another place. So, this process is given to Unity engine to achieve, a simple understanding of the line (that is, will use the line).
This is the core of this tutorial!!
First of all, open our “PersionPropertiesDrawer. Cs” script, to add the following code:
Let our “PersionPropertiesDrawer. Cs” inherited from PropertyDrawer class, then rewrite the OnGUI and the GetProperties method.
Add [CustomPropertyDrawer(Typeof (Persion))] to specify that this class is for drawing custom properties.
Let’s test what the parameters passed in to these methods do by adding the following code to our script:
Ok, now go back to Unity and look at the test data:
1. The OnGUI and GetPropertyHeight property parameters are the same. This parameter holds the property information in Persion.
2. The Label parameter in OnGUI and GetPropertyHeight is the same. This parameter contains the name of the Persion class.
3. The Position parameter refers to the area to be drawn in the Inspector.
PS: For testing, some code was commented out and a 2D rigid body component was added.
One more thing is missing: the height of the row in the Inspector is 16. We can see from the picture below.
Ok, now let’s draw our Persion properties. Our goals are shown below:
Take a look at our chart below:
Ok, then start code our code, open the “PersionPropertiesDrawer. Cs”, to add the following code:
What about the code above? It’s all been analyzed. There may be some people who are confused about the two places, namely [get the corresponding serialization property] and [draw property]. It’s actually quite simple, which can be understood from the following two pictures:
Ok, let’s go back to Unity and see if our effect works:
All right, so that’s done perfectly.
At this point, the article is finished.
Unity Editor Basics (7) : Property Attributes
The final result
The preparatory work
Remember the Unity Editor Basics 1: Build-in Attribute? As shown in the figure below:
Create a new project or a project from the previous one. Then create two C# Scripts in the Scripts folder named “readonlyattribute.cs” and “test.cs”, as shown below:
Then the Editor folder to create a script, called “ReadOnlyAttributeDrawer. Cs” specific as shown in the figure below:
A yard
First, open our “readonlyAttribute.cs” script and add the following code to it:
Our “ReadOnlyAttribute” class inherits from our “PropertyAttribute” class. The explanation of this class is as follows:
So what we’re going to do is make our “ReadOnlyAttributeDrawer” class inherited from the PropertyDrawer class and override the OnGUI and GetPropertyHeight methods, as shown in the figure below:
The code above was covered in the previous article, so I won’t go over it too much here.
Good, then continue for our “ReadOnlyAttributeDrawer. Cs” OnGUI method to add the following code:
In the above code, we used an enumeration called “SerializedPropertyType”, which holds the types of serialized properties. It contains many types, but we only used these in this article. If you are interested, you can try other types.
We use this enumeration to get the value of the corresponding type for value, and then use a Label to draw it in the Inspector panel (\t is the TAB, to beautify the display).
Ok, now open our “test.cs” script and add the following code:
Now, let’s go back to Unity and see what happens:
Well… Isn’t that simple? Let’s make one with parameters.
Let’s open our “readonlyAttribute.cs” and add the following code:
Let us as “ReadOnlyAttributeDrawer. Cs” OnGUI function to add the following methods:
I believe you can understand the code above, the only thing that might be a little confusing is the attribute attribute, This is actually the ReadOnlyAttribute class we passed in with [CustomPropertyDrawer(typeof(ReadOnlyAttribute))], so We Debug its type name. Let’s look at the printed information:
Okay, so that’s our ReadOnlyAttribute class. By the way, Kosen prints the value of myAttribute.textColor to test whether the value was passed in correctly.
Ok, to start testing, let’s add the following code to our “test.cs” script:
As you can see from the figure above, the arguments passed by [ReadOnly(argument)] correspond to the arguments passed by our ReadOnlyAttribute constructor.
Ok, let’s go back to Unity and see what it looks like:
Okay, so as you can see, the value has been passed in perfectly, but it’s not exactly what you’d expect. But the Apha value of our My Int works.
Kosen worked on this Bug for a whole night, and finally found that it was originally a Bug created by unity 5.x. In short, kosen tried unity 5.x tonight, and it was still a bird. Finally, Unity4.6 was no problem to achieve the effect we wanted. One is the rendering of Unity4.6:
(Tried version)
(Unity4.6 effect)
Ok, that’s it for today’s tutorial
Unity Editor Basics (8) : Decorator Drawers
The final result
The preparatory work
Create a new project or a project from the previous one (coxon used the original project because the content of this one is similar to the content of the previous one), and then create two C# Scripts in the Scripts folder named: “Drawerimageattribute. cs” and “test. cs”, as shown below:
Then the Editor folder to create a script, called “DrawerImageAttributeDrawer. Cs” specific as shown in the figure below:
A yard
First, open our “drawerImageAttribute.cs” script and add the following code to it:
Next, open our “DrawerImageAttributeDrawer. Cs” script, to add the following script:
The code above, except for the red box, was covered in the last article, so I won’t go into too much detail here.
“DecoratorDrawer” means “DecoratorDrawer”. “Drawer” means “drawer”. It means it’s for decoration. Let’s look at the source code:
As we know from the source code, it is similar to the PropertyDrawer class in the previous article, which is inherited from GUIDrawer. It’s just that the parameters of his OnGUI method are two better than the parameters of the PropertyDrawer’s OnGUI method, that’s all.
Let us as “DrawerImageAttributeDrawer. Cs” add the following code:
If not, go to the Resources folder and read the corresponding image. Then call gui.drawTexture (position, image). Draw the image in the Inspector panel.
Therefore, the next operation believe everyone know it. Create the Resources folder, put the image in the folder, change the name, and you’re done!
Next, let’s go back to Unity and see what happens:
Why, what’s wrong? Why is it so ugly? See here, believe that read the last article taught the folks should know how to do it? Change the return value of our GetHeight() method.
Let’s go back to our “drawerImageAttribute.cs” script and add the following code to it:
Then return to the “DrawerImageAttributeDrawer. Cs”, add the following code:
Ok, now open our “test.cs” script and add the following code:
Now, let’s go back to Unity and see what happens:
This is… You pit me? No, no, no, no. Kosen did it on purpose, and it’s not a mistake if it’s a mistake.
Ok, let’s fix this error. For our next “DrawerImageAttributeDrawer. Cs” script to add the following code:
Then go back to Unity, look at the test data, and analyze why it went wrong:
From the figure above, we can see that the script first calls GetHeight(), so when we use _attribute.height in GetHeight(), we will report a null pointer error, because the _attribute has not been initialized. So let’s add the following code:
Ok, let’s go back to Unity and see what it looks like:
It’s Perfect.