unity 之 IMGUI 二"/>
unity 之 IMGUI 二
Customization
Customizing your IMGUI Controls:自定义IMGUI控件
通过 GUIStyles微调你的控件的外观,比如字体的颜色,字体的大小等,当你创建一个控件时,如果你没有声明自己的GUIStyles,unity使用默认的style.
如果你有很多个GUIStyles,你可以使用 GUISkin. GUISkin只不过是一个GUIStyles.的集合
How Styles change the look of your GUI Controls
Control 定义内容 content, the Style定义外观 .这可以定义一个外观像Button的 Toggle
The difference between Skins and Styles:
skin和style的区别就是:GUISkins是GUIStyles的集合,Styles定义GUI控件的外观。如果您想使用Style,则不必使用Skin
Working with Styles
GUI Control 函数的最后一个参数用来给定义的 GUIStyle去显示控件的外观 Control. 如果这个参数没被传值2,unity使用默认的style,它通过传递控件类型的名字作为一个字符串值. 比如: GUI.Button() 使用 “button” , GUI.Toggle() 使用 “toggle” style, 您可以通过将其指定为最后一个参数来覆盖控件的默认GUIStyle。这样单独的修改是作为一个字符串,来覆盖原来的style,如果你想要自定义一个GUIstyle,需要传递的是GUIstyle变量的名字
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {void OnGUI () {// Make a label that uses the "box" GUIStyle.GUI.Label (new Rect (0,0,200,100), "Hi - I'm a label looking like a box", "box");// Make a button that uses the "toggle" GUIStyleGUI.Button (new Rect (10,140,180,20), "This is a button", "toggle");}
}
Making a public variable GUIStyle
当你声明一个共有的 GUIStyle 变量, 所有的 Style 将会在属性面板上显示出来 Inspector
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {public GUIStyle customButton;void OnGUI (){// Make a button. We pass in the GUIStyle defined above as the style to useGUI.Button (new Rect (10,10,150,20), "I am a Custom Button", customButton);}
}
Working with Skins
Creating a new GUISkin
To create a GUISkin, select Assets->Create->GUI Skin. 会创建一个GUIskin,并能够在属性面板上编辑它
Applying the skin to a GUI
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {public GUISkin mySkin;void OnGUI () {// 声明要使用的skinGUI.skin = mySkin;// Make a button. This will get the default "button" style from the skin assigned to mySkin.GUI.Button (new Rect (10,10,150,20), "Skinned Button");}}
通过 GUI.skin = null;放弃使用自定义skin,而是使用原生态skin
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {public GUISkin mySkin;private bool toggle = true;void OnGUI () {// Assign the skin to be the one currently used.GUI.skin = mySkin;// Make a toggle. This will get the "button" style from the skin assigned to mySkin.toggle = GUI.Toggle (new Rect (10,10,150,20), toggle, "Skinned Button", "button");// Assign the currently skin to be Unity's default.GUI.skin = null;// Make a button. This will get the default "button" style from the built-in skin.GUI.Button (new Rect (10,35,150,20), "Built-in Button");}}
Changing GUI Font Size
// C# example
using UnityEngine;using System.Collections;public class Fontsize : MonoBehaviour
{void OnGUI (){//Set the GUIStyle style to be labelGUIStyle style = GUI.skin.GetStyle ("label");//Set the style font size to increase and decrease over timestyle.fontSize = (int)(20.0f + 10.0f * Mathf.Sin (Time.time));//Create a label and display with the current settingsGUI.Label (new Rect (10, 10, 200, 80), "Hello World!");}}
上面所示的是动态修改原生态skin的lable字体大小,它是指定了一种控件,而不是应用到所有控件,当然,修改字体大小的方式有很多种
MGUI Layout Modes
Fixed Layout vs Automatic Layout
IMGUI system有两种布局方式: Fixed and Automati,固定布局和自动布局. GUI使用的是固定布局,就是你自己定义控件的大小,如果要使用 Automatic Layout, 通过 GUILayout 而不是 GUI 创建控件. 这两种布局方式可以在 OnGUI() 中同时使用.
固定布局是因为你知道内容的大小,所以能声明一个盛的下的布局,自动布局可以自动扩展,比如:如果你根据保存的游戏文件创建了许多不同的按钮,你并不知道到底会绘制多少个按钮。在这种情况下,自动布局可能更有意义。这取决于你的游戏设计以及你想如何呈现你的界面。
在使用时有两个关键的区别 Automatic Layout:
- GUILayout is used instead of GUI
- No Rect() function is required for Automatic Layout Controls
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {void OnGUI () {// Fixed LayoutGUI.Button (new Rect (25,25,100,30), "I am a Fixed Layout Button");// Automatic LayoutGUILayout.Button ("I am an Automatic Layout Button");}}
Arranging Controls
分组方式:. Fixed Layout固定布局中,使用Groups来打组. Automatic Layout自动布局中,使用Areas, Horizontal Groups, and Vertical Groups打组
Fixed Layout - Groups
固定布局下,使用 GUI.BeginGroup() and GUI.EndGroup() 来打组,. 所有在组内的控件,是一个整体,它们基于组的左上角排列,而不是屏幕的左上角,所以定义位置的时候是根据group的位置来定义,group位置点为0.0,如果你修改了组的位置,则所有组内的控件也会随之更改
例如,很容易在屏幕上集中多个控件
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {void OnGUI () {// Make a group on the center of the screenGUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));// All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.//这里定义的位置是根据group的位置来的GUI.Box (new Rect (0,0,100,100), "Group is here");GUI.Button (new Rect (10,40,80,30), "Click me");// End the group we started above. This is very important to remember!GUI.EndGroup ();}}
也可以嵌套group
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {// background image that is 256 x 32public Texture2D bgImage; // foreground image that is 256 x 32public Texture2D fgImage; // a float between 0.0 and 1.0public float playerEnergy = 1.0f; void OnGUI () {// Create one Group to contain both images// Adjust the first 2 coordinates to place it somewhere else on-screenGUI.BeginGroup (new Rect (0,0,256,32));// Draw the background imageGUI.Box (new Rect (0,0,256,32), bgImage);// Create a second Group which will be clipped// We want to clip the image and not scale it, which is why we need the second GroupGUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));// Draw the foreground imageGUI.Box (new Rect (0,0,256,32), fgImage);// End both GroupsGUI.EndGroup ();GUI.EndGroup ();}}
Automatic Layout - Areas
Areas是自动布局里面的打组方法Automatic Layout,和固定布局里的Groups 很像 Fixed Layout Groups in functionality
Automatic Layout 不需要在屏幕上定义存放控件的区域. 控件会自动对其区域的左上角. 您还可以创建手动定位的区域。一个区域内的GUILayout控件将放置在该区域的左上角。在区域内部的控件,比如button,toggle会自拉伸宽度,适应区域的宽度
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {void OnGUI () {GUILayout.Button ("I am not inside an Area");GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));GUILayout.Button ("I am completely inside an Area");GUILayout.EndArea ();}}
Automatic Layout - Horizontal and Vertical Groups
当使用自动布局时,默认情况下,控件会从上到下依次出现。在很多情况下,您需要更好地控制控件的放置位置和它们的排列方式。如果使用自动布局模式,则可以选择水平和垂直组
通过GUILayout.BeginHorizontal(), GUILayout.EndHorizontal(), GUILayout.BeginVertical(), and GUILayout.EndVertical().
任何在 Horizontal Group 内部的控件,会水平放置.
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {private float sliderValue = 1.0f;private float maxSliderValue = 10.0f;void OnGUI(){// Wrap everything in the designated GUI AreaGUILayout.BeginArea (new Rect (0,0,200,60));// Begin the singular Horizontal GroupGUILayout.BeginHorizontal();// Place a Button normallyif (GUILayout.RepeatButton ("Increase max\nSlider Value")){maxSliderValue += 3.0f * Time.deltaTime;}// Arrange two more Controls vertically beside the ButtonGUILayout.BeginVertical();GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);// End the Groups and AreaGUILayout.EndVertical();GUILayout.EndHorizontal();GUILayout.EndArea();}}
Using GUILayoutOptions to define some controls
使用GUILayoutOptions重写自动布局的参数Automatic Layout parameters.
还记得在上面的区域示例中,按钮将其宽度扩展到100%的区域宽度吗?如果我们想的话,可以覆盖它。
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {void OnGUI () {GUILayout.BeginArea (new Rect (100, 50, Screen.width-200, Screen.height-100));GUILayout.Button ("I am a regular Automatic Layout Button");GUILayout.Button ("My width has been overridden", GUILayout.Width (95));GUILayout.EndArea ();}}
Extending IMGUI
有许多方法可以利用和扩展IMGUI系统来满足您的需求。可以混合和创建控件,并且您可以充分利用这些控件来决定如何处理GUI中的用户输入。
Compound Controls:绑定
如果你需要两个控件总是同时出现,比如一个slider,需要一个文字说明,表明该slider是用来干啥的. 你可以为每个 GUI.HorizontalSlider()添加一个GUI.Label() ,或者把这两个打成组,捆绑在一起Compound Control
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {private float mySlider = 1.0f;void OnGUI () {mySlider = LabelSlider (new Rect (10, 100, 100, 20), mySlider, 5.0f, "Label text here");}float LabelSlider (Rect screenRect, float sliderValue, float sliderMaxValue, string labelText) {GUI.Label (screenRect, labelText);// <- Push the Slider to the end of the LabelscreenRect.x += screenRect.width; sliderValue = GUI.HorizontalSlider (screenRect, sliderValue, 0.0f, sliderMaxValue);return sliderValue;}}
Static Compound Controls
Static,把方法声明称静态的,这样不同的脚本也可以调用
// C#
using UnityEngine;
using System.Collections;public class CompoundControls : MonoBehaviour { public static float LabelSlider (Rect screenRect, float sliderValue, float sliderMaxValue, string labelText) {GUI.Label (screenRect, labelText);// <- Push the Slider to the end of the LabelscreenRect.x += screenRect.width; sliderValue = GUI.HorizontalSlider (screenRect, sliderValue, 0.0f, sliderMaxValue);return sliderValue;}}
拓展:
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {public Color myColor;void OnGUI () {myColor = RGBSlider (new Rect (10,10,200,10), myColor);}Color RGBSlider (Rect screenRect, Color rgb) {rgb.r = GUI.HorizontalSlider (screenRect, rgb.r, 0.0f, 1.0f);// <- Move the next control down a bit to avoid overlappingscreenRect.y += 20; rgb.g = GUI.HorizontalSlider (screenRect, rgb.g, 0.0f, 1.0f);// <- Move the next control down a bit to avoid overlappingscreenRect.y += 20; rgb.b = GUI.HorizontalSlider (screenRect, rgb.b, 0.0f, 1.0f);return rgb;}
}
// C#
using UnityEngine;
using System.Collections;public class GUITest : MonoBehaviour {public Color myColor;void OnGUI () {myColor = RGBSlider (new Rect (10,10,200,30), myColor);}Color RGBSlider (Rect screenRect, Color rgb) {rgb.r = CompoundControls.LabelSlider (screenRect, rgb.r, 1.0f, "Red");// <- Move the next control down a bit to avoid overlappingscreenRect.y += 20; rgb.g = CompoundControls.LabelSlider (screenRect, rgb.g, 1.0f, "Green");// <- Move the next control down a bit to avoid overlappingscreenRect.y += 20; rgb.b = CompoundControls.LabelSlider (screenRect, rgb.b, 1.0f, "Blue");return rgb;} }
GUI Skin (IMGUI System)
GUISkins 是GUIStyles的集合
To create a GUISkin, select Assets->Create->GUI Skin from the menubar.
Horizontal Slider Thumb | The Style to use for all Horizontal Slider Thumb Buttons |
Vertical Slider | The Style to use for all Vertical Slider bars |
Vertical Slider Thumb | The Style to use for all Vertical Slider Thumb Buttons |
Horizontal Scrollbar | The Style to use for all Horizontal Scrollbars |
Horizontal Scrollbar Thumb | The Style to use for all Horizontal Scrollbar Thumb Buttons |
Horizontal Scrollbar Left Button | The Style to use for all Horizontal Scrollbar scroll Left Buttons |
Horizontal Scrollbar Right Button | The Style to use for all Horizontal Scrollbar scroll Right Buttons |
Vertical Scrollbar | The Style to use for all Vertical Scrollbars |
Vertical Scrollbar Thumb | The Style to use for all Vertical Scrollbar Thumb Buttons |
Vertical Scrollbar Up Button | The Style to use for all Vertical Scrollbar scroll Up Buttons |
Vertical Scrollbar Down Button | The Style to use for all Vertical Scrollbar scroll Down Buttons |
Custom 1–20 | Additional custom Styles that can be applied to any Control |
Custom Styles | An array of additional custom Styles that can be applied to any Control |
Settings | Additional Settings for the entire GUI |
Double Click Selects Word | If enabled, double-clicking a word will select it |
Triple Click Selects Line | If enabled, triple-clicking a word will select the entire line |
Cursor Color | Color of the keyboard cursor |
Cursor Flash Speed | The speed at which the text cursor will flash when editing any Text Control |
Selection Color | Color of the selected area of Text |
Applying GUISkins
To apply a GUISkin to your GUI, you must use a simple script to read and apply the Skin to your Controls.
// Create a public variable where we can assign the GUISkinvar customSkin : GUISkin;// Apply the Skin in our OnGUI() functionfunction OnGUI () {GUI.skin = customSkin;// Now create any Controls you like, and they will be displayed with the custom SkinGUILayout.Button ("I am a re-Skinned Button");// You can change or remove the skin for some Controls but not othersGUI.skin = null;// Any Controls created here will use the default Skin and not the custom SkinGUILayout.Button ("This Button uses the default UnityGUI Skin");}
在某些情况下,您希望有两个具有不同样式的相同控件。因此,创建一个新皮肤并重新分配它是没有意义的。相反,在皮肤中使用一种自定义样式。为自定义样式提供一个名称,您可以将该名称用作单个控件的最后一个参数。
// One of the custom Styles in this Skin has the name "MyCustomControl"var customSkin : GUISkin;function OnGUI () {GUI.skin = customSkin;// We provide the name of the Style we want to use as the last argument of the Control functionGUILayout.Button ("I am a custom styled Button", "MyCustomControl");// We can also ignore the Custom Style, and use the Skin's default Button StyleGUILayout.Button ("I am the Skin's Button Style");}
GUI Style (IMGUI System)
Switch to Scripting
GUI Styles are a collection of custom attributes for use with UnityGUI. A single GUI Style defines the appearance of a single UnityGUI Control
.
A GUI Style in the Inspector
If you want to add style to more than one control, use a GUI Skin instead of a GUI Style. For more information about UnityGUI, please read the GUI Scripting Guide.
Please Note: This page refers to part of the IMGUI system, which is a scripting-only UI
system. Unity has a full GameObject-based UI system which you may prefer to use. It allows you to design and edit user interface elements as visible objects in the scene view
. See the UI System Manual for more information.
Properties
Property: | Function: |
---|---|
Name | The text string that can be used to refer to this specific Style |
Normal | Background image & Text Color of the Control in default state |
Hover | Background image & Text Color when the mouse is positioned over the Control |
Active | Background image & Text Color when the mouse is actively clicking the Control |
Focused | Background image & Text Color when the Control has keyboard focus |
On Normal | Background image & Text Color of the Control in enabled state |
On Hover | Background image & Text Color when the mouse is positioned over the enabled Control |
On Active | Properties when the mouse is actively clicking the enabled Control |
On Focused | Background image & Text Color when the enabled Control has keyboard focus |
Border | Number of pixels on each side of the Background image that are not affected by the scale of the Control’ shape |
Padding | Space in pixels from each edge of the Control to the start of its contents. |
Margin | The margins between elements rendered in this style and any other GUI Controls. |
Overflow | Extra space to be added to the background image. |
Font | The Font used for all text in this style |
Image Position | The way the background image and text are combined. |
Alignment | Standard text alignment options. |
Word Wrap | If enabled, text that reaches the boundaries of the Control will wrap around to the next line |
Text Clipping | If Word Wrap is enabled, choose how to handle text that exceeds the boundaries of the Control |
Overflow | Any text that exceeds the Control boundaries will continue beyond the boundaries |
Clip | Any text that exceeds the Control boundaries will be hidden |
Content Offset | Number of pixels along X and Y axes that the Content will be displaced in addition to all other properties |
X | Left/Right Offset |
Y | Up/Down Offset |
Fixed Width | Number of pixels for the width of the Control, which will override any provided Rect() value |
Fixed Height | Number of pixels for the height of the Control, which will override any provided Rect() value |
Stretch Width | If enabled, Controls using this style can be stretched horizontally for a better layout. |
Stretch Height | If enabled, Controls using this style can be stretched vertically for a better layout. |
更多推荐
unity 之 IMGUI 二
发布评论