Question

自定义您的“GUI 控件”(GUI Control)

功能控件 (Functional Control) 是游戏必要的，而这些控件的外观对游戏的美感非常重要。在 UnityGUI 中，您可以微调控件 (Control) 外观的很多细节。控件外观在 GUIStyles 中详述。默认情况下，当你在未定义 GUIStyle 时创建一个控件 (Control)，将应用 Unity 的默认 GUIStyle。这种样式内置于 Unity 中，且可用于对已发布的游戏进行快速原型设计，您也可以选择不对控件 (Control) 进行样式化。

如果您要处理大量不同的 GUIStyles，您可以在单个 GUISkin 中定义所有 GUIStyles。GUISkin 不仅仅只是 GUIStyles 的集合。

样式 (Style) 如何改变“GUI 控件”(GUI Control) 的外观

GUIStyles 模仿网页浏览器的层叠样式表 (CSS)。很多 CSS 方法得到调整，包括样式的个体状态属性的差异化和内容与外观的分离。

其中，控件 (Control) 定义内容，而样式 (Style) 定义外观。这样您就可以创建组合，比如看起来像常规 按钮 (Button) 的功能切换键 (Toggle)。

两种不同样式的切换键控件 (Toggle Control)

皮肤 (Skin) 与样式 (Style) 的区别

如上文所述，GUISkins 为 GUIStyles 的集合。样式 (Style) 定义 GUI 控件 (GUI Control) 的外观。如果您要使用样式 (Style)，则可不必使用皮肤 (Skin)。

检视器 (Inspector) 中显示的单个 GUIStyle
检视器 (Inspector) 中显示的单个 GUISkin - 请注意它含有多个 GUIStyles

处理样式 (Style)

所有“GUI 控件”(GUI Control) 都具有一个可选的最后参数：用于显示控件的 GUIStyle。如果将其忽略，则使用 Unity 的默认 GUIStyle。样式处理通过将控件类型名称作为字符串应用而在内部进行，因此 GUI.Button() 使用 "按钮" 样式，GUI.Toggle() 使用 "toggle" 样式，等等。但您可以通过将控件的默认 GUIStyle 指定为最后参数来覆盖默认 GUIStyle。

/* 使用 UnityGUI 默认样式的中的一种不同样式覆盖默认的“控件样式”(Control Style) */


// JavaScript
function OnGUI () {
	// 创建使用 "框" GUIStyle 的标签
	GUI.Label (Rect (0,0,200,100), "Hi - I'm a label looking like a box", "box");

	// 创建使用"“切换键" GUIStyle 的按钮
	GUI.Button (Rect (10,140,180,20), "This is a button", "toggle");
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

	void OnGUI () {
		// 创建使用 "框" GUIStyle 的标签
		GUI.Label (new Rect (0,0,200,100), "Hi - I'm a label looking like a box", "box");

		// 创建使用"“切换键" GUIStyle 的按钮
		GUI.Button (new Rect (10,140,180,20), "This is a button", "toggle");
	}

}

由以上代码示例创建的控件

创建一个公共变量 GUIStyle

当您声明一个公共 GUIStyle 变量时，该样式 (Style) 的所有元素都将在检视器 (Inspector)中显示。您可以在此编辑所有不同的值。

/* 使用自己定义的控件样式来覆盖默认的控件样式*/


// JavaScript
var customButton : GUIStyle;

function OnGUI () {
	// 创建按钮。我们提交以上定义的 GUIStyle 作为使用的样式
	GUI.Button (Rect (10,10,150,20), "I am a Custom Button", customButton);
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

	public GUIStyle customButton;

	void OnGUI () {
		// 创建按钮。我们提交以上定义的 GUIStyle 作为使用的样式
		GUI.Button (new Rect (10,10,150,20), "I am a Custom Button", customButton);
	}

}

改变不同的样式元素

当您已声明了 GUIStyle，就可以在“检视器” (Inspector) 中修改此样式。您可以有大量的状态 (State) 进行定义，并将其应用到任何类型的控件中。

基于每个脚本、每个游戏对象来修改样式

在应用指定的文本颜色 (Text Color) 之前，必须为每个控件状态 (Control State) 分配背景 (Background) 颜色。

有关各 GUIStyles 的更多信息，请参阅 GUIStyle 组件参考页面。

处理皮肤 (Skins)

对于更复杂的 GUI 系统，将样式集安置于一处是有利的。这可由 GUISkin 来完成。GUISkin 含有多种不同的样式 (Styles)，基本上可完全更新所有 GUI 控件 (GUI Control) 外观。

创建一个新的 GUISkin

要创建一个 GUISkin，请从菜单栏选择资源 (Assets)->创建 (Create)->GUI 皮肤 (GUI Skin) 这将在您的“工程文件夹”(Project Folder) 里面创建一个新的“GUI 皮肤”(GUI Skin)。选择 GUI 皮肤可查看“检视器”(Inspector) 中的皮肤 (Skin) 定义的所有 GUIStyles。

将皮肤应用到 GUI

要使用创建的皮肤，请将其分配到 OnGUI() 函数中的 GUI.skin。

/* 创建一个属性，其包含对要使用的皮肤的引用*/


// JavaScript
var mySkin : GUISkin;

function OnGUI () {
	// 将该皮肤分配为当前所用的皮肤。
	GUI.skin = mySkin;

	// 创建按钮。这将从分配到 mySkin 的皮肤获得默认的“按钮”样式。
	GUI.Button (Rect (10,10,150,20), "Skinned Button");
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

	public GUISkin mySkin;

	void OnGUI () {
		// 将该皮肤分配为当前所用的皮肤。
		GUI.skin = mySkin;

		// 创建按钮。这将从分配到 mySkin 的皮肤获得默认的“按钮”样式。
		GUI.Button (new Rect (10,10,150,20), "Skinned Button");
	}

}

通过一次 OnGUI() 调用就可随意切换皮肤。.

/* 在同一 OnGUI() 调用中切换皮肤的示例 */


// JavaScript
var mySkin : GUISkin;

var toggle = true;

function OnGUI () {
	// 将该皮肤分配为当前所用的皮肤。
	GUI.skin = mySkin;

	// Make a toggle.这将从分配到 mySkin 的皮肤获得“按钮”样式。
	toggle = GUI.Toggle (Rect (10,10,150,20), toggle, "Skinned Button", "button");

	// 将当前皮肤分配到 Unity 的默认皮肤。
	GUI.skin = null;

	// 创建按钮。这将从内置皮肤获得默认的“按钮”样式。
	GUI.Button (Rect (10,35,150,20), "Built-in Button");
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

	public GUISkin mySkin;
	private bool toggle = true;

	void OnGUI () {
		// 将该皮肤分配为当前所用的皮肤。
		GUI.skin = mySkin;

		// 创建切换键。这将从分配到 mySkin 的皮肤获得“按钮”样式。
		toggle = GUI.Toggle (new Rect (10,10,150,20), toggle, "Skinned Button", "button");

		// 将当前皮肤分配到 Unity 的默认皮肤。
		GUI.skin = null;

		// 创建按钮。这将从内置皮肤获得默认的“按钮”样式。
		GUI.Button (new Rect (10,35,150,20), "Built-in Button");
	}

}